/* ============================================
   Poke DIV Game - Основные стили
   ============================================ */

/* --- ДИНАМИЧЕСКАЯ ПОЛЬЗОВАТЕЛЬСКАЯ ПАЛИТРА (:root variables) --- */
:root {
    --theme-primary: #e94560;
    --theme-primary-hover: #ff6b81;
    --theme-primary-glow: rgba(233, 69, 96, 0.5);
    --theme-primary-rgb: 233, 69, 96;
    --theme-bg-grad: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    --theme-radial-glow: rgba(233, 69, 96, 0.1);
    --theme-card-bg: rgba(15, 52, 96, 0.4);
    --theme-card-border: rgba(233, 69, 96, 0.2);
}

/* ------------------- Шрифты ------------------- */
@font-face {
    font-family: 'Minecraft';
    src: url('Minecraft.woff2?v=glyphfix_1788792907') format('woff2'),
         url('Minecraft.otf?v=glyphfix_1788792907') format('opentype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ------------------- Базовые стили ------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
}

button, input, select, textarea, optgroup, option, dialog {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
}

input::placeholder, textarea::placeholder {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
}

body {
    background: var(--theme-bg-grad);
    color: #ffffff;
    min-height: 100vh;
    padding: 20px;
    font-size: 14px;
    position: relative;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
}

/* Анимированный фон */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, var(--theme-radial-glow) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Глобальная динамическая перекраска основных акцентов сайта */
.site-mode-btn.active,
.lang-switch-floating .lang-btn.active,
.auth-submit-btn,
.social-toggle:hover,
.notif-badge-count,
.tabs .tab-btn.active,
.tabs:not(.db-subtabs-container) .tab-btn.active,
.db-subtab.active {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 16px var(--theme-primary-glow) !important;
}

.social-toggle,
.social-credit i,
.creator-name,
.auth-icon i,
.user-bar-info i,
.db-header-icon i {
    color: var(--theme-primary) !important;
}

.lang-switch-floating,
.social-toggle,
.social-panel,
.user-bar,
.notif-dropdown {
    border-color: var(--theme-primary-glow) !important;
}

/* ------------------- Анимации ------------------- */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes typesReveal {
    from { opacity: 0; transform: scale(0.9) translateY(-30px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cardReveal {
    from { opacity: 0; transform: translateY(30px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes presentationEnter {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes presentationExit {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes modalPop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes modalPopCenter {
    from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes slideEnter {
    from { opacity: 0; transform: translateX(100px) rotateY(10deg); }
    to { opacity: 1; transform: translateX(0) rotateY(0); }
}

@keyframes slideExit {
    from { opacity: 1; transform: translateX(0) rotateY(0); }
    to { opacity: 0; transform: translateX(-100px) rotateY(-10deg); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; visibility: hidden; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 20px rgba(233,69,96,0.2); }
    50% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(233,69,96,0.5); }
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes imageGlow {
    0%, 100% { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6)) brightness(1.05); }
    50% { filter: drop-shadow(0 20px 50px rgba(233, 69, 96, 0.4)) brightness(1.1); }
}

@keyframes completionPop {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}


/* ===== Плавающий переключатель языка (следует за скроллом) ===== */
.lang-switch-floating {
    position: fixed;
    top: 20px;
    right: 74px;
    z-index: 1000;
    display: inline-flex;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}
.lang-switch-floating:hover {
    border-color: rgba(233, 69, 96, 0.8);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.3);
}
.lang-switch-floating .lang-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: none;
    padding: 9px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.lang-switch-floating .lang-btn:hover {
    color: #fff;
    background: rgba(233, 69, 96, 0.2);
}
.lang-switch-floating .lang-btn.active {
    background: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.7);
}
@media (max-width: 768px) {
    .lang-switch-floating {
        top: 12px;
        right: 56px;
    }
    .lang-switch-floating .lang-btn {
        font-size: 0.55rem;
        padding: 7px 10px;
    }
}

/* ------------------- Социальный блок ------------------- */
.social-block {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.social-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(233,69,96,0.5);
    backdrop-filter: blur(10px);
    color: #e94560;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-toggle:hover {
    background: rgba(233,69,96,0.2);
    transform: scale(1.1);
}

.social-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.25s ease;
    background: rgba(0,0,0,0.7);
    padding: 12px 18px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233,69,96,0.4);
    text-align: center;
    margin-bottom: 8px;
    pointer-events: none;
}

.social-block.open .social-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 10px;
}

.social-link {
    font-size: 28px;
    transition: transform 0.3s;
}

.social-link.telegram { color: #26A5E4; }
.social-link.youtube { color: #FF0000; }
.social-link.twitch { color: #9146FF; }

.social-link:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px currentColor);
}

.social-credit {
    color: #aaa;
    font-size: 10px;
    letter-spacing: 1px;
    border-top: 1px solid rgba(233,69,96,0.3);
    padding-top: 8px;
    margin-top: 4px;
}

.social-credit i {
    color: #e94560;
    font-size: 8px;
}

.creator-name {
    color: #e94560;
    font-size: 11px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .social-block {
        top: 12px;
        right: 12px;
    }
    .social-toggle {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .social-panel {
        padding: 10px 14px;
    }
    .social-link {
        font-size: 22px;
    }
}

/* ------------------- Табы и контент ------------------- */
.tab-content {
    animation: pageFadeIn 0.4s ease-out;
}

.types-reveal-panel {
    display: none;
    gap: 60px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 45px;
    padding-top: 45px;
}

.types-reveal-panel.show {
    display: flex;
    animation: typesReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-type-card {
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    animation: cardReveal 0.4s ease-out backwards;
}

.reveal-type-card:nth-child(1) { animation-delay: 0.1s; }
.reveal-type-card:nth-child(2) { animation-delay: 0.2s; }

.reveal-type-card:hover {
    transform: scale(1.15);
}

.reveal-type-card img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
}

.reveal-type-card span {
    display: block;
    margin-top: 15px;
    font-size: 1rem;
    font-weight: bold;
    color: #e94560;
}

/* ------------------- Модальные окна ------------------- */
.modal {
    display: none;
    position: fixed;
    z-index: 20000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 700px;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    color: white;
    box-shadow: 0 0 40px rgba(233,69,96,0.3);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.modal-large {
    max-width: 1200px;
    width: 95%;
}

.modal-content h3 {
    color: #e94560;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-align: center;
}

.modal-content input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    background: #1a1a2e;
    border: 1px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.modal-content input:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233,69,96,0.3);
}

.modal-two-columns {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    margin-bottom: 20px;
}

.modal-filters {
    flex: 1;
    min-width: 250px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 20px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
    overflow-y: auto;
}

.modal-results {
    flex: 2;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-buttons {
    margin-top: auto;
    text-align: center;
    flex-shrink: 0;
}

/* Подтверждение удаления */
.confirm-modal {
    display: none;
    position: fixed;
    z-index: 20001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.confirm-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 400px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 50px rgba(233,69,96,0.4);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-modal-content h3 {
    color: #e94560;
    margin-bottom: 15px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.confirm-modal-content p {
    font-size: 0.7rem;
    line-height: 1.5;
    color: #ddd;
    margin-bottom: 5px;
}

.confirm-modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.confirm-modal-buttons button {
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.confirm-modal-buttons button:first-child {
    background: #e74c3c;
    color: white;
}

.confirm-modal-buttons button:first-child:hover {
    background: #c0392b;
    transform: scale(1.05);
}

.confirm-modal-buttons button:last-child {
    background: #2c3e50;
    color: white;
}

.confirm-modal-buttons button:last-child:hover {
    background: #1a252f;
    transform: scale(1.05);
}

/* Модальное окно завершения */
.completion-modal {
    display: none;
    position: fixed;
    z-index: 20002;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(233,69,96,0.3), rgba(0,0,0,0.95));
    backdrop-filter: blur(10px);
    font-family: 'Minecraft', monospace;
}

.completion-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 35px 50px;
    border: 2px solid #e94560;
    border-radius: 40px;
    width: 500px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 70px rgba(233,69,96,0.5);
    animation: completionPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.completion-modal-content i.fa-trophy {
    font-size: 2rem;
    color: #f39c12;
    margin-bottom: 15px;
}

.completion-modal-content h2 {
    color: #e94560;
    font-size: 1.2rem;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.completion-modal-content p {
    font-size: 0.7rem;
    color: #ddd;
}

.completion-modal-content button {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.completion-modal-content button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(233,69,96,0.5);
}

/* ------------------- Фильтры ------------------- */
.filter-section {
    margin-bottom: 20px;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(233, 69, 96, 0.2);
}

.filter-title {
    font-size: 0.7rem;
    color: #e94560;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.filter-buttons {
    display: flex;
    gap: 12px;
}

.filter-toggle {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px 16px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-toggle.active {
    background: #e94560;
    border-color: white;
    box-shadow: 0 0 8px rgba(233,69,96,0.5);
}

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

.filter-tag {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 5px 12px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-tag:hover {
    transform: scale(1.03);
    background: #e94560;
}

.filter-tag.active {
    background: #e94560;
    border-color: white;
}

.filter-gen-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.filter-gen {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    text-align: center;
    transition: all 0.2s;
}

.filter-gen.active {
    background: #e94560;
    border-color: white;
}

.filter-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.filter-stats {
    font-size: 0.6rem;
    color: #aaa;
    text-align: center;
    margin-top: 10px;
    padding: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
}

/* ------------------- Список покемонов ------------------- */
.pokemon-list-grid {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 15px;
    padding-right: 5px;
}

.template-pokemon-card {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 15px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.template-pokemon-card:hover {
    transform: scale(1.02);
    border-color: #fff;
    box-shadow: 0 5px 20px rgba(233,69,96,0.3);
}

.template-pokemon-card img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.template-pokemon-card .pokemon-name {
    font-weight: bold;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------- Уведомления (Poke DIV Toasts) ------------------- */
#notificationContainer {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999999 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 440px;
    width: calc(100vw - 48px);
}

.custom-notification {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.96) 0%, rgba(15, 23, 42, 0.96) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 5px solid #38bdf8;
    border-radius: 12px;
    padding: 14px 16px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    line-height: 1.4;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 206, 201, 0.15);
    animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: auto;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
}

.custom-notification:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 255, 255, 0.1);
}

.custom-notification.toast-fade-out {
    opacity: 0 !important;
    transform: translateX(40px) scale(0.95) !important;
}

.custom-notification.success {
    border-left-color: #00cec9;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 206, 201, 0.25);
}

.custom-notification.error {
    border-left-color: #e94560;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(233, 69, 96, 0.3);
}

.custom-notification.warning {
    border-left-color: #f59e0b;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.25);
}

.custom-notification.info {
    border-left-color: #38bdf8;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.25);
}

.toast-icon-wrap {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: rgba(255, 255, 255, 0.08);
}

.custom-notification.success .toast-icon-wrap {
    background: rgba(0, 206, 201, 0.15);
    color: #00cec9;
}

.custom-notification.error .toast-icon-wrap {
    background: rgba(233, 69, 96, 0.18);
    color: #e94560;
}

.custom-notification.warning .toast-icon-wrap {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}

.custom-notification.info .toast-icon-wrap {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
}

.toast-body {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    color: #ffffff;
}

.toast-title {
    font-weight: bold;
    font-size: 0.82rem;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.custom-notification.success .toast-title { color: #00cec9; }
.custom-notification.error .toast-title { color: #e94560; }
.custom-notification.warning .toast-title { color: #f59e0b; }
.custom-notification.info .toast-title { color: #38bdf8; }

.toast-message {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    line-height: 1.35;
}

.toast-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.toast-close-btn:hover {
    color: #ffffff;
    transform: scale(1.15);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
}

.toast-progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: left;
    transition: width linear;
}

.custom-notification.success .toast-progress-bar { background: #00cec9; }
.custom-notification.error .toast-progress-bar { background: #e94560; }
.custom-notification.warning .toast-progress-bar { background: #f59e0b; }
.custom-notification.info .toast-progress-bar { background: #38bdf8; }

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ------------------- Главное меню ------------------- */
.main-menu {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.6s ease;
}

.menu-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 40px;
    background: rgba(22, 33, 62, 0.6);
    border-radius: 60px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(233, 69, 96, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(233, 69, 96, 0.2);
    animation: glowPulse 3s infinite;
}

.menu-header h1 {
    color: #e94560;
    font-size: 2.2rem;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
    letter-spacing: 2px;
}

.menu-header p {
    color: #aaa;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

/* ------------------- Табы ------------------- */
.tabs {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.tab-btn {
    background: rgba(15, 52, 96, 0.7);
    border: 2px solid rgba(233, 69, 96, 0.5);
    padding: 15px 40px;
    font-size: 1rem;
    font-family: 'Minecraft', monospace;
    color: white;
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.tab-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(233, 69, 96, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.tab-btn:hover::before {
    width: 300px;
    height: 300px;
}

.tab-btn:hover {
    border-color: #e94560;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(233, 69, 96, 0.3);
}

.tab-btn.active {
    background: #e94560;
    border-color: #fff;
    box-shadow: 0 0 30px rgba(233, 69, 96, 0.6);
}

.tab-content {
    display: none;
    background: rgba(15, 52, 96, 0.5);
    border-radius: 40px;
    padding: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    height: auto !important;
    min-height: auto !important;
    overflow: hidden;
}

.tab-content.active {
    display: block;
}

/* ------------------- Игровые карточки ------------------- */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.game-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
    border-radius: 25px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(233, 69, 96, 0.3);
    position: relative;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(233,69,96,0.1), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.game-card:hover::before {
    opacity: 1;
}

.game-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #e94560;
    box-shadow: 0 20px 40px rgba(233, 69, 96, 0.3);
}

.game-card h3 {
    color: #e94560;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.game-card p {
    color: #aaa;
    font-size: 0.6rem;
}

.delete-collection-btn {
    background: rgba(231, 76, 60, 0.8);
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    margin-top: 15px;
    transition: all 0.3s;
    z-index: 10;
    position: relative;
}

.delete-collection-btn:hover {
    background: #e74c3c;
    transform: scale(1.05);
}

/* ============================================
   Poke DIV Game - Основные стили
   ============================================ */

/* ------------------- Шрифты ------------------- */
/* Duplicate Minecraft @font-face removed */

/* ------------------- Базовые стили ------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    min-height: 100vh;
    padding: 20px;
    font-size: 14px;
    position: relative;
    overflow-x: hidden;
}

/* Анимированный фон */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(233, 69, 96, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ------------------- Анимации ------------------- */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes typesReveal {
    from { opacity: 0; transform: scale(0.9) translateY(-30px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cardReveal {
    from { opacity: 0; transform: translateY(30px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes presentationEnter {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes presentationExit {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes modalPop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes modalPopCenter {
    from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes slideEnter {
    from { opacity: 0; transform: translateX(100px) rotateY(10deg); }
    to { opacity: 1; transform: translateX(0) rotateY(0); }
}

@keyframes slideExit {
    from { opacity: 1; transform: translateX(0) rotateY(0); }
    to { opacity: 0; transform: translateX(-100px) rotateY(-10deg); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; visibility: hidden; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 20px rgba(233,69,96,0.2); }
    50% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(233,69,96,0.5); }
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes imageGlow {
    0%, 100% { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6)) brightness(1.05); }
    50% { filter: drop-shadow(0 20px 50px rgba(233, 69, 96, 0.4)) brightness(1.1); }
}

@keyframes completionPop {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}


/* ===== Плавающий переключатель языка (следует за скроллом) ===== */
.lang-switch-floating {
    position: fixed;
    top: 20px;
    right: 74px;
    z-index: 1000;
    display: inline-flex;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}
.lang-switch-floating:hover {
    border-color: rgba(233, 69, 96, 0.8);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.3);
}
.lang-switch-floating .lang-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: none;
    padding: 9px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.lang-switch-floating .lang-btn:hover {
    color: #fff;
    background: rgba(233, 69, 96, 0.2);
}
.lang-switch-floating .lang-btn.active {
    background: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.7);
}
@media (max-width: 768px) {
    .lang-switch-floating {
        top: 12px;
        right: 56px;
    }
    .lang-switch-floating .lang-btn {
        font-size: 0.55rem;
        padding: 7px 10px;
    }
}

/* ------------------- Социальный блок ------------------- */
.social-block {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.social-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(233,69,96,0.5);
    backdrop-filter: blur(10px);
    color: #e94560;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-toggle:hover {
    background: rgba(233,69,96,0.2);
    transform: scale(1.1);
}

.social-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.25s ease;
    background: rgba(0,0,0,0.7);
    padding: 12px 18px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233,69,96,0.4);
    text-align: center;
    margin-bottom: 8px;
    pointer-events: none;
}

.social-block.open .social-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 10px;
}

.social-link {
    font-size: 28px;
    transition: transform 0.3s;
}

.social-link.telegram { color: #26A5E4; }
.social-link.youtube { color: #FF0000; }
.social-link.twitch { color: #9146FF; }

.social-link:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px currentColor);
}

.social-credit {
    color: #aaa;
    font-size: 10px;
    letter-spacing: 1px;
    border-top: 1px solid rgba(233,69,96,0.3);
    padding-top: 8px;
    margin-top: 4px;
}

.social-credit i {
    color: #e94560;
    font-size: 8px;
}

.creator-name {
    color: #e94560;
    font-size: 11px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .social-block {
        top: 12px;
        right: 12px;
    }
    .social-toggle {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .social-panel {
        padding: 10px 14px;
    }
    .social-link {
        font-size: 22px;
    }
}

/* ------------------- Табы и контент ------------------- */
.tab-content {
    animation: pageFadeIn 0.4s ease-out;
}

/* ------------------- Модальные окна ------------------- */
.modal {
    display: none;
    position: fixed;
    z-index: 20000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 700px;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    color: white;
    box-shadow: 0 0 40px rgba(233,69,96,0.3);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.modal-large {
    max-width: 1200px;
    width: 95%;
}

.modal-content h3 {
    color: #e94560;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-align: center;
}

.modal-content input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    background: #1a1a2e;
    border: 1px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.modal-content input:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233,69,96,0.3);
}

.modal-two-columns {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    margin-bottom: 20px;
}

.modal-filters {
    flex: 1;
    min-width: 250px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 20px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
    overflow-y: auto;
}

.modal-results {
    flex: 2;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-buttons {
    margin-top: auto;
    text-align: center;
    flex-shrink: 0;
}

/* Подтверждение удаления */
.confirm-modal {
    display: none;
    position: fixed;
    z-index: 20001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.confirm-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 400px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 50px rgba(233,69,96,0.4);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-modal-content h3 {
    color: #e94560;
    margin-bottom: 15px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.confirm-modal-content p {
    font-size: 0.7rem;
    line-height: 1.5;
    color: #ddd;
    margin-bottom: 5px;
}

.confirm-modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.confirm-modal-buttons button {
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.confirm-modal-buttons button:first-child {
    background: #e74c3c;
    color: white;
}

.confirm-modal-buttons button:first-child:hover {
    background: #c0392b;
    transform: scale(1.05);
}

.confirm-modal-buttons button:last-child {
    background: #2c3e50;
    color: white;
}

.confirm-modal-buttons button:last-child:hover {
    background: #1a252f;
    transform: scale(1.05);
}

/* Модальное окно завершения */
.completion-modal {
    display: none;
    position: fixed;
    z-index: 20002;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(233,69,96,0.3), rgba(0,0,0,0.95));
    backdrop-filter: blur(10px);
    font-family: 'Minecraft', monospace;
}

.completion-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 35px 50px;
    border: 2px solid #e94560;
    border-radius: 40px;
    width: 500px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 70px rgba(233,69,96,0.5);
    animation: completionPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.completion-modal-content i.fa-trophy {
    font-size: 2rem;
    color: #f39c12;
    margin-bottom: 15px;
}

.completion-modal-content h2 {
    color: #e94560;
    font-size: 1.2rem;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.completion-modal-content p {
    font-size: 0.7rem;
    color: #ddd;
}

.completion-modal-content button {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.completion-modal-content button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(233,69,96,0.5);
}

/* ------------------- Фильтры ------------------- */
.filter-section {
    margin-bottom: 20px;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(233, 69, 96, 0.2);
}

.filter-title {
    font-size: 0.7rem;
    color: #e94560;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.filter-buttons {
    display: flex;
    gap: 12px;
}

.filter-toggle {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px 16px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-toggle.active {
    background: #e94560;
    border-color: white;
    box-shadow: 0 0 8px rgba(233,69,96,0.5);
}

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

.filter-tag {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 5px 12px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-tag:hover {
    transform: scale(1.03);
    background: #e94560;
}

.filter-tag.active {
    background: #e94560;
    border-color: white;
}

.filter-gen-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.filter-gen {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    text-align: center;
    transition: all 0.2s;
}

.filter-gen.active {
    background: #e94560;
    border-color: white;
}

.filter-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.filter-stats {
    font-size: 0.6rem;
    color: #aaa;
    text-align: center;
    margin-top: 10px;
    padding: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
}

/* ------------------- Список покемонов ------------------- */
.pokemon-list-grid {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 15px;
    padding-right: 5px;
}

.template-pokemon-card {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 15px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.template-pokemon-card:hover {
    transform: scale(1.02);
    border-color: #fff;
    box-shadow: 0 5px 20px rgba(233,69,96,0.3);
}

.template-pokemon-card img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.template-pokemon-card .pokemon-name {
    font-weight: bold;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ------------------- Главное меню ------------------- */
.main-menu {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.6s ease;
}

.menu-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 40px;
    background: rgba(22, 33, 62, 0.6);
    border-radius: 60px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(233, 69, 96, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(233, 69, 96, 0.2);
    animation: glowPulse 3s infinite;
}

.menu-header h1 {
    color: #e94560;
    font-size: 2.2rem;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
    letter-spacing: 2px;
}

.menu-header p {
    color: #aaa;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.tab-btn {
    background: rgba(20, 20, 40, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 32px;
    font-size: 0.85rem;
    font-family: 'Minecraft', monospace;
    color: #ccc;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn i {
    margin-right: 8px;
    opacity: 0.7;
}

.tab-btn:hover {
    border-color: rgba(233, 69, 96, 0.4);
    color: white;
    background: rgba(233, 69, 96, 0.1);
}

.tab-btn[data-tab="hosting"] {
    border-color: rgba(245, 200, 66, 0.4);
    color: #f5c842;
}

.tab-btn[data-tab="hosting"]:hover {
    border-color: rgba(245, 200, 66, 0.7);
    color: #f5c842;
    background: rgba(245, 200, 66, 0.15);
}

.tab-btn.active {
    border-color: #e94560;
    color: #e94560;
    background: rgba(233, 69, 96, 0.15);
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.2);
}

.tab-btn.active[data-tab="hosting"] {
    border-color: #f5c842;
    color: #f5c842;
    background: rgba(245, 200, 66, 0.15);
    box-shadow: 0 0 20px rgba(245, 200, 66, 0.2);
}
/* ------------------- Игровые карточки ------------------- */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.game-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
    border-radius: 25px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(233, 69, 96, 0.3);
    position: relative;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(233,69,96,0.1), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.game-card:hover::before {
    opacity: 1;
}

.game-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #e94560;
    box-shadow: 0 20px 40px rgba(233, 69, 96, 0.3);
}

.game-card h3 {
    color: #e94560;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.game-card p {
    color: #aaa;
    font-size: 0.6rem;
}

.delete-collection-btn {
    background: rgba(231, 76, 60, 0.8);
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    margin-top: 15px;
    transition: all 0.3s;
    z-index: 10;
    position: relative;
}

.delete-collection-btn:hover {
    background: #e74c3c;
    transform: scale(1.05);
}

/* ------------------- Режим презентации ------------------- */
.fullscreen-presentation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('background/Fon.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 99999 !important;
    display: none;
    flex-direction: column;
    animation: presentationEnter 0.5s ease-out;
    overflow-y: auto;
}

.fullscreen-presentation.active {
    display: flex;
}

.main-menu:has(.fullscreen-presentation.active) {
    z-index: 99999 !important;
}

/* Hide floating language and social widgets during presentation */
body.in-presentation .lang-switch-floating,
body.in-presentation .social-block,
body.in-presentation #floatingLangSwitch,
body.in-presentation #socialBlock,
body:has(.fullscreen-presentation.active) .lang-switch-floating,
body:has(.fullscreen-presentation.active) .social-block,
body:has(.fullscreen-presentation.active) #floatingLangSwitch,
body:has(.fullscreen-presentation.active) #socialBlock,
.fullscreen-presentation.active ~ .lang-switch-floating,
.fullscreen-presentation.active ~ .social-block {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    z-index: -1 !important;
}

.fullscreen-presentation.exit {
    animation: presentationExit 0.4s ease-in forwards;
}

.pres-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(233,69,96,0.3), rgba(0,0,0,0.8));
    z-index: 999999 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.pres-transition-overlay.active {
    opacity: 1;
}

.pres-header {
    background: rgba(0, 0, 0, 0.7);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(20px);
    border-bottom: 2px solid rgba(233, 69, 96, 0.5);
    z-index: 100002;
    position: sticky;
    top: 0;
    pointer-events: auto;
}

.pres-header h3 {
    color: #e94560;
    font-size: 1rem;
    text-shadow: 0 0 15px rgba(233,69,96,0.8);
}

.close-pres-btn, #closePresBtn {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 10px 28px !important;
    border-radius: 50px !important;
    color: white !important;
    cursor: pointer !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.8rem !important;
    position: relative !important;
    z-index: 100005 !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    user-select: none !important;
}

.close-pres-btn:hover, #closePresBtn:hover {
    background: linear-gradient(135deg, #ff5252, #d63031) !important;
    transform: scale(1.06) !important;
    box-shadow: 0 6px 25px rgba(231, 76, 60, 0.7) !important;
}

.close-pres-btn:active, #closePresBtn:active {
    transform: scale(0.96) !important;
}

.pres-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    position: relative;
    z-index: 5;
}

.pres-card-container {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    perspective: 1200px;
    transition: all 0.3s ease;
}

.pres-card {
    background: rgba(10, 20, 40, 0.75);
    backdrop-filter: blur(25px);
    border-radius: 60px;
    width: 95vw;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 60px;
    padding: 60px 60px;
    border: 2px solid rgba(233, 69, 96, 0.5);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 0 0 80px rgba(233, 69, 96, 0.2);
    animation: cardFloat 3s ease-in-out infinite;
}

.pres-card.slide-enter {
    animation: slideEnter 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

.pres-card.slide-exit {
    animation: slideExit 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

.pres-image-area {
    flex: 1;
    min-width: 400px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.pres-image-area img {
    width: 100%;
    max-height: 55vh;
    object-fit: contain;
    border-radius: 40px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
    animation: imageGlow 2s ease-in-out infinite;
}

.pres-info-area {
    flex: 1.5;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
}

.pres-pokemon-name {
    font-size: 3.6rem;
    margin-bottom: 30px;
    color: #e94560;
    text-shadow: 0 0 25px rgba(233, 69, 96, 0.7);
    letter-spacing: 4px;
}

/* Описание — нормальное состояние */
.pres-description {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 45px;
    color: #f0f0f0;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 30px;
    transition: all 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
    overflow: hidden;
}

/* Описание сжатое — когда карточка раскрыта */
.pres-card.types-expanded .pres-description {
    margin-bottom: 15px;
    padding: 10px 20px;
    font-size: 0.9rem;
    line-height: 1.3;
    max-height: 80px;
    overflow-y: auto;
}

.reveal-btn {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 20px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    border-radius: 60px;
    cursor: pointer;
    width: 100%;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s;
}

.reveal-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(233, 69, 96, 0.6);
}

.pres-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 45px;
}

.pres-nav-btn,
.pres-counter-wrapper {
    display: inline-flex;
    align-items: center;
    height: 52px;
}

.pres-nav-btn {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.9), rgba(198, 42, 71, 0.9));
    border: none;
    padding: 0 30px;
    border-radius: 60px;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    will-change: transform;
    line-height: 1;
}

.pres-counter-wrapper {
    margin: 0;
}

.pres-counter {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    padding: 0 30px;
    border-radius: 60px;
    color: #e94560;
    font-size: 1rem;
    border: 1px solid rgba(233, 69, 96, 0.5);
    line-height: 52px;
    white-space: nowrap;
    height: 52px;
    display: inline-block;
    box-sizing: border-box;
}
.pres-nav-btn:hover {
    background: #e94560;
}

.pres-nav-btn:active {
    transform: scale(0.96);
}

.pres-nav-btn:first-child:hover {
    transform: translateX(-5px);
}

.pres-nav-btn:last-child:hover {
    transform: translateX(5px);
}

/* ------------------- Режим разработчика ------------------- */
.back-to-play-btn {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    transition: all 0.3s;
    border: none;
    padding: 12px 25px;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    margin-bottom: 20px;
}

.back-to-play-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(243, 156, 18, 0.4);
}

.editor-panel, .slides-list-panel {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    transition: all 0.3s;
    border-radius: 16px;
    padding: 20px;
    color: white;
}

.editor-panel:hover, .slides-list-panel:hover {
    border-color: rgba(233, 69, 96, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.image-upload-area {
    border: 2px dashed #e94560;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: #1a1a2e;
    transition: all 0.3s;
}

.image-upload-area:hover {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.1);
}

.type-icons-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 15px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    padding: 5px !important;
}

.type-icon-item {
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    text-align: center;
    width: 85px;
    transition: all 0.2s;
}

.type-icon-item.selected {
    background: #e94560;
}

.type-icon-item:hover {
    transform: scale(1.05);
    border-color: white;
}

.type-icon-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.type-icon-item span {
    font-size: 9px;
    display: block;
    margin-top: 5px;
    color: white;
}

.save-btn {
    background: #2ecc71;
    border: none;
    padding: 12px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    flex: 1;
}

.delete-btn {
    background: #e74c3c;
    border: none;
    padding: 12px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    flex: 1;
}

.btn-confirm {
    background: #2ecc71;
    border: none;
    padding: 10px 30px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.btn-cancel {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border: none;
    padding: 10px 30px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.btn-confirm:hover, .btn-cancel:hover {
    transform: translateY(-2px);
}

/* ------------------- Игра "Угадай тип" ------------------- */
.types-game-container {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.95));
    border-radius: 25px;
    padding: 20px;
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.types-game-layout {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.types-game-main {
    flex: 1;
    min-width: 300px;
}

.types-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: rgba(233, 69, 96, 0.1);
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.types-game-header span:first-child {
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: #e94560;
}

.types-game-score {
    font-size: 1.5rem;
    font-weight: bold;
    color: #f39c12;
    background: #1a1a2e;
    padding: 4px 18px;
    border-radius: 15px;
    border: 1px solid #e94560;
    font-family: 'Minecraft', monospace;
}

.types-game-section {
    background: rgba(15, 52, 96, 0.5);
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    overflow: hidden;
}

.types-game-section-header {
    background: rgba(233, 69, 96, 0.15);
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.types-game-section-header:hover {
    background: rgba(233, 69, 96, 0.25);
}

.types-game-section-title {
    font-size: 0.65rem;
    color: #e94560;
    letter-spacing: 1.5px;
}

.types-game-section-title i {
    margin-right: 6px;
}

.types-game-types-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 15px;
}

.types-game-type-btn {
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 10px 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
}

.types-game-type-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: white;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.3);
}

.types-game-type-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.types-game-type-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.types-game-type-btn img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.types-game-type-btn span {
    font-size: 0.55rem;
    font-weight: bold;
    color: white;
    text-transform: capitalize;
    text-align: center;
    word-break: break-word;
}

.types-game-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 15px;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(233,69,96,0.2);
    min-height: 50px;
}

.types-game-chip {
    background: linear-gradient(135deg, #e94560, #c62a47);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-family: 'Minecraft', monospace;
    border: 1px solid rgba(255,255,255,0.2);
}

.types-game-remove {
    background: rgba(0,0,0,0.4);
    border: none;
    color: white;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.types-game-remove:hover {
    background: rgba(0,0,0,0.6);
    transform: scale(1.05);
}

.types-game-note {
    font-size: 0.5rem;
    padding: 8px 15px;
    color: #aaa;
    border-top: 1px solid rgba(233,69,96,0.2);
}

.types-game-commit {
    width: 100%;
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    margin-bottom: 20px;
    transition: 0.2s;
    font-family: 'Minecraft', monospace;
    letter-spacing: 2px;
}

.types-game-commit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(233,69,96,0.4);
}

.types-game-panel {
    background: rgba(233, 69, 96, 0.1);
    border-radius: 20px;
    padding: 15px;
    margin-bottom: 20px;
    display: none;
    border: 1px solid rgba(233,69,96,0.3);
}

.types-game-panel.visible {
    display: block;
}

.types-game-panel-title {
    text-align: center;
    font-size: 0.65rem;
    color: #e94560;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.types-game-real-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.types-game-real-btn {
    background: #1a1a2e;
    border: 2px solid #3498db;
    border-radius: 12px;
    padding: 10px 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
}

.types-game-real-btn:hover {
    transform: translateY(-3px);
    border-color: white;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
}

.types-game-real-btn:active {
    transform: scale(0.97);
}

.types-game-real-btn img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.types-game-real-btn span {
    font-size: 0.55rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    text-align: center;
    word-break: break-word;
}

.types-game-status {
    text-align: center;
    font-size: 0.6rem;
    color: #f39c12;
    font-family: 'Minecraft', monospace;
}

.types-game-reset-area {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.types-game-reset-btn {
    background: rgba(15, 52, 96, 0.8);
    border: 1px solid #e94560;
    padding: 8px 20px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
}

.types-game-reset-btn:hover {
    background: rgba(233, 69, 96, 0.3);
    transform: translateY(-2px);
}

.types-game-history-panel {
    background: rgba(15, 52, 96, 0.5);
    border-radius: 20px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
    flex: 0 0 280px;
}

.types-game-history-title {
    font-size: 0.6rem;
    color: #e94560;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(233,69,96,0.3);
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.types-game-history-item {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 0.55rem;
    color: #ccc;
    line-height: 1.5;
}

.types-game-history-item strong {
    color: #e94560;
}

/* ------------------- Менеджер фона и музыки ------------------- */
.bg-music-manager {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    min-height: 300px;
}

.bg-panel,
.music-panel {
    flex: 1;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-title {
    font-size: 0.8rem;
    color: #e94560;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e94560;
    flex-shrink: 0;
}

/* Сетка фонов */
.bg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    overflow-y: auto;
    flex: 1;
}

.bg-card {
    background: #1a1a2e;
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    position: relative;
}

.bg-card:hover {
    transform: translateY(-3px);
    border-color: #e94560;
    box-shadow: 0 5px 15px rgba(233, 69, 96, 0.3);
}

.bg-card.active {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.2);
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

.bg-card img {
    width: 100%;
    height: 123px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
}

.bg-card span {
    font-size: 0.55rem;
    color: white;
    display: block;
}

.bg-card .delete-bg-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #e74c3c;
    border: none;
    border-radius: 6px;
    color: white;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.bg-card .delete-bg-btn:nth-child(3) {
    right: 26px;
    background: #e94560;
}

.bg-card:hover .delete-bg-btn {
    opacity: 1;
}

.music-rename-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.music-rename-btn:hover {
    color: #e94560;
    border-color: #e94560;
}

/* Карточка текущего фона */
.bg-card--preview {
    cursor: default;
}
.bg-card--preview:hover {
    transform: none;
    border-color: rgba(233, 69, 96, 0.3);
    box-shadow: none;
}
.bg-preview-thumb {
    width: 100%;
    height: 123px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px;
    background: #111;
}
.bg-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0;
}

/* Карточка загрузки */
.bg-card--upload {
    border-style: dashed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

/* Список треков */
.music-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
}

.music-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(26, 26, 46, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.music-item:hover {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.1);
}

.music-item:has(.fa-plus) {
    border-style: dashed;
    border-color: rgba(233, 69, 96, 0.3);
}

.music-item.active {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.2);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

.music-item-info {
    flex: 1 1 auto;
    min-width: 0;
}

.music-item-name {
    font-size: 0.65rem;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-item-file {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-item-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(233, 69, 96, 0.4);
    background: rgba(26, 26, 46, 0.8);
    color: #e94560;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.music-item-btn:hover {
    background: rgba(233, 69, 96, 0.2);
    transform: scale(1.1);
}

.music-delete-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(231, 76, 60, 0.4);
    background: rgba(26, 26, 46, 0.8);
    color: #e74c3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    transition: all 0.2s;
    flex-shrink: 0;
    opacity: 1;
}

.music-delete-btn:hover {
    background: #e74c3c;
    color: white;
    transform: scale(1.1);
}

.music-volume-slider {
    flex: 0 1 120px;
    min-width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(233, 69, 96, 0.25);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.music-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

.music-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

.music-vol-val {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.5);
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.music-controls-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(233, 69, 96, 0.2);
    flex-shrink: 0;
}

.music-master-btn {
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid rgba(233, 69, 96, 0.4);
    background: rgba(26, 26, 46, 0.8);
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.music-master-btn:hover {
    background: rgba(233, 69, 96, 0.2);
}

.music-master-btn.active {
    background: #e94560;
    border-color: #e94560;
}

@media (max-width: 768px) {
    .bg-music-manager {
        flex-direction: column;
    }
}

/* ------------------- Селектор музыки в панели режимов ------------------- */
#gameMusicSelect {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e94560'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px !important;
    min-width: 130px;
}

#gameMusicSelect:hover {
    border-color: #ff6b81;
}

#gameMusicSelect option {
    background: #1a1a2e;
    color: white;
}

/* ------------------- Стилизация скроллбаров ------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff6b81;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #e94560 rgba(26, 26, 46, 0.5);
}
/* ============================================
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ ИСПРАВЛЕНИЙ
   ============================================ */

/* Стили для заголовков вкладок и текста */
.tab-content h2 {
    color: #e94560 !important;
    text-shadow: 0 0 5px rgba(233, 69, 96, 0.3);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* Стили для полей ввода в режиме разработчика */
#devMode input,
#devMode textarea,
#devMode select {
    background: #1a1a2e;
    border: 2px solid #e94560;
    color: white;
    padding: 12px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    width: 100%;
    transition: all 0.3s;
}

#devMode input:focus,
#devMode textarea:focus,
#devMode select:focus {
    outline: none;
    border-color: #ff6b81;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

#devMode input::placeholder,
#devMode textarea::placeholder {
    color: #666;
    font-size: 0.6rem;
}

#devMode textarea {
    resize: vertical;
    min-height: 80px;
}

/* Стили для меток в режиме разработчика */
#devMode label {
    color: #e94560;
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

/* Стили для заголовков панелей в режиме разработчика */
#devMode .editor-title {
    font-size: 0.8rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e94560;
    color: white;
}

#devMode .admin-header .logo {
    font-size: 0.9rem;
}

/* Стили для селектора коллекции */
#devMode .game-selector span {
    color: white !important;
}

/* Стили для списка покемонов в редакторе */
#devMode .pokemon-list {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Стилизация скроллбара для списка покемонов */
#devMode .pokemon-list::-webkit-scrollbar {
    width: 6px;
}

#devMode .pokemon-list::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
}

#devMode .pokemon-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

/* Улучшенные стили для карточек покемонов в редакторе */
#devMode .pokemon-card {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    gap: 12px;
    align-items: center;
}

#devMode .pokemon-card:hover {
    transform: translateX(5px);
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.2);
}

#devMode .pokemon-card.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border-color: white;
}

#devMode .pokemon-card .pokemon-name {
    font-weight: bold;
    color: white;
    font-size: 0.75rem;
}

/* Стили для кнопок в режиме разработчика */
#devMode .save-btn,
#devMode .delete-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    letter-spacing: 1px;
    transition: all 0.3s;
}

#devMode .save-btn:hover,
#devMode .delete-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* Стили для области загрузки изображения */
#devMode .image-upload-area {
    border: 2px dashed #e94560;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: #1a1a2e;
    transition: all 0.3s;
}

#devMode .image-upload-area:hover {
    border-color: #ff6b81;
    background: rgba(233, 69, 96, 0.1);
}

#devMode .image-upload-area p {
    color: #aaa;
    font-size: 0.6rem;
    margin-top: 10px;
}

#devMode .image-upload-area i {
    color: #e94560;
    font-size: 2rem;
}

/* Стили для превью изображения */
#devMode .image-preview {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    margin-top: 10px;
    border-radius: 12px;
    border: 2px solid #e94560;
    background: #1a1a2e;
}
.image-preview {
    max-height: 260px;
    width: auto;
    object-fit: contain;
}
/* ЗАГОЛОВКИ НЕ СЖИМАЮТСЯ */
.editor-panel .editor-title,
.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e94560 !important;
}

/* Стили для сетки типов */
#devMode .type-icons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
    max-height: 300px;
    overflow-y: auto;
    padding: 5px;
}

#devMode .type-icon-item {
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    text-align: center;
    width: 85px;
    transition: all 0.2s;
}

#devMode .type-icon-item.selected {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border-color: white;
    transform: scale(1.05);
}

#devMode .type-icon-item:hover {
    transform: scale(1.05);
    border-color: white;
}

#devMode .type-icon-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

#devMode .type-icon-item span {
    font-size: 9px;
    display: block;
    margin-top: 5px;
    color: white;
}

/* Стили для главной сетки игр */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

/* Стили для информационных сообщений */
#tabPlay h2 {
    color: #e94560 !important;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

/* Улучшенные стили для модального окна */
.modal-content input,
.modal-content textarea {
    background: #1a1a2e;
    border: 2px solid #e94560;
    color: white;
    padding: 12px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    width: 100%;
}

.modal-content input:focus,
.modal-content textarea:focus {
    outline: none;
    border-color: #ff6b81;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

.modal-content input::placeholder {
    color: #666;
}

/* Стили для статистики фильтров */
.filter-stats {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(233, 69, 96, 0.3);
}
/* Стили для селектора коллекции - фикс расположения элементов */
.game-selector {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    position: relative !important;
    z-index: 1001 !important;
}

.game-selector i,
.game-selector span,
.game-selector select,
.game-selector button {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.game-selector span {
    margin: 0 !important;
    padding: 0 !important;
}

/* Убираем лишние отступы */
.admin-header {
    gap: 15px !important;
}

.admin-header > div {
    margin: 0 !important;
}
/* ------------------- Адаптивность ------------------- */
@media (max-width: 768px) {
    body {
        padding: 8px;
    }
    
    .menu-header h1 {
        font-size: 1.2rem;
    }
    
    .tab-btn {
        padding: 6px 15px;
        font-size: 0.7rem;
    }
    
    .filter-gen-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .filter-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .modal-two-columns {
        flex-direction: column;
    }
    
    .modal-filters {
        max-height: 250px;
        overflow-y: auto;
    }
    
    .pokemon-list-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .pres-card {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    
    .pres-image-area {
        min-width: auto;
    }
    
    .pres-pokemon-name {
        font-size: 1.5rem;
    }
    
    .pres-description {
        font-size: 0.8rem;
    }
    
    .reveal-btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
    
    .pres-nav-btn {
        padding: 8px 20px;
        font-size: 0.7rem;
    }
    
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    #devMode .type-icons-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    #devMode .type-icon-item {
        width: 70px;
    }
    
    #devMode .type-icon-item img {
        width: 40px;
        height: 40px;
    }
    
    .games-grid {
        grid-template-columns: 1fr;
    }
/* Дополнительные стили для заголовков и текста */
#tabPlay h2,
#tabDev h2,
#tabTypes h2 {
    color: #e94560 !important;
    text-shadow: 0 0 5px rgba(233, 69, 96, 0.3);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* Стили для текста в селекторах */
.game-selector span {
    color: white !important;
}

/* Улучшенные стили для полей ввода в редакторе */
#pokemonNameDev,
#pokemonDescriptionDev {
    resize: vertical;
    min-height: 80px;
}

#pokemonNameDev:focus,
#pokemonDescriptionDev:focus {
    outline: none !important;
    border-color: #ff6b81 !important;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5) !important;
}

#pokemonNameDev::placeholder,
#pokemonDescriptionDev::placeholder {
    color: #666 !important;
    font-size: 0.6rem !important;
}

/* Стили для меток в редакторе */
#devMode label {
    color: #e94560 !important;
    font-size: 0.75rem !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
    display: block !important;
}
    .game-selector {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
/* Исправление для панели списка покемонов в режиме разработчика */
.slides-list-panel {
    flex: 1 !important;
    min-width: 280px !important;
}

.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
}

.pokemon-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-right: 5px !important;
    min-height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Для главной сетки в режиме разработчика */
.main-grid {
    align-items: stretch !important;
    min-height: 600px !important;
    flex: 1 !important;
}

.editor-panel,
.slides-list-panel {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 550px !important;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .slides-list-panel {
        min-height: 400px !important;
    }
    
    .pokemon-list {
        min-height: 300px !important;
    }
}

/* ЗАГОЛОВОК ПАНЕЛИ - НЕ СЖИМАЕТСЯ */
.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e94560 !important;
}

.pokemon-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-right: 5px !important;
    min-height: 400px !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

/* ЛЕВАЯ ПАНЕЛЬ */
.editor-panel {
    flex: 2 !important;
    min-width: 350px !important;
}

/* КОНТЕНТ ЛЕВОЙ ПАНЕЛИ */
.editor-panel .form-group {
    flex-shrink: 0;
}

.editor-panel .action-buttons {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

//* ОСНОВНОЙ КОНТЕЙНЕР РАЗРАБОТЧИКА - УБИРАЕМ ОГРАНИЧЕНИЯ */
#devMode {
    height: auto !important;
    min-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ГЛАВНАЯ СЕТКА - РОДИТЕЛЬСКИЙ КОНТЕЙНЕР */
.main-grid {
    display: flex !important;
    gap: 25px !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;  /* ← ЗАСТАВЛЯЕТ ДОЧЕРНИЕ ЭЛЕМЕНТЫ РАСТЯГИВАТЬСЯ */
    min-height: 500px !important;
}

/* ОБЕ ПАНЕЛИ - ОДИНАКОВАЯ ВЫСОТА */
.editor-panel, 
.slides-list-panel {
    display: flex !important;
    flex-direction: column !important;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    transition: all 0.3s;
    border-radius: 16px;
    padding: 20px;
    color: white;
    height: auto !important;  /* ← АВТОМАТИЧЕСКАЯ ВЫСОТА */
    min-height: 100% !important;  /* ← ЗАНИМАЮТ ВСЮ ВЫСОТУ РОДИТЕЛЯ */
}
/* Адаптив для мобильных */
@media (max-width: 768px) {
    .slides-list-panel {
        min-height: 350px !important;
    }
    
    .pokemon-list {
        min-height: 300px !important;
    }
}
/* ФИНАЛЬНЫЙ ФИКС - ЗАСТАВЛЯЕМ СПИСОК РАСТЯНУТЬСЯ */
body {
    min-height: 100vh;
}

#mainMenu {
    min-height: auto;
    display: flex;
    flex-direction: column;
}

#tabDev.active {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 500px !important;
}

#devMode {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

#tabDevNew {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 500px !important;
}

#devModeNew {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
}

.main-grid {
    flex: 1 !important;
    display: flex !important;
}

/* Карточки покемонов на всю ширину */
#pokemonListDev > div {
    width: 100% !important;
    box-sizing: border-box !important;
}
.action-buttons {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* АДАПТИВ */
@media (max-width: 768px) {
    .main-grid {
        min-height: 400px !important;
    }
    
    .pokemon-list {
        min-height: 150px !important;
    }
}
/* ФИКС ДЛЯ РОДИТЕЛЬСКИХ КОНТЕЙНЕРОВ */
#tabDev.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

#devMode {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

.main-grid {
    flex: 1 !important;
}
/* Замените существующий стиль для .pokemon-list на этот */

#devMode .pokemon-list {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Добавьте эти стили для лучшей работы скролла */

.slides-list-panel {
    flex: 1;
    min-width: 280px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: 80vh;
}

.slides-list-panel .editor-title {
    flex-shrink: 0;
}

#devMode .pokemon-list {
    flex: 1;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Стилизация скроллбара */
#devMode .pokemon-list::-webkit-scrollbar {
    width: 6px;
}

#devMode .pokemon-list::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
}

#devMode .pokemon-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

#devMode .pokemon-list::-webkit-scrollbar-thumb:hover {
    background: #ff6b81;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .slides-list-panel {
        max-height: 400px;
    }
    
    #devMode .pokemon-list {
        max-height: 300px;
    }
}
/* Дополнительный фикс для списка покемонов */
.main-grid {
    align-items: stretch !important;
}

.slides-list-panel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
    margin-bottom: 20px !important;
}

#devMode .pokemon-list {
    flex: 1 1 auto !important;
    min-height: 200px !important;
    max-height: calc(80vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
@media (max-width: 768px) {
    .pres-content {
        flex-direction: column !important;
    }
    .pres-card {
        padding: 20px !important;
    }
    .pres-pokemon-name {
        font-size: 1.5rem !important;
    }
}
}
/* ============================================
   ОБЫЧНАЯ ПРЕЗЕНТАЦИЯ (БЕЗ САЙДБАРА)
   ============================================ */

/* Обычная презентация: карточка по центру, колонка */
.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-card-container {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-card {
    width: 95vw !important;
    max-width: 1400px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 60px !important;
    padding: 60px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-image-area {
    flex: 1 !important;
    min-width: 400px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-image-area img {
    width: 100% !important;
    max-height: 55vh !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-info-area {
    flex: 1.5 !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-pokemon-name {
    font-size: 3.6rem !important;
    margin-bottom: 30px !important;
    text-align: left !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .reveal-btn {
    padding: 20px 40px !important;
    font-size: 1.2rem !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-nav {
    margin-top: 45px !important;
    gap: 40px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-nav-btn {
    padding: 15px 45px !important;
    font-size: 1rem !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-counter-wrapper {
    margin-top: 30px !important;
}

/* Адаптив обычной презентации на мобильных */
@media (max-width: 768px) {
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-card {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 20px !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-image-area {
        min-width: auto !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-pokemon-name {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-description {
        font-size: 0.8rem !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .reveal-btn {
        padding: 10px 20px !important;
        font-size: 0.8rem !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-nav-btn {
        padding: 8px 20px !important;
        font-size: 0.7rem !important;
    }
}

/* ============================================
   РЕЖИМ "ОДИН ИГРОК" — САЙДБАР ВНУТРИ .pres-content
   Левая часть = карточка (~70%), Правая = пульт (~30%)
   ============================================ */

/* Сайдбара нет — скрыт по умолчанию */
#gameSidebar {
    display: none;
}

/* Когда сайдбар виден — переключаем pres-content на строку */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 20px !important;
}

/* Карточка покемона — левая часть ~62% */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card-container {
    flex: 1 1 62% !important;
    min-width: 0 !important;
    max-width: 62% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Карточка растягивается на всю ширину контейнера */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card {
    width: 100% !important;
    padding: 25px !important;
    gap: 30px !important;
    flex: 1 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-image-area {
    order: 2 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-info-area {
    order: 1 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-pokemon-name {
    text-align: right !important;
    font-size: 1.8rem !important;
    margin-bottom: 15px !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-description {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    padding: 14px !important;
    margin-bottom: 15px !important;
}

/* Навигация под карточкой */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-nav {
    margin-top: 15px !important;
    gap: 20px !important;
    flex-shrink: 0 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-nav-btn {
    padding: 10px 25px !important;
    font-size: 0.8rem !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-counter-wrapper {
    margin-top: 0 !important;
}

/* Скрыть кнопку "Раскрыть тип" и навигацию в режиме один игрок */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .reveal-types-container {
    display: none !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-nav {
    display: none !important;
}

/* В комнате (room-mode) — показать раскрытие типов в карточке, скрыть навигацию */
.fullscreen-presentation.room-mode:has(#gameSidebar[style*="display: block"]) .reveal-types-container {
    display: flex !important;
}

.fullscreen-presentation.room-mode:has(#gameSidebar[style*="display: block"]) .pres-nav {
    display: none !important;
}

/* Кнопки управления комнатой в sidebar */
#roomPresPrevBtn, #roomPresNextBtn {
    background: rgba(15,52,96,0.5) !important;
}

#roomPresPrevBtn:hover, #roomPresNextBtn:hover {
    background: rgba(233,69,96,0.3) !important;
}

/* Пульт — правая часть ~30% */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 38% !important;
    max-width: 38% !important;
    min-width: 260px !important;
    background: rgba(10, 20, 40, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 30px !important;
    padding: 20px !important;
    border: 1px solid rgba(233, 69, 96, 0.4) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}

/* Стили элементов пульта */
#gameSidebar h3 {
    color: #e94560 !important;
    font-size: 1rem !important;
    margin-bottom: 15px !important;
    text-align: center !important;
}

#gameSidebar .types-game-section {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    margin-bottom: 15px !important;
    border: 1px solid rgba(233, 69, 96, 0.2) !important;
    overflow: hidden !important;
    flex: none !important;
}

#gameSidebar .types-game-section.section-active {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#gameSidebar .types-game-section-header {
    background: rgba(233, 69, 96, 0.15) !important;
    padding: 10px 15px !important;
    font-size: 0.65rem !important;
    color: #e94560 !important;
    flex-shrink: 0 !important;
}

#gameSidebar #singleMainContent,
#gameSidebar #singleExtraContent {
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#gameSidebar .types-game-types-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    align-content: stretch !important;
}

#gameSidebar .types-game-type-btn,
#gameSidebar .types-game-real-btn {
    background: #1a1a2e !important;
    border: 2px solid #e94560 !important;
    border-radius: 10px !important;
    padding: 10px 4px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

#gameSidebar .types-game-type-btn img,
#gameSidebar .types-game-real-btn img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
}

#gameSidebar .types-game-type-btn.type-selected {
    background: rgba(233, 69, 96, 0.4) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4) !important;
}

#gameSidebar .types-game-type-btn span,
#gameSidebar .types-game-real-btn span {
    font-size: 0.5rem !important;
    color: white !important;
}

#gameSidebar .types-game-selected-list {
    padding: 8px 12px !important;
    display: none !important;
}

#gameSidebar #singleCommitBtn {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

#gameSidebar .types-game-chip {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    padding: 3px 8px !important;
    border-radius: 15px !important;
    font-size: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: white !important;
}

#gameSidebar .types-game-remove {
    background: rgba(0,0,0,0.4) !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
    padding: 1px 5px !important;
    border-radius: 10px !important;
    font-size: 0.5rem !important;
}

#gameSidebar .types-game-real-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
}

#gameSidebar .types-game-status {
    font-size: 0.55rem !important;
    text-align: center !important;
    color: #f39c12 !important;
    padding: 8px !important;
}

#singleCommitBtn {
    width: 100% !important;
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border: none !important;
    padding: 10px !important;
    font-size: 0.65rem !important;
    border-radius: 25px !important;
    color: white !important;
    cursor: pointer !important;
    margin-bottom: 15px !important;
    font-family: 'Minecraft', monospace !important;
    letter-spacing: 1px !important;
}

#singleCommitBtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 20px rgba(233,69,96,0.4) !important;
}

#singleResetBtn {
    background: rgba(15, 52, 96, 0.8) !important;
    border: 1px solid #e94560 !important;
    padding: 6px 15px !important;
    border-radius: 20px !important;
    color: white !important;
    cursor: pointer !important;
    font-size: 0.55rem !important;
    font-family: 'Minecraft', monospace !important;
}

#singleRealPanel {
    background: rgba(233, 69, 96, 0.1) !important;
    border-radius: 15px !important;
    padding: 10px !important;
    margin-top: 10px !important;
    border: 1px solid rgba(233,69,96,0.3) !important;
}

#singleGameScore {
    font-size: 1rem !important;
    font-weight: bold !important;
    color: #f39c12 !important;
    text-align: center !important;
    margin-bottom: 15px !important;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-content {
        flex-direction: column !important;
    }
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card-container {
        flex: none !important;
        max-width: 100% !important;
    }
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
        flex: none !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}
/* ============================================
   ПУЛЬТ ИГРОКА КОМНАТЫ (room.html) — точная копия #gameSidebar
   ============================================ */
#roomSidebarArea {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 38% !important;
    max-width: 38% !important;
    min-width: 280px !important;
    background: rgba(10, 20, 40, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 30px !important;
    padding: 20px !important;
    border: 1px solid rgba(233, 69, 96, 0.4) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

#roomSidebarArea h3 {
    color: #e94560 !important;
    font-size: 1rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-family: 'Minecraft', monospace !important;
}

#roomSidebarArea .types-game-section {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    margin-bottom: 15px !important;
    border: 1px solid rgba(233, 69, 96, 0.2) !important;
    overflow: hidden !important;
    flex: none !important;
}

#roomSidebarArea .types-game-section.section-active {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#roomSidebarArea .types-game-section-header {
    background: rgba(233, 69, 96, 0.15) !important;
    padding: 10px 15px !important;
    font-size: 0.65rem !important;
    color: #e94560 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    user-select: none !important;
    font-family: 'Minecraft', monospace !important;
}

#roomSidebarArea #roomMainContent,
#roomSidebarArea #roomExtraContent {
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#roomSidebarArea .types-game-types-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    align-content: stretch !important;
}

#roomSidebarArea .types-game-type-btn {
    background: #1a1a2e !important;
    border: 2px solid #e94560 !important;
    border-radius: 10px !important;
    padding: 10px 4px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 100% !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#roomSidebarArea .types-game-type-btn img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
}

#roomSidebarArea .types-game-type-btn span {
    font-size: 0.5rem !important;
    color: white !important;
    font-family: 'Minecraft', monospace !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

#roomSidebarArea .types-game-type-btn.type-selected {
    background: rgba(233, 69, 96, 0.4) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4) !important;
    transform: translateY(-2px) !important;
}

#roomSidebarArea .types-game-type-btn:hover:not(:disabled) {
    border-color: #ff6b81 !important;
    background: #252542 !important;
    transform: translateY(-1px) !important;
}

#roomSidebarArea .types-game-type-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

#roomSidebarArea .types-game-selected-list {
    display: none !important;
}

#roomSidebarArea .types-game-commit {
    width: 100% !important;
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border: none !important;
    padding: 14px 20px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
    color: white !important;
    cursor: pointer !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    font-family: 'Minecraft', monospace !important;
    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4) !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

#roomSidebarArea .types-game-commit:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.6) !important;
    transform: translateY(-1px) !important;
}

#roomSidebarArea .types-game-commit:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

#roomSidebarArea .types-game-reset-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 6px 18px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#roomSidebarArea .types-game-reset-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* Стили презентации для комнаты room.html */
.room-fullscreen {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 100vh !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

.room-fullscreen .pres-header {
    background: rgba(10, 20, 40, 0.75) !important;
    backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(233, 69, 96, 0.25) !important;
    padding: 10px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
}

.room-fullscreen .pres-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 20px !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
}

.room-fullscreen .pres-card-container {
    flex: 1 1 62% !important;
    min-width: 0 !important;
    max-width: 62% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.room-fullscreen .pres-card {
    width: 100% !important;
    background: rgba(10, 20, 40, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 30px !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 25px !important;
    gap: 30px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.room-fullscreen .pres-image-area {
    order: 2 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.room-fullscreen .pres-image-area img {
    max-width: 100% !important;
    max-height: 50vh !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6)) !important;
}

.room-fullscreen .pres-info-area {
    order: 1 !important;
    flex: 1.2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.room-fullscreen .pres-pokemon-name {
    text-align: right !important;
    font-size: 1.8rem !important;
    margin-bottom: 15px !important;
    color: #e94560 !important;
    font-family: 'Minecraft', monospace !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.6) !important;
    word-break: break-word !important;
}

.room-fullscreen .pres-description {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    padding: 16px !important;
    margin-bottom: 15px !important;
    background: rgba(15, 30, 55, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: 'Minecraft', monospace !important;
    backdrop-filter: blur(10px) !important;
    max-height: 250px !important;
    overflow-y: auto !important;
}

@media (max-width: 992px) {
    .room-fullscreen .pres-content {
        flex-direction: column !important;
        padding: 12px !important;
        gap: 16px !important;
    }
    .room-fullscreen .pres-card-container {
        max-width: 100% !important;
        flex: none !important;
    }
    .room-fullscreen .pres-card {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 16px !important;
    }
    .room-fullscreen .pres-image-area {
        order: 1 !important;
    }
    .room-fullscreen .pres-image-area img {
        max-height: 200px !important;
    }
    .room-fullscreen .pres-info-area {
        order: 2 !important;
        width: 100% !important;
    }
    .room-fullscreen .pres-pokemon-name {
        text-align: center !important;
        font-size: 1.5rem !important;
    }
    #roomSidebarArea {
        flex: none !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
    }
}

@media (max-width: 540px) {
    #roomSidebarArea .types-game-types-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    #roomSidebarArea .types-game-type-btn {
        min-height: 52px !important;
        padding: 6px 2px !important;
    }
    #roomSidebarArea .types-game-type-btn img {
        width: 28px !important;
        height: 28px !important;
    }
    #roomSidebarArea .types-game-type-btn span {
        font-size: 0.42rem !important;
    }
}

/* ============================================
   РАСКРЫТИЕ ТИПОВ
   ============================================ */

/* Контейнер-обёртка — красивая последовательная анимация */
.reveal-types-container {
    position: relative;
    width: 100%;
    border-radius: 60px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    background: linear-gradient(90deg, 
        /* Красные/Оранжевые */
        #F08030, #F85888, #C03028, #EE99AC,
        /* Жёлтые/Золотые */
        #F8D030, #E0C068, #B8A038,
        /* Зелёные/Травяные */
        #78C850, #A8B820, #98D8D8,
        /* Синие/Водные */
        #6890F0, #7038F8, #705898, #A890F0,
        /* Нейтральные/Тёмные */
        #A8A878, #705848, #A040A0, #B8B8D0,
        /* Замыкание */
        #F08030
    );
    background-size: 400% auto;
    animation: pokemonRainbow 18s linear infinite;
}

@keyframes pokemonRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* Контейнер раскрыт — увеличиваем высоту с плавной анимацией */
.reveal-types-container.types-expanded {
    padding-bottom: 250px;
    transition: padding-bottom 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* Кнопка — прозрачная */
#revealPresBtn {
    width: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    border: none;
    padding: 20px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #FFD700;
    border-radius: 60px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    text-shadow: 
        -1px -1px 0 rgba(0,0,0,0.5),
        1px -1px 0 rgba(0,0,0,0.5),
        -1px 1px 0 rgba(0,0,0,0.5),
        1px 1px 0 rgba(0,0,0,0.5),
        0 0 5px rgba(0,0,0,0.5);
}

/* Кнопка раскрыта */
#revealPresBtn.types-expanded {
    opacity: 0.7;
    font-size: 0.8rem;
    padding-top: 10px;
    padding-bottom: 10px;
    text-shadow: 
        -1px -1px 0 rgba(0,0,0,0.6),
        1px -1px 0 rgba(0,0,0,0.6),
        -1px 1px 0 rgba(0,0,0,0.6),
        1px 1px 0 rgba(0,0,0,0.6);
}


/* Панель типов — плавное появление */
.types-reveal-panel {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1), visibility 0.4s;
    z-index: 3;
}

.types-reveal-panel.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1) 0.1s, visibility 0.4s;
}

/* Карточки типов — анимация появления с задержкой */
.types-reveal-panel .reveal-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px 35px;
    border-radius: 35px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.types-reveal-panel.show .reveal-type-card {
    opacity: 1;
    transform: translateY(0);
}

.types-reveal-panel.show .reveal-type-card:nth-child(1) { transition-delay: 0.05s; }
.types-reveal-panel.show .reveal-type-card:nth-child(2) { transition-delay: 0.1s; }

.types-reveal-panel .reveal-type-card:hover {
    transform: scale(1.05);
    background: rgba(233, 69, 96, 0.4);
    border-color: #e94560;
}

.types-reveal-panel .reveal-type-card img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.types-reveal-panel .reveal-type-card span {
    font-size: 1.1rem;
    color: white;
    font-weight: bold;
}
/* ============================================
   СЖАТИЕ ОПИСАНИЯ
   ============================================ */

/* Описание — нормальное состояние */
.pres-description {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 45px;
    color: #f0f0f0;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 30px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

/* Описание сжатое — когда карточка раскрыта */
.pres-card.types-expanded .pres-description {
    margin-bottom: 15px;
    padding: 10px 20px;
    font-size: 0.9rem;
    line-height: 1.3;
    max-height: 80px;
    overflow-y: auto;
    transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
/* ============================================
   ЦВЕТНЫЕ РАМКИ ДЛЯ КАРТОЧЕК ПОКЕМОНОВ
   ============================================ */

/* Анимация мерцания для рамок */
@keyframes borderPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);
        border-color: rgba(233, 69, 96, 0.6);
    }
    70% {
        box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1);
        border-color: rgba(233, 69, 96, 1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
        border-color: rgba(233, 69, 96, 0.6);
    }
}

/* Базовый стиль карточки */
#devMode .pokemon-card {
    position: relative;
    transition: all 0.3s ease;
}

/* Цвета типов для рамок */
.border-type-normal { border-color: #A8A878; }
.border-type-fire { border-color: #F08030; }
.border-type-water { border-color: #6890F0; }
.border-type-electric { border-color: #F8D030; }
.border-type-grass { border-color: #78C850; }
.border-type-ice { border-color: #98D8D8; }
.border-type-fighting { border-color: #C03028; }
.border-type-poison { border-color: #A040A0; }
.border-type-ground { border-color: #E0C068; }
.border-type-flying { border-color: #A890F0; }
.border-type-psychic { border-color: #F85888; }
.border-type-bug { border-color: #A8B820; }
.border-type-rock { border-color: #B8A038; }
.border-type-ghost { border-color: #705898; }
.border-type-dragon { border-color: #7038F8; }
.border-type-dark { border-color: #705848; }
.border-type-steel { border-color: #B8B8D0; }
.border-type-fairy { border-color: #EE99AC; }

/* Один тип — сплошная рамка */
#devMode .pokemon-card[data-type-count="1"] {
    border: 2px solid;
    transition: all 0.3s ease;
}

/* Два типа — градиентная рамка (по диагонали) */
#devMode .pokemon-card[data-type-count="2"] {
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.3s ease;
}

/* Анимация мерцания для всех карточек */
#devMode .pokemon-card {
    animation: borderPulse 2s ease-in-out infinite;
}

/* Замедляем анимацию для карточек без типов */
#devMode .pokemon-card[data-type-count="0"] {
    animation: borderPulse 3s ease-in-out infinite;
    border-color: rgba(233, 69, 96, 0.4);
}

/* У карточек с градиентом убираем стандартную анимацию border, добавляем свою */
#devMode .pokemon-card[data-type-count="2"] {
    animation: none;
    position: relative;
    background-clip: padding-box;
}

#devMode .pokemon-card[data-type-count="2"]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--color1), var(--color2));
    border-radius: 15px;
    z-index: -1;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

#devMode .pokemon-card[data-type-count="2"]:hover::before {
    opacity: 1;
}

/* Для градиентных карточек своя анимация */
#devMode .pokemon-card[data-type-count="2"] {
    animation: borderGradientPulse 2s ease-in-out infinite;
}

@keyframes borderGradientPulse {
    0% { box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.3); }
    50% { box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(233, 69, 96, 0); }
}
/* ============================================
   ЦВЕТНЫЕ РАМКИ ДЛЯ КАРТОЧЕК ПОКЕМОНОВ
   ============================================ */

/* Анимация мерцания */
@keyframes borderPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

/* Базовый стиль карточки */
#devMode .pokemon-card {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 74px;
}

/* Контейнер списка — убираем горизонтальный скролл */
#devMode .pokemon-list,
#devMode .slides-list-panel {
    overflow-x: hidden !important;
}

/* Подсветка при наведении для всех карточек — только сдвиг и лёгкое свечение */
#devMode .pokemon-card:hover {
    transform: translateX(5px);
    filter: brightness(1.03);
    box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.2);
}

/* Карточка с одним типом */
#devMode .pokemon-card[data-type-count="1"] {
    border: 2px solid var(--card-color);
    animation: borderPulse 2s ease-in-out infinite;
}

/* Карточка с двумя типами — градиентная рамка */
#devMode .pokemon-card[data-type-count="2"] {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: none;
    position: relative;
    z-index: 0;
}

#devMode .pokemon-card[data-type-count="2"]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--color1), var(--color2));
    border-radius: 17px;
    z-index: -2;
    transition: opacity 0.3s ease;
    opacity: 0.8;
    animation: borderPulse 2s ease-in-out infinite;
}

#devMode .pokemon-card[data-type-count="2"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border-radius: 13px;
    z-index: -1;
}

/* Карточка без типов */
#devMode .pokemon-card[data-type-count="0"] {
    border: 2px solid rgba(233, 69, 96, 0.5);
    animation: borderPulse 3s ease-in-out infinite;
}

/* Активная карточка */
#devMode .pokemon-card.active {
    border: 2px solid white !important;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
}

/* У активной карточки с двумя типами отключаем псевдоэлементы */
#devMode .pokemon-card.active[data-type-count="2"]::before,
#devMode .pokemon-card.active[data-type-count="2"]::after {
    display: none;
}

/* ============================================
   ФОН ДЛЯ ОБЛАСТИ ЗАГРУЗКИ ФОТО
   ============================================ */

/* Фон для области загрузки фото покемона */
#uploadAreaDev {
    background-image: url('background/PhotoFon.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

/* Затемнение фона, чтобы фото покемона было лучше видно */
#uploadAreaDev::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 16px;
    pointer-events: none;
    z-index: 0;
}

/* Само фото покемона поверх фона */
#imagePreviewDev {
    position: relative;
    z-index: 2;
    background: transparent !important;
}

/* Плейсхолдер тоже поверх фона */
#imagePlaceholder {
    position: relative;
    z-index: 2;
}
/* ============================================
   ТЕНЬ ДЛЯ ФОТО ПОКЕМОНА
   ============================================ */

/* Тень для фото покемона */
#imagePreviewDev {
    filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.9));
    transition: filter 0.3s ease;
}

#imagePreviewDev:hover {
    filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 1));
}
/* ============================================
   СТИЛИ ДЛЯ АКТИВНОЙ КАРТОЧКИ
   ============================================ */

#devMode .pokemon-card.active .pokemon-name,
#devMode .pokemon-card.active > div div:last-child {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: bold;
}
/* ============================================
   ФИКС ОБРЕЗАНИЯ ИМЕНИ ПОКЕМОНА
   ============================================ */

#devMode .pokemon-card .pokemon-name {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.3;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 0.7rem !important;
}

#devMode .pokemon-card {
    min-height: 74px;
    height: auto;
}

#devMode .pokemon-card > div {
    min-width: 0;
    flex: 1;
}
/* ============================================
   ЭФФЕКТ БЛИКА ДЛЯ АКТИВНОЙ КАРТОЧКИ
   ============================================ */

/* Общий контейнер для всех карточек - обеспечиваем overflow hidden */
#devMode .pokemon-card.active {
    position: relative;
    overflow: hidden;
}

/* Анимация блика - используем отдельный класс, который будет добавляться через JS */
#devMode .pokemon-card.active .shine-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.7), 
        transparent
    );
    animation: shineSimple 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 9999;
}

@keyframes shineSimple {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}



/* Фикс для занавески — чтобы доходила до краёв */
.tab-btn {
    overflow: hidden;
}

.tab-btn:hover::before {
    width: 1000px;
    height: 1000px;
}

/* Кнопки действий в режиме разработчика — яркие, но приятные глазу */
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev) {
    transition: all 0.2s ease !important;
    font-weight: normal !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    color: white !important;
    border: none !important;
}

/* Вернуться к игре — ярко-жёлтый */
.back-to-play-btn {
    background: #e67e22 !important;
}
.back-to-play-btn:hover {
    background: #f39c12 !important;
    transform: translateY(-2px);
}

/* Добавить покемона — синий */
#addPokemonBtnDev {
    background: #2980b9 !important;
}
#addPokemonBtnDev:hover {
    background: #3498db !important;
    transform: translateY(-2px);
}

/* По шаблону — фиолетовый */
#templateBtn {
    background: #8e44ad !important;
}
#templateBtn:hover {
    background: #9b59b6 !important;
    transform: translateY(-2px);
}

/* Случайный — оранжевый */
#randomPokemonBtn {
    background: #d35400 !important;
}
#randomPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}

/* Сохранить — зелёный */
#savePokemonBtnDev {
    background: #27ae60 !important;
}
#savePokemonBtnDev:hover {
    background: #2ecc71 !important;
    transform: translateY(-2px);
}

/* Удалить — красный */
#deletePokemonBtnDev {
    background: #c0392b !important;
}
#deletePokemonBtnDev:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Новая коллекция — бирюзовый */
#createGameBtnDev {
    background: #16a085 !important;
}
#createGameBtnDev:hover {
    background: #1abc9c !important;
    transform: translateY(-2px);
}

/* Экспорт — тёмно-синий */
#exportCollectionBtn {
    background: #2c3e50 !important;
}
#exportCollectionBtn:hover {
    background: #34495e !important;
    transform: translateY(-2px);
}

/* Импорт — серо-синий */
#importCollectionBtn {
    background: #3a6a7a !important;
}
#importCollectionBtn:hover {
    background: #4a8a9a !important;
    transform: translateY(-2px);
}

/* Удалить коллекцию */
#deleteCurrentGameBtn {
    background: #c0392b !important;
}
#deleteCurrentGameBtn:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Очистить пустые записи */
#clearEmptyPokemonBtn {
    background: #d35400 !important;
}
#clearEmptyPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}
/* ============================================
   ГЛОБАЛЬНОЕ ЕДИНООБРАЗИЕ СКРУГЛЕНИЙ
   ============================================ */

/* Основные контейнеры */
.main-menu,
.menu-header,
.tab-content,
.game-card,
.modal-content,
.confirm-modal-content,
.completion-modal-content,
.pres-card,
.editor-panel,
.slides-list-panel,
.bg-manager,
.bg-card,
.types-game-container,
.types-game-section,
.types-game-history-panel {
    border-radius: 20px !important;
}

/* Кнопки */
.tab-btn,
.pres-nav-btn,
.close-pres-btn,
.reveal-btn,
.back-to-play-btn,
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev),
.save-btn,
.delete-btn,
.btn-confirm,
.btn-cancel,
.types-game-commit,
.types-game-reset-btn,
#singleCommitBtn,
#singleResetBtn,
.filter-toggle,
.filter-tag,
.filter-gen {
    border-radius: 30px !important;
}

/* Карточки и маленькие блоки */
.pokemon-card,
.template-pokemon-card,
.type-icon-item,
.bg-card img,
.pres-image-area img,
#uploadAreaDev,
.modal-content input,
.modal-content textarea,
#devMode input,
#devMode textarea,
#devMode select {
    border-radius: 12px !important;
}

/* Мелкие элементы */
.types-game-chip,
.types-game-remove,
.social-block,
.custom-notification,
.pres-counter,
.filter-section {
    border-radius: 16px !important;
}

/* Иконки типов и их контейнеры */
.reveal-type-card,
.types-game-type-btn,
.types-game-real-btn {
    border-radius: 14px !important;
}

/* Убираем лишние скругления у внутренних элементов */
.pres-card .reveal-types-container {
    border-radius: 40px !important;
}

/* Полоски и разделители оставляем без скруглений */
.filter-title,
.editor-title,
.bg-title,
.types-game-history-title {
    border-radius: 0 !important;
}
/* ============================================
   АНИМАЦИИ ДЛЯ КАРТОЧЕК КОЛЛЕКЦИЙ
   ============================================ */

/* Появление карточек при загрузке */
.game-card {
    opacity: 0;
    transform: translateY(30px);
    animation: collectionCardReveal 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

@keyframes collectionCardReveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Задержки для каждой карточки */
.games-grid .game-card:nth-child(1) { animation-delay: 0.05s; }
.games-grid .game-card:nth-child(2) { animation-delay: 0.10s; }
.games-grid .game-card:nth-child(3) { animation-delay: 0.15s; }
.games-grid .game-card:nth-child(4) { animation-delay: 0.20s; }
.games-grid .game-card:nth-child(5) { animation-delay: 0.25s; }
.games-grid .game-card:nth-child(6) { animation-delay: 0.30s; }

/* При наведении — плавный подъём и увеличение тени */
.game-card {
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.2);
}

.game-card:hover {
    transform: translateY(-10px) scale(1.02);
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.2);
}

/* Иконка папки внутри карточки — небольшой акцент при наведении */
.game-card:hover h3 i {
    animation: iconPop 0.3s ease-out;
}

@keyframes iconPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Кнопка удаления — появляется с небольшой задержкой при наведении */
.delete-collection-btn {
    opacity: 0.7;
    transition: all 0.2s ease;
}

.game-card:hover .delete-collection-btn {
    opacity: 1;
}

/* Подсветка краёв карточки при наведении */
.game-card {
    position: relative;
    overflow: hidden;
}

.game-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(233, 69, 96, 0.15), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.game-card:hover::after {
    left: 100%;
}
/* Кнопки действий в режиме разработчика — яркие, но приятные глазу */
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev) {
    transition: all 0.2s ease !important;
    font-weight: normal !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    color: white !important;
    border: none !important;
}

/* Вернуться к игре — ярко-жёлтый */
.back-to-play-btn {
    background: #e67e22 !important;
}
.back-to-play-btn:hover {
    background: #f39c12 !important;
    transform: translateY(-2px);
}

/* Добавить покемона — синий */
#addPokemonBtnDev {
    background: #2980b9 !important;
}
#addPokemonBtnDev:hover {
    background: #3498db !important;
    transform: translateY(-2px);
}

/* По шаблону — фиолетовый */
#templateBtn {
    background: #8e44ad !important;
}
#templateBtn:hover {
    background: #9b59b6 !important;
    transform: translateY(-2px);
}

/* Случайный — оранжевый */
#randomPokemonBtn {
    background: #d35400 !important;
}
#randomPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}

/* Сохранить — зелёный */
#savePokemonBtnDev {
    background: #27ae60 !important;
}
#savePokemonBtnDev:hover {
    background: #2ecc71 !important;
    transform: translateY(-2px);
}

/* Удалить — красный */
#deletePokemonBtnDev {
    background: #c0392b !important;
}
#deletePokemonBtnDev:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Новая коллекция — бирюзовый */
#createGameBtnDev {
    background: #16a085 !important;
}
#createGameBtnDev:hover {
    background: #1abc9c !important;
    transform: translateY(-2px);
}

/* Экспорт — тёмно-синий */
#exportCollectionBtn {
    background: #2c3e50 !important;
}
#exportCollectionBtn:hover {
    background: #34495e !important;
    transform: translateY(-2px);
}

/* Импорт — серо-синий */
#importCollectionBtn {
    background: #3a6a7a !important;
}
#importCollectionBtn:hover {
    background: #4a8a9a !important;
    transform: translateY(-2px);
}

/* Удалить коллекцию */
#deleteCurrentGameBtn {
    background: #c0392b !important;
}
#deleteCurrentGameBtn:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Очистить пустые записи */
#clearEmptyPokemonBtn {
    background: #d35400 !important;
}
#clearEmptyPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}
/* ============================================
   ГЛОБАЛЬНОЕ ЕДИНООБРАЗИЕ СКРУГЛЕНИЙ
   ============================================ */

/* Основные контейнеры */
.main-menu,
.menu-header,
.tab-content,
.game-card,
.modal-content,
.confirm-modal-content,
.completion-modal-content,
.pres-card,
.editor-panel,
.slides-list-panel,
.bg-manager,
.bg-card,
.types-game-container,
.types-game-section,
.types-game-history-panel {
    border-radius: 20px !important;
}

/* Кнопки */
.tab-btn,
.pres-nav-btn,
.close-pres-btn,
.reveal-btn,
.back-to-play-btn,
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev),
.save-btn,
.delete-btn,
.btn-confirm,
.btn-cancel,
.types-game-commit,
.types-game-reset-btn,
#singleCommitBtn,
#singleResetBtn,
.filter-toggle,
.filter-tag,
.filter-gen {
    border-radius: 30px !important;
}

/* Карточки и маленькие блоки */
.pokemon-card,
.template-pokemon-card,
.type-icon-item,
.bg-card img,
.pres-image-area img,
#uploadAreaDev,
.modal-content input,
.modal-content textarea,
#devMode input,
#devMode textarea,
#devMode select {
    border-radius: 12px !important;
}

/* Мелкие элементы */
.types-game-chip,
.types-game-remove,
.social-block,
.custom-notification,
.pres-counter,
.filter-section {
    border-radius: 16px !important;
}

/* Иконки типов и их контейнеры */
.reveal-type-card,
.types-game-type-btn,
.types-game-real-btn {
    border-radius: 14px !important;
}

/* Убираем лишние скругления у внутренних элементов */
.pres-card .reveal-types-container {
    border-radius: 40px !important;
}

/* Полоски и разделители оставляем без скруглений */
.filter-title,
.editor-title,
.bg-title,
.types-game-history-title {
    border-radius: 0 !important;
}
/* Просто красим обычный select */
#gameSelectDev {
    display: inline-block !important;
    cursor: pointer;
    transition: all 0.25s ease !important;
    background: #1a1a2e !important;
    border: 2px solid #e94560 !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.7rem !important;
    min-width: 180px !important;
}

#gameSelectDev:hover {
    background: #2a2a4e !important;
    border-color: #ff6b81 !important;
    transform: translateY(-2px);
}

#gameSelectDev:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.3);
}
/* ============================================
   АНИМАЦИЯ СМЕНЫ КОЛЛЕКЦИИ
   ============================================ */

/* Анимация сжатия каждой карточки */
.card-collapsing {
    animation: cardCollapse 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes cardCollapse {
    0% {
        opacity: 1;
        transform: scale(1);
        margin-bottom: 12px;
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
        margin-bottom: 0;
        height: 0;
        padding: 0;
    }
}

/* Анимация появления карточек - каждая со своим сдвигом */
.pokemon-card {
    opacity: 1;
}

.pokemon-card.card-enter {
    animation: cardEnter 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

@keyframes cardEnter {
    0% {
        opacity: 0;
        transform: translateX(60px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
/* Анимация смены коллекции - простая версия */
@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.pokemon-card.slide-out {
    animation: slideOut 0.2s ease forwards !important;
}

.pokemon-card.slide-in {
    animation: slideIn 0.3s ease forwards !important;
}
/* Анимация смены коллекции */
.slide-out {
    animation: slideOutAnim 0.2s ease forwards !important;
}

.slide-in {
    animation: slideInAnim 0.3s ease forwards !important;
}

@keyframes slideOutAnim {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes slideInAnim {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ============================================
   АНИМАЦИЯ СМЕНЫ ВЫБРАННОГО ПОКЕМОНА
   ============================================ */

/* Анимация для имени */
.pokemon-name-changing {
    animation: namePulse 0.25s ease-out;
}

@keyframes namePulse {
    0% {
        transform: scale(1);
        color: #e94560;
    }
    40% {
        transform: scale(1.02);
        color: #ff6b81;
    }
    100% {
        transform: scale(1);
        color: #e94560;
    }
}

/* Анимация для описания */
.pokemon-desc-changing {
    animation: descFade 0.25s ease-out;
}

@keyframes descFade {
    0% {
        opacity: 0.5;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Анимация для картинки */
.pokemon-image-changing {
    animation: imagePop 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

@keyframes imagePop {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Анимация для поля загрузки фото */
.upload-area-changing {
    animation: uploadAreaPulse 0.25s ease-out;
}

@keyframes uploadAreaPulse {
    0% {
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);
    }
    50% {
        border-color: #ff6b81;
        box-shadow: 0 0 0 5px rgba(233, 69, 96, 0.2);
    }
    100% {
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

/* Анимация для сетки типов */
.types-grid-changing {
    animation: typesSlide 0.25s ease-out;
}

@keyframes typesSlide {
    0% {
        opacity: 0;
        transform: translateX(-8px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ============================================
   АНИМАЦИЯ ЗАЛИВКИ ВЫБРАННОГО ТИПА
   ============================================ */

/* Базовый стиль иконки типа */
.type-icon-item {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Анимация появления выбранного состояния */
.type-icon-item.selected {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border-color: white !important;
    transform: scale(1.02);
    animation: selectGlow 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

/* Анимация снятия выбора */
.type-icon-item.deselecting {
    animation: deselectShrink 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes selectGlow {
    0% {
        transform: scale(0.95);
        background: #1a1a2e;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.7);
    }
    50% {
        transform: scale(1.05);
        background: linear-gradient(135deg, #e94560, #c62a47);
        box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.3);
    }
    100% {
        transform: scale(1.02);
        background: linear-gradient(135deg, #e94560, #c62a47);
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

@keyframes deselectShrink {
    0% {
        transform: scale(1.02);
        background: linear-gradient(135deg, #e94560, #c62a47);
        opacity: 1;
    }
    50% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        background: #1a1a2e;
        opacity: 1;
    }
}

/* Пульсация при добавлении нового типа */
.type-icon-item.adding {
    animation: typeAddedPulse 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes typeAddedPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #2ecc71;
    }
    30% {
        transform: scale(1.1);
        box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.5);
        border-color: #2ecc71;
    }
    70% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #2ecc71;
        border-color: #e94560;
    }
}

/* Пульсация при удалении типа */
.type-icon-item.removing {
    animation: typeRemovedPulse 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes typeRemovedPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #e74c3c;
    }
    40% {
        transform: scale(0.92);
        box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.4);
        border-color: #e74c3c;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #e74c3c;
        border-color: #e94560;
    }
}
/* ============================================
   ЗАКРУЧЕННАЯ АНИМАЦИЯ ДЛЯ СЛУЧАЙНОГО ПОКЕМОНА
   ============================================ */

/* Анимация для имени - закручивается сверху */
.random-name-animate {
    animation: randomNameTwist 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards !important;
}

@keyframes randomNameTwist {
    0% {
        opacity: 0;
        transform: translateY(-30px) rotateX(-90deg);
        letter-spacing: 8px;
    }
    50% {
        opacity: 0.7;
        transform: translateY(5px) rotateX(10deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
        letter-spacing: normal;
    }
}

/* Анимация для описания - закручивается изнутри */
.random-desc-animate {
    animation: randomDescTwist 0.45s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards !important;
}

@keyframes randomDescTwist {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
        filter: blur(4px);
    }
    40% {
        transform: scale(1.02) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
        filter: blur(0);
    }
}

/* Анимация для картинки - вылетает с вращением */
.random-image-animate {
    animation: randomImageTwist 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards !important;
}

@keyframes randomImageTwist {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-180deg);
    }
    40% {
        transform: scale(1.05) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* Анимация для области загрузки */
.random-upload-animate {
    animation: randomUploadPulse 0.4s ease-out forwards !important;
}

@keyframes randomUploadPulse {
    0% {
        transform: scale(0.95);
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.5);
    }
    50% {
        transform: scale(1.02);
        border-color: #ff6b81;
        box-shadow: 0 0 0 8px rgba(233, 69, 96, 0.2);
    }
    100% {
        transform: scale(1);
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

/* Анимация для типов - закрученная */
.type-icon-item.random-type-animate {
    animation: randomTypeTwist 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards !important;
}

@keyframes randomTypeTwist {
    0% {
        opacity: 0;
        transform: rotate(-180deg) scale(0.2);
        filter: blur(4px);
    }
    40% {
        transform: rotate(10deg) scale(1.1);
        filter: blur(0);
    }
    70% {
        transform: rotate(-5deg) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
        filter: blur(0);
    }
}
/* ============================================
   РЕГУЛЯТОР МАСШТАБА ПРЕЗЕНТАЦИИ
   ============================================ */

.pres-zoom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 14px;
    border-radius: 40px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.pres-zoom-btn {
    background: rgba(233, 69, 96, 0.8);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .pres-zoom-btn:hover {
        background: #e94560;
        transform: scale(1.1);
        box-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
    }

    .pres-zoom-btn:active {
        transform: scale(0.95);
    }

.pres-zoom-reset {
    width: auto;
    padding: 0 12px;
    border-radius: 20px;
    font-size: 0.6rem;
}

.pres-zoom-value {
    color: #e94560;
    font-size: 0.7rem;
    font-family: 'Minecraft', monospace;
    min-width: 42px;
    text-align: center;
    font-weight: bold;
}

.pres-volume-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(233, 69, 96, 0.3);
}

.pres-volume-controls i {
    color: #e94560;
    font-size: 0.8rem;
}

.pres-volume-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(233, 69, 96, 0.25);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.pres-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

.pres-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

/* ============================================
   ОКНО РАСКРЫТИЯ ТИПОВ (Один игрок)
   ============================================ */
.type-reveal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.92);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

.type-reveal-overlay.active {
    display: flex !important;
}

.type-reveal-overlay .reveal-title {
    font-family: 'Minecraft', monospace;
    color: #f0f0f0;
    font-size: 2.2rem;
    margin-bottom: 80px;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.6);
    transition: margin-bottom 0.5s ease;
}

.type-reveal-overlay .reveal-title.shrink {
    margin-bottom: 15px;
}

.type-reveal-overlay .reveal-types-row {
    display: flex;
    gap: 30px;
    align-items: center;
    transform: scale(1.5);
    margin-bottom: 20px;
    transition: transform 0.5s ease, margin-bottom 0.5s ease;
}

.type-reveal-overlay .reveal-types-row.shrink {
    transform: scale(0.7);
    margin-bottom: 0;
}

.type-reveal-overlay .reveal-type-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 30px;
    border-radius: 20px;
    background: rgba(15, 52, 96, 0.6);
    border: 2px solid rgba(233, 69, 96, 0.5);
    animation: typePopIn 0.4s ease backwards;
}

.type-reveal-overlay .reveal-type-item:nth-child(2) {
    animation-delay: 0.15s;
}

.type-reveal-overlay .reveal-type-item img {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 10px rgba(233, 69, 96, 0.5));
}

.type-reveal-overlay .reveal-type-item span {
    font-family: 'Minecraft', monospace;
    color: #e0e0e0;
    font-size: 1.1rem;
    text-transform: capitalize;
}

@keyframes typePopIn {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.reveal-pokemon-container {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
}

.reveal-pokemon-container.show {
    opacity: 1;
    transform: translateY(0);
}

.reveal-pokemon-container img {
    width: 360px;
    height: 360px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(233, 69, 96, 0.5));
    animation: typePopIn 0.5s ease;
}

.reveal-pokemon-name {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 1.5rem;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.4);
    text-transform: capitalize;
}

.reveal-next-btn {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    padding: 14px 40px;
    background: linear-gradient(135deg, #e94560, #c23152);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    margin-top: 30px;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.4s ease 0.8s forwards;
}

.reveal-next-btn:hover {
    background: linear-gradient(135deg, #ff6b81, #e94560);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
}

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

/* ============================================
   МОДАЛЬНОЕ ОКНО ЗАВЕРШЕНИЯ РАУНДА (Один игрок)
   ============================================ */
.completion-single {
    width: 620px !important;
    max-height: 85vh;
    overflow-y: auto;
    padding: 30px 35px !important;
}

.completion-single::-webkit-scrollbar {
    width: 6px;
}
.completion-single::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

.completion-trophy {
    font-size: 2.2rem !important;
    color: #f39c12 !important;
    margin-bottom: 10px !important;
}

.completion-collection {
    font-size: 0.7rem;
    color: #ccc;
    margin-bottom: 15px !important;
}

.completion-mode-label {
    font-size: 0.6rem;
    color: #e94560;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px !important;
}
.completion-collection strong {
    color: #e94560;
}

.completion-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 18px;
    padding: 12px 0;
    background: rgba(233, 69, 96, 0.1);
    border-radius: 15px;
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.completion-score-label {
    font-size: 0.6rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.completion-score-value {
    font-size: 2rem;
    color: #f39c12;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(243, 156, 18, 0.4);
}

.completion-history-list {
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 18px;
    padding-right: 5px;
}
.completion-history-list::-webkit-scrollbar {
    width: 4px;
}
.completion-history-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 2px;
}

.completion-history-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 10px;
    margin-bottom: 6px;
    font-size: 0.65rem;
    border: 1px solid rgba(233, 69, 96, 0.15);
}

.completion-history-num {
    color: #888;
    font-size: 0.6rem;
    min-width: 18px;
    text-align: center;
}

.completion-history-img img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(233, 69, 96, 0.4);
}
.completion-history-img .no-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(233, 69, 96, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 0.8rem;
}

.completion-history-info {
    flex: 1;
    min-width: 0;
}

.completion-history-name {
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.completion-history-types,
.completion-history-guess {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.completion-history-types .label,
.completion-history-guess .label {
    color: #999;
    font-size: 0.55rem;
}

.type-icon-sm {
    width: 20px;
    height: 20px;
}
.type-icon-sm.guessed {
    filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.6));
}
.type-icon-sm.guessed-extra {
    filter: drop-shadow(0 0 4px rgba(241, 196, 15, 0.6));
}

.no-guess {
    color: #777;
    font-style: italic;
    font-size: 0.55rem;
}

.completion-history-earned {
    font-weight: bold;
    font-size: 0.7rem;
    min-width: 35px;
    text-align: right;
}
.completion-history-earned.positive { color: #2ecc71; }
.completion-history-earned.negative { color: #e74c3c; }

.completion-save-block {
    margin-bottom: 12px;
}

.completion-save-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.completion-name-input {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.3s;
    margin-top: 0 !important;
}
.completion-name-input:focus {
    border-color: #e94560;
}
.completion-name-input::placeholder {
    color: #777;
}

.completion-name-clear {
    flex: 0 0 auto;
    background: none !important;
    border: none !important;
    color: #888 !important;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    line-height: 1;
    transition: color 0.2s;
    transform: none !important;
    box-shadow: none !important;
}
.completion-name-clear:hover {
    color: #e94560 !important;
    transform: none !important;
    box-shadow: none !important;
}

.completion-remember {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #aaa;
    font-size: 0.6rem;
    cursor: pointer;
    white-space: nowrap;
    margin-top: 0 !important;
}
.completion-remember input[type="checkbox"] {
    accent-color: #e94560;
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin-top: 0 !important;
}

.completion-desc-input {
    width: 100%;
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.3s;
    margin-top: 10px;
    box-sizing: border-box;
}
.completion-desc-input:focus {
    border-color: #e94560;
}
.completion-desc-input::placeholder {
    color: #777;
}

.completion-save-btn {
    width: 100%;
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    font-size: 0.7rem !important;
}
.completion-save-btn:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4) !important;
}
.completion-save-btn:disabled {
    cursor: default;
}

.completion-close-btn {
    background: linear-gradient(135deg, #1a1a2e, #0f3460) !important;
    border: 1px solid #e94560 !important;
    padding: 8px 25px !important;
    border-radius: 12px !important;
    font-size: 0.65rem !important;
}

/* ============================================
   ВКЛАДКА "ИСТОРИИ РАУНДОВ"
   ============================================ */
.histories-section {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

.hist-mode-switcher {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.hist-mode-btn {
    background: rgba(15, 52, 96, 0.3);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 50px;
    color: rgba(255,255,255,0.6);
    padding: 8px 16px;
    font-size: 0.7rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hist-mode-btn.active {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #e94560;
}

.hist-mode-count {
    font-size: 0.55rem;
    opacity: 0.7;
}

.histories-mode-block {
    display: none;
    background: rgba(15, 52, 96, 0.3);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 20px;
    padding: 20px;
    width: 100%;
}

.histories-mode-block.hist-active {
    display: block;
}

.histories-mode-title {
    color: #e94560;
    font-size: 0.85rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.histories-mode-chevron {
    font-size: 0.6rem;
    color: #888;
    transition: transform 0.3s ease;
}

.histories-mode-block.collapsed .histories-mode-chevron {
    transform: rotate(-90deg);
}

.histories-mode-block.collapsed .history-empty,
.histories-mode-block.collapsed .history-card {
    display: none;
}

.histories-mode-count {
    color: #888;
    font-size: 0.55rem;
    font-style: italic;
}

.history-card {
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 15px;
    margin-bottom: 12px;
    transition: all 0.3s;
    overflow: hidden;
}
.history-card:hover {
    border-color: #e94560;
    box-shadow: 0 4px 20px rgba(233, 69, 96, 0.2);
}

.history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.history-card-header:hover {
    background: rgba(233, 69, 96, 0.05);
}

.history-card-toggle {
    color: #888;
    font-size: 0.6rem;
    margin-left: 8px;
    transition: transform 0.3s;
}
.history-card.expanded .history-card-toggle {
    transform: rotate(180deg);
}

.history-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 15px;
}
.history-card.expanded .history-card-body {
    max-height: 600px;
    padding: 0 15px 15px 15px;
}

.history-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.history-card-name {
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}
.history-card-name:hover {
    color: #e94560;
}

.history-card-desc {
    color: #ccc;
    font-size: 0.6rem;
    font-style: italic;
    cursor: pointer;
    transition: color 0.2s;
    margin-top: 2px;
}
.history-card-desc:hover {
    color: #e94560;
}
.history-card-desc-empty {
    color: #666;
}
.history-card-desc-empty:hover {
    color: #888;
}

.history-edit-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #e94560;
    border-radius: 6px;
    padding: 4px 8px;
    color: #fff;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    outline: none;
    margin-top: 2px;
    box-sizing: border-box;
}

.history-card-collection {
    color: #aaa;
    font-size: 0.6rem;
}

.history-card-date {
    color: #777;
    font-size: 0.55rem;
}

.history-card-score {
    font-size: 1.1rem;
    color: #f39c12;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

.history-card-rounds {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.history-round-pokemon {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 52, 96, 0.5);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.55rem;
    color: #ccc;
}

.history-round-pokemon img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.history-round-types {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.history-round-arrow {
    color: #666;
    font-size: 0.55rem;
    margin: 0 2px;
}

.history-round-guessed .type-icon-sm {
    filter: drop-shadow(0 0 3px rgba(46, 204, 113, 0.5));
}

.history-round-skipped {
    color: #666;
    font-size: 0.5rem;
    font-style: italic;
}

.history-card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.history-card-btn {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #e94560;
    padding: 5px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.3s;
}
.history-card-btn:hover {
    background: #e94560;
    color: #fff;
}
.history-card-btn.delete-btn:hover {
    background: #c0392b;
    border-color: #c0392b;
}

.history-empty {
    color: #666;
    font-size: 0.65rem;
    text-align: center;
    padding: 30px;
    font-style: italic;
}

/* ============================================
   ТАБЛИЦА ЛИДЕРОВ — СТИЛЬ РЕЖИМА РАЗРАБОТЧИКА
   ============================================ */

@keyframes lbPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes lbGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(233,69,96,0.15); }
    50% { box-shadow: 0 0 30px rgba(233,69,96,0.3); }
}

@keyframes lbFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes lbScaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes lbFadeSlide {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.lb-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}

/* ---- Header (dev panel style) ---- */
.lb-header {
    text-align: center;
    padding: 28px 20px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    animation: lbGlow 3s ease-in-out infinite;
}

.lb-header-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(233,69,96,0.06) 0%, transparent 60%);
    animation: lbPulse 4s ease-in-out infinite;
    pointer-events: none;
}

.lb-header i:first-child {
    font-size: 2.2rem;
    color: #e94560;
    margin-bottom: 8px;
    display: block;
    filter: drop-shadow(0 0 10px rgba(233,69,96,0.4));
    animation: lbFloat 3s ease-in-out infinite;
}

.lb-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    color: white;
    margin: 0 0 6px;
    letter-spacing: 1px;
}

.lb-header p {
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
    margin: 0;
}

/* ---- Tabs (dev toggle style) ---- */
.lb-tabs {
    display: flex;
    gap: 4px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 4px;
}

.lb-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.lb-tab:hover {
    color: rgba(255,255,255,0.7);
    background: rgba(233, 69, 96, 0.1);
}

.lb-tab.active {
    color: white;
    background: linear-gradient(135deg, #e94560, #c62a47);
    box-shadow: 0 2px 12px rgba(233, 69, 96, 0.4);
}

.lb-tab i {
    font-size: 0.7rem;
}

/* ---- Tab Content ---- */
.lb-tab-content {
    display: none;
    animation: lbFadeSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lb-tab-content.active {
    display: block;
}

/* ---- Sub-tabs ---- */
.lb-tabs .lb-subtab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.35);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.lb-tabs .lb-subtab:hover {
    color: rgba(255,255,255,0.6);
    background: rgba(233, 69, 96, 0.08);
}

.lb-tabs .lb-subtab.active {
    color: white;
    background: rgba(233, 69, 96, 0.3);
    box-shadow: inset 0 0 10px rgba(233, 69, 96, 0.2);
}

.lb-tabs .lb-subtab i {
    font-size: 0.6rem;
}

.lb-subtab-content {
    animation: lbFadeSlide 0.3s ease;
}

/* ---- Stats Row ---- */
.lb-stats-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.lb-stat-card {
    flex: 1;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 14px 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.lb-stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    transition: left 0.5s;
}

.lb-stat-card:hover::after {
    left: 200%;
}

.lb-stat-card:hover {
    transform: translateY(-3px);
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.25);
}

.lb-stat-card--rounds {
    border-color: rgba(99,144,240,0.4);
}

.lb-stat-card--rounds:hover {
    box-shadow: 0 5px 20px rgba(99,144,240,0.25);
    border-color: #6390f0;
}

.lb-stat-card--perfect {
    border-color: rgba(46,204,113,0.4);
}

.lb-stat-card--perfect:hover {
    box-shadow: 0 5px 20px rgba(46,204,113,0.25);
    border-color: #2ecc71;
}

.lb-stat-card--best {
    border-color: rgba(255,215,0,0.4);
}

.lb-stat-card--best:hover {
    box-shadow: 0 5px 20px rgba(255,215,0,0.25);
    border-color: #ffd700;
}

.lb-stat-icon {
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.lb-stat-card--rounds .lb-stat-icon { color: #6390f0; }
.lb-stat-card--perfect .lb-stat-icon { color: #2ecc71; }
.lb-stat-card--best .lb-stat-icon { color: #ffd700; }

.lb-stat-value {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: white;
    font-weight: bold;
}

.lb-stat-label {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    margin-top: 3px;
}

/* ---- Mode Block ---- */
.lb-mode-block {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    padding: 22px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
}

.lb-mode-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
}

.lb-mode-block--speed::before { background: linear-gradient(90deg, #f7d02c, #ee8130); }
.lb-mode-block--check::before { background: linear-gradient(90deg, #2ecc71, #3498db); }
.lb-mode-block--single::before { background: linear-gradient(90deg, #e94560, #d63384); }

.lb-mode-block:hover {
    border-color: rgba(233, 69, 96, 0.35);
}

/* ---- Podium ---- */
.lb-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 0 0;
}

.lb-podium-item {
    text-align: center;
    padding: 14px 10px 10px;
    border-radius: 16px 16px 0 0;
    position: relative;
    min-width: 80px;
    animation: lbScaleIn 0.5s ease backwards;
    transition: all 0.3s;
}

.lb-podium-item:hover {
    transform: translateY(-4px);
}

.lb-podium-first {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(255,215,0,0.5);
    border-bottom: none;
    padding-top: 18px;
    order: 2;
    animation-delay: 0.1s;
}

.lb-podium-first:hover {
    box-shadow: 0 5px 20px rgba(255,215,0,0.25);
    border-color: #ffd700;
}

.lb-podium-second {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(192,192,192,0.4);
    border-bottom: none;
    order: 1;
    animation-delay: 0.2s;
}

.lb-podium-second:hover {
    box-shadow: 0 5px 20px rgba(192,192,192,0.2);
    border-color: #c0c0c0;
}

.lb-podium-third {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(205,127,50,0.4);
    border-bottom: none;
    order: 3;
    animation-delay: 0.3s;
}

.lb-podium-third:hover {
    box-shadow: 0 5px 20px rgba(205,127,50,0.2);
    border-color: #cd7f32;
}

.lb-podium-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    border: 2px solid rgba(233,69,96,0.3);
}

.lb-podium-first .lb-podium-avatar { background: linear-gradient(135deg, #ffd700, #ffaa00); box-shadow: 0 0 12px rgba(255,215,0,0.5); border-color: #ffd700; }
.lb-podium-second .lb-podium-avatar { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); box-shadow: 0 0 12px rgba(192,192,192,0.4); border-color: #c0c0c0; }
.lb-podium-third .lb-podium-avatar { background: linear-gradient(135deg, #cd7f32, #b87333); box-shadow: 0 0 12px rgba(205,127,50,0.4); border-color: #cd7f32; }

.lb-podium-medal {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.lb-podium-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    margin: 0 auto;
    letter-spacing: 0.5px;
}

.lb-podium-score {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #e94560;
    font-weight: bold;
    margin-top: 4px;
}

.lb-guest-tag {
    display: inline-block;
    font-size: 0.5rem;
    background: rgba(255,255,255,0.15);
    color: #ccc;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 1px 4px;
    margin-left: 3px;
    vertical-align: middle;
    font-family: 'Minecraft', monospace;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.lb-guest-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: #666;
    border: 1px solid #444;
    border-radius: 50%;
    font-size: 8px;
    line-height: 14px;
    text-align: center;
    color: #ccc;
    font-weight: bold;
}

/* ---- Category ---- */
.lb-category {
    background: #1a1a2e;
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 14px;
    margin-bottom: 12px;
    transition: all 0.3s;
}

.lb-category:hover {
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.15);
}

.lb-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e94560;
}

.lb-category-label {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 0.7rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 1px;
}

.lb-category-label i {
    font-size: 0.6rem;
    opacity: 0.7;
}

.lb-category-count {
    color: rgba(255,255,255,0.3);
    font-size: 0.5rem;
    font-family: 'Minecraft', monospace;
}

/* ---- Rows ---- */
.lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    margin-bottom: 4px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.lb-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background 0.3s;
}

.lb-row:hover {
    background: rgba(233, 69, 96, 0.08);
    border-color: rgba(233, 69, 96, 0.2);
    transform: translateX(3px);
}

.lb-row:hover::before {
    background: #e94560;
}

.lb-medal {
    font-size: 1.1rem;
    min-width: 30px;
    text-align: center;
    animation: lbFloat 2s ease-in-out infinite;
}

.lb-rank {
    color: rgba(255,255,255,0.3);
    font-size: 0.65rem;
    min-width: 30px;
    text-align: center;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
}

.lb-row-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lb-row-name {
    color: white;
    font-size: 0.68rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Minecraft', monospace;
}

.lb-row-meta {
    color: rgba(255,255,255,0.3);
    font-size: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-row-score {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 0.8rem;
    font-weight: bold;
    min-width: 50px;
    text-align: right;
    text-shadow: 0 0 8px rgba(233,69,96,0.3);
}

/* ---- Best ---- */
.lb-category-best {
    margin-top: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 1px solid rgba(255,165,0,0.3);
    border-radius: 10px;
    color: #ffa500;
    font-size: 0.55rem;
    text-align: center;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s;
}

.lb-category-best:hover {
    border-color: #ffa500;
    box-shadow: 0 3px 12px rgba(255,165,0,0.2);
}

.lb-category-best i {
    margin-right: 4px;
    filter: drop-shadow(0 0 4px rgba(255,165,0,0.4));
}

/* ---- Horizontal Scroll Row ---- */
.lb-scroll-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 2px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.lb-scroll-row::-webkit-scrollbar { height: 5px; }
.lb-scroll-row::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.lb-scroll-row::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.3); border-radius: 4px; }
.lb-scroll-row::-webkit-scrollbar-thumb:hover { background: rgba(233,69,96,0.6); }

.lb-scroll-card {
    flex: 0 0 130px;
    scroll-snap-align: start;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    transition: all 0.3s;
    position: relative;
}
.lb-scroll-card:first-child {
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
}
.lb-scroll-card:nth-child(2) {
    border-color: rgba(192, 192, 192, 0.4);
}
.lb-scroll-card:nth-child(3) {
    border-color: rgba(205, 127, 50, 0.4);
}
.lb-scroll-card:hover {
    transform: translateY(-3px);
    border-color: rgba(233, 69, 96, 0.5);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.2);
}

.lb-scroll-medal {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.5));
}
.lb-scroll-rank {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    font-weight: 700;
}

.lb-scroll-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e94560, #c23152);
    border: 2px solid rgba(233, 69, 96, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    position: relative;
}
.lb-scroll-card:first-child .lb-scroll-avatar {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255,215,0,0.5);
}
.lb-scroll-card:nth-child(2) .lb-scroll-avatar {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    border-color: #c0c0c0;
    box-shadow: 0 0 12px rgba(192,192,192,0.4);
}
.lb-scroll-card:nth-child(3) .lb-scroll-avatar {
    background: linear-gradient(135deg, #cd7f32, #b87333);
    border-color: #cd7f32;
    box-shadow: 0 0 12px rgba(205,127,50,0.4);
}

.lb-scroll-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: visible !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}
.lb-scroll-meta {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
}
.lb-scroll-score {
    font-size: 1.1rem;
    font-weight: 900;
    color: #e94560;
    text-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

/* ---- Empty ---- */
.lb-empty {
    color: rgba(255,255,255,0.2);
    font-size: 0.6rem;
    text-align: center;
    padding: 15px;
    font-style: italic;
}

.lb-empty-full {
    text-align: center;
    padding: 50px 20px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px dashed rgba(233, 69, 96, 0.3);
    color: rgba(255,255,255,0.3);
    font-size: 0.7rem;
    line-height: 1.6;
}

.lb-empty-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    color: rgba(233,69,96,0.25);
    animation: lbFloat 3s ease-in-out infinite;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .lb-podium {
        gap: 6px;
    }
    .lb-podium-item {
        min-width: 60px;
        padding: 10px 6px;
    }
    .lb-podium-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
    .lb-scroll-card {
        flex: 0 0 110px;
        padding: 10px 8px;
    }
    .lb-scroll-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }
    .lb-scroll-score {
        font-size: 0.95rem;
    }
    .lb-stats-row {
        gap: 6px;
    }
    .lb-stat-card {
        padding: 10px 6px;
    }
}

/* ============================================
   МОДАЛЬНЫЕ ОКНА НАСТРОЙКИ РЕЖИМОВ
   ============================================ */
.mode-setup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.92);
    z-index: 1000002 !important;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}
.mode-setup-overlay.active {
    display: flex !important;
}

.mode-setup-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 30px;
    padding: 35px 40px;
    text-align: center;
    color: white;
    width: 420px;
    max-width: 90%;
    box-shadow: 0 0 70px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}

.mode-setup-modal h2 {
    color: #e94560;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.mode-setup-desc {
    font-size: 0.65rem;
    color: #bbb;
    margin-bottom: 20px;
    line-height: 1.5;
}

.mode-setup-options {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mode-setup-btn {
    background: rgba(15, 52, 96, 0.6);
    border: 2px solid rgba(233, 69, 96, 0.4);
    color: white;
    padding: 12px 20px;
    border-radius: 15px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 70px;
}
.mode-setup-btn:hover {
    background: #e94560;
    border-color: #e94560;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
}

.mode-setup-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.mode-setup-custom label {
    color: #aaa;
    font-size: 0.6rem;
}

.mode-setup-input {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    width: 100px;
    text-align: center;
    outline: none;
}
.mode-setup-input:focus {
    border-color: #e94560;
}

.mode-setup-go-btn {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s;
}
.mode-setup-go-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(233, 69, 96, 0.4);
}

.mode-setup-cancel {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #999;
    padding: 8px 20px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s;
}
.mode-setup-cancel:hover {
    border-color: #e94560;
    color: #e94560;
}

/* ============================================
   ТАЙМЕР "НА СКОРОСТЬ!"
   ============================================ */
.speed-timer-overlay {
    display: none;
}
.speed-timer-overlay.active {
    display: block !important;
}

.speed-timer-inline {
    display: none;
}
.speed-timer-inline.active {
    display: inline-flex !important;
    align-items: center;
}

.speed-timer-value {
    background: rgba(15, 52, 96, 0.85);
    backdrop-filter: blur(15px);
    border: 2px solid #e94560;
    border-radius: 40px;
    padding: 4px 16px;
    font-size: 0.85rem;
    color: #fff;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.6);
    box-shadow: 0 0 30px rgba(233, 69, 96, 0.3);
    transition: all 0.3s;
    white-space: nowrap;
}

.speed-timer-value.warning {
    border-color: #f39c12;
    color: #f39c12;
    text-shadow: 0 0 15px rgba(243, 156, 18, 0.6);
    box-shadow: 0 0 30px rgba(243, 156, 18, 0.3);
    animation: timerPulse 1s infinite;
}

.speed-timer-value.danger {
    border-color: #e74c3c;
    color: #e74c3c;
    text-shadow: 0 0 15px rgba(231, 76, 60, 0.6);
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.3);
    animation: timerPulse 0.5s infinite;
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   СКРОЛЛ-БАРЫ ДЛЯ МОДАЛОК
   ============================================ */
.mode-setup-modal::-webkit-scrollbar {
    width: 5px;
}
.mode-setup-modal::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

/* ============================================
   УВЕДОМЛЕНИЕ ТИПОВ "НА СКОРОСТЬ!" (сверху по центру)
   ============================================ */
.speed-type-notification {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(-30px);
    z-index: 1000003 !important;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    backdrop-filter: blur(20px);
    border: 2px solid #e94560;
    border-radius: 20px;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Minecraft', monospace;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 30px rgba(233, 69, 96, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.speed-type-notification.active {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

.speed-type-label {
    color: #ccc;
    font-size: 0.65rem;
    white-space: nowrap;
}

.speed-type-icons {
    display: flex;
    gap: 10px;
}

.speed-type-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 5px 10px;
    animation: speedTypePop 0.3s ease backwards;
}

.speed-type-item:nth-child(2) {
    animation-delay: 0.1s;
}

.speed-type-item img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 6px rgba(233, 69, 96, 0.4));
}

.speed-type-item span {
    color: #fff;
    font-size: 0.6rem;
    text-transform: capitalize;
}

@keyframes speedTypePop {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* ============================================
   МОДАЛЬНОЕ ОКНО ПОДТВЕРЖДЕНИЯ ВЫХОДА
   ============================================ */
.exit-confirm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.85);
    z-index: 1000002 !important;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}

.exit-confirm-overlay.active {
    display: flex !important;
}

.exit-confirm-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    text-align: center;
    color: white;
    width: 380px;
    max-width: 90%;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}

.exit-confirm-modal i {
    font-size: 2rem;
    color: #f39c12;
    margin-bottom: 12px;
}

.exit-confirm-modal h3 {
    color: #e94560;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.exit-confirm-modal p {
    color: #bbb;
    font-size: 0.6rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.exit-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.exit-confirm-btn {
    padding: 10px 22px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.exit-confirm-btn.yes {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}
.exit-confirm-btn.yes:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.5);
}

.exit-confirm-btn.no {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: white;
}
.exit-confirm-btn.no:hover {
    background: #e94560;
    transform: scale(1.05);
}

/* ============================================
   МОДАЛЬНОЕ ОКНО ОЧИСТКИ СЛУЧАЙНЫХ КОЛЛЕКЦИЙ
   ============================================ */
.clear-random-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 1000002 !important;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}

.clear-random-overlay.active {
    display: flex !important;
}

.clear-random-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    text-align: center;
    color: white;
    width: 500px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}

.clear-random-modal h2 {
    color: #e94560;
    font-size: 1rem;
    margin-bottom: 8px;
}

.clear-random-modal p {
    color: #bbb;
    font-size: 0.6rem;
    margin-bottom: 18px;
}

.clear-random-list {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 18px;
    text-align: left;
}

.clear-random-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 10px;
    margin-bottom: 6px;
    border: 1px solid rgba(233, 69, 96, 0.15);
    cursor: pointer;
    transition: all 0.3s;
}

.clear-random-item:hover {
    border-color: #e94560;
}

.clear-random-item.excluded {
    opacity: 0.4;
    border-color: rgba(46, 204, 113, 0.4);
}

.clear-random-item input[type="checkbox"] {
    accent-color: #2ecc71;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.clear-random-item-name {
    flex: 1;
    font-size: 0.65rem;
    color: #ddd;
}

.clear-random-item-count {
    font-size: 0.55rem;
    color: #888;
}

.clear-random-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.clear-random-btn {
    padding: 10px 20px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.clear-random-btn.delete {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}
.clear-random-btn.delete:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.5);
}

.clear-random-btn.cancel {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: white;
}
.clear-random-btn.cancel:hover {
    background: #e94560;
    transform: scale(1.05);
}

.clear-random-modal::-webkit-scrollbar {
    width: 5px;
}
.clear-random-modal::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

.collection-picker-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}
.collection-picker-overlay.active {
    display: flex !important;
}
.collection-picker-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    text-align: center;
    color: white;
    width: 420px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}
.collection-picker-modal h2 {
    color: #e94560;
    font-size: 1rem;
    margin-bottom: 18px;
}
.collection-picker-list {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 18px;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: #e94560 transparent;
}
.collection-picker-list::-webkit-scrollbar {
    width: 5px;
}
.collection-picker-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}
.collection-picker-list::-webkit-scrollbar-track {
    background: transparent;
}
.collection-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.collection-picker-item:hover {
    background: rgba(15, 52, 96, 0.7);
    border-color: rgba(233, 69, 96, 0.3);
    transform: translateX(4px);
}
.collection-picker-item.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
}
.collection-picker-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: all 0.2s;
}
.collection-picker-item.active .dot {
    background: #e94560;
}
.collection-picker-item .name {
    flex: 1;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.collection-picker-item.active .name {
    color: #e94560;
}
.collection-picker-item .count {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.6rem;
    flex-shrink: 0;
}
.collection-picker-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.collection-picker-btn {
    padding: 10px 20px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.collection-picker-btn.cancel {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    width: 100%;
}
.collection-picker-btn.cancel:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
    color: #e94560;
}
.collection-picker-modal::-webkit-scrollbar {
    width: 5px;
}
.collection-picker-modal::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.leaderboard-launch-section {
    grid-column: 1 / -1;
    text-align: center;
    padding: 28px 20px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
}

.leaderboard-launch-title {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 0.85rem;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.leaderboard-launch-subtitle {
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
    margin-bottom: 20px;
}

.leaderboard-launch-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.leaderboard-launch-btn {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 25px 35px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s;
    min-width: 140px;
}

.leaderboard-launch-btn:hover {
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.25);
    transform: translateY(-3px);
}

.leaderboard-launch-count {
    font-size: 1.8rem;
    color: #e94560;
    font-weight: bold;
}

.leaderboard-launch-label {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    margin-top: 5px;
}

.leaderboard-launch-custom {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.leaderboard-launch-custom-label {
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
}

.leaderboard-launch-custom-input {
    width: 80px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 8px 12px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    text-align: center;
    outline: none;
    transition: all 0.3s;
}

.leaderboard-launch-custom-input:focus {
    border-color: #ff6b81;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
}

.leaderboard-launch-custom-input::placeholder {
    color: #555;
}

.leaderboard-launch-custom-btn {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    border-radius: 12px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.leaderboard-launch-custom-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 12px rgba(233, 69, 96, 0.4);
}

@keyframes modalZoomIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== DATABASE TAB ===== */

/* Анимации для базы данных */
@keyframes dbCardIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dbHeaderGlow {
    0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 20px rgba(233,69,96,0.1); }
    50% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 40px rgba(233,69,96,0.25); }
}

@keyframes dbStatCount {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes dbDetailIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes dbOverlayIn {
    from { opacity: 0; backdrop-filter: blur(0px); }
    to { opacity: 1; backdrop-filter: blur(6px); }
}

@keyframes dbShine {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes dbStatBarGrow {
    from { width: 0; }
}

@keyframes dbPillPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233,69,96,0.4); }
    50% { box-shadow: 0 0 0 4px rgba(233,69,96,0); }
}

/* Заголовок базы данных */
.db-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding: 24px 30px;
    background: linear-gradient(135deg, rgba(15,52,96,0.6), rgba(26,26,46,0.6));
    border-radius: 20px;
    border: 1px solid rgba(233,69,96,0.2);
    backdrop-filter: blur(12px);
    animation: dbHeaderGlow 4s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.db-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(233,69,96,0.08), transparent);
    animation: dbShine 6s ease-in-out infinite;
}

.db-header-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(233,69,96,0.4);
}

.db-header-text {
    flex: 1;
}

.db-header-text h2 {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 1.2rem;
    margin-bottom: 4px;
    text-shadow: 0 0 15px rgba(233,69,96,0.4);
    letter-spacing: 1px;
}

.db-header-text p {
    font-family: 'Minecraft', monospace;
    color: rgba(255,255,255,0.5);
    font-size: 0.6rem;
    letter-spacing: 0.5px;
}

.db-header-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    margin-right: 4px;
}

.db-chart-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.6);
    color: rgba(255,255,255,0.85);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.db-chart-btn i {
    color: #e94560;
    font-size: 0.8rem;
}

.db-chart-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: white;
    box-shadow: 0 4px 12px rgba(233,69,96,0.25);
}

.db-header-stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.db-header-stat {
    text-align: center;
    padding: 10px 18px;
    background: rgba(0,0,0,0.3);
    border-radius: 14px;
    border: 1px solid rgba(233,69,96,0.15);
    min-width: 80px;
}

.db-header-stat-value {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 1.3rem;
    color: #e94560;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(233,69,96,0.4);
    animation: dbStatCount 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.db-header-stat-label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
    letter-spacing: 1px;
}
.db-autoscroll-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}
.db-autoscroll-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(233,69,96,0.4);
    background: rgba(15,52,96,0.6);
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.db-autoscroll-btn:hover {
    background: rgba(233,69,96,0.3);
    border-color: #e94560;
}
.db-autoscroll-btn.active {
    background: #e94560;
    border-color: #e94560;
    animation: autoScrollPulse 1.5s infinite;
}
@keyframes autoScrollPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233,69,96,0.4); }
    50% { box-shadow: 0 0 12px 4px rgba(233,69,96,0.3); }
}
.db-autoscroll-speed {
    display: flex;
    align-items: center;
    gap: 4px;
}
.db-autoscroll-speed input[type="range"] {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    outline: none;
}
.db-autoscroll-speed input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    cursor: pointer;
}
.db-autoscroll-speed span {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    min-width: 12px;
    text-align: center;
}

/* Панель управления */
.db-controls {
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(15,52,96,0.3);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
}

.db-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.db-search-wrapper {
    flex: 1;
    min-width: 220px;
    position: relative;
}

.db-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
    transition: color 0.3s;
    pointer-events: none;
}

.db-search-wrapper:focus-within .db-search-icon {
    color: #e94560;
}

.db-search-input {
    width: 100%;
    padding: 12px 40px 12px 40px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.5);
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.db-search-input:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.15), 0 4px 12px rgba(0,0,0,0.2);
    background: rgba(15,52,96,0.7);
}

.db-search-input::placeholder { color: rgba(255,255,255,0.3); }

.db-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.5);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.db-search-clear:hover {
    background: rgba(233,69,96,0.4);
    color: white;
}

.db-sort-select {
    padding: 12px 18px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.5);
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    outline: none;
    transition: all 0.3s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.db-sort-select:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.15);
}

.db-sort-select option { background: #1a1a2e; color: white; }

.db-view-toggle { display: flex; gap: 4px; }

.db-view-btn {
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.5);
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.db-view-btn:hover {
    color: white;
    border-color: rgba(233,69,96,0.4);
    background: rgba(233,69,96,0.1);
}

.db-view-btn.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: white;
    border-color: #e94560;
    box-shadow: 0 4px 12px rgba(233,69,96,0.3);
}

/* Подвкладки БД */
.db-subtabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 16px;
    padding: 8px;
    background: rgba(15,52,96,0.25);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}
.db-subtabs .db-view-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    font-size: 0.85rem;
    font-family: 'Minecraft', monospace;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.db-subtabs .db-view-btn i { font-size: 0.95rem; }

/* Сетка способностей */
.db-abil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.db-abil-card {
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 18px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: dbCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
    cursor: default;
}
.db-abil-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e94560, #ff6b9d);
    opacity: 0.5;
}
.db-abil-card:hover {
    transform: translateY(-3px);
    border-color: rgba(233,69,96,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.db-abil-names {
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
    width: fit-content;
    transition: all 0.2s ease;
}
.db-abil-names:hover .db-abil-name-ru {
    color: #e94560;
    text-decoration: underline;
}
.db-abil-name-ru {
    color: #fff;
    font-size: 0.95rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
}
.db-abil-name-en {
    color: rgba(255,255,255,0.4);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.db-abil-desc { margin-top: 10px; color: rgba(255,255,255,0.85); font-size: 0.72rem; line-height: 1.6; }
.db-abil-holders { margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.06); }
.db-abil-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    margin: -2px -8px 0;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.45);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-align: left;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.db-abil-toggle i { font-size: 0.5rem; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
.db-abil-toggle .db-abil-count {
    margin-left: auto;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(233,69,96,0.15);
    color: #ff8ba0;
    font-size: 0.55rem;
}
.db-abil-toggle:hover { color: #fff; background: rgba(233,69,96,0.08); }
.db-abil-holders.open .db-abil-toggle { color: #fff; }
.db-abil-holders.open .db-abil-toggle i { transform: rotate(90deg); }
.db-abil-collapse {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.db-abil-holders.open .db-abil-collapse { display: grid; animation: dbCardIn 0.3s ease backwards; }
.db-abil-holders-modal {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(72px, 86px)) !important;
    gap: 8px !important;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px 4px;
}
.db-abil-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 6px 4px 6px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.6);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.db-abil-holder:hover {
    border-color: #ff4757;
    background: rgba(255, 71, 87, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.25);
}
.db-abil-holder-img {
    width: 52px;
    height: 52px;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    padding: 2px;
    flex-shrink: 0;
}
.db-abil-holder-dex {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.52rem;
    font-family: 'Minecraft', monospace;
    line-height: 1;
}
.db-abil-holder-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.56rem;
    font-family: 'Minecraft', monospace;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Сетка движений (Компактный вид по умолчанию + Режим постера) */
.db-moves-view-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}
.db-moves-view-modes {
    display: inline-flex;
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 3px;
    gap: 4px;
}
.db-view-mode-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 5px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-view-mode-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.db-view-mode-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #e94560, #c23152);
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
}

.db-moves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.db-moves-grid.db-moves-grid-poster {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

/* 1. Классическая компактная карточка (Основной вид) */
.db-move-card {
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 18px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: dbCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
    cursor: default;
    display: flex;
    flex-direction: column;
}
.db-move-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--card-accent, #888), transparent);
    opacity: 0.6;
}
.db-move-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.db-move-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}
.db-move-typecat {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.08);
}
.db-move-tc-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.db-move-type-img, .db-move-cat-img { width: 26px; height: 26px; object-fit: contain; }
.db-move-type-name {
    color: rgba(255,255,255,0.9);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.db-move-names {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-move-names:hover .db-move-name-ru {
    color: #e94560;
    text-decoration: underline;
}
.db-move-name-ru {
    color: #fff;
    font-size: 0.95rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    text-align: center;
    white-space: normal;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
    line-height: 1.25;
    max-width: 100%;
}
.db-move-name-en {
    color: rgba(255,255,255,0.4);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
}
.db-move-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.db-move-cat-label {
    color: rgba(255,255,255,0.55);
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.db-move-gen {
    margin-left: auto;
    color: rgba(255,255,255,0.35);
    font-size: 0.58rem;
    font-family: 'Minecraft', monospace;
}
.db-move-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
}
.db-move-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
.db-move-stat i { color: var(--card-accent, #888); font-size: 0.7rem; opacity: 0.8; }
.db-move-stat b { color: #fff !important; font-size: 0.85rem; font-family: 'Minecraft', monospace; }
.db-move-stat b .db-move-pp-max {
    font-size: 0.52rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.65);
    margin-left: 2px;
}
.db-move-stat span { color: rgba(255,255,255,0.35); font-size: 0.52rem; font-family: 'Minecraft', monospace; text-transform: uppercase; letter-spacing: 0.03em; }

/* 2. Карточка-постер (Вид по шаблону) */
.db-moves-grid.db-moves-grid-poster {
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 24px;
}
@media (max-width: 540px) {
    .db-moves-grid.db-moves-grid-poster {
        grid-template-columns: 1fr;
    }
}
.db-move-card.db-move-card-poster {
    background-color: var(--card-accent, #777);
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.15) 100%), var(--card-accent, #777);
    border: 4px solid #ffffff;
    border-radius: 26px;
    padding: 16px 20px 20px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.45), inset 0 2px 6px rgba(255,255,255,0.75);
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}
.db-move-card.db-move-card-poster::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--type-icon-url);
    background-repeat: repeat;
    background-size: 52px 52px;
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
    height: auto;
}
.db-move-card.db-move-card-poster:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 14px 34px rgba(0,0,0,0.55), inset 0 2px 6px rgba(255,255,255,0.9);
}
.db-mcard-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
}
.db-mcard-title {
    position: relative;
    z-index: 1;
    font-family: 'Minecraft', monospace;
    font-size: 1.45rem;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
    cursor: pointer;
    transition: transform 0.2s ease, text-shadow 0.2s ease;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        0 2.5px 0 #000,
        0 -2px 0 #000,
        2px 0 0 #000,
        -2px 0 0 #000,
        0 4px 6px rgba(0,0,0,0.8);
}
.db-mcard-title:hover {
    transform: scale(1.03);
    text-shadow:
        -2px -2px 0 #e94560,
        2px -2px 0 #e94560,
        -2px 2px 0 #e94560,
        2px 2px 0 #e94560,
        0 3px 8px rgba(233, 69, 96, 0.85);
}
.db-mcard-tags {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
.db-mcard-body {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 14px;
    align-items: stretch;
    justify-content: space-between;
    flex: 1;
}
.db-mcard-info-box {
    flex: 1;
    min-width: 0;
    background: var(--card-dark-accent-grad, linear-gradient(180deg, #2b1218 0%, #1e0a0f 100%));
    border: 3px solid #ffffff;
    border-radius: 18px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 3px 10px rgba(0,0,0,0.3);
    overflow: hidden;
}
.db-mcard-stats-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.2fr;
    gap: 6px;
    align-items: flex-start;
}
.db-mcard-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    min-width: 0;
}
.db-mcard-stat-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: var(--card-stat-lbl-color, #ffb3b8);
    white-space: nowrap;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.db-mcard-stat-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        0 2px 0 #000,
        0 -2px 0 #000,
        2px 0 0 #000,
        -2px 0 0 #000,
        0 3px 5px rgba(0,0,0,0.85);
}
.db-mcard-pp-max {
    font-size: 0.52rem;
    font-weight: normal;
    color: #ffffff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    margin-left: 2px;
}
.db-mcard-desc-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.db-mcard-desc {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: #ffffff;
    text-align: center;
    line-height: 1.38;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0,0,0,0.9);
}
.db-mcard-extras {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.db-mcard-extra-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 1px 6px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
}
.db-mcard-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-shrink: 0;
    width: 148px;
}
.db-mcard-type-pill {
    border-radius: 999px;
    border: 3.5px solid #ffffff;
    padding: 6px 12px;
    background: var(--card-accent, #777);
    box-shadow: 0 4px 10px rgba(0,0,0,0.22), inset 0 2px 4px rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-mcard-type-txt {
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow:
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px 1.5px 0 #000,
        1.5px 1.5px 0 #000,
        0 1.5px 0 #000,
        0 -1.5px 0 #000,
        1.5px 0 0 #000,
        -1.5px 0 0 #000,
        0 2px 4px rgba(0,0,0,0.85);
    white-space: nowrap;
    display: block;
    letter-spacing: 0.02em;
    line-height: 1;
}
.db-mcard-cat-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 46px;
}
.db-mcard-cat-img {
    width: 70px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}
.db-mcard-side-extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-top: 2px;
}
.db-mcard-extra-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    padding: 2px 7px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
}
.db-mcard-extra-pill.tag {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    padding: 2.5px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.7);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 18%, rgba(15, 23, 42, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 55%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--pill-color, #FF0045) 20%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    transition: all 0.2s ease;
}
.db-mcard-extra-pill.tag i {
    font-size: 0.6rem;
    color: var(--pill-color, #ffffff);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--pill-color, #ffffff) 80%, transparent));
}
.db-mcard-extra-pill.tag:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 28%, rgba(15, 23, 42, 0.85));
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 80%, transparent);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--pill-color, #FF0045) 40%, transparent);
}

/* Модалка движения */
.db-move-detail-table { display: flex; flex-direction: column; gap: 6px; }
.db-move-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(15,52,96,0.3);
}
.db-move-detail-label {
    color: rgba(255,255,255,0.5);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    white-space: nowrap;
}
.db-move-detail-value {
    color: #fff;
    font-size: 0.78rem;
    font-family: 'Minecraft', monospace;
    text-align: right;
    margin-left: auto;
    word-break: break-word;
}

/* Фильтры */
.db-filters-section {
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-filter-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.db-mode-toggle {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.db-mode-btn {
    padding: 4px 12px;
    border: none;
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.db-mode-btn:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.06);
}

.db-mode-btn.active {
    background: #e94560;
    color: white;
}

.db-mode-btn:hover:not(.active) {
    background: rgba(233,69,96,0.2);
    color: rgba(255,255,255,0.7);
}

.db-pill.active.multi {
    background: rgba(233,69,96,0.6);
    border-color: #e94560;
}

.db-filters-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.db-filters-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-filters-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-filter-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-filter-label {
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    white-space: nowrap;
    letter-spacing: 0.5px;
    min-width: 110px;
    flex-shrink: 0;
}

.db-filter-label i {
    color: #e94560;
    margin-right: 3px;
    font-size: 0.55rem;
}

.db-filter-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.db-type-pills {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.db-type-pills .db-pill {
    padding: 6px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-transform: capitalize;
    aspect-ratio: 3/2;
}

.db-type-pills .db-pill img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    border-radius: 50%;
}

.db-pill {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.db-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(233,69,96,0.2), transparent);
    opacity: 0;
    transition: opacity 0.25s;
}

.db-pill:hover {
    background: rgba(233,69,96,0.2);
    color: white;
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-1px);
}

.db-pill:hover::after { opacity: 1; }

.db-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: white;
    border-color: #e94560;
    box-shadow: 0 2px 10px rgba(233,69,96,0.3);
    animation: dbPillPulse 2s ease-in-out infinite;
}

/* Контент */
.db-content {
    min-height: 200px;
}

/* Карточки */
.db-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.db-card {
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 18px;
    cursor: default;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: dbCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.db-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--card-accent, #e94560), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.db-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    transition: left 0.6s;
    pointer-events: none;
}

.db-card:hover {
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3), 0 0 20px rgba(233,69,96,0.1);
}

.db-card:hover::before { opacity: 1; }
.db-card:hover::after { left: 200%; }

.db-card-top {
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
}

.db-card-img {
    width: 75px;
    height: 75px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
    flex-shrink: 0;
    transition: all 0.3s;
}

.db-card:hover .db-card-img {
    transform: scale(1.08);
    filter: drop-shadow(0 5px 12px rgba(233,69,96,0.3));
}

.db-card-info { flex: 1; min-width: 0; }

.db-card-id {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1px;
}

.db-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: white;
    margin: 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
.db-card-name:hover {
    color: #e94560;
    text-decoration: underline;
}
.db-card-img {
    cursor: pointer;
    transition: transform 0.2s ease;
}
.db-card-img:hover {
    transform: scale(1.08);
}

.db-card-engname {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.3);
    margin-bottom: 5px;
    font-style: italic;
}

.db-card-types {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.db-card-type-badge {
    padding: 3px 10px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: white;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: transform 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.1);
}

.db-card-type-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
    border-radius: 3px;
}

.db-card:hover .db-card-type-badge {
    transform: scale(1.05);
}

.db-card-stats-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 10px;
    margin-bottom: 8px;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}

.db-stat-item {
    display: flex;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: rgba(255,255,255,0.5);
}

.db-stat-item span:last-child {
    color: white;
    font-weight: bold;
}

.db-stat-total {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 4px;
    margin-top: 2px;
}

.db-stat-total span:last-child {
    color: #e94560 !important;
}

.db-card-abilities {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.5;
    margin-bottom: 6px;
}

.db-card-abilities b { color: rgba(255,255,255,0.6); }

.db-abil-mini {
    cursor: pointer;
    color: inherit;
    transition: color .15s;
}

.db-abil-mini:hover {
    color: #ff8ba0;
}

.db-card-tags {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.db-tag {
    padding: 2px 7px;
    border-radius: 5px;
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
    transition: all 0.2s;
}

.db-card:hover .db-tag {
    background: rgba(233,69,96,0.1);
    color: rgba(255,255,255,0.6);
}

/* Таблица */
.db-table-wrapper {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(15,52,96,0.2);
}

.db-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: white;
    table-layout: fixed;
}

.db-table th {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, #1a1a2e, rgba(26,26,46,0.95));
    padding: 12px 8px;
    text-align: left;
    color: #e94560;
    border-bottom: 2px solid rgba(233,69,96,0.3);
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}

/* Ширина колонок */
.th-id { width: 60px; }
.th-img { width: 48px; }
.th-name { width: 140px; }
.th-types { width: 70px; }
.th-stat { width: 44px; text-align: center; }
.th-total { width: 50px; text-align: center; }
.th-abilities { width: 200px; }
.th-tags { width: 110px; }

.db-table th:hover {
    color: white;
    background: rgba(233,69,96,0.15);
}

.db-table td {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
    transition: background 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-table .td-id {
    color: rgba(255,255,255,0.4);
    text-align: center;
    padding-left: 8px;
}

.db-table .td-stat {
    text-align: center;
    font-size: 0.56rem;
    padding: 8px 4px;
}

.db-table .td-total {
    text-align: center;
    color: #e94560;
    font-weight: bold;
    padding: 8px 4px;
}

.db-table .td-abilities {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.5);
    overflow: hidden;
}

.db-abs-grid {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.db-abs-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.db-abs-col span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.db-abs-sep {
    color: rgba(255,255,255,0.15);
    flex-shrink: 0;
}

.db-abs-empty {
    color: rgba(255,255,255,0.15);
}

.db-table .td-tags {
    max-width: 0;
}

.db-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.db-tags-grid .db-move-meta-tag {
    font-size: 0.58rem;
    padding: 1.5px 6px;
    gap: 3.5px;
}
.db-tags-grid .db-move-meta-tag i {
    font-size: 0.55rem;
}

.db-table .db-tag {
    display: block;
    padding: 1px 4px;
    border-radius: 3px;
    font-family: 'Minecraft', monospace;
    font-size: 0.42rem;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.4;
    max-width: 44px;
}

.db-table tr {
    transition: all 0.2s;
}

.db-table tbody tr:hover td {
    background: rgba(15,52,96,0.3);
}

.db-table tbody tr:hover {
    box-shadow: inset 3px 0 0 #e94560;
}

.db-table-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
    border-radius: 8px;
    transition: transform 0.2s;
}

.db-table tbody tr:hover .db-table-img {
    transform: scale(1.15);
}

.db-table-types {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.db-table-type-wrap {
    position: relative;
    display: inline-flex;
    cursor: help;
}

.db-table-type-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
    border-radius: 4px;
    transition: transform 0.2s;
}

.db-table-type-wrap:hover .db-table-type-icon {
    transform: scale(1.3);
}

.db-floating-tip {
    display: none;
    position: absolute;
    background: #16213e;
    color: white;
    font-size: 0.55rem;
    padding: 3px 10px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 999999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    border: 1px solid rgba(233,69,96,0.4);
    text-transform: capitalize;
    font-family: 'Minecraft', monospace;
}

.cstm-confirm-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Minecraft', monospace;
}
.cstm-confirm-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    min-width: 320px;
    max-width: 420px;
    text-align: center;
    color: white;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}
.cstm-confirm-icon {
    font-size: 1.5rem;
    color: #e94560;
    margin-bottom: 10px;
}
.cstm-confirm-msg {
    color: #bbb;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    line-height: 1.5;
    margin-bottom: 22px;
}
.cstm-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.cstm-confirm-btn {
    padding: 10px 24px;
    border-radius: 12px;
    border: none;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}
.cstm-confirm-yes {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}
.cstm-confirm-yes:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.5);
}
.cstm-confirm-no {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: white;
}
.cstm-confirm-no:hover {
    background: #e94560;
    transform: scale(1.05);
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.db-table-name-cell {
    white-space: nowrap;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-table-desc {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255,255,255,0.35);
    font-size: 0.55rem;
}

/* Детальное модальное окно */
.db-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: dbOverlayIn 0.3s ease-out;
    backdrop-filter: blur(6px);
}

.db-detail-modal {
    background: linear-gradient(145deg, #16213e, #1a1a2e);
    border: 1px solid var(--modal-border, rgba(233,69,96,0.3));
    border-radius: 22px;
    padding: 32px;
    max-width: 620px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    animation: dbDetailIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 40px var(--modal-glow, rgba(233,69,96,0.15));
    scrollbar-color: var(--modal-accent, rgba(255, 255, 255, 0.25)) rgba(26, 26, 46, 0.5);
}

.db-detail-modal::-webkit-scrollbar {
    width: 6px;
}
.db-detail-modal::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
    margin: 12px 0;
}
.db-detail-modal::-webkit-scrollbar-thumb {
    background: var(--modal-accent, rgba(255, 255, 255, 0.25));
    border-radius: 3px;
    transition: background 0.2s ease;
}
.db-detail-modal::-webkit-scrollbar-thumb:hover {
    background: var(--modal-accent-hover, var(--modal-accent, rgba(255, 255, 255, 0.45)));
}

.db-status-detail-modal,
.db-field-detail-modal,
.db-gimmick-detail-modal,
.db-type-detail-modal,
.db-adv-detail-modal {
    border: 1px solid var(--modal-border, rgba(255, 255, 255, 0.15)) !important;
    border-top: 4px solid var(--modal-accent, #9c88ff) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px var(--modal-glow, rgba(255, 255, 255, 0.1)) !important;
}

.db-status-detail-modal .db-detail-section-title,
.db-field-detail-modal .db-detail-section-title,
.db-gimmick-detail-modal .db-detail-section-title,
.db-type-detail-modal .db-detail-section-title,
.db-adv-detail-modal .db-detail-section-title {
    color: var(--modal-accent, #00cec9) !important;
    border-bottom: 1px solid var(--modal-border, rgba(255, 255, 255, 0.12)) !important;
}

.db-status-detail-modal .db-detail-close:hover,
.db-field-detail-modal .db-detail-close:hover,
.db-gimmick-detail-modal .db-detail-close:hover,
.db-type-detail-modal .db-detail-close:hover,
.db-adv-detail-modal .db-detail-close:hover {
    color: white !important;
    background: var(--modal-border, rgba(255, 255, 255, 0.15)) !important;
    border-color: var(--modal-accent, #00cec9) !important;
}

.db-detail-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.db-detail-close:hover {
    color: white;
    background: rgba(233,69,96,0.4);
    border-color: #e94560;
    transform: rotate(90deg);
}

.db-detail-top {
    display: flex;
    gap: 22px;
    margin-bottom: 22px;
    align-items: flex-start;
}

.db-detail-img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
    border-radius: 20px;
    background: rgba(0,0,0,0.2);
    padding: 10px;
    transition: transform 0.3s;
}

.db-detail-img:hover {
    transform: scale(1.05);
}

.db-detail-info { flex: 1; }

.db-detail-id {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1px;
}

.db-detail-name {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    color: white;
    margin: 5px 0;
    text-shadow: 0 0 10px rgba(233,69,96,0.3);
}

.db-detail-engname {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    margin-bottom: 10px;
    font-style: italic;
}

.db-detail-types {
    display: flex;
    gap: 7px;
    margin-bottom: 10px;
}

.db-detail-type-badge {
    padding: 5px 14px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: white;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: transform 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.1);
}

.db-detail-type-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
    border-radius: 4px;
}

.db-detail-type-badge:hover {
    transform: scale(1.08);
}

.db-detail-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.db-detail-section {
    margin-bottom: 16px;
    padding: 14px;
    background: rgba(0,0,0,0.15);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.04);
}

.db-detail-section-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(233,69,96,0.15);
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}

.db-detail-section-title i {
    font-size: 0.6rem;
}

.db-detail-desc {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.6;
}

.db-detail-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-detail-stat {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 12px;
    background: rgba(15,52,96,0.4);
    border-radius: 8px;
    transition: all 0.2s;
    gap: 8px;
}

.db-detail-stat:hover {
    background: rgba(15,52,96,0.6);
}

.db-detail-stat .label { color: rgba(255,255,255,0.45); text-align: right; }

.stat-bar-wrap {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}

.stat-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.db-detail-stat .value { color: white; font-weight: bold; min-width: 30px; text-align: right; }

.db-detail-stat.total {
    grid-column: 1 / -1;
    text-align: center;
    background: linear-gradient(135deg, rgba(233,69,96,0.15), rgba(233,69,96,0.08));
    border: 1px solid rgba(233,69,96,0.2);
    padding: 8px;
}

.db-detail-stat.total .value {
    color: #e94560;
    font-size: 0.85rem;
    text-shadow: 0 0 8px rgba(233,69,96,0.4);
}

.db-detail-abilities { line-height: 1.9; }

.db-detail-efx { display: flex; flex-direction: column; gap: 6px; }
.efx-grid { display: flex; flex-direction: column; gap: 6px; }
.efx-group { display: flex; align-items: center; gap: 8px; }
.efx-label {
    min-width: 32px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    font-weight: bold;
    flex-shrink: 0;
}
.efx-types {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.efx-type-chip {
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    white-space: nowrap;
}

.db-detail-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 12px 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.25s;
}
.db-detail-download:hover {
    background: rgba(233,69,96,0.15);
    border-color: rgba(233,69,96,0.4);
    color: white;
}

.db-detail-ability {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.65);
    padding: 3px 0;
}

.db-detail-ability .db-abil-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: color .15s;
}

.db-detail-ability .db-abil-link:hover {
    color: #ff8ba0;
}

.db-detail-ability b { color: white; }
.db-detail-ability .hidden-label {
    color: #e94560;
    font-size: 0.52rem;
    font-style: italic;
}

.db-detail-holders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 12px;
    max-height: 330px;
    overflow-y: auto;
    padding-right: 4px;
}

.db-abil-scale-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.45);
    margin-right: 2px;
}

.db-abil-scale {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.85);
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    transition: all .15s;
}

.db-abil-scale:hover {
    background: rgba(255,255,255,0.12);
}

.db-abil-scale.active {
    border-color: #e94560;
    background: rgba(233,69,96,0.18);
    color: #ff8ba0;
}

.db-loading {
    text-align: center;
    padding: 60px;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
}

.db-loading i {
    margin-right: 8px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.db-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.3);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
}

.db-empty i {
    display: block;
    font-size: 2rem;
    margin-bottom: 15px;
    color: rgba(233,69,96,0.3);
}

/* Адаптив для базы данных */
@media (max-width: 768px) {
    .db-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px;
    }

    .db-header-stats {
        width: 100%;
        justify-content: center;
    }

    .db-header-text h2 {
        font-size: 1rem;
    }

    .db-cards {
        grid-template-columns: 1fr;
    }

    .db-search-row {
        flex-direction: column;
    }

    .db-search-wrapper {
        min-width: auto;
    }

    .db-sort-select {
        width: 100%;
    }

    .db-filter-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .db-filters-columns {
        grid-template-columns: 1fr;
    }

    .db-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .db-table {
        table-layout: auto;
        min-width: 700px;
    }

    .db-detail-modal {
        padding: 20px;
        border-radius: 18px;
    }

    .db-detail-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .db-detail-types,
    .db-detail-tags {
        justify-content: center;
    }
}

/* ============================================
   ВКЛАДКА: ПОМОЩЬ С ПРОЕКТОМ
   ============================================ */

#tabHelp h2 {
    font-family: 'Minecraft', monospace;
    color: white;
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

/* ========================================
   HELP TAB — SUPER DESIGN
   ======================================== */

/* Hero */
.help-hero {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 15px 25px;
    background: rgba(15, 52, 96, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 20px;
    margin-bottom: 16px;
}

.help-hero-icon {
    font-size: 1.2rem;
    color: #e94560;
    flex-shrink: 0;
}

.help-hero h2 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    color: white;
    margin: 0;
}

.help-hero p {
    color: rgba(255,255,255,0.4);
    font-size: 0.65rem;
    margin: 0 0 0 auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
    flex: 1 1 100%;
}

/* Cards */
.help-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 900px;
    margin: 0 auto 24px;
}

.help-card {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    padding: 24px 18px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.help-card:nth-child(1) { animation-delay: 0.1s; }
.help-card:nth-child(2) { animation-delay: 0.2s; }
.help-card:nth-child(3) { animation-delay: 0.3s; }

.help-card-shine {
    display: none;
}

.help-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #e94560, #c62a47);
    opacity: 0.6;
    transition: opacity 0.3s;
}

.help-card:hover::before {
    opacity: 1;
}

.help-card:hover {
    transform: translateY(-3px);
    border-color: rgba(233, 69, 96, 0.4);
    box-shadow: 0 8px 25px rgba(233, 69, 96, 0.1);
}

.help-card-icon {
    font-size: 1.8rem;
    margin-bottom: 12px;
    position: relative;
    transition: transform 0.3s;
    color: #e94560;
    filter: drop-shadow(0 0 8px rgba(233,69,96,0.3));
}

.help-card:hover .help-card-icon {
    transform: scale(1.1);
}

.help-card-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: white;
    margin-bottom: 6px;
    position: relative;
}

.help-card-desc {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.5;
    position: relative;
}

.help-card-arrow {
    margin-top: 12px;
    color: rgba(255,255,255,0.15);
    font-size: 0.7rem;
    transition: all 0.3s;
    position: relative;
}

.help-card:hover .help-card-arrow {
    color: #e94560;
    transform: translateX(4px);
}

/* Submissions Button */
.help-submissions-wrap {
    text-align: center;
    margin-bottom: 20px;
}

.help-submissions-btn {
    padding: 10px 24px;
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.help-submissions-btn:hover {
    border-color: #e94560;
    color: white;
    box-shadow: 0 4px 20px rgba(233,69,96,0.15);
    transform: translateY(-2px);
}

/* Submissions Tabs */
.help-sub-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    padding: 4px;
}

.help-sub-tab {
    flex: 1;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.help-sub-tab:hover {
    color: rgba(255,255,255,0.7);
    background: rgba(233,69,96,0.08);
}

.help-sub-tab.active {
    background: rgba(233,69,96,0.2);
    color: white;
}

.help-sub-tab i {
    font-size: 0.5rem;
}

/* Submission Items */
.help-submission-item {
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.15);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    position: relative;
    transition: border-color 0.2s;
}

.help-submission-item:hover {
    border-color: rgba(233,69,96,0.3);
}

.help-submission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.help-submission-type {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

.help-submission-date {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.25);
}

.help-submission-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
}

.help-submission-details b {
    color: white;
}

.help-submission-reply {
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.7);
}

.help-submission-reply i {
    color: #3498db;
    margin-right: 4px;
}

.help-submission-reply b {
    color: #3498db;
}

.help-submission-delete {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.15);
    cursor: pointer;
    font-size: 0.6rem;
    padding: 4px;
    transition: color 0.2s;
    border-radius: 6px;
}

.help-submission-delete:hover {
    color: #e74c3c;
    background: rgba(231,76,60,0.1);
}

/* Forms */
.help-form {
    max-width: 700px;
    margin: 0 auto;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    overflow: hidden;
}

.help-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 2px solid #e94560;
}

.help-form-header h3 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-form-header h3 i {
    color: #e94560;
}

.help-close-btn {
    background: #c0392b;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 0.7rem;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.help-close-btn:hover {
    background: #e74c3c;
    transform: translateY(-2px);
}

.help-form-body {
    padding: 22px;
}

.help-form-body label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #e94560;
    margin-bottom: 6px;
    margin-top: 16px;
}

.help-form-body label:first-child {
    margin-top: 0;
}

.help-input,
.help-textarea,
.help-select {
    width: 100%;
    padding: 10px 14px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    transition: all 0.25s;
    box-sizing: border-box;
}

.help-input:focus,
.help-textarea:focus,
.help-select:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.15);
}

.help-textarea {
    resize: vertical;
    min-height: 80px;
}

.help-select {
    cursor: pointer;
}

.help-select option {
    background: #1a1a2e;
    color: white;
}

/* Фильтры в форме идеи */
.help-filters-section {
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 12px;
    padding: 15px;
    margin-top: 6px;
}

.help-filter-group {
    margin-bottom: 12px;
}

.help-filter-group:last-child {
    margin-bottom: 0;
}

.help-filter-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-bottom: 8px;
}

.help-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.help-filter-tag {
    padding: 5px 12px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
}

.help-filter-tag:hover {
    border-color: #e94560;
    color: white;
}

.help-filter-tag.selected {
    background: #e94560;
    border-color: #e94560;
    color: white;
}

/* Чипсы покемонов */
.help-pokemon-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.help-pokemon-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
}

.help-pokemon-chip .remove-chip {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
}

.help-pokemon-chip .remove-chip:hover {
    color: #e94560;
}

.help-add-pokemon-btn {
    background: rgba(233, 69, 96, 0.1);
    border: 1px dashed rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
}

.help-add-pokemon-btn:hover {
    border-color: #e94560;
    color: white;
}

/* Mechanics Grid */
.help-mechanics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}

.help-mech-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0 !important;
}

.help-mech-check:hover {
    border-color: rgba(233,69,96,0.5);
    background: rgba(233,69,96,0.08);
    color: rgba(255,255,255,0.8);
}

.help-mech-check input {
    display: none;
}

.help-mech-box {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(233,69,96,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    background: rgba(233,69,96,0.05);
    transition: all 0.25s;
    flex-shrink: 0;
    position: relative;
}

.help-mech-check input:checked ~ .help-mech-box {
    background: rgba(233,69,96,0.25);
    border-color: #e94560;
    color: #e94560;
}

.help-mech-check input:checked ~ .help-mech-box i {
    display: none;
}

.help-mech-check input:checked ~ .help-mech-box::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: #e94560;
}

.help-mech-check input:checked ~ *:last-child {
    color: white;
}

.help-mech-check--other {
    grid-column: 1 / -1;
}

/* Submit Button */
.help-submit-btn {
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    background: #2ecc71;
    border: none;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.help-submit-btn:hover {
    background: #27ae60;
    transform: translateY(-2px);
}

/* Селектор покемона */
.help-pokemon-selector {
    position: relative;
}

.help-pokemon-list {
    max-height: 260px;
    overflow-y: auto;
    background: #1a1a2e;
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 10px;
    margin-top: 6px;
}

.help-pokemon-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.help-pokemon-item:hover {
    background: rgba(233, 69, 96, 0.15);
}

.help-pokemon-item img {
    width: 30px;
    height: 30px;
}

.help-pokemon-item .name {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: white;
}

.help-pokemon-item .engname {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

.help-selected-pokemon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 10px;
    margin-top: 6px;
}

.help-selected-pokemon img {
    width: 40px;
    height: 40px;
}

/* Чекбоксы */
.help-replace-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.help-replace-options .help-check-label {
    margin: 0 !important;
    min-height: 36px;
    font-size: 0.62rem;
}

.help-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0;
    min-height: 36px;
    box-sizing: border-box;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s;
}

.help-check-label:hover {
    border-color: rgba(233,69,96,0.5);
    background: rgba(233,69,96,0.08);
    color: white;
}

.help-check-label:has(input:checked) {
    border-color: #e94560;
    background: rgba(233,69,96,0.15);
    color: white;
}

.help-check-label input[type="checkbox"] {
    accent-color: #e94560;
    width: 14px;
    height: 14px;
}

/* Модалка выбора покемона для идеи */
.help-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-picker-modal {
    background: rgba(15, 52, 96, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 16px;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.help-picker-modal h3 {
    font-family: 'Minecraft', monospace;
    color: white;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* Секции редактирования */
.help-edit-section {
    margin-top: 10px;
    padding: 10px 12px;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    animation: helpFadeIn 0.25s ease;
}

.help-edit-section label {
    margin-top: 0 !important;
    font-size: 0.6rem !important;
    margin-bottom: 4px !important;
}

.help-edit-section .help-input,
.help-edit-section .help-textarea {
    padding: 7px 10px;
    font-size: 0.65rem;
}

.help-name-row {
    display: flex;
    gap: 8px;
}

.help-name-field {
    flex: 1;
}

.help-name-field label {
    display: block;
    margin-bottom: 3px !important;
}

/* Сетка иконок типов */
.help-type-icons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.help-type-icons-grid .type-icon-item {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 30, 60, 0.5);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0.5;
}

.help-type-icons-grid .type-icon-item:hover {
    opacity: 0.8;
    transform: scale(1.08);
}

.help-type-icons-grid .type-icon-item.selected {
    opacity: 1;
    border-color: white;
    background: linear-gradient(135deg, #e94560, #c62a47);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.4);
}

.help-type-icons-grid .type-icon-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.help-selected-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.help-selected-type-tag {
    padding: 4px 12px;
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(233, 69, 96, 0.3);
    border: 1px solid rgba(233, 69, 96, 0.4);
}

.help-selected-type-tag .remove-type {
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.7rem;
}

.help-selected-type-tag .remove-type:hover {
    opacity: 1;
}

/* Сетка статов */
.help-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
}

.help-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.help-stat-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.5);
    min-width: 45px;
}

.help-stat-input {
    flex: 1;
    padding: 5px 8px;
    background: rgba(10,30,60,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    outline: none;
    width: 50px;
}

.help-stat-input:focus {
    border-color: rgba(233,69,96,0.5);
}

/* Abilities grid */
.help-abs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.help-abs-item label {
    font-size: 0.55rem !important;
    margin-bottom: 3px !important;
}

.help-abs-item .help-input {
    padding: 5px 8px;
    font-size: 0.6rem;
}

/* ==================== НОВЫЙ РЕЖИМ РАЗРАБОТЧИКА ==================== */

@keyframes devnewGlow {
    0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 20px rgba(233,69,96,0.1); }
    50% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 40px rgba(233,69,96,0.25); }
}

@keyframes devnewShine {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes devnewFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes devnewCardIn {
    from { opacity: 0; transform: translateY(15px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes devnewPillPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233,69,96,0.3); }
    50% { box-shadow: 0 0 0 4px rgba(233,69,96,0); }
}

@keyframes devnewStatPop {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes devnewFadeSlide {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes devnewTypeGlow {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46,204,113,0.6); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(46,204,113,0.2); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}

@keyframes devnewTypeRemove {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231,76,60,0.5); }
    40% { transform: scale(0.88); box-shadow: 0 0 0 4px rgba(231,76,60,0.3); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231,76,60,0); }
}

/* ===== Hero Header ===== */
.dn-hero {
    text-align: center;
    padding: 30px 20px 24px;
    background: linear-gradient(135deg, rgba(15,52,96,0.6), rgba(26,26,46,0.7));
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.2);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    animation: devnewGlow 4s ease-in-out infinite;
}

.dn-hero::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(233,69,96,0.06), transparent);
    animation: devnewShine 6s ease-in-out infinite;
}

.dn-hero-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: white;
    box-shadow: 0 6px 20px rgba(233,69,96,0.4);
    margin-bottom: 12px;
    animation: devnewFloat 3s ease-in-out infinite;
    position: relative; z-index: 1;
}

.dn-hero h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem; color: white;
    text-shadow: 0 0 20px rgba(233,69,96,0.4);
    margin-bottom: 4px;
    position: relative; z-index: 1;
}

.dn-hero p {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: rgba(255,255,255,0.4);
    position: relative; z-index: 1;
}

.dn-hero-stats {
    display: flex; gap: 12px; justify-content: center;
    margin-top: 16px;
    position: relative; z-index: 1;
}

.dn-hero-stat {
    text-align: center;
    padding: 8px 16px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    border: 1px solid rgba(233,69,96,0.12);
    min-width: 70px;
}

.dn-hero-stat-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem; color: #e94560; font-weight: bold;
    text-shadow: 0 0 8px rgba(233,69,96,0.3);
    animation: devnewStatPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dn-hero-stat-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem; color: rgba(255,255,255,0.35);
    letter-spacing: 0.5px;
}

/* ===== Toolbar ===== */
.dn-toolbar {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    padding: 14px 18px;
    background: rgba(15,52,96,0.3);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
}

.dn-toolbar-group {
    display: flex; gap: 6px; align-items: center;
}

.dn-toolbar-sep {
    width: 1px; height: 24px;
    background: rgba(233,69,96,0.2);
    margin: 0 4px;
}

.dn-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.4);
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
    white-space: nowrap;
}

.dn-pill:hover {
    background: rgba(233,69,96,0.15);
    color: white;
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-1px);
}

.dn-pill i { font-size: 0.6rem; }

.dn-pill--accent {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: white;
    border-color: #e94560;
}
.dn-pill--accent:hover {
    box-shadow: 0 4px 14px rgba(233,69,96,0.35);
    transform: translateY(-2px);
}

.dn-pill--green { border-color: rgba(46,204,113,0.3); }
.dn-pill--green:hover { background: rgba(46,204,113,0.15); border-color: rgba(46,204,113,0.5); }

.dn-pill--purple { border-color: rgba(155,89,182,0.3); }
.dn-pill--purple:hover { background: rgba(155,89,182,0.15); border-color: rgba(155,89,182,0.5); }

.dn-pill--orange { border-color: rgba(243,156,18,0.3); }
.dn-pill--orange:hover { background: rgba(243,156,18,0.15); border-color: rgba(243,156,18,0.5); }

.dn-pill--blue { border-color: rgba(52,152,219,0.3); }
.dn-pill--blue:hover { background: rgba(52,152,219,0.15); border-color: rgba(52,152,219,0.5); }

.dn-pill--red { border-color: rgba(231,76,60,0.3); }
.dn-pill--red:hover { background: rgba(231,76,60,0.15); border-color: rgba(231,76,60,0.5); }

.dn-pill--teal { border-color: rgba(22,160,133,0.3); }
.dn-pill--teal:hover { background: rgba(22,160,133,0.15); border-color: rgba(22,160,133,0.5); }

.dn-select {
    padding: 7px 12px;
    background: rgba(26,26,46,0.8);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 10px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    min-width: 160px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.dn-select:focus {
    border-color: #e94560;
    outline: none;
}

/* ===== Main Layout ===== */
.dn-main {
    display: flex; gap: 20px; align-items: stretch;
    flex-wrap: wrap;
}

/* ===== Editor Panel ===== */
.dn-editor {
    flex: 2; min-width: 340px;
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px;
    padding: 22px;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    transition: border-color 0.3s;
}

.dn-editor:hover {
    border-color: rgba(233,69,96,0.2);
}

.dn-editor-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem; color: white;
    padding-bottom: 12px; margin-bottom: 18px;
    border-bottom: 2px solid rgba(233,69,96,0.3);
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}

.dn-editor-title i { color: #e94560; }

/* Upload area */
.dn-upload {
    width: 200px; min-height: 200px;
    background: #1a1a2e;
    border: 2px dashed rgba(233,69,96,0.35);
    border-radius: 16px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative; overflow: hidden;
    flex-shrink: 0;
}

.dn-upload:hover {
    border-color: #e94560;
    background: rgba(26,26,46,0.9);
    box-shadow: 0 0 20px rgba(233,69,96,0.1);
}

.dn-upload-icon {
    font-size: 2rem; color: #e94560;
    margin-bottom: 8px;
    transition: transform 0.3s;
}

.dn-upload:hover .dn-upload-icon { transform: scale(1.1); }

.dn-upload-text {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.4);
}

.dn-upload-img {
    width: 100%; max-height: 180px;
    object-fit: contain; border-radius: 12px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
    transition: filter 0.3s;
}

.dn-upload-img:hover {
    filter: drop-shadow(0 6px 18px rgba(233,69,96,0.3));
}

/* Editor form fields */
.dn-editor-body {
    display: flex; gap: 20px; margin-bottom: 20px;
}

.dn-editor-fields { flex: 1; }

.dn-field-label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.dn-field-label i { color: #e94560; margin-right: 4px; }

.dn-input {
    width: 100%;
    padding: 9px 14px;
    background: rgba(10,20,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    transition: all 0.25s;
    box-sizing: border-box;
}

.dn-input:focus {
    border-color: rgba(233,69,96,0.5);
    box-shadow: 0 0 0 3px rgba(233,69,96,0.1), 0 2px 8px rgba(0,0,0,0.2);
    outline: none;
}

.dn-input::placeholder { color: rgba(255,255,255,0.2); }

.dn-textarea {
    width: 100%;
    padding: 9px 14px;
    background: rgba(10,20,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    resize: vertical;
    min-height: 80px;
    transition: all 0.25s;
    box-sizing: border-box;
}

.dn-textarea:focus {
    border-color: rgba(233,69,96,0.5);
    box-shadow: 0 0 0 3px rgba(233,69,96,0.1), 0 2px 8px rgba(0,0,0,0.2);
    outline: none;
}

.dn-textarea::placeholder { color: rgba(255,255,255,0.2); }

/* Type grid */
.dn-types-section {
    margin-bottom: 20px;
}

.dn-types-grid {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 4px 0;
}

.dn-type-item {
    width: 80px;
    text-align: center;
    padding: 8px 4px 6px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10,20,40,0.4);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
}

.dn-type-item:hover {
    border-color: rgba(233,69,96,0.3);
    transform: translateY(-2px);
    background: rgba(233,69,96,0.08);
}

.dn-type-item img {
    width: 42px; height: 42px; object-fit: contain;
    transition: transform 0.2s;
}

.dn-type-item:hover img { transform: scale(1.1); }

.dn-type-item span {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.45rem;
    color: rgba(255,255,255,0.5);
    margin-top: 3px;
}

.dn-type-item.selected {
    border-color: rgba(46,204,113,0.5);
    background: rgba(46,204,113,0.12);
    animation: devnewTypeGlow 0.35s ease;
}

.dn-type-item.selected span { color: #2ecc71; }

.dn-type-item.removing {
    animation: devnewTypeRemove 0.3s ease;
}

/* Action buttons row */
.dn-actions {
    display: flex; gap: 12px;
    margin-top: auto; padding-top: 14px;
}

.dn-btn {
    flex: 1;
    padding: 11px 16px;
    border: none; border-radius: 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: white;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

.dn-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

.dn-btn--save {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    box-shadow: 0 4px 12px rgba(46,204,113,0.25);
}
.dn-btn--save:hover { box-shadow: 0 6px 18px rgba(46,204,113,0.35); }

.dn-btn--delete {
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    box-shadow: 0 4px 12px rgba(231,76,60,0.25);
}
.dn-btn--delete:hover { box-shadow: 0 6px 18px rgba(231,76,60,0.35); }

/* ===== List Panel ===== */
.dn-list {
    flex: 1; min-width: 260px;
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px;
    padding: 22px;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    transition: border-color 0.3s;
}

.dn-list:hover {
    border-color: rgba(233,69,96,0.2);
}

.dn-list-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem; color: white;
    padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 2px solid rgba(233,69,96,0.3);
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}

.dn-list-title i { color: #e94560; }

.dn-list-scroll {
    flex: 1;
    display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
}

.dn-list-scroll::-webkit-scrollbar { width: 5px; }
.dn-list-scroll::-webkit-scrollbar-track { background: transparent; }
.dn-list-scroll::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.3); border-radius: 10px; }

/* Pokemon cards in list */
.dn-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(15,52,96,0.4), rgba(26,26,46,0.5));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
    animation: devnewCardIn 0.35s ease backwards;
}

.dn-card::before {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    transition: left 0.5s;
}

.dn-card:hover {
    border-color: rgba(233,69,96,0.3);
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.dn-card:hover::before { left: 200%; }

.dn-card.active {
    border-color: rgba(233,69,96,0.5);
    background: linear-gradient(135deg, rgba(233,69,96,0.12), rgba(26,26,46,0.5));
    box-shadow: 0 0 15px rgba(233,69,96,0.1);
}

.dn-card-img {
    width: 46px; height: 46px;
    object-fit: cover; border-radius: 10px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.dn-card-placeholder {
    width: 46px; height: 46px;
    background: rgba(26,26,46,0.8);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.dn-card-placeholder i { font-size: 1.2rem; color: #e94560; }

.dn-card-info { flex: 1; min-width: 0; }

.dn-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem; color: white; font-weight: bold;
    white-space: normal; word-break: break-word;
    line-height: 1.3;
    transition: color 0.2s;
}

.dn-card.active .dn-card-name {
    background: linear-gradient(135deg, #ffd700, #f39c12);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dn-card-types {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem; color: rgba(233,69,96,0.7);
    margin-top: 3px;
}

/* Clear empty button */
.dn-clear-btn {
    margin-top: 14px;
    padding: 9px 14px;
    background: rgba(243,156,18,0.15);
    border: 1px solid rgba(243,156,18,0.25);
    border-radius: 12px;
    color: rgba(243,156,18,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.25s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

.dn-clear-btn:hover {
    background: rgba(243,156,18,0.25);
    border-color: rgba(243,156,18,0.4);
    color: #f39c12;
}

/* ===== Background Manager ===== */
.dn-bg-manager {
    margin-top: 20px;
    padding: 18px;
    background: linear-gradient(145deg, rgba(15,52,96,0.4), rgba(26,26,46,0.5));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
}

.dn-bg-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem; color: #e94560;
    padding-bottom: 8px; margin-bottom: 12px;
    border-bottom: 1px solid rgba(233,69,96,0.2);
    display: flex; align-items: center; gap: 6px;
}

.dn-bg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.dn-bg-card {
    position: relative; border-radius: 12px; overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.06);
    aspect-ratio: 16/9;
    transition: all 0.3s;
}

.dn-bg-card:hover {
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.dn-bg-card.active {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233,69,96,0.3);
}

.dn-bg-card img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.dn-bg-card .dn-bg-delete {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px;
    background: rgba(231,76,60,0.8);
    border: none; border-radius: 50%;
    color: white; font-size: 0.6rem;
    cursor: pointer;
    display: none; align-items: center; justify-content: center;
    transition: background 0.2s;
}

.dn-bg-card .dn-bg-rename {
    position: absolute; top: 4px; right: 30px;
    width: 22px; height: 22px;
    background: rgba(233,69,96,0.8);
    border: none; border-radius: 50%;
    color: white; font-size: 0.55rem;
    cursor: pointer;
    display: none; align-items: center; justify-content: center;
    transition: background 0.2s;
}

.dn-bg-card:hover .dn-bg-delete { display: flex; }
.dn-bg-card:hover .dn-bg-rename { display: flex; }
.dn-bg-card .dn-bg-delete:hover { background: #e74c3c; }
.dn-bg-card .dn-bg-rename:hover { background: #e94560; }

.dn-bg-upload {
    border: 2px dashed rgba(233,69,96,0.25);
    border-radius: 12px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    aspect-ratio: 16/9;
    cursor: pointer;
    transition: all 0.3s;
    color: rgba(255,255,255,0.3);
}

.dn-bg-upload:hover {
    border-color: rgba(233,69,96,0.5);
    color: rgba(233,69,96,0.7);
}

.dn-bg-upload i { font-size: 1.3rem; margin-bottom: 4px; }
.dn-bg-upload span { font-family: 'Minecraft', monospace; font-size: 0.48rem; }

.dn-bg-current {
    margin-top: 10px;
    text-align: center;
}

.dn-bg-current-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
}

.dn-bg-current img {
    max-width: 200px; max-height: 100px;
    object-fit: cover; border-radius: 10px;
    border: 1px solid rgba(233,69,96,0.2);
}

/* ===== Modal (new style) ===== */
.dn-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 20000;
    backdrop-filter: blur(6px);
    animation: devnewFadeSlide 0.25s ease;
}

.dn-modal {
    background: linear-gradient(145deg, #16213e, #1a1a2e);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 22px;
    padding: 28px;
    max-width: 500px; width: 92%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 30px rgba(233,69,96,0.1);
    animation: devnewCardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dn-modal h3 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem; color: white;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}

.dn-modal h3 i { color: #e94560; }

.dn-modal-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(10,20,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    margin-bottom: 18px;
    box-sizing: border-box;
}

.dn-modal-input:focus {
    border-color: rgba(233,69,96,0.5);
    outline: none;
}

.dn-modal-actions {
    display: flex; gap: 10px; justify-content: flex-end;
}

.dn-modal-btn {
    padding: 9px 20px;
    border: none; border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: white;
    cursor: pointer;
    transition: all 0.25s;
    display: flex; align-items: center; gap: 6px;
}

.dn-modal-btn:hover { transform: translateY(-2px); }

.dn-modal-btn--confirm {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}
.dn-modal-btn--cancel {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
}
.dn-modal-btn--cancel:hover {
    background: rgba(255,255,255,0.12);
}

/* Template modal (new style) */
.dn-template-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 20000;
    backdrop-filter: blur(6px);
    animation: devnewFadeSlide 0.25s ease;
}

.dn-template-modal {
    background: linear-gradient(145deg, #16213e, #1a1a2e);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 22px;
    padding: 28px;
    max-width: 800px; width: 95%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 30px rgba(233,69,96,0.1);
    animation: devnewCardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dn-template-modal::-webkit-scrollbar { width: 5px; }
.dn-template-modal::-webkit-scrollbar-track { background: transparent; }
.dn-template-modal::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.3); border-radius: 10px; }

.dn-template-modal h3 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem; color: white;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}

.dn-template-modal h3 i { color: #e94560; }

.dn-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 14px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 4px;
}

.dn-template-grid::-webkit-scrollbar { width: 4px; }
.dn-template-grid::-webkit-scrollbar-track { background: transparent; }
.dn-template-grid::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.2); border-radius: 10px; }

.dn-template-card {
    background: linear-gradient(135deg, rgba(15,52,96,0.4), rgba(26,26,46,0.5));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative; overflow: hidden;
}

.dn-template-card:hover {
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.dn-template-card img {
    width: 60px; height: 60px;
    object-fit: contain;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.dn-template-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: white;
}

.dn-template-card-types {
    font-family: 'Minecraft', monospace;
    font-size: 0.45rem; color: rgba(233,69,96,0.6);
    margin-top: 2px;
}

/* ===== Back to Play Button ===== */
.dn-back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: rgba(243,156,18,0.15);
    border: 1px solid rgba(243,156,18,0.3);
    border-radius: 30px;
    color: #f39c12;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.25s;
    margin-bottom: 16px;
}

.dn-back-btn:hover {
    background: rgba(243,156,18,0.25);
    border-color: rgba(243,156,18,0.5);
    transform: translateX(-3px);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .dn-main { flex-direction: column; }
    .dn-editor, .dn-list { min-width: 100%; }
    .dn-hero-stats { flex-wrap: wrap; }
    .dn-toolbar { gap: 6px; }
    .dn-card { padding: 8px 10px; }
    .dn-type-item { width: 65px; }
    .dn-type-item img { width: 36px; height: 36px; }
}

/* ==================== НОВАЯ ТАБЛИЦА ЛИДЕРОВ (СТИЛЬ РЕЖИМА РАЗРАБОТЧИКА) ==================== */

/* Back button */
.lbn-back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: #e67e22;
    border: none; border-radius: 30px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 16px;
}
.lbn-back-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(230,126,34,0.4); }

/* Header */
.lbn-header {
    display: flex; align-items: center; gap: 20px;
    padding: 20px 28px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    margin-bottom: 20px;
}
.lbn-header-icon {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(233,69,96,0.3);
    flex-shrink: 0;
}
.lbn-header-text h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1rem; color: white;
    margin-bottom: 2px;
    letter-spacing: 1px;
}
.lbn-header-text p {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: rgba(255,255,255,0.4);
}

/* Toolbar (tab switcher) */
.lbn-toolbar {
    display: flex; gap: 4px; margin-bottom: 20px;
    background: #1a1a2e;
    padding: 4px;
    border-radius: 12px;
    border: 2px solid #e94560;
    flex-wrap: wrap;
}
.lbn-tab {
    flex: 1;
    padding: 8px 16px;
    border: none; border-radius: 10px;
    background: transparent;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.3s;
}
.lbn-tab:hover { color: rgba(255,255,255,0.7); background: rgba(233, 69, 96, 0.1); }
.lbn-tab.active { color: white; box-shadow: 0 2px 12px rgba(233, 69, 96, 0.4); }
.lbn-tab[data-lbn-tab="speed"].active { background: linear-gradient(135deg, #f39c12, #e67e22); }
.lbn-tab[data-lbn-tab="speed"]:not(.active) { background: rgba(243,156,18,0.15); border: 1px solid rgba(243,156,18,0.3); }
.lbn-tab[data-lbn-tab="check"].active { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.lbn-tab[data-lbn-tab="check"]:not(.active) { background: rgba(46,204,113,0.15); border: 1px solid rgba(46,204,113,0.3); }
.lbn-tab[data-lbn-tab="single"].active { background: linear-gradient(135deg, #e94560, #c62a47); }
.lbn-tab[data-lbn-tab="single"]:not(.active) { background: rgba(233,69,96,0.15); border: 1px solid rgba(233,69,96,0.3); }

/* Tab content */
.lbn-tab-content { display: none; }
.lbn-tab-content.active { display: block; }

/* Mode block */
.lbn-mode-block {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    transition: border-color 0.3s;
}
.lbn-mode-block:hover { border-color: rgba(233, 69, 96, 0.35); }

/* Stats row */
.lbn-stats-row {
    display: flex; gap: 10px; margin-bottom: 16px;
    flex-wrap: wrap;
}
.lbn-stat-card {
    flex: 1; min-width: 100px;
    text-align: center;
    padding: 14px 10px;
    border-radius: 15px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    transition: all 0.3s;
}
.lbn-stat-card:hover { transform: translateY(-3px); border-color: #e94560; box-shadow: 0 5px 20px rgba(233, 69, 96, 0.2); }
.lbn-stat-card--rounds { border-color: rgba(99,144,240,0.4); }
.lbn-stat-card--rounds:hover { box-shadow: 0 5px 20px rgba(99,144,240,0.2); border-color: #6390f0; }
.lbn-stat-card--perfect { border-color: rgba(46,204,113,0.4); }
.lbn-stat-card--perfect:hover { box-shadow: 0 5px 20px rgba(46,204,113,0.2); border-color: #2ecc71; }
.lbn-stat-card--best { border-color: rgba(255,215,0,0.4); }
.lbn-stat-card--best:hover { box-shadow: 0 5px 20px rgba(255,215,0,0.2); border-color: #ffd700; }
.lbn-stat-icon { font-size: 1.1rem; margin-bottom: 6px; }
.lbn-stat-card--rounds .lbn-stat-icon { color: #6390f0; }
.lbn-stat-card--perfect .lbn-stat-icon { color: #2ecc71; }
.lbn-stat-card--best .lbn-stat-icon { color: #ffd700; }
.lbn-stat-value {
    font-family: 'Minecraft', monospace;
    font-size: 1rem; color: white; font-weight: bold;
}
.lbn-stat-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem; color: rgba(255,255,255,0.4);
    margin-top: 3px;
}

/* Category */
.lbn-category {
    background: #1a1a2e;
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 16px;
    margin-bottom: 14px;
    transition: all 0.3s;
}
.lbn-category:last-child { margin-bottom: 0; }
.lbn-category:hover { border-color: #e94560; box-shadow: 0 5px 20px rgba(233, 69, 96, 0.15); }
.lbn-category-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e94560;
}
.lbn-category-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem; color: #e94560; font-weight: bold;
    display: flex; align-items: center; gap: 8px;
    letter-spacing: 1px;
}
.lbn-category-label i { color: #e94560; }
.lbn-category-count {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.35);
}

/* Podium */
.lbn-podium {
    display: flex; justify-content: center; align-items: flex-end;
    gap: 12px; margin-bottom: 16px; padding: 10px 0 0;
}
.lbn-podium-item {
    text-align: center;
    padding: 14px 10px 10px;
    border-radius: 16px 16px 0 0;
    min-width: 80px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    transition: all 0.3s;
}
.lbn-podium-item:hover { transform: translateY(-4px); }
.lbn-podium-first {
    border: 2px solid rgba(255,215,0,0.5); border-bottom: none;
    padding-top: 18px; order: 2;
}
.lbn-podium-first:hover { box-shadow: 0 5px 20px rgba(255,215,0,0.2); border-color: #ffd700; }
.lbn-podium-second {
    border: 2px solid rgba(192,192,192,0.4); border-bottom: none;
    order: 1;
}
.lbn-podium-second:hover { box-shadow: 0 5px 20px rgba(192,192,192,0.15); border-color: #c0c0c0; }
.lbn-podium-third {
    border: 2px solid rgba(205,127,50,0.4); border-bottom: none;
    order: 3;
}
.lbn-podium-third:hover { box-shadow: 0 5px 20px rgba(205,127,50,0.15); border-color: #cd7f32; }
.lbn-podium-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    margin: 0 auto 6px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem; font-weight: bold; color: white;
    border: 2px solid rgba(233,69,96,0.3);
}
.lbn-podium-first .lbn-podium-avatar { background: linear-gradient(135deg, #ffd700, #ffaa00); box-shadow: 0 0 10px rgba(255,215,0,0.4); border-color: #ffd700; }
.lbn-podium-second .lbn-podium-avatar { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); border-color: #c0c0c0; }
.lbn-podium-third .lbn-podium-avatar { background: linear-gradient(135deg, #cd7f32, #b87333); border-color: #cd7f32; }
.lbn-podium-medal { font-size: 1.3rem; margin-bottom: 4px; }
.lbn-podium-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: white; font-weight: bold;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px;
    letter-spacing: 0.5px;
}
.lbn-podium-score {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem; color: #e94560; font-weight: bold;
}

/* Player rows */
.lbn-rows { display: flex; flex-direction: column; gap: 6px; }
.lbn-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
}
.lbn-row:hover {
    background: rgba(233, 69, 96, 0.08);
    border-color: rgba(233, 69, 96, 0.2);
    transform: translateX(3px);
}
.lbn-medal { font-size: 1rem; min-width: 28px; text-align: center; }
.lbn-rank {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem; color: rgba(255,255,255,0.35);
    min-width: 28px; text-align: center;
}
.lbn-row-info { flex: 1; min-width: 0; }
.lbn-row-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem; color: white; display: block;
}
.lbn-row-meta {
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem; color: rgba(255,255,255,0.3);
    display: block; margin-top: 2px;
}
.lbn-row-score {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem; color: #e94560; font-weight: bold;
}

/* Best player highlight */
.lbn-best {
    margin-top: 12px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: #ffd700;
    display: flex; align-items: center; gap: 6px;
}
.lbn-best:hover { border-color: #ffd700; box-shadow: 0 3px 12px rgba(255,215,0,0.2); }
.lbn-best i { color: #ffd700; }

/* Empty state */
.lbn-empty {
    text-align: center;
    padding: 50px 20px;
    color: rgba(255,255,255,0.3);
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px dashed rgba(233, 69, 96, 0.3);
}
.lbn-empty i { font-size: 2rem; color: #e94560; margin-bottom: 12px; display: block; }
.lbn-empty span {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem; display: block;
}
.lbn-empty-sub {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.2); display: block; margin-top: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .lbn-stats-row { flex-direction: column; }
    .lbn-podium { flex-wrap: wrap; }
    .lbn-toolbar { justify-content: center; }
}

/* ============================================
   ИСПРАВЛЕНИЯ ХАРДКОДИРОВАННЫХ ШИРИН
   ============================================ */
.completion-single {
    max-width: 95vw;
}

.reveal-pokemon-container img {
    width: 360px;
    height: 360px;
    max-width: 90vw;
    max-height: 90vw;
    object-fit: contain;
}

/* ============================================
   ПЛАНШЕТЫ (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .menu-header {
        padding: 30px 20px;
        border-radius: 40px;
    }

    .menu-header h1 {
        font-size: 1.8rem;
    }

    .tab-btn {
        padding: 10px 25px;
        font-size: 0.8rem;
    }

    .tab-content {
        padding: 20px;
    }

    .pres-card {
        padding: 30px;
        gap: 30px;
    }

    .pres-image-area {
        min-width: 300px;
    }

    .pres-pokemon-name {
        font-size: 2.5rem;
    }

    .pres-description {
        font-size: 1.1rem;
    }

    .filter-buttons {
        flex-wrap: wrap;
    }

    .help-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
        flex: 0 0 35% !important;
        max-width: 35% !important;
        min-width: 220px !important;
    }

    .completion-single {
        width: 550px !important;
    }

    .dn-editor {
        min-width: 280px;
    }

    .editor-panel {
        min-width: 280px !important;
    }

    .custom-notification {
        max-width: 300px;
        bottom: 20px;
        right: 20px;
    }
}

/* ============================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    body {
        padding: 6px;
        font-size: 14px;
    }

    .menu-header {
        padding: 20px 12px;
        margin-bottom: 30px;
        border-radius: 30px;
    }

    .menu-header h1 {
        font-size: 1.1rem;
    }

    .tab-btn {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    .tab-content {
        padding: 12px;
    }

    /* Фильтры */
    .filter-section {
        padding: 8px;
        margin-bottom: 12px;
    }

    .filter-buttons {
        gap: 6px;
    }

    .filter-toggle {
        padding: 5px 10px;
        font-size: 0.55rem;
    }

    .filter-gen-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .filter-types-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Модальные окна */
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 15px !important;
    }

    .modal-large {
        max-height: 85vh;
    }

    .modal-two-columns {
        flex-direction: column !important;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .modal-filters {
        max-height: 28vh;
        flex: none;
        max-width: 100%;
        overflow-y: auto;
        padding: 10px;
    }

    .modal-filters .filter-section {
        margin-bottom: 8px;
        padding: 8px;
    }

    .modal-filters .filter-title {
        margin-bottom: 6px;
        font-size: 0.6rem;
    }

    .filter-type-icon {
        width: 18px;
        height: 18px;
        object-fit: contain;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
        border-radius: 3px;
        vertical-align: middle;
        margin-right: 4px;
    }

    .filter-tags {
        gap: 6px;
    }

    .filter-tag {
        padding: 4px 8px;
    }

    .modal-results {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 10px;
    }

    .modal-results .filter-section {
        margin-bottom: 4px;
        padding: 6px 8px;
    }

    .modal-results .filter-title {
        margin-bottom: 2px;
    }

    .pokemon-list-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .completion-single {
        width: 95vw !important;
        padding: 15px !important;
        max-height: 80vh;
    }

    .completion-trophy {
        font-size: 2rem;
    }

    .exit-confirm-modal,
    .clear-random-modal,
    .mode-setup-modal {
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* Презентация */
    .pres-card {
        padding: 15px;
        gap: 15px;
        border-radius: 16px;
    }

    .pres-image-area {
        min-width: auto !important;
    }

    .pres-pokemon-name {
        font-size: 1.2rem;
    }

    .pres-description {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .reveal-btn {
        padding: 8px 16px;
        font-size: 0.7rem;
    }

    .pres-nav {
        gap: 10px;
    }

    .pres-nav-btn {
        padding: 6px 14px;
        font-size: 0.65rem;
    }

    /* Fullscreen presentation */
    .fullscreen-presentation .pres-card {
        padding: 12px;
        gap: 12px;
    }

    .fullscreen-presentation .pres-pokemon-name {
        font-size: 1.1rem;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-content {
        min-width: 0 !important;
        flex-direction: column !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card-container {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        gap: 8px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-info-area {
        text-align: center !important;
        order: 1 !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-image-area {
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-image-area img {
        max-height: 15vh !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-pokemon-name {
        text-align: center !important;
        font-size: 1rem !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-description {
        font-size: 0.5rem !important;
        line-height: 1.3 !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        display: block !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
        flex: 1 1 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 16px !important;
        padding: 12px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-section {
        overflow: visible !important;
        flex: none !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-section.section-active {
        flex: none !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar #singleMainContent,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar #singleExtraContent {
        flex: none !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-types-grid,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-grid {
        flex: none !important;
        min-height: auto !important;
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-type-btn,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-btn {
        padding: 6px 2px !important;
        gap: 3px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-type-btn img,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-btn img {
        width: 32px !important;
        height: 32px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-type-btn span,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-btn span {
        font-size: 0.4rem !important;
    }

    /* Side-by-side: stack on mobile */
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card {
        flex-direction: column !important;
    }

    /* Reveal типов */
    .type-reveal-overlay .reveal-title {
        font-size: 1.2rem !important;
        margin-bottom: 40px !important;
    }

    .type-reveal-overlay .reveal-title.shrink {
        margin-bottom: 10px !important;
    }

    .type-reveal-overlay .reveal-types-row {
        transform: scale(1) !important;
        gap: 15px !important;
    }

    .type-reveal-overlay .reveal-types-row.shrink {
        transform: scale(0.6) !important;
    }

    .type-reveal-overlay .reveal-type-item {
        padding: 12px 18px !important;
        gap: 8px !important;
    }

    .type-reveal-overlay .reveal-type-item img {
        width: 50px !important;
        height: 50px !important;
    }

    .type-reveal-overlay .reveal-type-item span {
        font-size: 0.7rem !important;
    }

    .reveal-pokemon-name {
        font-size: 1rem;
    }

    .reveal-next-btn {
        font-size: 0.9rem;
        padding: 10px 24px;
    }

    /* Типы */
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #devMode .type-icons-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #devMode .type-icon-item {
        width: 55px !important;
    }

    #devMode .type-icon-item img {
        width: 30px !important;
        height: 30px !important;
    }

    /* Dev mode */
    .editor-panel {
        min-width: 0 !important;
    }

    .slides-list-panel {
        min-width: 0 !important;
    }

    .dn-editor {
        min-width: 0 !important;
    }

    .dn-list {
        min-width: 0 !important;
    }

    .dn-upload {
        width: 140px !important;
        min-height: 140px !important;
    }

    .dn-card {
        padding: 10px !important;
    }

    .dn-type-item {
        width: 45px !important;
    }

    .dn-hero-stats {
        gap: 8px !important;
    }

    /* Games grid */
    .games-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .game-card {
        padding: 12px !important;
    }

    /* Help tab */
    .help-cards {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .help-card {
        padding: 20px 14px 18px !important;
    }

    .help-form {
        max-width: 100% !important;
        padding: 0 8px;
    }

    /* Уведомления */
    .custom-notification {
        left: 10px;
        right: 10px;
        bottom: 15px;
        max-width: none;
        font-size: 0.7rem;
        padding: 12px 16px;
    }

    /* Database tab */
    .db-header {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .db-search-row {
        flex-direction: column !important;
    }

    .db-cards {
        grid-template-columns: 1fr !important;
    }
    .db-pill-name {
        display: none;
    }
    .db-type-pills .db-pill {
        padding: 4px;
        aspect-ratio: 1;
    }
    .db-type-pills {
        grid-template-columns: repeat(9, 1fr);
    }

    .db-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .db-table {
        min-width: 600px;
    }

    /* Leaderboard */
    .lb-podium {
        gap: 8px !important;
    }

    .lb-podium-item {
        padding: 12px 8px !important;
    }

    .lb-podium-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .lb-scroll-row {
        gap: 8px !important;
    }
    .lb-scroll-card {
        flex: 0 0 100px !important;
        padding: 10px 6px !important;
    }

    .lb-stats-row {
        flex-direction: column !important;
    }

    .lbn-stats-row {
        flex-direction: column !important;
    }

    .lbn-podium {
        gap: 8px !important;
    }

    /* Speed timer */
    .speed-timer-value {
        font-size: 0.75rem !important;
        padding: 3px 10px !important;
    }

    /* Music manager */
    .bg-music-manager {
        flex-direction: column;
    }

    .music-item {
        flex-wrap: wrap;
    }

    /* Game selector */
    .game-selector {
        padding: 8px;
        gap: 6px;
    }

    .game-selector select {
        font-size: 0.65rem;
        padding: 6px 8px;
    }
}

/* ===== Custom Number Input +/- ===== */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

.num-input-group {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(233, 69, 96, 0.4);
    background: rgba(15, 52, 96, 0.6);
}

.num-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 32px;
    background: rgba(233, 69, 96, 0.25);
    border: none;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
    flex-shrink: 0;
}

.num-btn:hover {
    background: rgba(233, 69, 96, 0.5);
}

.num-btn:active {
    background: rgba(233, 69, 96, 0.7);
    transform: scale(0.92);
}

.num-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.num-input-group input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    -webkit-appearance: textfield;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(15, 52, 96, 0.6);
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    text-align: center;
    outline: none;
    width: 50px;
    height: 32px;
    padding: 0 4px;
}

.num-input-group input[type="number"]::-webkit-inner-spin-button,
.num-input-group input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.num-input-group input[type="number"]:focus {
    background: rgba(20, 60, 110, 0.8);
}

/* Stat inputs variant */
.num-input-group.help-stat-num input[type="number"] {
    width: 40px;
    font-size: 0.6rem;
    background: rgba(10, 30, 60, 0.5);
}

.num-input-group.help-stat-num .num-btn {
    width: 24px;
    height: 26px;
    font-size: 0.7rem;
    background: rgba(233, 69, 96, 0.15);
}

/* Модальное окно ввода (prompt) */
.prompt-modal {
    display: none;
    position: fixed;
    z-index: 20001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.prompt-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 400px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 50px rgba(233,69,96,0.4);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.prompt-modal-content h3 {
    color: #e94560;
    margin-bottom: 15px;
    font-size: 1rem;
    letter-spacing: 1px;
}

.prompt-modal-content input {
    width: 100%;
    padding: 10px 15px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    margin-bottom: 5px;
    box-sizing: border-box;
}

.prompt-modal-content input:focus {
    border-color: #ff6b81;
    box-shadow: 0 0 12px rgba(233,69,96,0.3);
}

.prompt-modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.prompt-modal-buttons button {
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.prompt-modal-buttons button:first-child {
    background: #2ecc71;
    color: white;
}

.prompt-modal-buttons button:first-child:hover {
    background: #27ae60;
    transform: scale(1.05);
}

.prompt-modal-buttons button:last-child {
    background: #2c3e50;
    color: white;
}

.prompt-modal-buttons button:last-child:hover {
    background: #1a252f;
    transform: scale(1.05);
}

/* Подрежим "Усложняющийся" */
.progressive-mode-toggle {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(233,69,96,0.2);
}

.progressive-toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.progressive-toggle-label input[type="checkbox"] {
    display: none;
}

.progressive-toggle-slider {
    width: 44px;
    height: 24px;
    background: #2c3e50;
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
}

.progressive-toggle-slider::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
}

.progressive-toggle-label input:checked + .progressive-toggle-slider {
    background: #2ecc71;
}

.progressive-toggle-label input:checked + .progressive-toggle-slider::after {
    transform: translateX(20px);
}

.progressive-toggle-text {
    display: flex;
    flex-direction: column;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: white;
    line-height: 1.4;
}

.progressive-toggle-text i {
    color: #2ecc71;
    margin-right: 4px;
}

.progressive-toggle-hint {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
}

.progressive-guessed-count {
    margin-top: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 8px;
}

.progressive-guessed-count strong {
    color: #2ecc71;
}

.progressive-reset-btn {
    background: rgba(231,76,60,0.2);
    border: 1px solid rgba(231,76,60,0.3);
    color: #e74c3c;
    padding: 3px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    transition: all 0.2s;
}

.progressive-reset-btn:hover {
    background: rgba(231,76,60,0.4);
}

.progressive-view-btn {
    background: rgba(52,152,219,0.2);
    border: 1px solid rgba(52,152,219,0.3);
    color: #3498db;
    padding: 3px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    transition: all 0.2s;
}

.progressive-view-btn:hover {
    background: rgba(52,152,219,0.4);
}

.guessed-pokemon-modal {
    max-width: 90vw !important;
    width: 700px !important;
}

.guessed-pokemon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0;
    margin: 15px 0;
}

.guessed-pokemon-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    transition: all 0.2s;
}

.guessed-pokemon-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(233,69,96,0.3);
    transform: translateY(-2px);
}

.guessed-pokemon-card img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.guessed-pokemon-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
    margin-top: 6px;
    font-weight: bold;
}

.guessed-pokemon-types {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.guessed-pokemon-types .type-chip {
    font-size: 0.4rem;
    padding: 2px 6px;
    border-radius: 6px;
}

.guessed-pokemon-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0;
    margin: 15px 0;
}

.guessed-round-group {
    margin-bottom: 15px;
}

.guessed-round-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    padding: 5px 10px;
    border-bottom: 1px solid rgba(233,69,96,0.2);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================
   Лекция: стили
   ============================================ */

.lecture-container {
    max-width: 900px;
    margin: 0 auto;
}

.lecture-hero {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(233,69,96,0.15), rgba(15,52,96,0.3));
    border-radius: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(233,69,96,0.3);
}

.lecture-hero-icon {
    font-size: 3rem;
    color: #e94560;
    margin-bottom: 15px;
}

.lecture-hero h2 {
    font-size: 1.3rem;
    color: white;
    margin-bottom: 10px;
}

.lecture-hero p {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
}

.lecture-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.lecture-meta span {
    color: rgba(255,255,255,0.6);
    font-size: 0.7rem;
    background: rgba(0,0,0,0.3);
    padding: 5px 12px;
    border-radius: 20px;
}

.lecture-meta i {
    color: #e94560;
    margin-right: 5px;
}

/* Навигация по блокам */
.lecture-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    justify-content: center;
}

.lecture-nav-btn {
    background: rgba(15,52,96,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s;
}

.lecture-nav-btn:hover {
    border-color: #e94560;
    transform: translateY(-2px);
}

.lecture-nav-btn.active {
    background: #e94560;
    border-color: #fff;
}

/* Блоки лекции */
.lecture-block {
    background: rgba(15,52,96,0.4);
    border-radius: 25px;
    margin-bottom: 20px;
    border: 1px solid rgba(233,69,96,0.2);
    overflow: hidden;
}

.lecture-block-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 25px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(233,69,96,0.2);
}

.lecture-block-num {
    width: 40px;
    height: 40px;
    background: #e94560;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    flex-shrink: 0;
}

.lecture-block-header h3 {
    font-size: 0.9rem;
    color: white;
    margin: 0;
}

.lecture-time {
    color: rgba(255,255,255,0.5);
    font-size: 0.65rem;
}

.lecture-time i {
    color: #e94560;
    margin-right: 4px;
}

.lecture-block-content {
    padding: 20px 25px;
}

/* Слайды */
.lecture-slide {
    background: rgba(0,0,0,0.2);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.05);
}

.lecture-slide:last-child {
    margin-bottom: 0;
}

.lecture-slide-title {
    font-size: 0.8rem;
    color: #e94560;
    margin-bottom: 12px;
    font-weight: bold;
}

.lecture-slide-title i {
    margin-right: 6px;
}

.lecture-slide p {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.lecture-slide p:last-child {
    margin-bottom: 0;
}

.lecture-slide ul {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    line-height: 1.6;
    margin: 10px 0;
    padding-left: 20px;
}

.lecture-slide li {
    margin-bottom: 5px;
}

/* Таблицы */
.lecture-table-wrap {
    overflow-x: auto;
    margin: 12px 0;
}

.lecture-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}

.lecture-table th {
    background: rgba(233,69,96,0.2);
    color: white;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid rgba(233,69,96,0.4);
}

.lecture-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}

.lecture-table tbody tr:hover {
    background: rgba(233,69,96,0.1);
}

/* Бейджи типов */
.type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

.type-fire { background: linear-gradient(135deg, #F08030, #DD4A1C); }
.type-water { background: linear-gradient(135deg, #6890F0, #4070C8); }
.type-grass { background: linear-gradient(135deg, #78C850, #50A030); }
.type-electric { background: linear-gradient(135deg, #F8D030, #E0A000); }
.type-ice { background: linear-gradient(135deg, #98D8D8, #70B8B8); }
.type-fighting { background: linear-gradient(135deg, #C03028, #982820); }
.type-poison { background: linear-gradient(135deg, #A040A0, #803080); }
.type-ground { background: linear-gradient(135deg, #E0C068, #C0A050); }
.type-flying { background: linear-gradient(135deg, #A890F0, #8870D0); }
.type-psychic { background: linear-gradient(135deg, #F85888, #D83868); }
.type-bug { background: linear-gradient(135deg, #A8B820, #889818); }
.type-rock { background: linear-gradient(135deg, #B8A038, #988028); }
.type-ghost { background: linear-gradient(135deg, #705898, #584078); }
.type-dragon { background: linear-gradient(135deg, #7038F8, #5028C8); }
.type-dark { background: linear-gradient(135deg, #705848, #584038); }
.type-steel { background: linear-gradient(135deg, #B8B8D0, #9898B0); }
.type-fairy { background: linear-gradient(135deg, #EE99AC, #CC7788); }

/* Цитаты */
.lecture-quote {
    background: linear-gradient(135deg, rgba(233,69,96,0.15), rgba(233,69,96,0.05));
    border-left: 4px solid #e94560;
    padding: 15px 20px;
    border-radius: 0 12px 12px 0;
    margin: 15px 0;
    color: rgba(255,255,255,0.9);
    font-size: 0.75rem;
    line-height: 1.6;
    font-style: italic;
}

.lecture-quote-main {
    background: linear-gradient(135deg, rgba(233,69,96,0.25), rgba(233,69,96,0.1));
    border-left-width: 6px;
    font-size: 0.85rem;
    padding: 20px 25px;
}

/* Карточки */
.lecture-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.lecture-card {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
}

.lecture-card-title {
    color: #e94560;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.lecture-card p {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

.lecture-card-info {
    background: rgba(15,52,96,0.4);
}

.lecture-card-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lecture-card-info li {
    padding: 4px 0;
    color: rgba(255,255,255,0.7);
    font-size: 0.7rem;
}

.lecture-card-info li::before {
    content: '•';
    color: #e94560;
    margin-right: 8px;
}

/* Интерактив */
.lecture-interactive {
    background: linear-gradient(135deg, rgba(15,52,96,0.5), rgba(0,0,0,0.3));
    border: 2px solid rgba(233,69,96,0.4);
    border-radius: 20px;
    overflow: hidden;
    margin: 15px 0;
}

.lecture-interactive-header {
    background: rgba(233,69,96,0.2);
    padding: 12px 20px;
    color: #e94560;
    font-size: 0.8rem;
    font-weight: bold;
    border-bottom: 1px solid rgba(233,69,96,0.3);
}

.lecture-interactive-header i {
    margin-right: 8px;
}

.lecture-interactive-content {
    padding: 20px;
}

.lecture-interactive-content p {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    line-height: 1.6;
}

.lecture-interactive-content ul {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    margin: 10px 0;
    padding-left: 20px;
}

.lecture-interactive-answer {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
    border: 1px solid rgba(76,175,80,0.3);
}

.lecture-interactive-answer-title {
    color: #4CAF50;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.lecture-interactive-answer-title i {
    margin-right: 6px;
}

.lecture-interactive-answer p {
    color: rgba(255,255,255,0.8);
}

.lecture-interactive-answer ul {
    color: rgba(255,255,255,0.8);
}

.lecture-interactive-small {
    border-color: rgba(255,193,7,0.4);
}

.lecture-interactive-small .lecture-interactive-header {
    background: rgba(255,193,7,0.15);
    color: #FFC107;
    border-bottom-color: rgba(255,193,7,0.3);
}

/* Да/Нет бейджи */
.lecture-no {
    background: rgba(76,175,80,0.2);
    color: #4CAF50;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.65rem;
}

.lecture-yes {
    background: rgba(255,193,7,0.2);
    color: #FFC107;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.65rem;
}

/* Финальный слайд */
.lecture-slide-final {
    text-align: center;
    background: linear-gradient(135deg, rgba(233,69,96,0.1), rgba(15,52,96,0.3));
    border: 1px solid rgba(233,69,96,0.3);
}

/* Дополнительные материалы */
.lecture-extras {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(233,69,96,0.2);
}

.lecture-extras h3 {
    color: white;
    font-size: 0.9rem;
    margin-bottom: 15px;
    text-align: center;
}

.lecture-extras h3 i {
    color: #e94560;
    margin-right: 8px;
}

/* Скрытие блоков при фильтрации */
.lecture-block.hidden {
    display: none;
}

/* ------------------- Помощь с хостингом (золотая тема) ------------------- */
.hosting-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 25px;
    background: rgba(30, 25, 10, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 200, 50, 0.2);
    border-radius: 20px;
    margin-bottom: 24px;
}

.hosting-hero-icon {
    font-size: 1.2rem;
    color: #f5c842;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(245, 200, 66, 0.4));
}

.hosting-hero h2 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    color: #f5c842;
    margin: 0;
}

.hosting-hero p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
    margin: 0 0 0 auto;
    white-space: nowrap;
}

.hosting-donate-card {
    background: linear-gradient(135deg, rgba(30, 25, 10, 0.7), rgba(20, 18, 8, 0.8));
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 200, 50, 0.5);
    border-radius: 20px;
    padding: 35px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(245, 200, 66, 0.1);
}

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

.hosting-donate-shine {
    display: none;
}

.hosting-donate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #f5c842, transparent);
    opacity: 0.6;
}

.hosting-donate-icon {
    font-size: 2.5rem;
    color: #f5c842;
    margin-bottom: 14px;
    filter: drop-shadow(0 0 15px rgba(245, 200, 66, 0.4));
    animation: cardFloat 3s ease-in-out infinite;
}

.hosting-donate-card h3 {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    color: #f5c842;
    margin-bottom: 10px;
}

.hosting-donate-card p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

.hosting-donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: linear-gradient(135deg, #f5c842, #d4a520);
    border: none;
    border-radius: 50px;
    color: #1a1a2e;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(245, 200, 66, 0.3);
}

.hosting-donate-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 30px rgba(245, 200, 66, 0.5);
    color: #1a1a2e;
}

.hosting-donate-btn:active {
    transform: translateY(0) scale(0.98);
}

.hosting-donate-note {
    margin-top: 14px;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.hosting-donate-note i {
    color: rgba(255, 200, 50, 0.4);
}

/* Адаптив для хостинга */
@media (max-width: 768px) {
    .hosting-hero {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .hosting-hero p {
        margin: 0;
    }
    .hosting-donate-card {
        padding: 25px 18px;
    }
    .hosting-donate-btn {
        padding: 12px 28px;
        font-size: 0.7rem;
    }
}

/* Адаптив */
@media (max-width: 768px) {
    .lecture-hero h2 {
        font-size: 1rem;
    }
    
    .lecture-meta {
        flex-direction: column;
        align-items: center;
    }
    
    .lecture-nav {
        gap: 6px;
    }
    
    .lecture-nav-btn {
        padding: 6px 12px;
        font-size: 0.6rem;
    }
    
    .lecture-block-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .lecture-cards-row {
        grid-template-columns: 1fr;
    }
    
    .lecture-table {
        font-size: 0.6rem;
    }
    
    .lecture-table th,
    .lecture-table td {
        padding: 6px 8px;
    }
}

/* ------------------- Авторизация ------------------- */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 40%, rgba(233, 69, 96, 0.08) 0%, transparent 50%),
                linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    z-index: 50000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInUp 0.6s ease;
}

.auth-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(15, 52, 96, 0.95));
    border: 2px solid #e94560;
    border-radius: 30px;
    padding: 24px 35px 30px 35px;
    width: 420px;
    max-width: 92%;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(233, 69, 96, 0.2);
    animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.auth-card-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 12px;
}

.auth-lang-switch {
    display: inline-flex;
    background: rgba(10, 10, 26, 0.85);
    border: 1.5px solid rgba(233, 69, 96, 0.45);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
    transition: all 0.2s ease;
}

.auth-lang-switch:hover {
    border-color: rgba(233, 69, 96, 0.85);
    box-shadow: 0 3px 15px rgba(233, 69, 96, 0.3);
}

.auth-lang-switch .lang-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: none;
    padding: 6px 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.auth-lang-switch .lang-btn:hover {
    color: #fff;
    background: rgba(233, 69, 96, 0.2);
}

.auth-lang-switch .lang-btn.active {
    background: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

.auth-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -6px;
    margin-bottom: 12px;
}

.auth-forgot-link {
    color: #e94560;
    font-size: 0.62rem;
    text-decoration: none;
    transition: opacity 0.2s;
    font-family: 'Minecraft', monospace;
}

.auth-forgot-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.auth-subtitle {
    color: #aaa;
    font-size: 0.65rem;
    margin-bottom: 18px;
    line-height: 1.4;
}

.auth-back-link {
    margin-top: 16px;
    color: #aaa;
    font-size: 0.65rem;
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
    text-align: center;
}

.auth-back-link:hover {
    color: #e94560;
}

.auth-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    background: rgba(20, 20, 40, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-tab:hover {
    border-color: rgba(233, 69, 96, 0.5);
    color: white;
}

.auth-tab.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: #e94560;
    color: #e94560;
}

.auth-form {
    text-align: center;
}

.auth-icon {
    font-size: 2.5rem;
    color: #e94560;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 15px rgba(233, 69, 96, 0.4));
}

.auth-form h2 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    color: white;
    margin-bottom: 20px;
}

.auth-field {
    text-align: left;
    margin-bottom: 14px;
}

.auth-field label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
}

.auth-field label i {
    margin-right: 6px;
    color: #e94560;
    width: 14px;
    text-align: center;
}

.auth-field input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(10, 10, 30, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
}

.auth-field input:focus {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.2);
}

.auth-field input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.auth-error {
    color: #e74c3c;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    min-height: 18px;
    margin-bottom: 10px;
}

.auth-submit-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    border-radius: 14px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(233, 69, 96, 0.4);
}

.auth-submit-btn:active {
    transform: translateY(0);
}

.auth-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.auth-skip {
    text-align: center;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: color 0.2s;
}

.auth-skip:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* Панель пользователя */
.user-bar {
    position: relative;
    z-index: 10000;
    max-width: 1200px;
    margin: 0 auto 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
}

.user-bar-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.user-bar-info i {
    color: #e94560;
    font-size: 1.1rem;
}

.user-avatar-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #e94560;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
}
.user-avatar-wrap:hover {
    border-color: #f39c12;
    box-shadow: 0 0 10px rgba(243,156,18,0.4);
}
.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-name-image {
    height: 40px;
    width: 40px;
    object-fit: contain;
    margin-left: 6px;
    vertical-align: middle;
    border-radius: 4px;
    flex-shrink: 0;
}

.admin-badge {
    background: #e94560;
    color: #fff;
    font-size: 0.55rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    padding: 0 4px;
    cursor: pointer;
    animation: badgePulse 2s infinite;
    flex-shrink: 0;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.notif-badge {
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    transition: all 0.2s;
}

.notif-badge:hover {
    background: transparent;
    opacity: 0.8;
}

.notif-badge:hover i {
    color: #ff6b81;
}

.notif-badge.has-unread {
    background: transparent;
    border: none;
    animation: badgePulse 2s infinite;
}

.notif-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e94560;
    color: #fff;
    font-size: 0.45rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    min-width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    border-radius: 50%;
    padding: 0 2px;
}

.notif-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: rgba(15, 20, 40, 0.97);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 16px;
    padding: 12px;
    min-width: 280px;
    max-width: 350px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 9999;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.notif-dropdown-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #e94560;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 8px;
}

.notif-dropdown-title i {
    margin-right: 6px;
}

.notif-item {
    padding: 8px 10px;
    border-radius: 10px;
    margin-bottom: 6px;
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.2);
    cursor: default;
}

.notif-item.unread {
    background: rgba(52, 152, 219, 0.15);
    border-color: rgba(52, 152, 219, 0.4);
}

.notif-item-header {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notif-item-header span {
    color: #3498db;
}

.notif-item-text {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
}

.notif-empty {
    text-align: center;
    color: rgba(255,255,255,0.25);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 16px 0;
}

.notif-item-user-reply {
    background: rgba(233, 69, 96, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.6);
}

.notif-item-user-reply i {
    color: #e94560;
    margin-right: 4px;
}

.notif-item-user-reply b {
    color: #e94560;
}

.notif-reply-box {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.notif-reply-input {
    flex: 1;
    background: rgba(10, 10, 30, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    outline: none;
}

.notif-reply-input:focus {
    border-color: rgba(233, 69, 96, 0.5);
}

.notif-reply-send {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 8px;
    padding: 4px 10px;
    color: #e94560;
    cursor: pointer;
    transition: all 0.2s;
}

.notif-reply-send:hover {
    background: rgba(233, 69, 96, 0.4);
    color: white;
}

.user-bar-logout {
    background: rgba(231, 76, 60, 0.2);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 20px;
    color: #e74c3c;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.user-bar-logout:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
}

.guest-bar-login {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.guest-bar-login:hover {
    background: rgba(46, 204, 113, 0.3);
    border-color: #2ecc71;
}

/* ------------------- Админ-панель ------------------- */
.admin-controls {
    margin-bottom: 20px;
}

.admin-filter-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.admin-filter-btn {
    background: rgba(20, 20, 40, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 10px;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-filter-btn:hover {
    border-color: rgba(233, 69, 96, 0.5);
    color: white;
}

.admin-filter-btn.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: #e94560;
    color: #e94560;
}

.admin-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

.admin-stat b {
    margin-right: 3px;
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-item {
    background: rgba(15, 52, 96, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.15);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color 0.2s;
}

.admin-item:hover {
    border-color: rgba(233, 69, 96, 0.35);
}

.admin-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.admin-item-type {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
}

.admin-item-user {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
}

.admin-item-user i { margin-right: 4px; }

.admin-item-status {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    margin-left: auto;
}

.admin-item-date {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.25);
}

.admin-item-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin-bottom: 10px;
}

.admin-item-details b {
    color: white;
}

.admin-item-actions {
    display: flex;
    gap: 8px;
}

.admin-item-actions button {
    background: rgba(20, 20, 40, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-item-actions button:hover {
    border-color: rgba(233, 69, 96, 0.5);
    color: white;
    background: rgba(233, 69, 96, 0.15);
}

.admin-delete-btn:hover {
    border-color: #e74c3c !important;
    color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.15) !important;
}

.admin-item-reply {
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
    font-family: 'Minecraft', monospace;
}

.admin-item-reply i {
    color: #3498db;
    margin-right: 4px;
}

.admin-item-user-reply {
    background: rgba(233, 69, 96, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
    font-family: 'Minecraft', monospace;
}

.admin-item-user-reply i {
    color: #e94560;
    margin-right: 4px;
}

.admin-item-user-reply b {
    color: #e94560;
}

.admin-mark-read-btn {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: 6px;
    padding: 2px 8px;
    color: #2ecc71;
    cursor: pointer;
    font-size: 0.55rem;
    margin-left: 8px;
    transition: all 0.2s;
    vertical-align: middle;
}

.admin-mark-read-btn:hover {
    background: rgba(46, 204, 113, 0.3);
    color: white;
}

.admin-sub-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.admin-sub-tab {
    background: rgba(15, 52, 96, 0.6);
    border: 2px solid rgba(233, 69, 96, 0.4);
    border-radius: 50px;
    color: rgba(255,255,255,0.7);
    padding: 8px 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-sub-tab:hover {
    border-color: rgba(233, 69, 96, 0.4);
    color: rgba(255,255,255,0.8);
}

.admin-sub-tab.active {
    background: rgba(233, 69, 96, 0.2);
    border-color: #e94560;
    color: #e94560;
}

.admin-item-reply-box {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.admin-reply-input {
    flex: 1;
    background: rgba(10, 10, 30, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 8px;
    padding: 6px 10px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
}

.admin-reply-input:focus {
    border-color: rgba(233, 69, 96, 0.6);
}

.admin-reply-send {
    background: rgba(233, 69, 96, 0.25);
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 8px;
    padding: 6px 12px;
    color: #e94560;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-reply-send:hover {
    background: rgba(233, 69, 96, 0.4);
    color: white;
}

@media (max-width: 480px) {
    .auth-card { padding: 22px 18px; }
    .auth-tab { font-size: 0.6rem; padding: 8px; }
    .admin-filter-btns { gap: 5px; }
    .admin-item-header { gap: 6px; }
}

/* ============================================
   ПОЛНАЯ АДАПТИВНОСТЬ ДЛЯ ТЕЛЕФОНОВ
   ============================================ */

/* --- Табы: перенос на мобильных --- */
.tabs {
    gap: 10px;
    justify-content: center;
}

.tab-btn {
    white-space: nowrap;
    flex-shrink: 1;
}

/* --- Мобильный: <=768px --- */
@media (max-width: 768px) {
    body { padding: 6px; }

    .main-menu { max-width: 100%; }

    .menu-header {
        padding: 20px 15px;
        margin-bottom: 20px;
        border-radius: 30px !important;
    }
    .menu-header h1 {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }
    .menu-header p {
        font-size: 0.6rem;
        line-height: 1.4;
    }

    .tab-btn {
        padding: 8px 16px;
        font-size: 0.65rem;
    }

    .tab-content {
        padding: 15px;
        border-radius: 20px !important;
    }

    /* Переключатель режимов — перенос */
    .mode-switcher,
    [style*="display: flex"][style*="justify-content: space-between"][style*="border-radius: 20px"] {
        flex-direction: column !important;
        align-items: stretch !important;
        border-radius: 20px !important;
        padding: 10px !important;
        gap: 10px !important;
    }
    [style*="display: flex"][style*="justify-content: space-between"][style*="border-radius: 20px"] > div {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    /* Модалки */
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 15px !important;
        border-radius: 20px !important;
    }
    .modal-two-columns {
        flex-direction: column !important;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    .modal-filters {
        max-height: 28vh;
        flex: none;
        max-width: 100%;
        overflow-y: auto;
        padding: 8px;
    }
    .modal-filters .filter-section {
        margin-bottom: 6px;
        padding: 6px;
    }
    .modal-filters .filter-title {
        margin-bottom: 4px;
        font-size: 0.55rem;
    }
    .filter-type-icon {
        width: 16px;
        height: 16px;
        margin-right: 3px;
    }
    .filter-tags {
        gap: 5px;
    }
    .filter-tag {
        padding: 3px 6px;
    }
    .modal-results {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 8px;
    }
    .modal-results .filter-section {
        margin-bottom: 3px;
        padding: 5px 6px;
    }
    .modal-results .filter-title {
        margin-bottom: 1px;
    }
    .modal-buttons {
        flex-direction: column;
        gap: 8px;
    }
    .modal-buttons button {
        width: 100%;
        padding: 12px;
    }

    .confirm-modal-content,
    .completion-modal-content,
    .exit-confirm-modal,
    .clear-random-modal,
    .mode-setup-modal {
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* Презентация */
    .pres-card {
        flex-direction: column !important;
        padding: 15px !important;
        gap: 15px !important;
    }
    .pres-image-area {
        min-width: auto !important;
        width: 100% !important;
    }
    .pres-pokemon-name {
        font-size: 1.3rem;
    }
    .pres-description {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    /* Карточки игр */
    .games-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .game-card {
        padding: 12px !important;
    }

    /* Фильтры */
    .filter-section {
        padding: 8px;
        margin-bottom: 10px;
    }
    .filter-buttons {
        gap: 6px;
    }
    .filter-toggle {
        padding: 5px 10px;
        font-size: 0.55rem;
    }
    .filter-gen-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .filter-types-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Список покемонов */
    .pokemon-list-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* Один игрок / Speed */
    .completion-single {
        width: 95vw !important;
        padding: 15px !important;
        max-height: 80vh;
    }
    .speed-timer-value {
        padding: 3px 10px !important;
        font-size: 0.75rem !important;
    }

    /* Типы */
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .reveal-type-card img {
        width: 80px;
        height: 80px;
    }
    .types-reveal-panel {
        gap: 30px;
    }

    /* Reveal покемон */
    .reveal-pokemon-container img {
        width: 180px;
        height: 180px;
    }
    .reveal-pokemon-name {
        font-size: 1rem;
    }

    /* Dev mode */
    .editor-panel,
    .slides-list-panel,
    .dn-editor,
    .dn-list {
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    .dev-main-grid {
        flex-direction: column !important;
    }
    .back-to-play-btn {
        width: 100%;
    }
    .admin-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .admin-header > div {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .game-selector {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .game-selector select {
        min-width: 0 !important;
        flex: 1 !important;
    }
    #uploadAreaDev {
        min-height: 150px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #tabDev .editor-panel > div:nth-child(2) {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    #tabDev .editor-panel > div:nth-child(2) > div {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    #typeIconsGridDev {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        flex-wrap: unset !important;
        padding: 5px !important;
    }
    #typeIconsGridDev .type-icon-item {
        width: auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        max-width: none !important;
        flex: none !important;
        justify-self: stretch !important;
        align-self: stretch !important;
    }
    #tabDev .action-buttons {
        flex-direction: column !important;
    }
    #tabDev .action-buttons button {
        width: 100%;
    }
    .dn-upload {
        width: 120px !important;
        min-height: 120px !important;
    }
    .dn-card {
        padding: 8px !important;
    }
    .dn-type-item {
        width: 40px !important;
    }
    #devMode .type-icons-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #devMode .type-icon-item {
        width: auto !important;
    }
    #devMode .type-icon-item img {
        width: 28px !important;
        height: 28px !important;
    }

    /* Помощь */
    .help-cards {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .help-card {
        padding: 15px 12px !important;
    }
    .help-form {
        max-width: 100% !important;
        padding: 0;
    }

    /* Leaderboard */
    .lbn-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .lbn-toolbar {
        flex-wrap: wrap;
        justify-content: center;
    }
    .lbn-tab {
        padding: 6px 12px;
        font-size: 0.6rem;
    }
    .lbn-stats-row {
        flex-direction: column !important;
    }
    .lbn-podium {
        gap: 8px !important;
        flex-wrap: wrap;
    }
    .lbn-podium-item {
        padding: 10px 6px !important;
        min-width: 90px;
    }
    .lbn-podium-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    .lbn-row {
        padding: 8px 10px;
        gap: 6px;
    }

    /* Database */
    .db-header {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .db-search-row {
        flex-direction: column !important;
    }
    .db-cards {
        grid-template-columns: 1fr !important;
    }
    .db-pill-name {
        display: none;
    }
    .db-type-pills .db-pill {
        padding: 3px;
        aspect-ratio: 1;
    }
    .db-type-pills {
        grid-template-columns: repeat(9, 1fr) !important;
    }
    .db-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* User bar */
    .user-bar {
        top: 8px;
        right: 8px;
        left: 8px;
        padding: 8px 12px;
    }
    .user-bar-info {
        font-size: 0.65rem;
    }

    /* Уведомления */
    .custom-notification {
        left: 8px;
        right: 8px;
        bottom: 10px;
        max-width: none;
        font-size: 0.7rem;
        padding: 10px 14px;
    }

    /* Lecture table */
    .lecture-table {
        font-size: 0.6rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .lecture-table th,
    .lecture-table td {
        padding: 5px 6px;
        white-space: nowrap;
    }

    /* Music manager */
    .bg-music-manager {
        flex-direction: column;
    }
    .music-item {
        flex-wrap: wrap;
    }

    /* Auth overlay */
    .auth-overlay {
        padding: 15px;
    }
    .auth-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        border-radius: 20px !important;
    }

    /* Game selector */
    .game-selector {
        padding: 8px;
        gap: 6px;
    }
    .game-selector select {
        font-size: 0.65rem;
        padding: 6px 8px;
    }
}

/* --- Маленькие телефоны: <=400px --- */
@media (max-width: 400px) {
    .menu-header h1 {
        font-size: 0.95rem;
    }
    .tab-btn {
        padding: 6px 10px;
        font-size: 0.58rem;
    }
    .pres-pokemon-name {
        font-size: 1.1rem;
    }
    .lbn-podium-item {
        min-width: 80px;
    }
    .reveal-pokemon-container img {
        width: 140px;
        height: 140px;
    }
}

/* ============================================
   СИСТЕМА ДРУЗЕЙ
   ============================================ */

.friends-badge,
.invites-badge {
    display: none;
    position: relative;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    transition: color 0.3s;
    z-index: 10000;
}
.friends-badge:hover,
.invites-badge:hover {
    color: #e94560;
}
.friends-badge.has-requests {
    color: #3498db;
}
.invites-badge.has-invites {
    color: #fff;
    background: #f39c12;
    border-radius: 50%;
    padding: 2px 5px;
}
.friends-badge .friends-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e94560;
    color: #fff;
    font-size: 0.5rem;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-family: 'Minecraft', monospace;
}
.invites-badge .invites-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e94560;
    color: #fff;
    font-size: 0.5rem;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-family: 'Minecraft', monospace;
}

/* Friends Dropdown */
.friends-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 340px;
    max-height: 450px;
    overflow-y: auto;
    background: #16213e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 12px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.friends-dropdown-title {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(233,69,96,0.3);
}
.friends-search-box {
    position: relative;
    margin-bottom: 10px;
}
.friends-search-box input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(15,52,96,0.5);
    border: 1px solid rgba(233,69,96,0.3);
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    box-sizing: border-box;
}
.friends-search-box input:focus {
    border-color: #e94560;
}
.friends-search-box input::placeholder {
    color: rgba(255,255,255,0.3);
}
.friends-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.3);
    border-radius: 8px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 10;
    display: none;
}
.friends-search-results.has-results {
    display: block;
}
.friends-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.8);
    cursor: default;
}
.friends-search-item:last-child {
    border-bottom: none;
}
.friends-search-item button {
    background: rgba(233,69,96,0.3);
    border: 1px solid #e94560;
    border-radius: 6px;
    color: #e94560;
    padding: 3px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.2s;
}
.friends-search-item button:hover {
    background: #e94560;
    color: #fff;
}
.friends-search-item button.friend-pending {
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.4);
    cursor: default;
}
.friends-section {
    margin-top: 8px;
}
.friends-section-title {
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.friends-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: background 0.2s;
}
.friends-item:hover {
    background: rgba(233,69,96,0.1);
}
.friends-item .online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}
.friends-item .online-dot.online {
    background: #2ecc71;
}
.friends-item-name {
    flex: 1;
    color: rgba(255,255,255,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.friends-item-actions {
    display: flex;
    gap: 4px;
}
.friends-item-actions button {
    background: none;
    border: 1px solid rgba(233,69,96,0.3);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    padding: 2px 6px;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
}
.friends-item-actions button:hover {
    border-color: #e94560;
    color: #e94560;
}
.friends-item-actions button.invite-btn:hover {
    border-color: #f39c12;
    color: #f39c12;
}
.friends-item-actions button.accept-btn {
    border-color: #2ecc71;
    color: #2ecc71;
}
.friends-item-actions button.accept-btn:hover {
    background: #2ecc71;
    color: #fff;
}
.friends-item-actions button.reject-btn {
    border-color: #e74c3c;
    color: #e74c3c;
}
.friends-item-actions button.reject-btn:hover {
    background: #e74c3c;
    color: #fff;
}
.friends-empty {
    text-align: center;
    color: rgba(255,255,255,0.25);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 12px;
}

/* Invites Dropdown */
.invites-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: #16213e;
    border: 2px solid #f39c12;
    border-radius: 12px;
    padding: 12px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.invites-dropdown-title {
    color: #f39c12;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(243,156,18,0.3);
}
.invites-list {
    margin-bottom: 8px;
}
.invites-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(15,52,96,0.3);
    border-radius: 8px;
    margin-bottom: 6px;
}
.invites-item-info {
    flex: 1;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.8);
}
.invites-item-info .mode-label {
    color: #f39c12;
    font-size: 0.55rem;
}
.invites-item-actions {
    display: flex;
    gap: 4px;
}
.invites-item-actions button {
    background: none;
    border: 1px solid rgba(243,156,18,0.3);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    padding: 3px 8px;
    font-size: 0.55rem;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
}
.invites-item-actions button.accept-btn {
    border-color: #2ecc71;
    color: #2ecc71;
}
.invites-item-actions button.accept-btn:hover {
    background: #2ecc71;
    color: #fff;
}
.invites-item-actions button.reject-btn {
    border-color: #e74c3c;
    color: #e74c3c;
}
.invites-item-actions button.reject-btn:hover {
    background: #e74c3c;
    color: #fff;
}

/* Invite Modal */
.invite-mode-btn {
    flex: 1;
    padding: 10px;
    background: rgba(15,52,96,0.3);
    border: 2px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}
.invite-mode-btn:hover {
    border-color: rgba(233,69,96,0.5);
    color: rgba(255,255,255,0.9);
}
.invite-mode-btn.active {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}
.invite-setting-btn {
    padding: 8px 16px;
    background: rgba(15,52,96,0.3);
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
}
.invite-setting-btn:hover {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.9);
}
.invite-setting-btn.active {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}
.invite-send-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #e94560, #c0392b);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s;
}
.invite-send-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(233,69,96,0.4);
}

/* Waiting dots animation */
.invite-wait-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.wait-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f39c12;
    animation: waitPulse 1.4s infinite ease-in-out both;
}
.wait-dot:nth-child(1) { animation-delay: -0.32s; }
.wait-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes waitPulse {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* ============================================
   МОБИЛЬНАЯ АДАПТАЦИЯ ИГРОВОГО ИНТЕРФЕЙСА
   ============================================ */

/* --- pres-header на мобильных --- */
@media (max-width: 768px) {
    .pres-header {
        padding: 10px 12px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .pres-header h3 {
        font-size: 0.65rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }
    .pres-zoom-controls {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 4px 8px !important;
        order: 3;
        width: 100%;
        justify-content: center;
    }
    .pres-zoom-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.65rem !important;
    }
    .pres-zoom-value {
        font-size: 0.6rem !important;
        min-width: 30px !important;
    }
    .pres-volume-controls {
        margin-left: 0 !important;
        padding-left: 8px !important;
        border-left: 1px solid rgba(233,69,96,0.3) !important;
    }
    .pres-volume-slider {
        width: 100px !important;
    }
    .pres-zoom-reset {
        padding: 0 22px !important;
        font-size: 0.6rem !important;
    }
    .close-pres-btn, #closePresBtn {
        padding: 6px 16px !important;
        font-size: 0.6rem !important;
        order: 2;
        flex-shrink: 0;
    }
    /* Карточка покемона */
    .pres-card {
        padding: 12px !important;
        gap: 12px !important;
        border-radius: 20px !important;
        width: 100% !important;
        animation: none !important;
    }
    /* Пульт участника - сетка типов */
    .types-game-section {
        overflow: visible !important;
    }
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .pres-image-area {
        min-width: auto !important;
        width: 100%;
    }
    .pres-image-area img {
        max-height: 35vh !important;
    }
    .pres-pokemon-name {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
        text-align: center;
    }
    .pres-description {
        font-size: 0.6rem !important;
        line-height: 1.3 !important;
        padding: 10px !important;
    }
    .reveal-btn {
        padding: 10px 20px !important;
        font-size: 0.75rem !important;
    }
    .pres-nav {
        gap: 10px !important;
        margin-top: 20px !important;
    }
    .pres-nav-btn {
        padding: 8px 16px !important;
        font-size: 0.7rem !important;
    }
    .pres-counter {
        padding: 0 16px !important;
        font-size: 0.7rem !important;
        line-height: 36px !important;
        height: 36px !important;
    }
    .pres-content {
        padding: 12px !important;
    }
}

/* --- Маленькие телефоны --- */
@media (max-width: 480px) {
    .pres-header {
        padding: 8px 10px !important;
    }
    .pres-header h3 {
        font-size: 0.55rem !important;
    }
    .pres-zoom-controls {
        gap: 3px !important;
        padding: 3px 6px !important;
    }
    .pres-zoom-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.55rem !important;
    }
    .pres-zoom-reset {
        padding: 0 18px !important;
        font-size: 0.55rem !important;
    }
    .pres-volume-slider {
        width: 80px !important;
    }
    #closePresBtn {
        padding: 5px 10px !important;
        font-size: 0.55rem !important;
        border-radius: 20px !important;
    }
    #closePresBtn i {
        font-size: 0.6rem;
    }
    .pres-card {
        padding: 10px !important;
        gap: 10px !important;
        border-radius: 14px !important;
    }
    .pres-image-area img {
        max-height: 28vh !important;
    }
    .pres-pokemon-name {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }
    .pres-description {
        font-size: 0.6rem !important;
        padding: 8px !important;
    }
    .reveal-btn {
        padding: 8px 14px !important;
        font-size: 0.65rem !important;
    }
    .pres-nav-btn {
        padding: 6px 12px !important;
        font-size: 0.6rem !important;
    }
    .pres-counter {
        padding: 0 12px !important;
        font-size: 0.6rem !important;
        line-height: 30px !important;
        height: 30px !important;
    }
    /* Модалка завершения */
    .completion-single {
        width: 95vw !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }
    .completion-score-value {
        font-size: 1.5rem !important;
    }
    .completion-history-row {
    padding: 3px 6px !important;
        font-size: 0.55rem !important;
    }
    .completion-history-img img {
        width: 28px !important;
        height: 28px !important;
    }
    /* Speed timer */
    .speed-timer-value {
        padding: 4px 12px !important;
        font-size: 0.8rem !important;
    }
    /* Mode setup modal */
    .mode-setup-modal {
        padding: 20px 16px !important;
        border-radius: 20px !important;
    }
    .mode-setup-btn {
        padding: 8px 14px !important;
        font-size: 0.6rem !important;
    }
    /* Exit confirm */
    .exit-confirm-modal {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }
}

.chat-conversation-item {
    transition: background 0.2s !important;
}
.chat-conversation-item:hover {
    background: rgba(233, 69, 96, 0.1) !important;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.duel-results-container {
    display: flex;
    gap: 15px;
    margin: 15px 0;
    align-items: stretch;
}

.duel-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
}

@media (max-width: 600px) {
    .duel-results-container {
        flex-direction: column;
        gap: 0;
    }
    .duel-vs {
        padding: 8px 0;
        font-size: 1.2rem;
    }
}

.duels-friend-list {
    display: flex;
    gap: 8px;
    padding: 10px 0;
    overflow-x: auto;
    flex-wrap: wrap;
}

.duels-friend-item {
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Minecraft', monospace;
}

.duels-friend-item:hover,
.duels-friend-item.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    color: #e94560;
}

.duels-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.duel-history-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.2s;
}

.duel-history-card:hover {
    background: rgba(233, 69, 96, 0.08);
    border-color: rgba(233, 69, 96, 0.2);
}

.duel-history-icon {
    font-size: 1.2rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.duel-history-info {
    flex: 1;
    min-width: 0;
}

.duel-history-names {
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
}

.duel-history-mode {
    color: #888;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    margin-top: 2px;
}

.duel-history-scores {
    display: flex;
    gap: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* ===== ROOM ANIMATIONS ===== */
@keyframes roomFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes roomSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes roomCodeGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(233,69,96,0.4), 0 0 40px rgba(233,69,96,0.2); }
    50% { text-shadow: 0 0 30px rgba(233,69,96,0.7), 0 0 60px rgba(233,69,96,0.4), 0 0 90px rgba(233,69,96,0.2); }
}

@keyframes roomPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

#roomRoleSelectOverlay[style*="display: flex"],
#roomSetupOverlay[style*="display: flex"],
#roomResultsOverlay[style*="display: flex"] {
    animation: roomFadeIn 0.25s ease-out;
}

#roomRoleSelectOverlay[style*="display: flex"] > div,
#roomSetupOverlay[style*="display: flex"] > div,
#roomResultsOverlay[style*="display: flex"] > div {
    animation: roomSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#roomWaitingOverlay[style*="display: flex"] {
    animation: roomFadeIn 0.3s ease-out;
}

#roomWaitingOverlay[style*="display: flex"] > div {
    animation: roomSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#roomCodeDisplay {
    animation: roomCodeGlow 2s ease-in-out infinite;
    transition: letter-spacing 0.3s ease;
}

#roomRoleSelectOverlay button[onclick*="selectRoomRole"],
#roomSetupOverlay button[onclick*="createRoom"],
#roomWaitingOverlay button[onclick*="startRoomGame"],
#roomResultsOverlay button[onclick*="closeRoom"] {
    transition: all 0.2s ease;
}

#roomRoleSelectOverlay button[onclick*="selectRoomRole"]:hover,
#roomSetupOverlay button[onclick*="createRoom"]:hover,
#roomWaitingOverlay button[onclick*="startRoomGame"]:hover:not([style*="opacity: 0.5"]) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(233,69,96,0.4);
}

#roomRoleSelectOverlay button[onclick*="selectRoomRole"]:active,
#roomSetupOverlay button[onclick*="createRoom"]:active,
#roomWaitingOverlay button[onclick*="startRoomGame"]:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(233,69,96,0.3);
}

#roomRoleSelectOverlay button[onclick*="closeRoomRoleSelect"],
#roomSetupOverlay button[onclick*="closeRoomSetup"],
#roomWaitingOverlay button[onclick*="closeRoom"]:not(#roomStartBtn),
#roomResultsOverlay button[onclick*="closeRoom"] {
    transition: all 0.2s ease;
}

#roomRoleSelectOverlay button[onclick*="closeRoomRoleSelect"]:hover,
#roomSetupOverlay button[onclick*="closeRoomSetup"]:hover,
#roomWaitingOverlay button[onclick*="closeRoom"]:hover:not(#roomStartBtn),
#roomResultsOverlay button[onclick*="closeRoom"]:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

#roomRoleSelectOverlay button[onclick*="closeRoomRoleSelect"]:active,
#roomSetupOverlay button[onclick*="closeRoomSetup"]:active,
#roomWaitingOverlay button[onclick*="closeRoom"]:active:not(#roomStartBtn),
#roomResultsOverlay button[onclick*="closeRoom"]:active {
    transform: translateY(1px);
}

#roomPlayersList > div {
    animation: roomSlideUp 0.3s ease-out;
    animation-fill-mode: both;
}

#roomPlayersList > div:nth-child(1) { animation-delay: 0.05s; }
#roomPlayersList > div:nth-child(2) { animation-delay: 0.1s; }
#roomPlayersList > div:nth-child(3) { animation-delay: 0.15s; }
#roomPlayersList > div:nth-child(4) { animation-delay: 0.2s; }
#roomPlayersList > div:nth-child(5) { animation-delay: 0.25s; }
#roomPlayersList > div:nth-child(6) { animation-delay: 0.3s; }

#roomResultsTable > div {
    animation: roomSlideUp 0.3s ease-out;
    animation-fill-mode: both;
}

#roomResultsTable > div:nth-child(1) { animation-delay: 0.05s; }
#roomResultsTable > div:nth-child(2) { animation-delay: 0.1s; }
#roomResultsTable > div:nth-child(3) { animation-delay: 0.15s; }
#roomResultsTable > div:nth-child(4) { animation-delay: 0.2s; }
#roomResultsTable > div:nth-child(5) { animation-delay: 0.25s; }
#roomResultsTable > div:nth-child(6) { animation-delay: 0.3s; }

@keyframes roomCodePopIn {
    0% { opacity: 0; transform: scale(0.5); }
    70% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

#roomCodeDisplay.animate-in {
    animation: roomCodePopIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== CHAT ANIMATIONS ===== */
@keyframes chatItemSlideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes chatMsgSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes chatWindowOpen {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes chatReplySlide {
    from { opacity: 0; max-height: 0; padding: 0 15px; }
    to { opacity: 1; max-height: 60px; padding: 8px 15px; }
}

#tabChat .chat-conversation-item {
    animation: chatItemSlideIn 0.3s ease-out;
    animation-fill-mode: both;
}

#tabChat .chat-conversation-item:nth-child(2) { animation-delay: 0.03s; }
#tabChat .chat-conversation-item:nth-child(3) { animation-delay: 0.06s; }
#tabChat .chat-conversation-item:nth-child(4) { animation-delay: 0.09s; }
#tabChat .chat-conversation-item:nth-child(5) { animation-delay: 0.12s; }
#tabChat .chat-conversation-item:nth-child(6) { animation-delay: 0.15s; }
#tabChat .chat-conversation-item:nth-child(7) { animation-delay: 0.18s; }
#tabChat .chat-conversation-item:nth-child(8) { animation-delay: 0.21s; }

#tabChat .chat-conversation-item:hover {
    transform: translateX(4px);
    background: rgba(233,69,96,0.08);
}

#chatWindow[style*="display: flex"] {
    animation: chatWindowOpen 0.25s ease-out;
}



#chatReplyPreview[style*="display: flex"] {
    animation: chatReplySlide 0.2s ease-out;
}

#chatSendBtn {
    transition: all 0.2s ease;
}

#chatSendBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233,69,96,0.4);
}

#chatSendBtn:active {
    transform: translateY(1px) scale(0.97);
}

#chatInput:focus {
    border-color: #e94560 !important;
    box-shadow: 0 0 0 2px rgba(233,69,96,0.2);
}

/* ===== ADMIN ANIMATIONS ===== */
@keyframes adminCardSlideIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes adminSubTabPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.admin-sub-tab {
    transition: all 0.2s ease;
}

.admin-sub-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233,69,96,0.3);
}

.admin-sub-tab.active {
    animation: adminSubTabPulse 0.3s ease-out;
}

.admin-filter-btn {
    transition: all 0.2s ease;
}

.admin-filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(233,69,96,0.25);
}

.admin-filter-btn:active {
    transform: translateY(0) scale(0.97);
}

#adminSubmissionsList > div,
#adminSubmissionsList > .admin-card {
    animation: adminCardSlideIn 0.3s ease-out;
    animation-fill-mode: both;
}

#adminSubmissionsList > div:nth-child(1),
#adminSubmissionsList > .admin-card:nth-child(1) { animation-delay: 0.03s; }
#adminSubmissionsList > div:nth-child(2),
#adminSubmissionsList > .admin-card:nth-child(2) { animation-delay: 0.06s; }
#adminSubmissionsList > div:nth-child(3),
#adminSubmissionsList > .admin-card:nth-child(3) { animation-delay: 0.09s; }
#adminSubmissionsList > div:nth-child(4),
#adminSubmissionsList > .admin-card:nth-child(4) { animation-delay: 0.12s; }
#adminSubmissionsList > div:nth-child(5),
#adminSubmissionsList > .admin-card:nth-child(5) { animation-delay: 0.15s; }
#adminSubmissionsList > div:nth-child(6),
#adminSubmissionsList > .admin-card:nth-child(6) { animation-delay: 0.18s; }
#adminSubmissionsList > div:nth-child(7),
#adminSubmissionsList > .admin-card:nth-child(7) { animation-delay: 0.21s; }
#adminSubmissionsList > div:nth-child(8),
#adminSubmissionsList > .admin-card:nth-child(8) { animation-delay: 0.24s; }
#adminSubmissionsList > div:nth-child(9),
#adminSubmissionsList > .admin-card:nth-child(9) { animation-delay: 0.27s; }
#adminSubmissionsList > div:nth-child(10),
#adminSubmissionsList > .admin-card:nth-child(10) { animation-delay: 0.3s; }

#tabAdmin .admin-sub-tabs {
    animation: chatItemSlideIn 0.3s ease-out;
}

#tabAdmin .admin-controls {
    animation: chatMsgSlideUp 0.3s ease-out 0.1s both;
}

.hosting-hero {
    animation: chatMsgSlideUp 0.4s ease-out;
}

/* ===== CHAT CONTEXT MENU ===== */
@keyframes ctxMenuIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes ctxMenuOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.92); }
}

#chatContextMenu {
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#chatContextMenu.ctx-menu-hiding {
    animation: ctxMenuOut 0.15s ease forwards;
    pointer-events: none;
}

#chatContextMenu button:hover {
    background: rgba(233,69,96,0.15);
}

#chatContextMenu button:active {
    background: rgba(233,69,96,0.25);
}

#chatContextMenu #ctxDelete:hover {
    background: rgba(233,69,96,0.15);
}

#chatContextMenu hr {
    border: none;
    border-top: 1px solid rgba(233,69,96,0.15);
    margin: 4px 0;
}

/* ===== UNIFIED MODAL SYSTEM ===== */
.confirm-modal,
.prompt-modal,
.mode-setup-overlay,
.exit-confirm-overlay,
.clear-random-overlay {
    background: rgba(5, 10, 25, 0.92);
    backdrop-filter: blur(10px);
    z-index: 1000002 !important;
}

.completion-modal {
    background: radial-gradient(circle, rgba(233,69,96,0.15), rgba(5,10,25,0.95));
    backdrop-filter: blur(10px);
}

.confirm-modal-content,
.completion-modal-content,
.prompt-modal-content,
.mode-setup-modal,
.exit-confirm-modal,
.clear-random-modal {
    background: linear-gradient(145deg, #0f0f23, #1a1a2e) !important;
    border: 2px solid #e94560 !important;
    border-radius: 20px !important;
    box-shadow: 0 0 40px rgba(233,69,96,0.3), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.confirm-modal-content h3,
.completion-modal-content h2,
.prompt-modal-content h3,
.mode-setup-modal h2,
.exit-confirm-modal h3,
.clear-random-modal h2 {
    color: #e94560 !important;
    letter-spacing: 1px;
}

.confirm-modal-content p,
.completion-modal-content p,
.prompt-modal-content p,
.mode-setup-desc,
.exit-confirm-modal p,
.clear-random-modal p {
    color: rgba(255,255,255,0.6) !important;
}

.confirm-modal-buttons button,
.prompt-modal-buttons button,
.completion-modal-content button,
.exit-confirm-btn,
.mode-setup-start-btn {
    font-family: 'Minecraft', monospace;
    border-radius: 12px !important;
    padding: 10px 24px !important;
    border: none !important;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.2s ease;
}

.confirm-modal-buttons button:first-child,
.mode-setup-start-btn {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    color: white !important;
}

.confirm-modal-buttons button:first-child:hover,
.mode-setup-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233,69,96,0.4);
}

.confirm-modal-buttons button:last-child,
.prompt-modal-buttons button:last-child,
.exit-confirm-btn {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.7) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

.confirm-modal-buttons button:last-child:hover,
.prompt-modal-buttons button:last-child:hover,
.exit-confirm-btn:hover {
    background: rgba(255,255,255,0.15) !important;
    transform: translateY(-2px);
}

.prompt-modal-buttons button:first-child {
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    color: white !important;
}

.prompt-modal-buttons button:first-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46,204,113,0.4);
}

.completion-modal-content button {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    color: white !important;
    padding: 12px 30px !important;
    margin-top: 20px;
}

.completion-modal-content button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(233,69,96,0.5);
}

.exit-confirm-btn.yes {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    color: white !important;
}

.exit-confirm-btn.yes:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233,69,96,0.4);
}

@keyframes modalPopCenter {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes modalZoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes completionPop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    70% { transform: translate(-50%, -50%) scale(1.02); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Type icons in filter tags */
.filter-type-icon {
    width: 12px !important;
    height: 12px !important;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 3px;
}

.filter-tag {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* ============================================
   ТИР-ЛИСТ
   ============================================ */
.tl-header {
    text-align: center;
    margin-bottom: 24px;
}
.tl-header h2 {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    margin-bottom: 8px;
}
.tl-header p {
    color: rgba(255,255,255,0.5);
    font-size: 0.65rem;
    margin-bottom: 16px;
}
.tl-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.tl-btn {
    background: rgba(15,52,96,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.tl-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
}
.tl-btn-save { border-color: rgba(76,175,80,0.5); }
.tl-btn-save:hover { background: rgba(76,175,80,0.2); border-color: #4caf50; }
.tl-btn-reset { border-color: rgba(244,67,54,0.5); }
.tl-btn-reset:hover { background: rgba(244,67,54,0.2); border-color: #f44336; }
.tl-btn-export { border-color: rgba(33,150,243,0.5); }
.tl-btn-export:hover { background: rgba(33,150,243,0.2); border-color: #2196f3; }
.tl-btn-add { border-color: rgba(233,69,96,0.5); }
.tl-btn-add:hover { background: rgba(233,69,96,0.2); border-color: #e94560; }
.tl-btn-saves { border-color: rgba(255,193,7,0.5); }
.tl-btn-saves:hover { background: rgba(255,193,7,0.2); border-color: #ffc107; }
.tl-save-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); margin-bottom:6px; cursor:pointer; transition:all 0.2s; }
.tl-save-item:hover { background:rgba(255,255,255,0.08); border-color:rgba(233,69,96,0.4); }
.tl-save-del { background:none; border:1px solid rgba(233,69,96,0.3); color:#e94560; width:28px; height:28px; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.6rem; transition:all 0.2s; flex-shrink:0; }
.tl-save-del:hover { background:rgba(233,69,96,0.2); border-color:#e94560; }

#tabTierlist {
    overflow: visible;
}
.tl-board {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}
.tl-tier-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 64px;
    border-radius: 10px;
    overflow: visible;
    background: rgba(15,15,35,0.5);
    border: 1px solid rgba(255,255,255,0.06);
}
.tl-tier-label {
    width: 48px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 1.1rem;
    flex-shrink: 0;
    border-radius: 10px 0 0 10px;
    user-select: none;
}
.tl-tier-drop {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 0 0 8px;
    min-height: 64px;
    align-items: center;
    transition: background 0.2s;
}
.tl-drop-hover {
    background: rgba(233,69,96,0.15) !important;
    outline: 2px dashed rgba(233,69,96,0.5);
    outline-offset: -2px;
}
.tl-tier-controls {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}
.tl-tier-row:hover .tl-tier-controls {
    opacity: 1;
}
.tl-ctrl-btn {
    background: rgba(255,255,255,0.06);
    border: none;
    color: rgba(255,255,255,0.4);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    transition: all 0.15s;
}
.tl-ctrl-btn:hover {
    background: rgba(233,69,96,0.2);
    color: #e94560;
}
.tl-ctrl-btn--del:hover {
    background: rgba(244,67,54,0.2);
    color: #f44336;
}
.tl-tier-arrows {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 4px 4px 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.tl-tier-row:hover .tl-tier-arrows {
    opacity: 1;
}
.tl-arrow-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.5rem;
    transition: color 0.15s;
}
.tl-arrow-btn:hover {
    color: #e94560;
}
.tl-add-tier-row {
    display: flex;
    justify-content: center;
    padding: 8px;
}
.tl-add-tier-btn {
    background: rgba(233,69,96,0.1);
    border: 1px dashed rgba(233,69,96,0.4);
    color: rgba(233,69,96,0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.tl-add-tier-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}

.tl-pool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: rgba(15,52,96,0.3);
    border-radius: 10px;
    border: 1px solid rgba(233,69,96,0.15);
}
.tl-pool-header span {
    color: rgba(255,255,255,0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
}
.tl-search {
    background: rgba(10,10,26,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    padding: 5px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    outline: none;
    width: 200px;
    transition: border-color 0.2s;
}
.tl-search:focus {
    border-color: #e94560;
}
.tl-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
    background: rgba(10,10,26,0.3);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}
.tl-pool::-webkit-scrollbar {
    width: 6px;
}
.tl-pool::-webkit-scrollbar-track {
    background: transparent;
}
.tl-pool::-webkit-scrollbar-thumb {
    background: rgba(233,69,96,0.3);
    border-radius: 3px;
}

.tl-poke-card {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    cursor: grab;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.15s;
    flex-shrink: 0;
}
.tl-poke-card:hover {
    border-color: #e94560;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(233,69,96,0.3);
}
.tl-poke-card:active {
    cursor: grabbing;
}
.tl-poke-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tl-poke-card--placed {
    height: 64px;
    width: unset;
    aspect-ratio: 1;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 4px;
    flex-shrink: 0;
}
.tl-poke-card--placed img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}
.tl-poke-card--placed:hover {
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
}
.tl-poke-card--placed img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tl-poke-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e94560;
    color: white;
    font-size: 0.45rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    border: 1px solid rgba(0,0,0,0.3);
}
.tl-poke-card--placed:hover .tl-poke-remove {
    display: flex;
}

.tl-zoom-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 4px 12px;
}
.tl-zoom-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.tl-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    cursor: pointer;
    border: none;
}
.tl-zoom-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    cursor: pointer;
    border: none;
}
.tl-zoom-reset {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    transition: all 0.15s;
}
.tl-zoom-reset:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}

/* Edit modal */
.tl-edit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Minecraft', monospace;
}
.tl-edit-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    min-width: 320px;
    max-width: 90vw;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
    color: white;
    text-align: center;
}
.tl-edit-modal h3 {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    margin: 0 0 16px 0;
    text-align: center;
}
.tl-edit-field {
    margin-bottom: 14px;
}
.tl-edit-field label {
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    display: block;
    margin-bottom: 6px;
}
.tl-edit-input {
    width: 100%;
    background: rgba(10,10,26,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    box-sizing: border-box;
}
.tl-edit-input:focus {
    border-color: #e94560;
}
.tl-edit-colors {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.tl-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}
.tl-color-swatch:hover {
    transform: scale(1.15);
}
.tl-color-active {
    border-color: white;
    box-shadow: 0 0 8px rgba(255,255,255,0.4);
}
.tl-color-picker {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: none;
    padding: 0;
}
.tl-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}
.tl-export-modal {
    background: #0a0a1a;
    border: 2px solid #e94560;
    border-radius: 16px;
    padding: 24px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

/* Pool settings */
.tl-pool-settings-btn {
    background: rgba(233,69,96,0.1);
    border: 1px solid rgba(233,69,96,0.3);
    color: rgba(233,69,96,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.tl-pool-settings-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}

/* Pool modal */
.tl-pool-modal {
    background: linear-gradient(135deg, #0d1b30, #0a1628);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 16px;
    padding: 0;
    width: 560px;
    max-width: 94vw;
    max-height: 88vh;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 40px rgba(233,69,96,0.08);
    display: flex;
    flex-direction: column;
}
.tl-pool-modal-header {
    padding: 20px 24px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tl-pool-modal-header h3 {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    margin: 0 0 14px 0;
}
.tl-pool-mode-toggle {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.tl-pool-mode-btn {
    background: rgba(15,52,96,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 7px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tl-pool-mode-btn:hover {
    background: rgba(233,69,96,0.1);
    border-color: rgba(233,69,96,0.3);
    color: white;
}
.tl-pool-mode-btn.active {
    background: rgba(233,69,96,0.15);
    border-color: #e94560;
    color: #e94560;
}

/* Tag sections */
#tlPoolTagSection {
    padding: 14px 24px;
    overflow-y: auto;
    flex: 1;
}
.tl-pool-hint {
    text-align: center;
    color: rgba(255,255,255,0.35);
    font-size: 0.5rem;
    font-family: 'Minecraft', monospace;
    margin-bottom: 14px;
}
.tl-hint-include {
    color: #4caf50;
}
.tl-hint-exclude {
    color: #f44336;
}
.tl-pool-section {
    margin-bottom: 14px;
}
.tl-pool-section-title {
    color: rgba(255,255,255,0.45);
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tl-pool-section-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.tl-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(15,25,50,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.5);
    user-select: none;
}
.tl-tag-pill:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
}
.tl-tag-none {
    color: rgba(255,255,255,0.45);
    border-color: rgba(255,255,255,0.08);
    background: rgba(15,25,50,0.4);
}
.tl-tag-include {
    color: #66bb6a;
    border-color: rgba(76,175,80,0.35);
    background: rgba(76,175,80,0.1);
}
.tl-tag-include:hover {
    background: rgba(76,175,80,0.18);
}
.tl-tag-exclude {
    color: #ef5350;
    border-color: rgba(244,67,54,0.35);
    background: rgba(244,67,54,0.1);
}
.tl-tag-exclude:hover {
    background: rgba(244,67,54,0.18);
}
.tl-tag-state {
    width: 13px;
    text-align: center;
    font-size: 0.5rem;
    flex-shrink: 0;
}
.tl-tag-label {
    white-space: nowrap;
}

/* Footer */
.tl-pool-modal-footer {
    padding: 14px 24px;
    display: flex;
    gap: 8px;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.tl-pool-action-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 7px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tl-pool-action-btn.save {
    background: rgba(76,175,80,0.15);
    border-color: rgba(76,175,80,0.4);
    color: #66bb6a;
}
.tl-pool-action-btn.save:hover {
    background: rgba(76,175,80,0.25);
}
.tl-pool-action-btn.reset {
    background: rgba(255,152,0,0.1);
    border-color: rgba(255,152,0,0.3);
    color: #ffa726;
}
.tl-pool-action-btn.reset:hover {
    background: rgba(255,152,0,0.2);
}
.tl-pool-action-btn.cancel {
    background: rgba(244,67,54,0.08);
    border-color: rgba(244,67,54,0.25);
    color: rgba(255,255,255,0.4);
}
.tl-pool-action-btn.cancel:hover {
    background: rgba(244,67,54,0.15);
    color: rgba(255,255,255,0.7);
}

/* ===== TAP-TO-SELECT (mobile drag alternative) ===== */
.tl-poke-selected {
    outline: 3px solid #ffeb3b !important;
    box-shadow: 0 0 14px rgba(255,235,59,0.5) !important;
    transform: scale(1.15) !important;
    z-index: 50;
}
.tl-board-selecting .tl-tier-drop {
    outline: 2px dashed rgba(255,235,59,0.35);
    outline-offset: -2px;
    min-height: 80px;
}
.tl-board-selecting .tl-tier-row {
    cursor: pointer;
}
.tl-board-selecting .tl-tier-row:hover .tl-tier-drop {
    background: rgba(255,235,59,0.1);
}
.tl-pool-selecting {
    outline: 2px dashed rgba(255,235,59,0.35);
    outline-offset: -2px;
    cursor: pointer;
}

/* ===== MOBILE TIER LIST ===== */
@media (max-width: 768px) {
    #tabTierlist {
        padding: 12px !important;
    }
    .tl-header h2 {
        font-size: 0.75rem !important;
    }
    .tl-header p {
        font-size: 0.55rem !important;
        margin-bottom: 10px !important;
    }
    .tl-actions {
        gap: 6px !important;
        justify-content: center !important;
    }
    .tl-btn {
        font-size: 0.5rem !important;
        padding: 5px 8px !important;
    }
    .tl-btn i {
        display: none;
    }
    .tl-zoom-wrap {
        padding: 3px 8px !important;
        gap: 4px !important;
    }
    .tl-zoom-slider {
        width: 55px !important;
    }
    .tl-zoom-reset {
        padding: 2px 6px !important;
        font-size: 0.5rem !important;
    }

    /* Tier rows: stack vertically */
    .tl-tier-row {
        flex-direction: column !important;
        min-height: auto !important;
        border-radius: 8px !important;
        overflow: visible !important;
    }
    .tl-tier-label {
        width: 100% !important;
        min-height: 32px !important;
        height: 32px !important;
        font-size: 0.7rem !important;
        border-radius: 8px 8px 0 0 !important;
        flex-direction: row !important;
    }
    .tl-tier-drop {
        min-height: 48px !important;
        padding: 6px !important;
        gap: 4px !important;
        border-top: none !important;
        border-radius: 0 0 8px 8px !important;
    }
    .tl-poke-card--placed {
        height: 48px !important;
        width: 48px !important;
        aspect-ratio: 1 !important;
    }

    /* Controls always visible on mobile */
    .tl-tier-controls {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        opacity: 1 !important;
        flex-direction: row !important;
        gap: 4px !important;
        z-index: 5;
    }
    .tl-tier-row {
        position: relative !important;
    }
    .tl-tier-arrows {
        opacity: 1 !important;
        position: absolute !important;
        bottom: 4px !important;
        right: 4px !important;
        flex-direction: row !important;
        gap: 3px !important;
    }
    .tl-arrow-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.5rem !important;
    }
    .tl-ctrl-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.5rem !important;
    }

    /* Pool */
    .tl-pool-header {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    .tl-pool-header > div {
        width: 100% !important;
        justify-content: space-between !important;
    }
    .tl-search {
        width: 100% !important;
        font-size: 0.55rem !important;
    }
    .tl-pool {
        max-height: 300px !important;
        gap: 4px !important;
        padding: 6px !important;
    }
    .tl-pool .tl-poke-card {
        width: 42px !important;
        height: 42px !important;
    }
    .tl-pool-settings-btn {
        font-size: 0.5rem !important;
        padding: 4px 8px !important;
    }

    /* Pool return bar when selecting */
    .tl-pool-selecting::before {
        content: 'Нажмите сюда чтобы вернуть в пул';
        display: block;
        width: 100%;
        text-align: center;
        font-family: 'Minecraft', monospace;
        font-size: 0.5rem;
        color: #ffeb3b;
        padding: 6px;
        margin-bottom: 4px;
        border-radius: 6px;
        background: rgba(255,235,59,0.08);
    }
}

@media (max-width: 480px) {
    .tl-actions .tl-btn span,
    .tl-actions .tl-btn:not(.tl-zoom-wrap) {
        font-size: 0.45rem !important;
        padding: 4px 6px !important;
    }
    .tl-pool .tl-poke-card {
        width: 36px !important;
        height: 36px !important;
    }
    .tl-poke-card--placed {
        height: 42px !important;
        width: 42px !important;
    }
}

/* DexID Game */
.dexid-mode-btn {
    padding: 10px 24px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.dexid-mode-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.dexid-mode-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
.dexid-num-input {
    width: 100%;
    padding: 20px 24px;
    border-radius: 14px;
    border: 2px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.4);
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.dexid-num-input::-webkit-inner-spin-button,
.dexid-num-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.dexid-rounds-btn {
    padding: 12px 28px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.dexid-rounds-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.dexid-rounds-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
.better-mode-btn {
    padding: 10px 24px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.better-mode-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.better-mode-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
.better-rounds-btn {
    padding: 12px 28px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.better-rounds-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.better-rounds-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
#dexidSuggestions .dexid-sugg-item {
    padding: 14px 20px;
    color: rgba(255,255,255,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.15s;
}
#dexidSuggestions .dexid-sugg-item:hover,
#dexidSuggestions .dexid-sugg-item.active {
    background: rgba(233,69,96,0.2);
}
#dexidSuggestions .dexid-sugg-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
}
.dexid-result-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}
.dexid-result-row img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}
/* ============================================
   РАЗДЕЛЕНИЕ ВКЛАДОК: ИГРЫ / ОСТАЛЬНОЕ
   ============================================ */

/* 1. Контейнер табов — без подложки, просто флекс-колонка */
.tabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

/* 2. Строки — флекс с переносом */
.tabs-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* 3. Разделитель между строками */
.tabs-row--other {
    border-top: 1px solid rgba(233, 69, 96, 0.15);
    padding-top: 12px;
}

/* 4. Игровые вкладки — выделенные, крупные */
.tab-btn.game-tab {
    font-size: 0.9rem !important;
    padding: 14px 32px !important;
    background: linear-gradient(145deg, rgba(15, 52, 96, 0.4), rgba(26, 26, 46, 0.6)) !important;
    border: 2px solid rgba(233, 69, 96, 0.25) !important;
    border-radius: 16px !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

    /* 5. Неоновое свечение при наведении */
    .tab-btn.game-tab:hover {
        transform: translateY(-3px) scale(1.03) !important;
        border-color: #e94560 !important;
        box-shadow: 0 8px 30px rgba(233, 69, 96, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }

    /* 6. Активная игровая вкладка */
    .tab-btn.game-tab.active {
        background: linear-gradient(135deg, rgba(233, 69, 96, 0.3), rgba(198, 42, 71, 0.5)) !important;
        border-color: #e94560 !important;
        box-shadow: 0 0 35px rgba(233, 69, 96, 0.4), 0 0 70px rgba(233, 69, 96, 0.15) !important;
        color: #fff !important;
        text-shadow: 0 0 15px rgba(233, 69, 96, 0.8);
    }

        /* 7. Неоновая линия под активной вкладкой */
        .tab-btn.game-tab.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 20%;
            width: 60%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #e94560, transparent);
            border-radius: 2px;
            box-shadow: 0 0 15px #e94560, 0 0 30px rgba(233, 69, 96, 0.3);
            animation: gameTabGlow 1.8s ease-in-out infinite;
        }

@keyframes gameTabGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scaleX(0.8);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* 8. Анимация иконок игровых вкладок */
.tab-btn.game-tab i {
    font-size: 1.1rem !important;
    margin-right: 10px !important;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 0 4px rgba(233, 69, 96, 0.2));
}

.tab-btn.game-tab:hover i {
    transform: scale(1.3) rotate(-8deg) !important;
    filter: drop-shadow(0 0 15px rgba(233, 69, 96, 0.8));
}

.tab-btn.game-tab.active i {
    filter: drop-shadow(0 0 20px rgba(233, 69, 96, 0.9));
}

/* 9. ТИР-ЛИСТ — ЗОЛОТАЯ ТЕМА */
.tab-btn.game-tab[data-tab="tierlist"] {
    border-color: rgba(255, 215, 0, 0.3) !important;
    background: linear-gradient(145deg, rgba(40, 30, 10, 0.5), rgba(60, 40, 10, 0.4)) !important;
}

    .tab-btn.game-tab[data-tab="tierlist"]:hover {
        border-color: #ffd700 !important;
        box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 215, 0, 0.1) !important;
    }

    .tab-btn.game-tab[data-tab="tierlist"].active {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(200, 150, 0, 0.4)) !important;
        border-color: #ffd700 !important;
        box-shadow: 0 0 35px rgba(255, 215, 0, 0.4), 0 0 70px rgba(255, 215, 0, 0.15) !important;
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
    }

        .tab-btn.game-tab[data-tab="tierlist"].active::after {
            background: linear-gradient(90deg, transparent, #ffd700, transparent);
            box-shadow: 0 0 15px #ffd700, 0 0 30px rgba(255, 215, 0, 0.3);
        }

    .tab-btn.game-tab[data-tab="tierlist"]:hover i {
        color: #ffd700 !important;
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
    }

    .tab-btn.game-tab[data-tab="tierlist"].active i {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.9));
    }

/* 10. Обычные вкладки (вторая строка) — скромные, чистые */
.tabs-row--other .tab-btn {
    background: rgba(20, 20, 40, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 30px !important;
    padding: 10px 22px !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.2s ease !important;
}

    .tabs-row--other .tab-btn:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        transform: translateY(-2px) !important;
    }

    .tabs-row--other .tab-btn.active {
        background: rgba(233, 69, 96, 0.15) !important;
        border-color: rgba(233, 69, 96, 0.4) !important;
        color: #e94560 !important;
    }
/* ============================================
   АНИМАЦИЯ ДЛЯ DEXID
   ============================================ */

/* Анимация входа */
@keyframes dexidModalIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }

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

/* Анимация выхода */
@keyframes dexidModalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
}

/* Анимация фона */
@keyframes dexidOverlayIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

@keyframes dexidOverlayOut {
    from {
        opacity: 1;
        backdrop-filter: blur(8px);
    }

    to {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

/* Контейнер оверлея */
#dexidOverlay {
    animation: dexidOverlayIn 0.3s ease forwards;
}

    /* Контент модалки */
    #dexidOverlay > div {
        animation: dexidModalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* ===== КЛАССЫ ДЛЯ АНИМАЦИИ ВЫХОДА ===== */

    /* Оверлей исчезает */
    #dexidOverlay.overlay-out {
        animation: dexidOverlayOut 0.3s ease forwards !important;
    }

        /* Контент вылетает */
        #dexidOverlay.overlay-out > div {
            animation: dexidModalOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        }
/* Кнопка закрытия в DexID */
#dexidOverlay button[onclick*="dexidClose"] {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

#dexidOverlay button[onclick*="dexidClose"]:hover {
    transform: rotate(25deg) scale(1.1) !important;
    background: rgba(233, 69, 96, 0.3) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
}

#dexidOverlay button[onclick*="dexidClose"]:active {
    transform: rotate(25deg) scale(0.9) !important;
}
/* ============================================
   АНИМАЦИЯ ДЛЯ НАСТРОЙКИ ПУЛА ПОКЕМОНОВ
   ============================================ */

/* Анимация входа */
@keyframes tlPoolModalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

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

/* Анимация выхода */
@keyframes tlPoolModalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

/* Анимация фона */
@keyframes tlPoolOverlayIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

@keyframes tlPoolOverlayOut {
    from {
        opacity: 1;
        backdrop-filter: blur(4px);
    }

    to {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

/* Оверлей */
.tl-edit-overlay {
    animation: tlPoolOverlayIn 0.25s ease forwards;
}

    /* Модалка */
    .tl-edit-overlay .tl-pool-modal {
        animation: tlPoolModalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* ===== КЛАССЫ ДЛЯ АНИМАЦИИ ВЫХОДА ===== */

    /* Оверлей исчезает */
    .tl-edit-overlay.overlay-out {
        animation: tlPoolOverlayOut 0.25s ease forwards !important;
    }

        /* Модалка вылетает */
        .tl-edit-overlay.overlay-out .tl-pool-modal {
            animation: tlPoolModalOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        }

/* ============================================
   ГЕНЕРАТОР КАРТОЧЕК АТАК (НОВЫЙ СТИЛЬ)
   ============================================ */

.move-generator-modal {
    max-width: 560px !important;
    padding: 28px !important;
}

.move-gen-field {
    margin-bottom: 14px;
}

    .move-gen-field label {
        display: block;
        color: rgba(255,255,255,0.5);
        font-family: 'Minecraft', monospace;
        font-size: 0.6rem;
        margin-bottom: 5px;
        letter-spacing: 0.5px;
    }

.move-cat-btn-gen {
    padding: 6px 14px;
    border-radius: 20px;
    border: 2px solid rgba(255,255,255,0.15);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.25s;
}

    .move-cat-btn-gen:hover {
        border-color: rgba(255,255,255,0.3);
        color: rgba(255,255,255,0.8);
    }

    .move-cat-btn-gen.active {
        border-color: #e94560;
        background: rgba(233,69,96,0.2);
        color: #e94560;
    }

.move-type-btn {
    padding: 4px 10px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.6;
}

    .move-type-btn:hover {
        transform: scale(1.05);
        opacity: 0.9;
    }

    .move-type-btn.active {
        border-color: white !important;
        opacity: 1;
        transform: scale(1.05);
        box-shadow: 0 0 12px rgba(255,255,255,0.2);
    }

    .lang-switch {
        display: inline-flex;
        border: 2px solid rgba(233,69,96,0.5);
        border-radius: 30px;
        overflow: hidden;
        margin-right: 10px;
        background: rgba(15,52,96,0.7);
    }
    .lang-btn {
        font-family: 'Minecraft', monospace;
        font-size: 0.55rem;
        color: #fff;
        background: transparent;
        border: none;
        padding: 9px 14px;
        cursor: pointer;
        transition: all 0.15s;
    }
    .lang-btn:hover { color: #e94560; }
    .lang-btn.active {
        background: #e94560;
        color: #fff;
        box-shadow: 0 0 14px rgba(233,69,96,0.5);
    }
    .user-bar .lang-switch { align-self: center; }

/* ============================================
   ИГРА «У КОГО ЛУЧШЕ» — оформлена как DexID
   ============================================ */

#betterOverlay { animation: dexidOverlayIn 0.3s ease forwards; }
#betterOverlay > div { animation: dexidModalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
#betterOverlay.overlay-out { animation: dexidOverlayOut 0.3s ease forwards !important; }
#betterOverlay.overlay-out > div { animation: dexidModalOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; }
#betterOverlay button[onclick*="betterClose"] {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}
#betterOverlay button[onclick*="betterClose"]:hover {
    transform: rotate(25deg) scale(1.1) !important;
    background: rgba(233, 69, 96, 0.3) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
}
#betterOverlay button[onclick*="betterClose"]:active {
    transform: rotate(25deg) scale(0.9) !important;
}

.better-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.better-card {
    background: rgba(15,52,96,0.3); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 14px; text-align: center; cursor: pointer; color: #fff;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; position: relative;
}
.better-card:hover:not(.answered) { transform: translateY(-4px); border-color: #e94560; box-shadow: 0 6px 20px rgba(233,69,96,0.3); }
.better-card.answered { cursor: default; }
.better-card.correct { border-color: #2ecc71; box-shadow: 0 0 22px rgba(46,204,113,0.5); }
.better-card.wrong { border-color: #e74c3c; box-shadow: 0 0 22px rgba(231,76,60,0.4); }
.better-card img { width: 100%; max-width: 120px; height: 110px; object-fit: contain; image-rendering: pixelated; }
.better-card-name { font-size: 0.55rem; line-height: 1.5; margin: 8px 0 6px; min-height: 2.2em; display: flex; align-items: center; justify-content: center; }
.better-stat-reveal { display: none; margin-top: 8px; }
.better-card.answered .better-stat-reveal { display: block; }
.better-stat-line { font-size: 0.5rem; color: rgba(255,255,255,0.8); margin-bottom: 5px; }
.better-stat-bar-wrap { height: 7px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.better-stat-bar { height: 100%; background: #4ecdc4; border-radius: 4px; }
.better-card.correct .better-stat-bar { background: #2ecc71; }
.better-verdict { position: absolute; top: 8px; right: 8px; font-size: 0.8rem; display: none; }
.better-card.answered .better-verdict { display: block; }
.better-card.correct .better-verdict { color: #2ecc71; }
.better-card.wrong .better-verdict { color: #e74c3c; }
.better-prompt { text-align: center; font-size: 0.9rem; line-height: 1.8; padding: 24px; background: rgba(15,52,96,0.3); border: 1px solid rgba(233,69,96,0.2); border-radius: 16px; margin-bottom: 20px; color: #fff; }
.better-prompt b { color: #e94560; }
.better-prompt .mode { color: #4ecdc4; }
.better-timerbar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin-bottom: 20px; }
.better-timerbar > div { height: 100%; width: 100%; background: linear-gradient(90deg, #2ecc71, #e94560); transition: width 1s linear; }
.better-feedback { text-align: center; font-size: 0.7rem; line-height: 1.8; min-height: 2.2em; margin-bottom: 20px; }
.better-feedback.ok { color: #2ecc71; }
.better-feedback.bad { color: #e74c3c; }

/* Кнопка открытия детальной карточки */
.db-card-open-btn {
    margin-top: 12px;
    width: 100%;
    background: rgba(233, 69, 96, 0.14);
    border: 1px solid rgba(233, 69, 96, 0.45);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 8px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-shadow: 1px 1px 0 #000;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
.db-card-open-btn:hover {
    background: linear-gradient(135deg, #e94560, #c23152);
    border-color: #e94560;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.5);
    transform: translateY(-2px);
    color: #ffffff;
}
.db-card-open-btn:active {
    transform: translateY(0);
}
.db-mcard-open-btn {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.db-mcard-open-btn:hover {
    background: #ffffff;
    color: #111122;
    text-shadow: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Иконка открытия рядом с заголовком */
.db-title-open-icon {
    font-size: 0.65em;
    opacity: 0.45;
    margin-left: 5px;
    vertical-align: middle;
    transition: all 0.2s ease;
}
.db-card-name:hover .db-title-open-icon,
.db-abil-names:hover .db-title-open-icon,
.db-move-names:hover .db-title-open-icon,
.db-mcard-title:hover .db-title-open-icon {
    opacity: 1;
    color: #e94560;
    transform: translate(1px, -1px);
}

.db-table-abil-item, .db-abil-mini {
    cursor: pointer;
    transition: color 0.2s ease, text-decoration 0.2s ease;
    user-select: text;
    display: inline-block;
}
.db-table-abil-item:hover, .db-abil-mini:hover {
    color: #e94560;
    text-decoration: underline;
}

/* Двойная категория Z-приёмов (Физ + Спец) */
.db-move-tc-dual {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.db-move-cat-slash {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    font-weight: bold;
    margin: 0 1px;
}
.db-mcard-cat-badge.dual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 105px;
    height: 52px;
}
.db-mcard-cat-badge.dual .db-mcard-cat-img {
    width: 48px;
    height: 32px;
    object-fit: contain;
}

/* Градиентные рамки для всех рамок (карточка, инфо-бокс, плашка типа) */
.db-move-card.db-move-card-poster.db-card-grad-gmax {
    border-color: transparent;
    background: 
        radial-gradient(circle at 50% 30%, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.15) 100%) padding-box,
        linear-gradient(180deg, var(--card-accent, #777) 0%, #FF0045 100%) border-box,
        var(--card-accent, #777);
    box-shadow: 0 10px 28px rgba(255, 0, 69, 0.25), inset 0 2px 6px rgba(255,255,255,0.75);
}
.db-move-card.db-move-card-poster.db-card-grad-gmax .db-mcard-info-box {
    border-color: transparent;
    background: 
        linear-gradient(180deg, #44264e 0%, #2b1433 100%) padding-box,
        linear-gradient(180deg, var(--card-accent, #777) 0%, #FF0045 100%) border-box;
}
.db-move-card.db-move-card-poster.db-card-grad-gmax .db-mcard-type-pill {
    border-radius: 999px;
    border: 3.5px solid #ffffff;
    padding: 6px 12px;
    background: var(--card-accent, #777);
    box-shadow: 0 4px 10px rgba(0,0,0,0.22), inset 0 2px 4px rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-mcard-type-txt {
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow:
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px 1.5px 0 #000,
        1.5px 1.5px 0 #000,
        0 1.5px 0 #000,
        0 -1.5px 0 #000,
        1.5px 0 0 #000,
        -1.5px 0 0 #000,
        0 2px 4px rgba(0,0,0,0.85);
    white-space: nowrap;
    display: block;
    letter-spacing: 0.02em;
    line-height: 1;
}

.db-move-card.db-move-card-poster.db-card-grad-zmove .db-mcard-type-pill {
    border-radius: 999px;
    border: 3.5px solid #ffffff;
    padding: 6px 12px;
    background: var(--card-accent, #777);
    box-shadow: 0 4px 10px rgba(0,0,0,0.22), inset 0 2px 4px rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-mcard-type-txt {
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow:
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px 1.5px 0 #000,
        1.5px 1.5px 0 #000,
        0 1.5px 0 #000,
        0 -1.5px 0 #000,
        1.5px 0 0 #000,
        -1.5px 0 0 #000,
        0 2px 4px rgba(0,0,0,0.85);
    white-space: nowrap;
    display: block;
    letter-spacing: 0.02em;
    line-height: 1;
}

.db-mcard-extra-pill.tag {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    padding: 2.5px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.7);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 18%, rgba(15, 23, 42, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 55%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--pill-color, #FF0045) 20%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    transition: all 0.2s ease;
}
.db-mcard-extra-pill.tag i {
    font-size: 0.6rem;
    color: var(--pill-color, #ffffff);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--pill-color, #ffffff) 80%, transparent));
}
.db-mcard-extra-pill.tag:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 28%, rgba(15, 23, 42, 0.85));
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 80%, transparent);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--pill-color, #FF0045) 40%, transparent);
}

.db-move-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.db-move-cats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.db-move-cats-row .db-move-cat-img {
    width: 22px;
    height: 14px;
    object-fit: contain;
}

.db-move-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
/* Sleek Glassmorphic Move Tags & Gen Pill */
.db-move-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.db-move-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2.5px 8px;
    border-radius: 999px;
    font-size: 0.63rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    font-family: 'Minecraft', monospace;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.7);
    background: color-mix(in srgb, var(--tag-bg, #FF0045) 18%, rgba(15, 23, 42, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-color: color-mix(in srgb, var(--tag-bg, #FF0045) 55%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--tag-bg, #FF0045) 20%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}
.db-move-meta-tag i {
    font-size: 0.62rem;
    color: var(--tag-bg, #ffffff);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tag-bg, #ffffff) 80%, transparent));
    display: inline-block;
    vertical-align: middle;
}
.db-move-meta-tag:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--tag-bg, #FF0045) 30%, rgba(15, 23, 42, 0.85));
    border-color: color-mix(in srgb, var(--tag-bg, #FF0045) 80%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tag-bg, #FF0045) 45%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.db-move-gen {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    padding: 2.5px 7px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.db-move-pp-max {
    font-size: 0.52rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.65);
    margin-left: 2px;
}

/* Таблицы для Способностей и Движений */
.db-table-abilities .th-id { width: 45px; text-align: center; }
.db-table-abilities .th-name { width: 170px; text-align: left; }
.db-table-abilities .th-desc { min-width: 260px; text-align: left; }
.db-table-abilities .th-holders { min-width: 200px; text-align: left; }
.db-table-abilities .th-count { width: 65px; text-align: center; }

.db-table-desc-full {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.35;
    word-break: break-word;
    max-width: 420px;
}
.db-table-holders-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    max-width: 520px;
}
.db-table-mini-holder {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.db-table-mini-holder:hover {
    transform: scale(1.25);
    background: rgba(233, 69, 96, 0.3);
    z-index: 2;
}
.db-table-holders-more {
    font-size: 0.55rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.5);
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
}
.db-table-subname {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: normal;
    display: block;
    margin-top: 1px;
}

.db-table-moves .th-id { width: 55px; text-align: center; }
.db-table-moves .th-name { min-width: 150px; text-align: left; }
.db-table-moves .th-type { width: 110px; text-align: left; }
.db-table-moves .th-cat { width: 120px; text-align: left; }
.db-table-moves .th-gen { width: 55px; text-align: center; }
.db-table-moves .th-tags { min-width: 100px; text-align: center; }

.db-table-type-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: bold;
}
.db-table-cats-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.db-table-cat-icon {
    width: 20px;
    height: 14px;
    object-fit: contain;
}
.db-table-cat-lbl {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
}

/* Move Numeric & Range Filter Controls */
.db-filter-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.db-num-input {
    width: 76px;
    height: 32px;
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    text-align: center;
    padding: 0 6px;
    outline: none;
    transition: all 0.2s ease;
}
.db-num-input:focus {
    border-color: #e94560;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
    background: rgba(15, 52, 96, 0.7);
}
.db-num-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
}
.db-range-sep {
    color: rgba(255, 255, 255, 0.4);
    font-weight: bold;
    font-size: 0.8rem;
}
.db-reset-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.18), rgba(233, 69, 96, 0.08));
    border: 1px solid rgba(233, 69, 96, 0.45);
    color: #ff6b81;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}
.db-reset-filters-btn i {
    font-size: 0.65rem;
    transition: transform 0.35s ease;
}
.db-reset-filters-btn:hover {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4);
}
.db-reset-filters-btn:hover i {
    transform: rotate(-180deg);
}
.db-reset-filters-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(233, 69, 96, 0.25);
}



/* ===== Режим «Страница / Профиль Покемона» (Dossier View) ===== */
.db-pokemon-profile-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0 40px;
    animation: fadeIn 0.3s ease;
}

/* Навигационная панель профиля */
.db-profile-nav-bar {
    position: relative;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 16px;
    backdrop-filter: blur(12px);
}
.db-profile-nav-left, .db-profile-nav-right, .db-profile-nav-center {
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-profile-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.db-profile-btn:hover {
    background: rgba(233, 69, 96, 0.35);
    border-color: #e94560;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233, 69, 96, 0.3);
}
.db-profile-btn.primary {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.4), rgba(194, 49, 82, 0.5));
    border-color: #e94560;
    color: #ffffff;
    font-weight: bold;
}
.db-profile-btn.primary:hover {
    background: linear-gradient(135deg, #e94560, #c62a47);
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.45);
}

/* Главная сетка профиля */

/* Переключатель форм покемона с одинаковым DexID */
.db-profile-forms-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-profile-forms-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-profile-forms-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.db-profile-form-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-profile-form-pill:hover {
    background: rgba(233, 69, 96, 0.25);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.5);
    transform: translateY(-1px);
}
.db-profile-form-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(233, 69, 96, 0.4);
}

/* Глобальный переключатель поколений на странице покемона */
.db-profile-gens-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-profile-gens-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #00cec9;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-profile-gens-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.db-profile-gen-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    user-select: none;
}
.db-profile-gen-pill:hover {
    background: rgba(0, 206, 201, 0.22);
    color: #ffffff;
    border-color: rgba(0, 206, 201, 0.5);
    transform: translateY(-1px);
}
.db-profile-gen-pill.active {
    background: linear-gradient(135deg, #00cec9, #0984e3);
    color: #ffffff;
    border-color: #00cec9;
    font-weight: bold;
    box-shadow: 0 3px 12px rgba(0, 206, 201, 0.45);
}
.db-gen-current-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #55efc4;
    box-shadow: 0 0 6px #55efc4;
    display: inline-block;
}

.db-profile-hero-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
}
@media (max-width: 900px) {
    
/* Переключатель форм покемона с одинаковым DexID */
.db-profile-forms-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-profile-forms-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-profile-forms-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.db-profile-form-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-profile-form-pill:hover {
    background: rgba(233, 69, 96, 0.25);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.5);
    transform: translateY(-1px);
}
.db-profile-form-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(233, 69, 96, 0.4);
}

.db-profile-hero-grid {
        grid-template-columns: 1fr;
    }
}

/* Левая колонка: Арт, Типы, Описание */
.db-profile-card-left {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
}
.db-profile-card-left::before {
    content: '';
    position: absolute;
    top: -50px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: var(--poke-glow, rgba(233, 69, 96, 0.25));
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}
.db-profile-img-wrap {
    position: relative;
    z-index: 1;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-profile-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.65));
    transform: scale(var(--sprite-scale, 1));
    transform-origin: center center;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.db-profile-img:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.07));
}
.db-profile-img.is-pixel-sprite {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: auto;
    height: auto;
    max-width: 96px;
    max-height: 96px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.db-profile-img.is-pixel-sprite:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.08));
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.85));
}
.db-profile-img.is-gif {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.db-profile-img.is-gif:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.08));
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.85));
}
.db-profile-media-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.db-profile-toggle-group {
    display: inline-flex;
    gap: 2px;
    background: rgba(0, 0, 0, 0.45);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
}
.db-view-mode-btn,
.db-shiny-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    padding: 4px 8px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.db-view-mode-btn:hover,
.db-shiny-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}
.db-view-mode-btn.active,
.db-shiny-btn.active {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.db-profile-shiny-toggle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.db-profile-identity {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.db-profile-dex {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #e94560;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.db-profile-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    word-break: break-word;
}
.db-profile-name-en {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}
.db-profile-types {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.db-profile-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    min-width: 110px;
    max-width: 135px;
    box-sizing: border-box;
    white-space: nowrap;
    letter-spacing: 0.4px;
    backdrop-filter: blur(8px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.db-profile-type-badge:hover {
    transform: translateY(-2px);
}
.db-profile-type-badge img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}
.db-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}
.db-profile-desc-box {
    position: relative;
    z-index: 1;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}

/* Правая колонка: Характеристики, Способности, Защита типов */
.db-profile-card-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.db-profile-section {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 18px 22px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.db-profile-sec-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #e94560;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

/* Характеристики */
.db-profile-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-profile-stat-row {
    display: grid;
    grid-template-columns: 80px 120px 1fr;
    align-items: center;
    gap: 12px;
}
.db-profile-stat-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-profile-stat-num {
    white-space: nowrap;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    font-weight: bold;
    color: #ffffff;
    text-align: right;
}
.db-profile-bar-bg {
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.db-profile-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-profile-stat-total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #ffffff;
}

/* Способности */
.db-profile-abilities-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-profile-ability-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.db-profile-ability-item:hover {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    transform: translateX(3px);
}
.db-profile-ability-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffffff;
}
.db-profile-ability-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Эффективность типов */
.db-profile-efx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 6px;
}
.db-profile-efx-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 4px;
}
.db-profile-efx-type {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.db-profile-efx-val {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
}
.db-efx-super { color: #ff4757; }
.db-efx-resist { color: #2ed573; }
.db-efx-immune { color: #a4b0be; }
.db-efx-norm { color: rgba(255, 255, 255, 0.6); }

/* Нижний блок: Изучаемые приёмы (Movepool) */
.db-profile-learnsets-section {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.db-learnset-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}
.db-learnset-tab-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-learnset-tab-btn:hover {
    background: rgba(233, 69, 96, 0.2);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.4);
}
.db-learnset-tab-btn.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4);
    font-weight: bold;
}
.db-learnset-tab-count {
    background: rgba(0, 0, 0, 0.35);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.55rem;
}

/* Фильтры и поиск внутри таблицы приёмов */
.db-learnset-filter-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.db-learnset-search {
    flex: 1;
    min-width: 200px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.2s;
}
.db-learnset-search:focus {
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.25);
}
.db-learnset-select {
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    outline: none;
}

/* Таблица приёмов */
.db-learnset-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}
.db-learnset-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: left;
}

/* Стили интерактивной 3-позиционной сортировки таблицы приёмов */
.db-learnset-table th.db-sortable-th {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}
.db-learnset-table th.db-sortable-th:hover {
    background: rgba(233, 69, 96, 0.25) !important;
    color: #ffffff !important;
}
.db-learnset-table th.db-sortable-th.active {
    background: rgba(233, 69, 96, 0.35) !important;
    color: #ff6b81 !important;
    border-bottom: 2px solid #ff4757 !important;
}
.db-sort-arrows {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.25);
    vertical-align: middle;
    transition: all 0.2s ease;
}
.db-learnset-table th.db-sortable-th:hover .db-sort-arrows {
    color: rgba(255, 255, 255, 0.85);
}
.db-sort-arrows.active {
    color: #ff4757 !important;
    font-size: 0.8rem;
    filter: drop-shadow(0 0 6px rgba(255, 71, 87, 0.8));
}

.db-learnset-table th {
    background: rgba(15, 23, 42, 0.95);
    padding: 10px 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    user-select: none;
}
.db-learnset-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #ffffff;
    vertical-align: middle;
}
.db-learnset-row {
    cursor: pointer;
    transition: background 0.15s ease;
}
.db-learnset-row:hover {
    background: rgba(233, 69, 96, 0.12);
}
.db-learnset-lvl-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    display: inline-block;
    min-width: 44px;
    text-align: center;
}
.db-learnset-move-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.db-learnset-move-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-learnset-move-name-en {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
}
.db-learnset-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    width: auto;
    min-width: 92px;
    max-width: 130px;
    box-sizing: border-box;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.db-learnset-type-badge img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}

.db-learnset-table th.th-desc,
.db-learnset-table td.td-desc {
    min-width: 240px;
    max-width: 380px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    white-space: normal;
}
.db-learnset-table td.td-prio {
    text-align: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-learnset-table td.td-contact {
    text-align: center;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
}

.db-learnset-cat-img {
    width: 32px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}


/* Стили эффективности типов с учётом способностей */
.efx-ability-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.efx-ability-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 4px;
}
.efx-ability-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.efx-ability-pill:hover {
    background: rgba(233, 69, 96, 0.2);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.4);
}
.efx-ability-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.35);
}
.efx-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
}
.efx-type-chip.has-ability-mod {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.6) !important;
}
.efx-ability-note-badge {
    font-size: 0.52rem;
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    padding: 1px 4px;
    border-radius: 4px;
    margin-left: 2px;
}


/* Стили интерактивного уровня Динамакса / Гигантамакса */


.db-dmax-pill-candy {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 2px;
    filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.8));
    display: inline-block;
}

.db-dmax-candy-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(0 0 6px rgba(255, 0, 127, 0.8));
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.db-dmax-level-switcher:hover 
.db-dmax-pill-candy {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 2px;
    filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.8));
    display: inline-block;
}

.db-dmax-candy-icon {
    transform: scale(1.15) rotate(10deg);
}

.db-dmax-level-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(255, 0, 127, 0.15), rgba(233, 69, 96, 0.1));
    border: 1px solid rgba(255, 0, 127, 0.35);
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(255, 0, 127, 0.2);
}
.db-dmax-level-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #ff007f;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
}
.db-dmax-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.db-dmax-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-dmax-pill:hover {
    background: rgba(255, 0, 127, 0.3);
    color: #ffffff;
    border-color: #ff007f;
    transform: translateY(-1px);
}
.db-dmax-pill.active {
    background: linear-gradient(135deg, #ff007f, #e94560);
    color: #ffffff;
    border-color: #ff007f;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(255, 0, 127, 0.6);
}
.db-profile-bar-fill.dmax-hp-glow {
    background: linear-gradient(90deg, #ff007f, #e94560, #ff4757) !important;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.db-dmax-badge-hp {
    white-space: nowrap;
    font-size: 0.58rem;
    color: #ff007f;
    font-weight: bold;
    margin-left: 4px;
    text-shadow: 0 0 6px rgba(255, 0, 127, 0.5);
}


/* ===== Модальное окно предпросмотра и настройки карточки покемона ===== */
.db-card-customizer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    animation: fadeIn 0.25s ease;
}
.db-card-customizer-modal {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    width: 100%;
    max-width: 960px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.db-card-customizer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.95);
}
.db-card-customizer-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-card-customizer-body {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
@media (max-width: 850px) {
    .db-card-customizer-body {
        grid-template-columns: 1fr;
    }
}
.db-card-preview-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px;
    overflow: auto;
    max-height: 68vh;
}
.db-card-preview-canvas {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
.db-card-settings-pane {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.db-card-setting-group {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-card-setting-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-card-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    user-select: none;
}
.db-card-customizer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.95);
}


.db-profile-nav-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}


/* ==========================================================================
   ITEMS DATABASE STYLES
   ========================================================================== */
.db-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    width: 100%;
}
.db-item-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 135px;
}
.db-item-card:hover {
    border-color: #ff4757;
    background: rgba(233, 69, 96, 0.12);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255, 71, 87, 0.2);
}
.db-item-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.db-item-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.db-item-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.db-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.db-item-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-item-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-item-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: fit-content;
}
.db-item-cat-badge.competitive { background: rgba(233, 69, 96, 0.2); color: #ff6b81; border: 1px solid rgba(233, 69, 96, 0.4); }
.db-item-cat-badge.type_boost { background: rgba(52, 152, 219, 0.2); color: #74b9ff; border: 1px solid rgba(52, 152, 219, 0.4); }
.db-item-cat-badge.plates_memories { background: rgba(0, 206, 201, 0.2); color: #00cec9; border: 1px solid rgba(0, 206, 201, 0.4); }
.db-item-cat-badge.signature { background: rgba(241, 196, 15, 0.2); color: #f1c40f; border: 1px solid rgba(241, 196, 15, 0.4); }
.db-item-cat-badge.berry { background: rgba(46, 204, 113, 0.2); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.4); }
.db-item-cat-badge.mega { background: rgba(155, 89, 182, 0.2); color: #a29bfe; border: 1px solid rgba(155, 89, 182, 0.4); }
.db-item-cat-badge.z_crystal { background: rgba(255, 159, 26, 0.2); color: #ff9f1a; border: 1px solid rgba(255, 159, 26, 0.4); }
.db-item-cat-badge.evolution { background: rgba(255, 107, 129, 0.2); color: #ff6b81; border: 1px solid rgba(255, 107, 129, 0.4); }
.db-item-cat-badge.pokeball { background: rgba(235, 77, 75, 0.2); color: #eb4d4b; border: 1px solid rgba(235, 77, 75, 0.4); }
.db-item-cat-badge.medicine { background: rgba(112, 161, 255, 0.2); color: #70a1ff; border: 1px solid rgba(112, 161, 255, 0.4); }
.db-item-cat-badge.training { background: rgba(30, 144, 255, 0.2); color: #1e90ff; border: 1px solid rgba(30, 144, 255, 0.4); }
.db-item-cat-badge.tera_shard { background: rgba(0, 210, 211, 0.2); color: #00d2d3; border: 1px solid rgba(0, 210, 211, 0.4); }
.db-item-cat-badge.utility { background: rgba(164, 176, 190, 0.2); color: #a4b0be; border: 1px solid rgba(164, 176, 190, 0.4); }

.db-item-desc-preview {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 8px;
    margin-top: 0;
    flex: 1;
}
.db-item-table-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
}
.db-table-items th.th-desc,
.db-table-items td.td-desc {
    text-align: left;
    min-width: 280px;
    font-size: 0.74rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
}


/* ==========================================================================
   BATTLE MECHANICS: FIELD EFFECTS, STATUSES, GIMMICKS STYLES
   ========================================================================== */

/* --- 1. Field Effects Grid & Cards --- */
.db-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    width: 100%;
}
.db-field-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 220px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-field-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--field-accent, #ff9f43);
    opacity: 0.8;
}
.db-field-card:hover {
    border-color: var(--field-accent, #ff9f43);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 159, 67, 0.2);
}
.db-field-card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.db-field-card-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.db-field-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.db-field-cat-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    margin-left: auto;
}
.db-field-title-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}
.db-field-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.25;
    word-break: break-word;
}
.db-field-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    font-weight: normal;
}
.db-field-duration {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #feca57;
    background: rgba(254, 202, 87, 0.12);
    border: 1px solid rgba(254, 202, 87, 0.25);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    line-height: 1.3;
}
.db-field-desc-preview {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
    margin-top: auto;
}
.db-field-triggers-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.db-field-triggers-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.db-field-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.db-field-pill-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}
.db-field-pill-chip.move {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    color: #ff7675;
}
.db-field-pill-chip.move:hover {
    background: rgba(233, 69, 96, 0.35);
    border-color: #ff4757;
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}
.db-field-pill-chip.ability {
    background: rgba(241, 196, 15, 0.15);
    border-color: rgba(241, 196, 15, 0.4);
    color: #f1c40f;
}
.db-field-pill-chip.ability:hover {
    background: rgba(241, 196, 15, 0.35);
    border-color: #f39c12;
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(241, 196, 15, 0.3);
}
.db-field-pill-chip .en {
    font-size: 0.55rem;
    opacity: 0.65;
    font-style: italic;
}

/* Modal interactive items */
.db-field-interactive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.db-field-interactive-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-field-interactive-item:hover {
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.db-field-interactive-item.move:hover {
    border-color: #ff4757;
}
.db-field-interactive-item.ability:hover {
    border-color: #f1c40f;
}
.db-item-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
}
.db-field-interactive-item.move .db-item-icon-box {
    color: #ff7675;
    background: rgba(233, 69, 96, 0.2);
}
.db-field-interactive-item.ability .db-item-icon-box {
    color: #f1c40f;
    background: rgba(241, 196, 15, 0.2);
}
.db-item-text-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.db-item-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    color: #ffffff;
}
.db-item-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    font-weight: normal;
}
.db-item-type-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
}
.db-item-effect-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.3;
}
.db-item-arrow {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.25);
    transition: transform 0.2s ease, color 0.2s ease;
}
.db-field-interactive-item:hover .db-item-arrow {
    transform: translateX(3px);
    color: #ffffff;
}

/* --- 2. Statuses Grid & Cards --- */
.db-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    width: 100%;
}
.db-status-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 220px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-status-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--status-color, #e84118);
    opacity: 0.8;
}
.db-status-card:hover {
    border-color: var(--status-color, #e84118);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 20px var(--status-glow, var(--status-color, rgba(232, 65, 24, 0.25)));
}
.db-status-card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.db-status-card-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.db-status-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 8px;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
}
.db-status-type-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    margin-left: auto;
}
.db-status-type-badge.non_volatile {
    background: rgba(235, 77, 75, 0.25);
    color: #ff7675;
    border: 1px solid rgba(235, 77, 75, 0.5);
}
.db-status-type-badge.volatile {
    background: rgba(162, 155, 254, 0.25);
    color: #a29bfe;
    border: 1px solid rgba(162, 155, 254, 0.5);
}
.db-status-title-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}
.db-status-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.25;
    word-break: break-word;
}
.db-status-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    font-weight: normal;
}
.db-status-desc-preview {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
    margin-top: auto;
}
.db-status-imm-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.db-status-imm-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.db-status-imm-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

/* --- 3. Gimmicks Grid & Cards --- */
.db-gimmick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    width: 100%;
}
.db-gimmick-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.db-gimmick-card:hover {
    transform: translateY(-4px);
    border-color: var(--gimmick-color, #e056fd);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(224, 86, 253, 0.25);
}
.db-gimmick-banner {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}
.db-gimmick-banner-icon {
    font-size: 1.8rem;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}
.db-gimmick-banner-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.db-gimmick-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.db-gimmick-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}
.db-gimmick-gen-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}
.db-gimmick-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.db-gimmick-short-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}
.db-gimmick-features-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #ff9f43;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.db-gimmick-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.db-gimmick-features-list li {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.35;
}
.db-gimmick-features-list li i {
    font-size: 0.7rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Common detail badges */
.db-detail-trigger-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Mechanic & Detail Modal Header */

/* Status Detail Modal Banner & Download Button */
.db-status-banner {
    border-radius: 14px;
    padding: 14px 18px;
    margin-top: 10px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.db-status-banner-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
}

.db-status-banner-dl-btn:hover {
    background: var(--modal-accent, rgba(255, 255, 255, 0.22));
    border-color: var(--modal-accent, rgba(255, 255, 255, 0.45));
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 10px var(--modal-glow, rgba(255, 255, 255, 0.2));
}

.db-status-banner-dl-btn i {
    font-size: 0.72rem;
}

@media (max-width: 600px) {
    .db-status-banner {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .db-status-banner-right {
        width: 100%;
        justify-content: space-between;
    }
}

.db-mechanic-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    padding-right: 40px;
}
.db-mechanic-modal-icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}
.db-mechanic-modal-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
.db-mechanic-modal-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.db-mechanic-title-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.3rem;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    word-break: break-word;
}
.db-mechanic-title-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    margin-top: -2px;
}
.db-mechanic-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.db-mechanic-cat-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 12px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Interactive Chips for Cures & Immunities */
.db-interactive-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 7px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-interactive-chip.static {
    cursor: default;
}
.db-interactive-chip:not(.static):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.db-interactive-chip.move {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    color: #ff7675;
}
.db-interactive-chip.move:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #ff4757;
    box-shadow: 0 2px 10px rgba(255, 71, 87, 0.35);
}
.db-interactive-chip.ability {
    background: rgba(241, 196, 15, 0.15);
    border-color: rgba(241, 196, 15, 0.4);
    color: #f1c40f;
}
.db-interactive-chip.ability:hover {
    background: rgba(241, 196, 15, 0.3);
    border-color: #f39c12;
    box-shadow: 0 2px 10px rgba(241, 196, 15, 0.35);
}
.db-interactive-chip.item {
    background: rgba(46, 204, 113, 0.15);
    border-color: rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}
.db-interactive-chip.item:hover {
    background: rgba(46, 204, 113, 0.3);
    border-color: #27ae60;
    box-shadow: 0 2px 10px rgba(46, 204, 113, 0.35);
}
.db-interactive-chip.field {
    background: rgba(0, 210, 211, 0.15);
    border-color: rgba(0, 210, 211, 0.4);
    color: #00d2d3;
}
.db-interactive-chip.field:hover {
    background: rgba(0, 210, 211, 0.3);
    border-color: #01a3a4;
    box-shadow: 0 2px 10px rgba(0, 210, 211, 0.35);
}
.db-interactive-chip.poketype {
    background: rgba(162, 155, 254, 0.15);
    border-color: rgba(162, 155, 254, 0.4);
    color: #a29bfe;
}
.db-interactive-chip.switch {
    background: rgba(116, 185, 255, 0.15);
    border-color: rgba(116, 185, 255, 0.4);
    color: #74b9ff;
}
.chip-arrow {
    font-size: 0.65rem;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.db-interactive-chip:hover .chip-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* ==========================================================================
   EXPANDED DATABASE: GIMMICKS, TYPES, NATURES, ADVANCED MECHANICS
   ========================================================================== */

/* 1. Gimmicks Cards & Grid */
.db-gimmick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    width: 100%;
}
.db-gimmick-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
    display: flex;
    flex-direction: column;
}
.db-gimmick-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--gimmick-color, #e056fd)30;
    border-color: var(--gimmick-color, #e056fd);
}
.db-gimmick-banner {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}
.db-gimmick-banner-icon {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #ffffff;
    flex-shrink: 0;
}
.db-gimmick-banner-title {
    flex: 1;
}
.db-gimmick-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.db-gimmick-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}
.db-gimmick-gen-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px 10px;
    border-radius: 20px;
    color: #ffffff;
    white-space: nowrap;
}
.db-gimmick-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
}
.db-gimmick-short-desc {
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}
.db-gimmick-features-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #f1c40f;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-gimmick-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.db-gimmick-features-list li {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.db-gimmick-footer-btn {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: var(--gimmick-color, #e056fd);
}

/* 2. Types Grid & Calculator */
.db-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    width: 100%;
}
.db-type-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.db-type-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px var(--type-color, #ff7675)30;
    border-color: var(--type-color, #ff7675);
}
.db-type-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
}
.db-type-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.db-type-title-box {
    flex: 1;
}
.db-type-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #ffffff;
    font-weight: bold;
}
.db-type-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}
.db-type-badge-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.db-type-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.45;
}
.db-type-matchups-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
    border-radius: 8px;
}
.db-type-matchup-col {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
}
.db-type-matchup-col .label {
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.7);
    min-width: 90px;
}
.db-type-matchup-col .badges-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.db-type-mini-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Type Calculator */
/* Type Calculator (Уязвимости и сопротивления) */
.db-type-calc-container {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(20, 27, 48, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.db-type-calc-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.db-type-calc-title-box h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #00cec9;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.db-type-calc-title-box p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.5;
}

.db-type-calc-selectors-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(0, 0, 0, 0.3);
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.db-calc-row-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-calc-row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.db-calc-type-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Individual Type Button */
.db-calc-type-btn {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--t-color, #64748b);
    color: #e2e8f0;
    border-radius: 10px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    outline: none;
}
.db-calc-type-btn:hover {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--t-color, rgba(255, 255, 255, 0.3));
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.db-calc-type-btn.active {
    background: var(--t-color, #00cec9) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px var(--t-color, #00cec9)88, 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    transform: translateY(-1px) scale(1.04);
    font-weight: 800;
}
.db-calc-type-btn.disabled {
    opacity: 0.35;
    filter: grayscale(0.85);
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}
.db-calc-type-btn-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    flex-shrink: 0;
}

/* "None (1 type)" Button */
.db-calc-none-btn {
    border-left-color: #94a3b8;
    background: rgba(30, 41, 59, 0.5);
}
.db-calc-none-btn i {
    font-size: 0.85rem;
    color: #94a3b8;
}
.db-calc-none-btn.active {
    background: #475569 !important;
    border-color: #94a3b8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(148, 163, 184, 0.4) !important;
}
.db-calc-none-btn.active i {
    color: #ffffff;
}

/* Selected Preview */
.db-type-calc-selected-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(15, 23, 42, 0.8);
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/* Results Section */
.db-type-calc-results {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.db-calc-group {
    background: rgba(15, 23, 42, 0.65);
    border-radius: 12px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 5px solid #888;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}
.db-calc-group.danger-heavy {
    border-left-color: #ff3838;
    background: linear-gradient(90deg, rgba(255, 56, 56, 0.12) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.danger {
    border-left-color: #ff7675;
    background: linear-gradient(90deg, rgba(255, 118, 117, 0.1) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.resist {
    border-left-color: #55efc4;
    background: linear-gradient(90deg, rgba(85, 239, 196, 0.1) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.resist-heavy {
    border-left-color: #00b894;
    background: linear-gradient(90deg, rgba(0, 184, 148, 0.12) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.immune {
    border-left-color: #fdcb6e;
    background: linear-gradient(90deg, rgba(253, 203, 110, 0.1) 0%, rgba(15, 23, 42, 0.65) 100%);
}

.db-calc-group-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-calc-badges-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 768px) {
    .db-type-calc-container {
        padding: 16px;
        gap: 16px;
    }
    .db-type-calc-selectors-block {
        padding: 12px;
    }
    .db-calc-type-btn {
        padding: 5px 9px;
        font-size: 0.72rem;
        gap: 6px;
    }
    .db-calc-type-btn-icon {
        width: 18px;
        height: 18px;
    }
}


/* 3. Natures Grid & Cards */
.db-nature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    width: 100%;
}
.db-nature-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-nature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    border-color: #2ecc71;
}
.db-nature-card.neutral {
    border-color: rgba(255, 255, 255, 0.08);
}
.db-nature-card.neutral:hover {
    border-color: #74b9ff;
}
.db-nature-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.db-nature-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.db-nature-info {
    flex: 1;
}
.db-nature-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: bold;
}
.db-nature-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
}
.db-nature-stats-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.db-nature-stat-plus {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(46, 204, 113, 0.3);
}
.db-nature-stat-minus {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ff7675;
    background: rgba(255, 118, 117, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 118, 117, 0.3);
}
.db-nature-neutral-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #74b9ff;
    background: rgba(116, 185, 255, 0.12);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-nature-meta-row {
    margin-top: auto;
}
.db-nature-mint-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-nature-mint-btn:hover {
    background: rgba(46, 204, 113, 0.2);
    border-color: #2ecc71;
    color: #2ecc71;
}

/* 4. Advanced Mechanics Grid & Cards */
.db-advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 18px;
    width: 100%;
}
/* ===== ADVANCED MECHANICS CARDS ===== */
.db-advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
}
.db-advanced-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
}
.db-advanced-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 18px var(--adv-color, #ff7675)30;
    border-color: var(--adv-color, #ff7675);
}
.db-advanced-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}
.db-advanced-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.db-advanced-title-box {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.db-advanced-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: bold;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
}
.db-advanced-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
    word-break: break-word;
    overflow-wrap: break-word;
}
.db-advanced-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    align-self: flex-start;
}
.db-advanced-desc-preview {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.5;
}
.db-advanced-footer-btn {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: var(--adv-color, #ff7675);
}
.db-math-formula-box {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #00cec9;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 206, 201, 0.3);
    padding: 12px 16px;
    border-radius: 8px;
    margin: 10px 0;
    overflow-x: auto;
}

/* Typography & Highlight Enhancements for Database Modals */
.db-section-subtitle {
    font-family: 'Minecraft', monospace;
    font-size: 0.94rem;
    color: #00cec9;
    margin: 16px 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}
.db-hl-bold {
    color: #ffffff;
    font-weight: 700;
}
.db-hl-italic {
    color: #f1c40f;
    font-style: italic;
}
.db-text-list-item {
    margin-bottom: 9px;
    line-height: 1.65;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.92);
}
.db-text-paragraph {
    margin-bottom: 10px;
    line-height: 1.65;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.88);
}
.db-modal-styled-list {
    margin: 0;
    padding-left: 20px;
    list-style: square;
}
.db-matchup-panel {
    background: rgba(255, 255, 255, 0.03);
    padding: 14px 18px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
}
.db-type-mini-badge.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    filter: brightness(1.15);
}
.stat-boost-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.stat-boost-tag.plus {
    background: rgba(46, 204, 113, 0.18);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
}
.stat-boost-tag.minus {
    background: rgba(255, 118, 117, 0.18);
    color: #ff7675;
    border: 1px solid rgba(255, 118, 117, 0.4);
}
.db-interactive-chip.status {
    background: rgba(162, 155, 254, 0.15);
    border-color: rgba(162, 155, 254, 0.4);
    color: #a29bfe;
}
.db-interactive-chip.status:hover {
    background: rgba(162, 155, 254, 0.3);
    border-color: #6c5ce7;
    box-shadow: 0 2px 10px rgba(108, 92, 231, 0.35);
}
.db-interactive-chip.gimmick {
    background: rgba(224, 86, 253, 0.15);
    border-color: rgba(224, 86, 253, 0.4);
    color: #e056fd;
}
.db-interactive-chip.gimmick:hover {
    background: rgba(224, 86, 253, 0.3);
    border-color: #be2edd;
    box-shadow: 0 2px 10px rgba(224, 86, 253, 0.35);
}

/* ==========================================================================
   OFFICIAL TYPE PILLS, IMAGE ICONS, CARDS & MODAL HERO
   ========================================================================== */

/* Universal Type Pill Badge with Image */
.db-type-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, var(--badge-color, #888) 18%, transparent);
    color: var(--badge-color, #fff);
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    text-shadow: none;
    box-shadow: 0 0 8px color-mix(in srgb, var(--badge-color, #888) 18%, transparent);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
    border: 1px solid color-mix(in srgb, var(--badge-color, #888) 50%, transparent);
    letter-spacing: 0.2px;
    backdrop-filter: blur(6px);
    box-sizing: border-box;
    white-space: nowrap;
}
.db-type-pill-badge.size-sm {
    padding: 3px 10px;
    font-size: 0.64rem;
    min-width: 90px;
    max-width: 125px;
    width: auto;
}
.db-type-pill-badge.size-md {
    padding: 4px 11px;
    font-size: 0.72rem;
    min-width: 94px;
}
.db-type-pill-badge.size-lg {
    padding: 6px 16px;
    font-size: 0.82rem;
    min-width: 114px;
}
.db-type-pill-badge.clickable {
    cursor: pointer;
}
.db-type-pill-badge.clickable:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--badge-color, #888) 32%, transparent);
    border-color: var(--badge-color, #888);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 14px color-mix(in srgb, var(--badge-color, #888) 45%, transparent);
    filter: brightness(1.2);
}
.db-type-pill-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}
.db-type-pill-badge.size-md .db-type-pill-icon {
    width: 16px;
    height: 16px;
}
.db-type-pill-badge.size-lg .db-type-pill-icon {
    width: 18px;
    height: 18px;
}

.db-move-type-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
/* Duplicate pill block removed */

/* Types Grid & Cards */
.db-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    width: 100%;
}
.db-type-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 18px 20px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.db-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45), 0 0 20px var(--type-color, #ff7675)35;
    border-color: var(--type-color, #ff7675);
}
.db-type-card-top-bar {
    display: flex;
    align-items: center;
    gap: 14px;
}
.db-type-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.db-type-card-main-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.db-type-title-area {
    flex: 1;
}
.db-type-title-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    color: #ffffff;
    font-weight: bold;
}
.db-type-title-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}
.db-type-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
}
.db-type-card-matchups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 14px;
    border-radius: 10px;
    margin-top: auto;
}
.db-type-matchup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.74rem;
}
.db-type-matchup-row .matchup-lbl {
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.7);
    min-width: 95px;
    flex-shrink: 0;
    margin-top: 0;
}
.db-type-matchup-row .matchup-badges-flow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}
.db-type-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: var(--type-color, #ff7675);
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Type Modal Hero Banner */
.db-type-modal-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid;
}
.db-type-modal-img-wrap {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.db-type-modal-big-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.db-type-modal-title-box {
    flex: 1;
}
.db-type-modal-top-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.db-type-modal-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.4rem;
    color: #ffffff;
    margin: 0;
}
.db-type-modal-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    margin-top: 2px;
}

/* Matchup Structured Panel */
.db-type-detail-modal {
    max-width: 860px !important;
}
.db-matchup-structured-panel {
    background: rgba(255, 255, 255, 0.03);
    padding: 16px 20px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.db-matchup-stat-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-matchup-stat-row .row-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
}
.db-matchup-stat-row.super .row-title { color: #55efc4; }
.db-matchup-stat-row.not-very .row-title { color: #fdcb6e; }
.db-matchup-stat-row.weak .row-title { color: #ff7675; }
.db-matchup-stat-row.resist .row-title { color: #00cec9; }
.db-matchup-stat-row.immune .row-title { color: #f1c40f; }

.db-matchup-stat-row .badges-wrap {
    display: flex;
    column-gap: 10px;
    row-gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.empty-val {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Minecraft', monospace;
}
.db-type-calc-selected-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.25);
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Round Type Icon Circles for Card Preview */
.db-type-icon-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    outline: none;
}
.db-type-icon-circle:hover {
    transform: translateY(-2px) scale(1.18);
    box-shadow: none;
    border-color: transparent;
    filter: brightness(1.2) drop-shadow(0 2px 8px var(--badge-color, rgba(255, 255, 255, 0.5)));
}
.db-type-circle-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
    pointer-events: none;
}

/* Modal Description Text Fix */
.db-detail-desc-full {
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    border-left: 4px solid var(--badge-color, #ff7675) !important;
}
.db-type-detail-text {
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

/* Gimmicks Tables: Z-Moves & Max-Moves */
.db-gimmick-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.db-gimmick-table th {
    background: rgba(255, 255, 255, 0.08);
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: #00cec9;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.db-gimmick-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}
.db-gimmick-move-row:hover td {
    background: rgba(255, 255, 255, 0.04);
}
.db-z-move-name-ru, .db-max-move-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: bold;
}
.db-z-move-name-en, .db-max-move-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
}

/* Max Guard Golden Shield Banner */
.db-max-guard-banner {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.2) 0%, rgba(211, 84, 0, 0.12) 100%);
    border: 2px solid #f1c40f;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 16px 0;
    box-shadow: 0 6px 20px rgba(241, 196, 15, 0.25);
}
.db-max-guard-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(241, 196, 15, 0.25);
    border: 2px solid #f1c40f;
    color: #f1c40f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(241, 196, 15, 0.4);
}
.db-max-guard-info {
    flex: 1;
}
.db-max-guard-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #f1c40f;
    font-weight: bold;
    margin-bottom: 6px;
}
.db-max-guard-desc {
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

/* Move Modal Actions Row */
.db-move-actions-row {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}
.db-move-learners-btn {
    flex: 1;
    background: linear-gradient(135deg, #0984e3 0%, #00cec9 100%);
    border: none;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 12px 18px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(9, 132, 227, 0.4);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.db-move-learners-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 206, 201, 0.5);
    filter: brightness(1.1);
}

/* Move Learners Modal & Grid */
.db-learners-modal {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.db-learners-header {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 14px;
}
.db-learners-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
}
.db-learners-subtitle {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #00cec9;
    margin-top: 4px;
}
.db-learners-body {
    overflow-y: auto;
    max-height: 65vh;
    padding-right: 6px;
}
.db-learners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.db-learner-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-learner-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 206, 201, 0.25);
}
.db-learner-img-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.db-learner-img-wrap img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
}
.db-learner-info {
    flex: 1;
    min-width: 0;
}
.db-learner-dex {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
}
.db-learner-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-learner-types {
    display: flex;
    gap: 4px;
    margin: 4px 0;
}
.db-learner-method {
    font-size: 0.7rem;
    color: #fdcb6e;
    font-family: 'Minecraft', monospace;
}
.db-no-learners-msg {
    text-align: center;
    padding: 30px 20px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
}

/* Type Matrix 18x18 Table */
.db-type-matrix-container {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px 20px;
    width: 100%;
}
.db-type-matrix-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
}
.db-type-matrix-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.legend-box {
    width: 26px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.72rem;
}
.db-matrix-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.db-type-matrix-table {
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
    min-width: 780px;
}
.db-matrix-corner {
    background: rgba(0, 0, 0, 0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #00cec9;
    padding: 6px;
    text-align: center;
    border-radius: 6px;
    min-width: 120px;
}
.corner-atk { color: #55efc4; }
.corner-def { color: #74b9ff; }
.db-matrix-th-col {
    padding: 4px;
    text-align: center;
}
.db-matrix-header-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.db-matrix-hdr-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.db-matrix-th-row {
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffffff;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.db-matrix-th-row:hover {
    transform: scale(1.04);
    filter: brightness(1.15);
}
.db-matrix-row-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.db-matrix-cell {
    text-align: center;
    vertical-align: middle;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.75rem;
    border-radius: 6px;
    height: 34px;
    min-width: 34px;
    transition: transform 0.15s ease;
}
.db-matrix-cell:hover {
    transform: scale(1.2);
    z-index: 2;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.mult-2 {
    background: #2ed573 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.mult-half {
    background: #ff4757 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.mult-0 {
    background: #2f3542 !important;
    color: #a4b0be !important;
    border: 1px solid rgba(255,255,255,0.1);
}
.mult-1 {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.2);
}

/* 5x5 Nature Matrix Table */
.db-nature-matrix-container {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 18px 22px;
    width: 100%;
}
.db-nature-matrix-header {
    margin-bottom: 16px;
}
.db-nature-matrix-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    color: #ffffff;
    margin: 0;
}
.db-nature-matrix-header p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 6px 0 0 0;
}
.db-nature-matrix-table {
    border-collapse: separate;
    border-spacing: 6px;
    width: 100%;
    min-width: 720px;
}
.db-nature-corner {
    background: rgba(0, 0, 0, 0.35);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    min-width: 130px;
}
.corner-up { color: #55efc4; font-weight: bold; }
.corner-down { color: #ff7675; font-weight: bold; }
.db-nature-matrix-th-top {
    background: rgba(255, 255, 255, 0.04);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #55efc4;
}
.db-nature-matrix-th-left {
    background: rgba(255, 255, 255, 0.04);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #ff7675;
}
.db-nature-matrix-cell {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-nature-matrix-cell:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 206, 201, 0.25);
}
.db-nature-matrix-cell.neutral-cell {
    background: rgba(241, 196, 15, 0.1);
    border-color: rgba(241, 196, 15, 0.3);
}
.cell-nature-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: bold;
}
.cell-nature-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
}
.cell-mint {
    font-size: 0.65rem;
    color: #55efc4;
    font-family: 'Minecraft', monospace;
    margin-top: 4px;
}

/* Gimmick Standalone Table Views & Quick Buttons */
.db-gimmick-standalone-container {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 20px 24px;
    width: 100%;
}
.db-gimmick-standalone-header {
    margin-bottom: 20px;
}
.db-gimmick-standalone-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
}
.db-gimmick-standalone-header p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 6px 0 0 0;
}
.db-gimmick-quick-actions {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-gimmick-quick-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    font-weight: bold;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.db-gimmick-quick-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 206, 201, 0.25);
}
.db-gimmick-quick-btn.gold {
    background: rgba(241, 196, 15, 0.12);
    border-color: rgba(241, 196, 15, 0.4);
    color: #f1c40f;
}
.db-gimmick-quick-btn.gold:hover {
    background: rgba(241, 196, 15, 0.25);
    border-color: #f1c40f;
    box-shadow: 0 4px 12px rgba(241, 196, 15, 0.35);
}

/* Muted Eye-Friendly Type Matrix Colors */
.db-matrix-cell.mult-2, .legend-box.mult-2 {
    background: rgba(46, 204, 113, 0.22) !important;
    color: #86efac !important;
    border: 1px solid rgba(46, 204, 113, 0.45) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.db-matrix-cell.mult-half, .legend-box.mult-half {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.38) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.db-matrix-cell.mult-0, .legend-box.mult-0 {
    background: rgba(30, 41, 59, 0.85) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    text-shadow: none;
}
.db-matrix-cell.mult-1, .legend-box.mult-1 {
    background: rgba(255, 255, 255, 0.02) !important;
    color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.035) !important;
}
.db-matrix-cell {
    text-align: center;
    vertical-align: middle;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    border-radius: 6px;
    height: 32px;
    min-width: 32px;
    transition: all 0.15s ease;
}
.db-matrix-cell:hover {
    transform: scale(1.15);
    z-index: 2;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.4);
    filter: brightness(1.2);
}

/* Muted Soft Type Matrix Headers */
.db-matrix-header-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: color-mix(in srgb, var(--hdr-color, #888) 32%, rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid color-mix(in srgb, var(--hdr-color, #888) 55%, transparent) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: all 0.2s ease;
}
.db-matrix-header-badge:hover {
    background: color-mix(in srgb, var(--hdr-color, #888) 50%, rgba(15, 23, 42, 0.95)) !important;
    border-color: var(--hdr-color, #888) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 8px var(--hdr-color, #888);
}

.db-matrix-th-row {
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    color: #ffffff;
    white-space: nowrap;
    background: color-mix(in srgb, var(--row-color, #888) 32%, rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid color-mix(in srgb, var(--row-color, #888) 55%, transparent) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    transition: all 0.2s ease;
}
.db-matrix-th-row:hover {
    background: color-mix(in srgb, var(--row-color, #888) 50%, rgba(15, 23, 42, 0.95)) !important;
    border-color: var(--row-color, #888) !important;
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 10px color-mix(in srgb, var(--row-color, #888) 40%, transparent);
}

/* BP Conversion Micro-Calculators */
.db-bp-calc-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(26, 38, 70, 0.8) 100%);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 14px;
    padding: 18px 22px;
    margin: 18px 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.db-bp-calc-header h3 {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #00cec9;
    margin: 0;
}
.db-bp-calc-header p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 4px 0 14px 0;
}
.db-bp-calc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.db-bp-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
    align-items: flex-start;
    width: fit-content;
}
.db-bp-input-wrap label {
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.db-bp-calc-box .num-input-group {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: fit-content !important;
    align-self: flex-start !important;
    border: 1px solid rgba(0, 206, 201, 0.5) !important;
    background: #0f172a !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
}
.db-bp-calc-box .num-input-group .num-btn {
    width: 34px !important;
    height: 36px !important;
    background: rgba(0, 206, 201, 0.2) !important;
    color: #00cec9 !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s, transform 0.1s !important;
    flex-shrink: 0 !important;
}
.db-bp-calc-box .num-input-group .num-btn:hover {
    background: rgba(0, 206, 201, 0.4) !important;
    color: #ffffff !important;
}
.db-bp-calc-box .num-input-group input[type="number"],
.db-bp-clean-input {
    width: 56px !important;
    height: 36px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.95rem !important;
    font-weight: bold !important;
    text-align: center !important;
    border: none !important;
    outline: none !important;
    padding: 0 2px !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
}
.db-bp-input-wrap select {
    background: #0f172a;
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #ffffff;
    padding: 8px 14px;
    height: 38px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    outline: none;
    transition: all 0.2s ease;
}
.db-bp-input-wrap select:focus {
    border-color: #00cec9;
    box-shadow: 0 0 0 3px rgba(0, 206, 201, 0.2);
}
.db-bp-quick-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 220px;
}
.db-bp-quick-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    margin-right: 2px;
}
.db-bp-quick-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 5px 9px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.db-bp-quick-btn:hover {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #ffffff;
}
.db-bp-quick-btn.active {
    background: #00cec9;
    border-color: #00cec9;
    color: #0f172a;
    font-weight: bold;
}
.db-bp-result-wrap {
    background: rgba(0, 206, 201, 0.12);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    padding: 8px 18px;
    text-align: center;
    min-width: 170px;
    margin-left: auto;
}
.db-bp-result-wrap .res-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-bp-result-wrap .res-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    font-weight: bold;
    color: #ffffff;
    margin-top: 2px;
}

/* Clean & Compact Learners Modal */
.db-learners-modal {
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.db-learners-header {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
}
.db-learners-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    color: #ffffff;
    margin: 0;
}
.db-learners-subtitle {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: #00cec9;
    margin-top: 4px;
}
.db-learners-body {
    overflow-y: auto;
    max-height: 68vh;
    padding: 4px 6px 10px 2px;
}
.db-learners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}
.db-learner-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.18s ease;
}
.db-learner-card:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.25);
}
.db-learner-img-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}
.db-learner-img-wrap img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
}
.db-learner-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.db-learner-top-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.db-learner-dex {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}
.db-learner-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-learner-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}
.db-learner-types {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.db-learner-types .db-type-icon-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}
.db-learner-types .db-type-icon-circle img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.db-learner-method {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #f1c40f;
    background: rgba(241, 196, 15, 0.12);
    border: 1px solid rgba(241, 196, 15, 0.3);
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

/* Move Modal Action Buttons Equal 50% Width */
.db-move-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 18px !important;
}

.db-move-actions-row > button,
.db-move-actions-row .db-move-learners-btn,
.db-move-actions-row .db-detail-download {
    flex: 1 1 0 !important;
    width: 50% !important;
    min-width: 0 !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.8rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.db-move-actions-row .db-move-learners-btn {
    background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%) !important;
    border: 1px solid rgba(0, 206, 201, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 180, 219, 0.3) !important;
}

.db-move-actions-row .db-move-learners-btn:hover {
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 180, 219, 0.45) !important;
}

.db-move-actions-row .db-detail-download {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.db-move-actions-row .db-detail-download:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

/* Metamorphosis Section Styles */
.db-meta-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 30px;
}
.db-meta-explain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 18px;
}
.db-meta-explain-card {
    background: rgba(15, 23, 42, 0.85);
    border-radius: 14px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.db-meta-explain-card.z-card {
    border: 1px solid rgba(241, 196, 15, 0.4);
    border-top: 4px solid #f1c40f;
}
.db-meta-explain-card.max-card {
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-top: 4px solid #00cec9;
}
.db-meta-explain-card .card-icon {
    font-size: 1.6rem;
    margin-bottom: 8px;
}
.db-meta-explain-card.z-card .card-icon { color: #f1c40f; }
.db-meta-explain-card.max-card .card-icon { color: #00cec9; }

.db-meta-explain-card h3 {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff;
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.db-meta-explain-card .card-text p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
    margin: 0 0 8px 0;
}

.db-meta-compare-results {
    display: flex;
    gap: 12px;
    flex: 2;
    min-width: 320px;
    flex-wrap: wrap;
}
.meta-sim-card {
    flex: 1;
    min-width: 150px;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.meta-sim-card.z-sim {
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.35);
}
.meta-sim-card.max-sim {
    background: rgba(0, 206, 201, 0.1);
    border: 1px solid rgba(0, 206, 201, 0.35);
}
.meta-sim-card .sim-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.meta-sim-card.z-sim .sim-tag { color: #f1c40f; }
.meta-sim-card.max-sim .sim-tag { color: #00cec9; }

.meta-sim-card .sim-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: #ffffff;
}
.meta-sim-card .sim-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    font-weight: bold;
    color: #ffffff;
}
.meta-sim-card.z-sim .sim-val { color: #f1c40f; }
.meta-sim-card.max-sim .sim-val { color: #00cec9; }
.meta-sim-card .sim-val span { font-size: 0.75rem; opacity: 0.8; }

.meta-sim-card .sim-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.35;
    margin-top: 2px;
}

/* Gimmick Moves Calculation Modal Styles */
.db-gimmick-calc-action-btn {
    width: 100% !important;
    height: 50px !important;
    border-radius: 12px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.92rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
}

.db-gimmick-calc-action-btn.z-btn {
    background: linear-gradient(135deg, #f1c40f 0%, #e67e22 100%) !important;
    color: #1a1a2e !important;
    box-shadow: 0 4px 18px rgba(241, 196, 15, 0.35) !important;
}
.db-gimmick-calc-action-btn.z-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(241, 196, 15, 0.55) !important;
}

.db-gimmick-calc-action-btn.max-btn {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(0, 206, 201, 0.35) !important;
}
.db-gimmick-calc-action-btn.max-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 206, 201, 0.55) !important;
}

/* Modal Popup Window */
.db-calc-moves-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 15, 30, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.db-calc-moves-modal {
    width: 95vw;
    max-width: 1300px;
    height: 90vh;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    padding: 24px 28px;
}

.db-calc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 14px;
    margin-bottom: 14px;
}
.db-calc-header-title h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0 0 4px 0;
}
.db-calc-header-title p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.db-calc-modal-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.db-calc-mode-switch {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.calc-mode-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 18px;
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.calc-mode-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}
.calc-mode-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(233, 69, 96, 0.4);
}

.db-calc-filters-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.db-calc-search-wrap {
    flex: 2;
    min-width: 240px;
    position: relative;
}
.db-calc-search-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}
.db-calc-search-wrap input {
    width: 100%;
    height: 40px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 0 14px 0 38px;
    color: #ffffff;
    font-size: 0.8rem;
    font-family: 'Minecraft', monospace;
    outline: none;
    box-sizing: border-box;
}
.db-calc-search-wrap input:focus {
    border-color: #00cec9;
}

.db-calc-select-wrap select {
    height: 40px;
    background: #151a30;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 0 12px;
    color: #ffffff;
    font-size: 0.78rem;
    font-family: 'Minecraft', monospace;
    outline: none;
    cursor: pointer;
}

.db-calc-counter {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #00cec9;
    padding: 6px 14px;
    background: rgba(0, 206, 201, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(0, 206, 201, 0.25);
    white-space: nowrap;
}

.db-calc-table-scroll {
    flex: 1;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(10, 15, 30, 0.5);
}

.db-calc-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.db-calc-table th {
    position: sticky;
    top: 0;
    background: #0f172a;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 12px 14px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
    z-index: 2;
}

.db-calc-move-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
    cursor: pointer;
}
.db-calc-move-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}
.db-calc-move-row:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}
.db-calc-move-row td {
    padding: 10px 12px;
    vertical-align: middle;
    font-size: 0.78rem;
}

.db-move-title-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.db-move-names .name-ru {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.82rem;
    color: #ffffff;
}
.db-move-names .name-en {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.db-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 8px;
}
.db-meta-cell.z-cell {
    background: rgba(241, 196, 15, 0.06);
    border: 1px solid rgba(241, 196, 15, 0.2);
}
.db-meta-cell.max-cell {
    background: rgba(0, 206, 201, 0.06);
    border: 1px solid rgba(0, 206, 201, 0.2);
}

.meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.meta-bp-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
}
.meta-bp-badge.z-badge {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
    border: 1px solid rgba(241, 196, 15, 0.4);
}
.meta-bp-badge.max-badge {
    background: rgba(0, 206, 201, 0.2);
    color: #00cec9;
    border: 1px solid rgba(0, 206, 201, 0.4);
}
.meta-bp-badge.guard-badge {
    background: rgba(85, 239, 196, 0.2);
    color: #55efc4;
    border: 1px solid rgba(85, 239, 196, 0.4);
}

.meta-name {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.78rem;
}
.meta-sub, .meta-effect {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.3;
}

/* Card Customizer Radius & Shadow Presets */
.db-card-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.db-card-custom-slider {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    accent-color: #e94560;
}
.db-setting-num-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #00cec9;
    background: rgba(0, 206, 201, 0.12);
    border: 1px solid rgba(0, 206, 201, 0.3);
    padding: 3px 8px;
    border-radius: 6px;
    min-width: 38px;
    text-align: center;
}
.db-preset-pills-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.db-preset-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.db-preset-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}
.db-preset-pill.active {
    background: #e94560;
    border-color: #e94560;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
}


/* ==========================================================================
   2-MODE SITE SWITCHER (МИНИ-ИГРЫ / БАЗА ДАННЫХ)
   ========================================================================== */
.mode-switcher-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(26, 38, 70, 0.75) 100%) !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(233, 69, 96, 0.05) !important;
    backdrop-filter: blur(14px) !important;
}

.menu-header-brand {
    flex: 1;
    text-align: center;
}

.menu-header-brand h1 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    color: #e94560;
    text-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
    letter-spacing: 0.5px;
}

.menu-header-brand p {
    margin: 4px 0 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
}

.site-mode-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: rgba(26, 26, 46, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.92rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
}

.site-mode-btn i {
    font-size: 1.05rem;
    transition: transform 0.2s ease;
}

.site-mode-btn:hover {
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.5);
    background: rgba(233, 69, 96, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.25);
}

.site-mode-btn:hover i {
    transform: scale(1.15);
}

.site-mode-btn.active {
    background: linear-gradient(135deg, #e94560 0%, #c62a47 100%) !important;
    border-color: #ff6b81 !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(233, 69, 96, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.02);
}

#modeBtnDatabase.site-mode-btn:hover {
    border-color: rgba(0, 206, 201, 0.5);
    background: rgba(0, 206, 201, 0.15);
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.25);
}

#modeBtnDatabase.site-mode-btn.active {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%) !important;
    border-color: #81ecec !important;
    box-shadow: 0 0 22px rgba(0, 206, 201, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

@media (max-width: 960px) {
    .mode-switcher-header {
        flex-direction: column;
        gap: 14px;
    }
    .site-mode-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   DATABASE TABS (STYLING MATCHING MINI-GAMES)
   ========================================================================== */
.db-subtabs-container {
    margin-bottom: 26px !important;
    margin-top: 6px !important;
}

.db-subtabs-container .tab-btn.game-tab {
    position: relative;
    overflow: hidden;
}

/* Pokemon - Rose Neon */
.db-subtabs-container #dbSubTabPokemon.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.3), rgba(198, 42, 71, 0.5)) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 35px rgba(233, 69, 96, 0.4), 0 0 70px rgba(233, 69, 96, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.8) !important;
}
.db-subtabs-container #dbSubTabPokemon.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #e94560, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #e94560, 0 0 30px rgba(233, 69, 96, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}

/* Abilities - Gold Neon */
.db-subtabs-container #dbSubTabAbilities {
    border-color: rgba(255, 215, 0, 0.3) !important;
    background: linear-gradient(145deg, rgba(40, 30, 10, 0.5), rgba(60, 40, 10, 0.4)) !important;
}
.db-subtabs-container #dbSubTabAbilities:hover {
    border-color: #ffd700 !important;
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 215, 0, 0.1) !important;
}
.db-subtabs-container #dbSubTabAbilities.active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(200, 150, 0, 0.4)) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.4), 0 0 70px rgba(255, 215, 0, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
}
.db-subtabs-container #dbSubTabAbilities.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #ffd700, 0 0 30px rgba(255, 215, 0, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}
.db-subtabs-container #dbSubTabAbilities:hover i,
.db-subtabs-container #dbSubTabAbilities.active i {
    color: #ffd700 !important;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
}

/* Moves - Cyan Neon */
.db-subtabs-container #dbSubTabMoves {
    border-color: rgba(0, 206, 201, 0.3) !important;
    background: linear-gradient(145deg, rgba(10, 35, 45, 0.5), rgba(15, 45, 60, 0.4)) !important;
}
.db-subtabs-container #dbSubTabMoves:hover {
    border-color: #00cec9 !important;
    box-shadow: 0 8px 30px rgba(0, 206, 201, 0.3), inset 0 1px 0 rgba(0, 206, 201, 0.1) !important;
}
.db-subtabs-container #dbSubTabMoves.active {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.25), rgba(9, 132, 227, 0.4)) !important;
    border-color: #00cec9 !important;
    box-shadow: 0 0 35px rgba(0, 206, 201, 0.4), 0 0 70px rgba(0, 206, 201, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(0, 206, 201, 0.8) !important;
}
.db-subtabs-container #dbSubTabMoves.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00cec9, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #00cec9, 0 0 30px rgba(0, 206, 201, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}
.db-subtabs-container #dbSubTabMoves:hover i,
.db-subtabs-container #dbSubTabMoves.active i {
    color: #00cec9 !important;
    filter: drop-shadow(0 0 15px rgba(0, 206, 201, 0.9));
}

/* Items - Purple Neon */
.db-subtabs-container #dbSubTabItems {
    border-color: rgba(108, 92, 231, 0.3) !important;
    background: linear-gradient(145deg, rgba(30, 20, 50, 0.5), rgba(45, 30, 70, 0.4)) !important;
}
.db-subtabs-container #dbSubTabItems:hover {
    border-color: #a29bfe !important;
    box-shadow: 0 8px 30px rgba(108, 92, 231, 0.3), inset 0 1px 0 rgba(108, 92, 231, 0.1) !important;
}
.db-subtabs-container #dbSubTabItems.active {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.25), rgba(162, 155, 254, 0.4)) !important;
    border-color: #a29bfe !important;
    box-shadow: 0 0 35px rgba(108, 92, 231, 0.4), 0 0 70px rgba(108, 92, 231, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(162, 155, 254, 0.8) !important;
}
.db-subtabs-container #dbSubTabItems.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #a29bfe, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #a29bfe, 0 0 30px rgba(108, 92, 231, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}
.db-subtabs-container #dbSubTabItems:hover i,
.db-subtabs-container #dbSubTabItems.active i {
    color: #a29bfe !important;
    filter: drop-shadow(0 0 15px rgba(162, 155, 254, 0.9));
}


/* ==========================================================================
   GAMES MODE WRAP (UNIFIED BLUE CARD WITH EMBEDDED TABS)
   ========================================================================== */
.games-mode-wrap {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    padding: 24px 30px 30px !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(233, 69, 96, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 30px !important;
}

.games-mode-wrap > .tabs {
    margin-bottom: 24px !important;
}

.games-mode-wrap > .tab-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
}

@media (max-width: 768px) {
    .games-mode-wrap {
        padding: 16px 14px 20px !important;
        border-radius: 16px !important;
    }
}


/* ==========================================================================
   WIDTH CONSTRAINT FIX FOR 2-MODE CONTAINERS
   ========================================================================== */
.main-menu {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#tabDatabase {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.games-mode-wrap {
    max-width: 1200px !important;
    margin: 0 auto 30px auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   TOP BAR BRAND & CENTERED MODE SWITCHER
   ========================================================================== */
.top-bar-brand {
    text-align: center;
    flex: 1;
    margin: 0 15px;
    pointer-events: none;
}

.top-bar-brand h1 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 1.12rem;
    color: #e94560;
    text-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.top-bar-brand p {
    margin: 2px 0 0;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.2;
}

.mode-switcher-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 10px 20px !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(26, 38, 70, 0.75) 100%) !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(233, 69, 96, 0.05) !important;
    backdrop-filter: blur(14px) !important;
}

.mode-switcher-header .site-mode-btn {
    min-width: 200px;
    justify-content: center;
}

@media (max-width: 768px) {
    .user-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 20px;
    }
    .top-bar-brand {
        order: 2;
        width: 100%;
        margin: 4px 0 0 0;
    }
    .top-bar-brand h1 {
        font-size: 0.95rem;
    }
    .top-bar-brand p {
        font-size: 0.58rem;
    }
    .mode-switcher-header {
        gap: 10px !important;
        padding: 8px 12px !important;
    }
    .mode-switcher-header .site-mode-btn {
        min-width: 0;
        flex: 1;
        padding: 10px 12px;
        font-size: 0.75rem;
    }
}


/* ==========================================================================
   TEAM BUILDER (РЕЖИМ СОЗДАТЬ КОМАНДУ)
   ========================================================================== */
#modeBtnTeambuilder.site-mode-btn:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.15);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
}

#modeBtnTeambuilder.site-mode-btn.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(16, 185, 129, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.teambuilder-mode-wrap {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    padding: 24px 30px 30px !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tb-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.tb-team-name-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 280px;
}

.tb-team-name-group .tb-icon {
    font-size: 1.6rem;
    color: #10b981;
}

.tb-team-name-input {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 12px;
    padding: 10px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    outline: none;
    flex: 1;
}

.tb-team-name-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.tb-team-select {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    outline: none;
    cursor: pointer;
}

.tb-actions-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tb-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(26, 26, 46, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 8px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.tb-btn.primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #34d399;
}

.tb-btn.primary:hover {
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
}

.tb-btn.danger {
    color: #ff6b81;
    border-color: rgba(233, 69, 96, 0.4);
}

.tb-btn.danger:hover {
    background: rgba(233, 69, 96, 0.2);
}

.tb-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

.tb-slot-card {
    background: rgba(26, 26, 46, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}

.tb-slot-card:hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.tb-empty-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 20px;
}

.tb-empty-slot:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.tb-empty-slot-icon {
    font-size: 2.2rem;
    color: #10b981;
    margin-bottom: 10px;
}

.tb-empty-slot-title {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 4px;
}

.tb-empty-slot-sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}

.tb-slot-header {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-slot-avatar {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}

.tb-slot-avatar img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.tb-slot-info {
    flex: 1;
    min-width: 0;
}

.tb-slot-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.tb-slot-name {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-slot-eng {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-slot-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: #ff6b81;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px;
}

.tb-type-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.tb-slot-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tb-field-row label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    width: 100px;
    flex-shrink: 0;
}

.tb-input, .tb-select {
    flex: 1;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 10px;
    color: #fff;
    font-size: 0.75rem;
    outline: none;
}

.tb-input:focus, .tb-select:focus {
    border-color: #10b981;
}

.tb-moves-block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-moves-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
}

.tb-moves-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tb-move-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-move-item:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.tb-move-num {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #10b981;
}

.tb-move-name {
    font-size: 0.72rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-move-empty {
    color: rgba(255, 255, 255, 0.35);
}

/* Synergy Section */
.tb-synergy-section {
    background: rgba(26, 26, 46, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 20px;
}

.tb-synergy-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #10b981;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-no-synergy {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    padding: 20px;
}

.tb-synergy-table-wrap {
    overflow-x: auto;
}

.tb-synergy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.tb-synergy-table th, .tb-synergy-table td {
    padding: 8px 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-synergy-table th {
    background: rgba(15, 23, 42, 0.8);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
}

.tb-syn-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.tb-syn-pname {
    font-size: 0.65rem;
    margin-top: 2px;
}

.tb-eff-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    font-size: 0.72rem !important;
    font-family: 'Minecraft', monospace !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.85) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.eff-weak4 { background: #b71540 !important; color: #ffffff !important; }
.eff-weak { background: #e55039 !important; color: #ffffff !important; }
.eff-neutral { color: rgba(255, 255, 255, 0.45) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; border: none !important; box-shadow: none !important; }
.eff-resist { background: #00b894 !important; color: #ffffff !important; }
.eff-resist4 { background: #0984e3 !important; color: #ffffff !important; }
.eff-immune { background: #6c5ce7 !important; color: #ffffff !important; }

.tb-weak-count { color: #e55039; font-weight: bold; }
.tb-resist-count { color: #38ada9; font-weight: bold; }

/* Modals */
.tb-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tb-modal-content {
    background: #1a1a2e;
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 20px;
    width: 100%;
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.tb-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.tb-modal-header h3 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    font-size: 1.1rem;
}

.tb-modal-close {
    background: none;
    border: none;
    color: #ff6b81;
    font-size: 1.2rem;
    cursor: pointer;
}

.tb-modal-search {
    position: relative;
    margin-bottom: 14px;
}

.tb-modal-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
}

.tb-modal-search input {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 14px 10px 36px;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
    box-sizing: border-box;
}

.tb-modal-list {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    padding-right: 6px;
}

.tb-poke-pick-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-poke-pick-card:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    transform: translateY(-2px);
}

.tb-poke-pick-card img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 4px;
}

.tb-poke-pick-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-poke-pick-eng {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

.tb-move-pick-item {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-move-pick-item:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.tb-move-pick-left {
    display: flex;
    align-items: center;
}

.tb-move-pick-right {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    gap: 12px;
}

.tb-showdown-textarea {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    outline: none;
    box-sizing: border-box;
    resize: vertical;
}



/* ==========================================================================
   TEAMBUILDER NATIVE DATABASE MODAL STYLES
   ========================================================================== */
.tb-db-modal-content {
    max-width: 1200px !important;
    width: 95vw !important;
    height: 92vh !important;
    max-height: 92vh !important;
    background: #0f172a !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 28px !important;
    box-sizing: border-box !important;
    border-radius: 24px !important;
}

.tb-modal-count-badge {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: #34d399;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    white-space: nowrap;
}

.tb-modal-cards-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 10px 4px 20px;
    margin-top: 4px;
}

.tb-modal-cards-wrap .db-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 16px !important;
}

.tb-selectable-card {
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none;
}

.tb-selectable-card:hover {
    border-color: #10b981 !important;
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 24px rgba(16, 185, 129, 0.3) !important;
}

.tb-selectable-card:hover::before {
    background: linear-gradient(90deg, transparent, #10b981, transparent) !important;
    opacity: 1 !important;
}




/* ==========================================================================
   ADVANCED TEAM BUILDER STYLES (IV/EV, STATS, ITEMS, TERA) - 100% MINECRAFT FONT
   ========================================================================== */
.teambuilder-mode-wrap,
.teambuilder-mode-wrap *,
.tb-modal-content,
.tb-modal-content *,
.tb-slot-card,
.tb-slot-card *,
.tb-stat-editor-row,
.tb-stat-editor-row *,
.tb-ev-presets,
.tb-ev-presets *,
.tb-ev-counter,
.tb-stat-table-header span,
.tb-stat-chip,
.tb-stat-chip *,
.tb-stat-ed-name *,
.tb-stat-ed-final *,
.tb-stat-ed-ev *,
.tb-stat-ed-iv *,
.tb-preset-btn,
.tb-btn,
.tb-btn *,
.tb-tera-toggle-label,
.tb-tera-toggle-label *,
.tb-iv-max-btn {
    font-family: 'Minecraft', monospace !important;
}

/* Ensure Font Awesome icons are NEVER overridden by Minecraft font anywhere in teambuilder or modals */
.teambuilder-mode-wrap i,
.teambuilder-mode-wrap [class*="fa-"],
.tb-modal-content i,
.tb-modal-content [class*="fa-"],
.tb-top-bar i,
.tb-top-bar [class*="fa-"],
.tb-btn i,
.tb-btn [class*="fa-"],
.tb-slot-card i,
.tb-slot-card [class*="fa-"],
.tb-gen-modal-content i,
.tb-gen-modal-content [class*="fa-"],
.tb-gen-poke-card i,
.tb-gen-poke-card [class*="fa-"],
i.fas, i.far, i.fab, i.fa, [class*="fa-"], [class^="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-style: normal !important;
    font-weight: 900 !important;
}



/* Hide default browser spinners for cleaner UI */
.tb-ev-input-box::-webkit-outer-spin-button,
.tb-ev-input-box::-webkit-inner-spin-button,
.tb-iv-input-box::-webkit-outer-spin-button,
.tb-iv-input-box::-webkit-inner-spin-button,
.tb-lvl-input::-webkit-outer-spin-button,
.tb-lvl-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tb-ev-input-box, .tb-iv-input-box, .tb-lvl-input {
    -moz-appearance: textfield;
}

.tb-tera-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 10px;
    padding: 7px 14px;
    color: #81ecec;
    font-size: 0.76rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.tb-tera-toggle-label:hover {
    border-color: #00cec9;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

.tb-tera-toggle-label input {
    accent-color: #00cec9;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.tb-slot-subname {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.tb-slot-lvl {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 4px;
}

.tb-lvl-input {
    width: 44px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 2px 4px;
    color: #fff;
    font-size: 0.7rem;
    text-align: center;
    outline: none;
}

.tb-shiny-btn {
    background: none;
    border: none;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 4px;
}

.tb-shiny-btn.active, .tb-shiny-btn:hover {
    color: #ffd32a;
    transform: scale(1.2);
    filter: drop-shadow(0 0 6px rgba(255, 211, 42, 0.6));
}

.tb-item-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-item-btn:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.tb-item-name {
    font-size: 0.76rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-muted {
    color: rgba(255, 255, 255, 0.35);
}

/* Stats Summary Card in Slot */
.tb-stats-summary-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 8px 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-stats-summary-card:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.tb-stats-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}

.tb-stats-edit-link {
    color: #34d399;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tb-stats-mini-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.tb-stat-chip {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 4px 2px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tb-stat-chip span {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-stat-chip b {
    font-size: 0.75rem;
    color: #fff;
}

.tb-stat-plus {
    color: #2ed573;
    font-size: 0.52rem;
    font-weight: bold;
    margin-left: 2px;
}

.tb-stat-minus {
    color: #ff4757;
    font-size: 0.52rem;
    font-weight: bold;
    margin-left: 2px;
}

/* ==========================================================================
   STATS EDITOR MODAL - PIXEL-PERFECT ALIGNMENT
   ========================================================================== */
.tb-stats-summary-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.tb-ev-counter {
    font-size: 0.82rem;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
    color: #34d399;
}

.tb-ev-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tb-preset-btn {
    background: rgba(26, 38, 70, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    font-size: 0.68rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.tb-preset-btn:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.2);
}

.tb-preset-btn.danger:hover {
    border-color: #ff6b81;
    background: rgba(233, 69, 96, 0.2);
}

.tb-stat-table-header {
    display: grid;
    grid-template-columns: 120px 90px 1fr 110px;
    gap: 16px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tb-stat-editor-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.tb-stat-editor-row {
    display: grid;
    grid-template-columns: 120px 90px 1fr 110px;
    gap: 16px;
    align-items: center;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
}

.tb-stat-ed-name {
    display: flex;
    flex-direction: column;
}

.tb-stat-ed-name b {
    font-size: 0.85rem;
    color: #fff;
}

.tb-stat-ed-name small {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.tb-stat-ed-final {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-stat-val {
    font-size: 1.15rem;
    color: #10b981;
    font-weight: bold;
}

.tb-stat-ed-ev {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tb-ev-slider {
    flex: 1;
    accent-color: #10b981;
    cursor: pointer;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    outline: none;
}

.tb-ev-input-box {
    width: 58px;
    background: rgba(26, 38, 70, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 4px;
    color: #fff;
    font-size: 0.82rem;
    text-align: center;
    outline: none;
    transition: all 0.2s ease;
}

.tb-ev-input-box:focus {
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.tb-stat-ed-iv {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-iv-input-box {
    width: 48px;
    background: rgba(26, 38, 70, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 4px;
    color: #fff;
    font-size: 0.82rem;
    text-align: center;
    outline: none;
    transition: all 0.2s ease;
}

.tb-iv-input-box:focus {
    border-color: #34d399;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.35);
}

.tb-iv-max-btn {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.tb-iv-max-btn.max-31 {
    background: #10b981;
    border-color: #34d399;
    color: #fff;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.tb-iv-max-btn.min-0 {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
    color: #ff6b81;
}

.tb-iv-max-btn.custom-val {
    background: rgba(26, 38, 70, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffd32a;
}

/* Item Picker Row */
.tb-item-pick-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-item-pick-row:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    transform: translateY(-1px);
}

.tb-item-pick-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.tb-item-pick-info {
    flex: 1;
    min-width: 0;
}

.tb-item-pick-name {
    font-size: 0.82rem;
    color: #fff;
    margin-bottom: 2px;
}

.tb-item-pick-eng {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 6px;
}

.tb-item-pick-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
}

.tb-badge-bp {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    color: #ff6b81;
}

.tb-badge-acc {
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    color: #81ecec;
}




/* ==========================================================================
   ITEM PICKER & MOVE PICKER GRID STYLES
   ========================================================================== */
.tb-item-modal-list {
    flex: 1;
    overflow-y: auto;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 12px !important;
    padding: 6px 4px 16px !important;
}

.tb-move-modal-list {
    flex: 1;
    overflow-y: auto;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 10px !important;
    padding: 6px 4px 16px !important;
}

.tb-item-pick-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.tb-item-pick-row:hover {
    border-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.12) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25) !important;
}

.tb-item-pick-icon {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 4px !important;
}

.tb-item-pick-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.tb-item-pick-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.88rem !important;
    color: #fff !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.tb-item-pick-eng {
    font-size: 0.7rem !important;
    color: #f59e0b !important;
    font-weight: normal !important;
}

.tb-item-pick-desc {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.4 !important;
}

.tb-move-pick-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.tb-move-pick-item:hover {
    border-color: #e94560 !important;
    background: rgba(233, 69, 96, 0.12) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.25) !important;
}



/* Nature Button in Slot Card - Compact Auto-Fitting */
.tb-nature-btn {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.tb-nature-btn:hover {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.12) !important;
}

.tb-nature-btn-name {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 0.72rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

.tb-nature-btn-icon {
    color: #00cec9 !important;
    font-size: 0.82rem !important;
    flex-shrink: 0 !important;
}


.db-nature-matrix-cell.active-selected-nature {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.25) !important;
    box-shadow: 0 0 16px rgba(0, 206, 201, 0.5) !important;
    position: relative;
}

.tb-nat-sel-check {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #00cec9;
    font-size: 0.7rem;
}

.tb-item-slot-icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }


/* ==========================================================================
   CUSTOM TERA & ABILITY SELECT BUTTONS & MODALS
   ========================================================================== */
.tb-custom-select-btn {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

.tb-custom-select-btn:hover {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

.tb-custom-select-val {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 0.76rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tb-select-chevron {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
}

.tb-tera-tag-base {
    color: #00cec9 !important;
    font-size: 0.76rem !important;
}

.tb-tera-tag-stellar {
    color: #ffd32a !important;
    font-size: 0.76rem !important;
}

/* Tera Modal Grid */
.tb-tera-special-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.tb-tera-special-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.tb-tera-special-card b {
    font-size: 0.85rem !important;
    color: #fff !important;
    display: block !important;
}

.tb-tera-special-card small {
    font-size: 0.65rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.tb-tera-special-card:hover {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.12) !important;
    transform: translateY(-2px) !important;
}

.tb-tera-special-card.active-tera {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.22) !important;
    box-shadow: 0 0 16px rgba(0, 206, 201, 0.4) !important;
}

.tb-tera-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 8px !important;
}

.tb-tera-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.tb-tera-card-badge {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.tb-type-icon-mini {
    width: 14px !important;
    height: 14px !important;
    object-fit: contain !important;
}

.tb-tera-card-name {
    font-size: 0.75rem !important;
    color: #fff !important;
}

.tb-tera-card:hover {
    border-color: var(--tera-color, #10b981) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.tb-tera-card.active-tera {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.2) !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

.tb-tera-check {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    color: #10b981 !important;
    font-size: 0.65rem !important;
}

/* Ability Modal List */
.tb-ability-list-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.tb-ability-pick-card {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.tb-ability-pick-card:hover {
    border-color: #ffd32a !important;
    background: rgba(255, 211, 42, 0.08) !important;
    transform: translateY(-2px) !important;
}

.tb-ability-pick-card.active-ability {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.18) !important;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.35) !important;
}

.tb-ability-pick-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
    gap: 10px !important;
}

.tb-ability-names b {
    font-size: 0.88rem !important;
    color: #fff !important;
}

.tb-ability-eng {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-left: 6px !important;
}

.tb-ab-pill {
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
}

.tb-ab-pill.regular {
    background: rgba(52, 152, 219, 0.2) !important;
    border: 1px solid rgba(52, 152, 219, 0.4) !important;
    color: #74b9ff !important;
}

.tb-ab-pill.hidden {
    background: rgba(255, 211, 42, 0.2) !important;
    border: 1px solid rgba(255, 211, 42, 0.4) !important;
    color: #ffd32a !important;
}

.tb-ability-desc {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.35 !important;
}

.tb-ab-check {
    color: #10b981 !important;
    font-size: 0.85rem !important;
    margin-left: 6px !important;
}


/* ==========================================================================
   SLEEK LEVEL CONTROL PILL
   ========================================================================== */
.tb-level-control {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(0, 206, 201, 0.35) !important;
    border-radius: 8px !important;
    padding: 3px 8px !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.tb-level-control:hover, .tb-level-control:focus-within {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.1) !important;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3) !important;
}

.tb-lvl-tag {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    color: #00cec9 !important;
    font-weight: bold !important;
    user-select: none !important;
}

.tb-lvl-input {
    width: 36px !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem !important;
    font-weight: bold !important;
    text-align: center !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
}

.tb-lvl-input::-webkit-outer-spin-button,
.tb-lvl-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}


/* ==========================================================================
   DYNAMAX LEVEL SETTING (GIGANTAMAX POKEMON)
   ========================================================================== */
.tb-dmax-field-row {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.tb-dmax-control {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 71, 87, 0.08) !important;
    border: 1px solid rgba(255, 71, 87, 0.3) !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.tb-dmax-control:hover {
    border-color: #ff4757 !important;
    background: rgba(255, 71, 87, 0.14) !important;
    box-shadow: 0 0 12px rgba(255, 71, 87, 0.25) !important;
}

.tb-dmax-badge {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #ff4757 !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
}

.tb-dmax-slider {
    flex: 1 !important;
    min-width: 50px !important;
    height: 6px !important;
    accent-color: #ff4757 !important;
    cursor: pointer !important;
}

.tb-dmax-val {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.tb-dmax-val small {
    color: #ff6b81 !important;
    font-size: 0.65rem !important;
    margin-left: 2px !important;
}


/* ==========================================================================
   CLEAN TERA MODAL & PILL STYLES
   ========================================================================== */
.tb-type-icon-clean {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}

.tb-type-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.74rem !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.tb-tera-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 10px !important;
    padding: 4px 2px !important;
}

.tb-tera-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.tb-tera-card:hover {
    border-color: var(--tera-color, #00cec9) !important;
    background: rgba(0, 206, 201, 0.1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

.tb-tera-card.active-tera {
    border-color: var(--tera-color, #00cec9) !important;
    background: rgba(0, 206, 201, 0.2) !important;
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.4) !important;
}

.tb-tera-card-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tb-tera-check {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    color: #00cec9 !important;
    font-size: 0.7rem !important;
}


/* Clean Tera Display Item inside button (No colored pill) */
.tb-tera-display-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.76rem !important;
}

.tb-type-icon-clean {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}


/* ==========================================================================
   TOP BAR TOGGLES & G-MAX BUTTON
   ========================================================================== */
.tb-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    margin-bottom: 18px !important;
}

.tb-toggles-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.tb-mechanic-toggle {
    cursor: pointer !important;
    user-select: none !important;
    margin: 0 !important;
}

.tb-mechanic-toggle input {
    display: none !important;
}

.tb-toggle-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem !important;
    transition: all 0.2s ease !important;
}

.tb-mechanic-toggle input:checked + .tb-toggle-pill {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.18) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
}

.tb-slot-badges {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.tb-gmax-btn {
    background: rgba(255, 71, 87, 0.12) !important;
    border: 1px solid rgba(255, 71, 87, 0.35) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.tb-gmax-btn:hover {
    border-color: #ff4757 !important;
    color: #fff !important;
    background: rgba(255, 71, 87, 0.25) !important;
}

.tb-gmax-btn.active {
    background: #ff4757 !important;
    border-color: #ff4757 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.6) !important;
}


/* Mega Evolution Toggle Button */
.tb-mega-btn {
    background: rgba(233, 69, 96, 0.12) !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.tb-mega-btn:hover {
    border-color: #e94560 !important;
    color: #fff !important;
    background: rgba(233, 69, 96, 0.25) !important;
}

.tb-mega-btn.active {
    background: linear-gradient(135deg, #e94560, #ff007f) !important;
    border-color: #ff007f !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.6) !important;
}


/* ==========================================================================
   TEAMBUILDER MOVE PICKER MODAL GRID & CARDS
   ========================================================================== */
.tb-move-grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 14px !important;
    align-content: start !important;
}

.tb-move-grid-container .db-move-card {
    min-height: 140px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}


/* Dynamax In-Battle HP Badge in Slot Stat Chip */
.tb-stat-dmax-hp {
    color: #ff007f !important;
    font-size: 0.52rem !important;
    font-weight: bold !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
    text-shadow: 0 0 6px rgba(255, 0, 127, 0.6) !important;
    margin-top: 1px !important;
}


/* Dedicated Transformation Buttons Row (Above Item) */
.tb-transform-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important;
    flex-wrap: wrap !important;
}

.tb-transform-row .tb-mega-btn,
.tb-transform-row .tb-gmax-btn {
    padding: 5px 12px !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
}


/* Description block inside Move Picker Cards */
.db-move-card-desc {
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.12) !important;
    font-size: 0.74rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.4 !important;
    font-family: 'Minecraft', monospace !important;
    word-break: break-word !important;
}


/* Synergy Table Type Icon */
.tb-syn-type-icon {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
    vertical-align: middle !important;
}


/* ==========================================================================
   TRAINER ACADEMY / BEGINNER GUIDE MODAL STYLING
   ========================================================================== */
.db-header-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex-shrink: 0;
    margin-right: 4px;
}

.db-header-actions-row {
    display: flex;
    gap: 8px;
}

.db-beginner-guide-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 12px;
    border: 1px solid rgba(241, 196, 15, 0.5);
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.2), rgba(233, 69, 96, 0.25));
    color: #f1c40f;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(241, 196, 15, 0.15);
}

.db-beginner-guide-btn i {
    color: #f1c40f;
    font-size: 0.85rem;
}

.db-beginner-guide-btn:hover {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.35), rgba(233, 69, 96, 0.4));
    border-color: #f1c40f;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(241, 196, 15, 0.35);
    transform: translateY(-2px);
}

/* Academy Modal */
.db-guide-modal-content {
    background: #0f1424;
    border: 1px solid rgba(241, 196, 15, 0.4);
    border-radius: 20px;
    width: 100%;
    max-width: 860px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(241, 196, 15, 0.2);
    overflow: hidden;
    animation: modalPop 0.25s ease;
}

.db-guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: rgba(241, 196, 15, 0.08);
    border-bottom: 1px solid rgba(241, 196, 15, 0.2);
}

.db-guide-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.db-guide-header-title h3 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    color: #f1c40f;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}


/* Guide Ranks Bar & Pills */
.db-guide-ranks-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: thin;
}

.db-guide-rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.db-guide-rank-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-1px);
}

.db-guide-rank-pill.active {
    font-weight: bold;
}

.db-guide-stepper-wrap {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    display: flex;
    gap: 8px;
    scrollbar-width: thin;
}

.db-guide-step-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.db-guide-step-chip:hover {
    background: rgba(241, 196, 15, 0.15);
    color: #ffffff;
    border-color: rgba(241, 196, 15, 0.4);
}

.db-guide-step-chip.active {
    background: linear-gradient(135deg, #f1c40f, #e67e22);
    color: #0f1424;
    border-color: #f1c40f;
    box-shadow: 0 2px 10px rgba(241, 196, 15, 0.4);
}

.db-guide-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    color: #dfe6e9;
    font-size: 0.88rem;
    line-height: 1.6;
}

.db-guide-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.db-guide-card-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #55efc4;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-guide-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.db-guide-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00b894, #00cec9);
    border: none;
    color: #0f1424;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 206, 201, 0.3);
}

.db-guide-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.45);
}

.db-guide-prev-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-guide-prev-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}


/* Z-Move Teambuilder Styles */
.tb-move-item.is-z-boosted {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.12), rgba(15, 23, 42, 0.8));
    border-color: rgba(0, 206, 201, 0.45);
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.15);
}

.tb-move-item.is-z-boosted:hover {
    border-color: #00cec9;
    box-shadow: 0 0 15px rgba(0, 206, 201, 0.35);
}

.tb-move-z-tag {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.25), rgba(108, 92, 231, 0.25));
    border: 1px solid rgba(0, 206, 201, 0.6);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    color: #00cec9;
    white-space: nowrap;
}

.tb-move-z-tag.signature {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.3), rgba(233, 69, 96, 0.3));
    border-color: #f1c40f;
    color: #f1c40f;
}

.db-move-z-box {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.15), rgba(108, 92, 231, 0.15));
    border: 1px solid rgba(0, 206, 201, 0.45);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 6px;
    font-size: 0.72rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: inset 0 0 12px rgba(0, 206, 201, 0.1);
}

.db-move-z-box.signature {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.2), rgba(233, 69, 96, 0.2));
    border-color: rgba(241, 196, 15, 0.6);
    box-shadow: inset 0 0 12px rgba(241, 196, 15, 0.15);
}


/* Rich Competitive Breakdown Panel */
.tb-stats-insight-section {
    margin-top: 16px;
    background: linear-gradient(145deg, rgba(10, 15, 30, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.tb-stats-insight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.tb-stats-insight-header h4 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.tb-insight-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-insight-tab-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-insight-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.tb-insight-tab-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    font-weight: bold;
}

.tb-insight-tab-content {
    display: none;
    animation: fadeInTab 0.25s ease-out;
}

.tb-insight-tab-content.active {
    display: block;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Overview Banner */
.tb-insight-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.tb-insight-stat-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-insight-stat-card-title {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tb-insight-stat-card-val {
    font-size: 1.1rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    color: #fff;
}

.tb-insight-stat-card-desc {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Speed Ladder */
.tb-speed-ladder-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-speed-tier-row {
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid #f39c12;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-speed-tier-row.faster {
    border-left-color: #2ecc71;
}

.tb-speed-tier-row.tied {
    border-left-color: #ffd32a;
}

.tb-speed-tier-row.slower {
    border-left-color: #e74c3c;
}

.tb-speed-tier-row.tr-first {
    border-left-color: #9b59b6;
    background: rgba(155, 89, 182, 0.1);
}

/* Health / Survival Bar */
.tb-survival-bar-wrap {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.tb-survival-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.tb-survival-bar-fill.safe {
    background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.tb-survival-bar-fill.danger {
    background: linear-gradient(90deg, #f39c12, #e67e22);
}

.tb-survival-bar-fill.ohko {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.tb-threat-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s ease;
}

.tb-threat-card:hover {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.2);
}

.tb-threat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #fff;
}

.tb-threat-attacker {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-threat-move {
    color: #74b9ff;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.tb-threat-dmg-badge {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
}

.tb-threat-dmg-badge.safe { color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.4); }
.tb-threat-dmg-badge.danger { color: #f39c12; border: 1px solid rgba(243, 156, 18, 0.4); }
.tb-threat-dmg-badge.ohko { color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.4); }

.tb-threat-sub {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
}


/* Z-Move Button in Transform Row */
.tb-zmove-btn {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    border-radius: 6px;
    padding: 4px 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-zmove-btn:hover {
    background: rgba(0, 206, 201, 0.3);
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.4);
    transform: translateY(-1px);
}

.tb-zmove-btn.active {
    background: linear-gradient(135deg, #00cec9, #0984e3);
    border-color: #00cec9;
    color: #fff;
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.6);
}

.tb-move-item.z-transformed {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.22), rgba(108, 92, 231, 0.25)) !important;
    border-color: #00cec9 !important;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.35);
    animation: zPulse 2s infinite alternate;
}

.tb-move-item.z-transformed.signature {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.28), rgba(233, 69, 96, 0.28)) !important;
    border-color: #f1c40f !important;
    box-shadow: 0 0 14px rgba(241, 196, 15, 0.45);
}

@keyframes zPulse {
    0% { box-shadow: 0 0 8px rgba(0, 206, 201, 0.25); }
    100% { box-shadow: 0 0 16px rgba(0, 206, 201, 0.55); }
}

.tb-z-power-pill {
    background: linear-gradient(135deg, #ffd32a, #f39c12);
    color: #000;
    font-weight: bold;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    margin-left: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}


/* Format Selector Row */
.tb-insight-format-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-insight-format-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #10b981;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tb-format-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

.tb-format-pill {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-format-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.tb-format-pill.active {
    background: linear-gradient(135deg, #10b981, #0984e3);
    border-color: #10b981;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* Speed Badges Grid & Chips */
.tb-speed-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.tb-speed-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid var(--tier-color, #2ecc71);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 0.72rem;
    color: #fff;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.tb-speed-badge-pill:hover {
    transform: translateY(-2px);
    border-color: var(--tier-color, #2ecc71);
    background: rgba(25, 35, 60, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.tb-speed-badge-name {
    font-weight: 500;
}

.tb-speed-badge-spec {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.tb-speed-badge-val {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.68rem;
    color: var(--tier-color, #2ecc71);
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}


/* Top Bar Clean 2-Row Styling */
.tb-top-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    padding: 14px 18px !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}

.tb-top-row-main {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.tb-top-row-gimmicks {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 10px !important;
}

.tb-gimmicks-header-label {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.tb-team-name-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-width: 260px !important;
    max-width: 520px !important;
}

.tb-team-select {
    background: rgba(26, 26, 46, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    color: #fff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.82rem !important;
    outline: none !important;
    cursor: pointer !important;
    max-width: 200px !important;
}


/* Full Database Comparison Styles */
.tb-db-compare-box {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tb-db-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.tb-db-search-input {
    flex: 1;
    min-width: 240px;
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 8px;
    padding: 8px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    outline: none;
}

.tb-db-search-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.tb-db-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tb-db-filter-chip {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-db-filter-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tb-db-filter-chip.active {
    background: #10b981;
    border-color: #10b981;
    color: #000;
    font-weight: bold;
}

.tb-db-rank-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(52, 152, 219, 0.12));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
}

.tb-db-rank-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb-db-rank-title {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
}

.tb-db-rank-value {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: bold;
    color: #10b981;
}

.tb-db-compare-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
    gap: 10px;
    transition: all 0.2s ease;
}

.tb-db-compare-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(20, 30, 55, 0.95);
}

.tb-db-compare-card-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-db-compare-card-avatar {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.tb-db-compare-card-names {
    display: flex;
    flex-direction: column;
}

.tb-db-compare-card-ru {
    font-weight: 500;
    font-size: 0.78rem;
    color: #fff;
}

.tb-db-compare-card-en {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-db-compare-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    white-space: nowrap;
}

.tb-db-compare-badge.faster {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.tb-db-compare-badge.slower {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}

.tb-db-compare-badge.tied {
    background: rgba(241, 196, 15, 0.15);
    border: 1px solid rgba(241, 196, 15, 0.4);
    color: #ffd32a;
}


/* Team Generator Modal & Button Styles */
.tb-btn.generator-highlight-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25)) !important;
    border: 1px solid #10b981 !important;
    color: #10b981 !important;
    font-weight: bold !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.25s ease !important;
}

.tb-btn.generator-highlight-btn:hover {
    background: linear-gradient(135deg, #10b981, #0984e3) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.6) !important;
    transform: translateY(-1px) !important;
}

.tb-gen-modal-content {
    max-width: 950px;
    width: 95vw;
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(145deg, #0d1322, #151f32);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.tb-gen-section-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #10b981;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.tb-gen-format-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-gen-format-card:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(20, 30, 55, 0.9);
    transform: translateY(-2px);
}

.tb-gen-format-card.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
}

.tb-gen-format-card-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-format-card-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.35;
}

.tb-gen-archetype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.tb-gen-arch-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-gen-arch-card:hover {
    background: rgba(25, 35, 60, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
}

.tb-gen-arch-card.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.tb-gen-arch-card.active span {
    color: #fff !important;
}

.tb-gen-preview-box {
    background: rgba(10, 15, 30, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
}

.tb-gen-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.tb-gen-preview-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.tb-gen-preview-avatar {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.tb-gen-preview-name {
    font-size: 0.72rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.tb-gen-preview-item {
    font-size: 0.62rem;
    color: #f59e0b;
    font-family: 'Minecraft', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.tb-gen-preview-role {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-auto-build-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(52, 152, 219, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 6px;
    color: #10b981;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 5px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.tb-auto-build-btn:hover {
    background: linear-gradient(135deg, #10b981, #0984e3);
    color: #fff;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}


/* Offense & Defense Full DB Card Styles */
.tb-ko-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    white-space: nowrap;
}

.tb-ko-badge.ohko {
    background: rgba(241, 196, 15, 0.18);
    border: 1px solid rgba(241, 196, 15, 0.5);
    color: #ffd32a;
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.2);
}

.tb-ko-badge.twohko {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.tb-ko-badge.survives {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}


/* Flexible Team Generator Layout */
.tb-gen-options-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.tb-gen-options-col {
    flex: 1;
    min-width: 280px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
}

.tb-gen-gimmick-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.tb-gen-gimmick-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 7px 12px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.tb-gen-gimmick-chip:hover {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.tb-gen-gimmick-chip.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.tb-gen-quick-presets {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.tb-gen-preset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tb-gen-preset-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}


/* Individual Pokemon Build Generator Styles */
.tb-single-gen-modal-content {
    max-width: 780px;
    width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(145deg, #0d1322, #151f32);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
}

.tb-role-pills-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 16px;
}

.tb-role-pill {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-role-pill:hover {
    border-color: rgba(16, 185, 129, 0.5);
    color: #fff;
    background: rgba(20, 30, 55, 0.9);
}

.tb-role-pill.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.tb-build-details-card {
    background: rgba(10, 15, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tb-build-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.tb-build-field-box {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-build-field-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.tb-build-field-val {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: #fff;
}

.tb-build-moves-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.tb-build-move-chip {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #74b9ff;
    display: flex;
    align-items: center;
    gap: 6px;
}



/* Database Stat Filters Enhanced Styles */
.db-stat-filters-container {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.db-stat-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.db-stat-subhint {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Minecraft', monospace;
}

.db-stat-reset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 4px 10px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-stat-reset-btn:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
    color: #ff6b81;
}

.db-stat-sliders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.db-stat-filter-item {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.db-stat-filter-item:hover {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(20, 30, 55, 0.9);
}

.db-stat-filter-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
}

.db-stat-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.db-stat-name.hp { color: #ff5e57; }
.db-stat-name.atk { color: #ff9f43; }
.db-stat-name.def { color: #feca57; }
.db-stat-name.spa { color: #54a0ff; }
.db-stat-name.spd { color: #a29bfe; }
.db-stat-name.spe { color: #1dd1a1; }
.db-stat-name.bst { color: #ffd32a; }

.db-stat-range-val {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.35);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.db-stat-inputs-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-stat-num-input {
    flex: 1;
    min-width: 45px;
    background: rgba(10, 15, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 5px 6px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
    text-align: center;
    transition: all 0.2s ease;
}

.db-stat-num-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
    background: rgba(15, 25, 45, 1);
}

.db-stat-dash {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.db-stat-sort-toggles {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.db-stat-sort-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    width: 26px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-stat-sort-btn:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    color: #fff;
}

.db-stat-sort-btn.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: #fff;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* ==========================================================================
   COMMUNITY WALL (ОБЩАЯ СТЕНА КОМАНД) STYLES
   ========================================================================== */
.tb-wall-modal-content {
    max-width: 960px;
    width: 96vw;
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(155deg, #090e1a 0%, #121b2d 100%);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 206, 201, 0.15);
}

.tb-wall-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tb-wall-filters-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
}

.tb-wall-search-input {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    min-width: 240px;
    outline: none;
    transition: all 0.2s ease;
}

.tb-wall-search-input:focus {
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.tb-wall-feed-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.tb-wall-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.tb-wall-card:hover {
    border-color: rgba(0, 206, 201, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.tb-wall-card-author-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-wall-author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-wall-author-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0, 206, 201, 0.5);
    background: #0a0a1a;
}

.tb-wall-author-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.88rem;
    font-weight: bold;
    color: #fff;
}

.tb-wall-date {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
}

.tb-wall-team-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tb-wall-team-name {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #00cec9;
    font-weight: bold;
}

.tb-wall-format-badge {
    background: linear-gradient(135deg, #0984e3, #6c5ce7);
    border-radius: 6px;
    padding: 3px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #fff;
    font-weight: bold;
}

.tb-wall-team-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
    background: rgba(10, 15, 30, 0.6);
    border-radius: 8px;
    padding: 8px 12px;
    border-left: 3px solid #00cec9;
}

.tb-wall-pokemon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.tb-wall-pokemon-chip {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.tb-wall-pokemon-chip img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

.tb-wall-pokemon-chip-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tb-wall-pokemon-chip-item {
    font-size: 0.62rem;
    color: #f59e0b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tb-wall-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-wall-like-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 14px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-wall-like-btn:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
    color: #ff6b81;
}

.tb-wall-like-btn.liked {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-color: #e74c3c;
    color: #fff;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.4);
}

.tb-wall-import-btn {
    background: linear-gradient(135deg, #10b981, #0984e3);
    border: none;
    border-radius: 8px;
    padding: 7px 18px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.tb-wall-import-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
}

/* Publish Modal Styling */
.tb-publish-modal-content {
    max-width: 580px;
    width: 95vw;
    background: linear-gradient(145deg, #0d1322, #151f32);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
}


/* Move Slot Type Icon */
.tb-move-type-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
    margin-right: 2px;
}



/* Pills & Selection Controls */
.tb-gen-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.tb-gen-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-pill.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

/* Archetypes Grid */
.tb-gen-arch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
}

.tb-gen-arch-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-arch-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.tb-gen-arch-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(0, 206, 201, 0.2));
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(9, 132, 227, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 6 Pokemon Cards Grid */
.tb-gen-squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
}

.tb-gen-poke-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tb-gen-poke-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.tb-gen-poke-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.tb-gen-poke-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.tb-gen-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.92rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-poke-role {
    display: inline-block;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 3px;
}

.tb-gen-poke-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tb-gen-poke-moves-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-gen-move-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 4px 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* Pills & Selection Controls */
.tb-gen-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tb-gen-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-pill.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

/* Archetypes Flexible Row (No Truncation) */
.tb-gen-arch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-gen-arch-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tb-gen-arch-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.tb-gen-arch-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(0, 206, 201, 0.2));
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(9, 132, 227, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 6 Pokemon Cards Grid */
.tb-gen-squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
}

.tb-gen-poke-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tb-gen-poke-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.tb-gen-poke-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.tb-gen-poke-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.tb-gen-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-poke-role {
    display: inline-block;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 3px;
}

.tb-gen-poke-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-gen-detail-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-poke-moves-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-gen-move-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 5px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================================
   PROCEDURAL COMPETITIVE TEAM GENERATOR STYLES (CLEAN, NO EMOJIS, SCROLLABLE)
   ========================================================================== */
.tb-gen-modal-content {
    max-width: 1080px;
    width: 95vw;
    height: 90vh;
    max-height: 90vh;
    background: linear-gradient(155deg, #090e1a 0%, #111a2e 50%, #0d1527 100%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9), 0 0 50px rgba(16, 185, 129, 0.12);
    overflow: hidden;
    color: #fff;
    box-sizing: border-box;
}

.tb-gen-modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(9, 14, 26, 0.85);
    flex-shrink: 0;
}

#tbTeamGenModalBody, .tb-gen-modal-body {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

#tbTeamGenModalBody::-webkit-scrollbar {
    width: 7px;
}
#tbTeamGenModalBody::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}
#tbTeamGenModalBody::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.45);
    border-radius: 4px;
}
#tbTeamGenModalBody::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7);
}

.tb-gen-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(9, 14, 26, 0.95);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 10px;
}

/* Pills & Selection Controls */
.tb-gen-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tb-gen-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-pill.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.tb-gen-preset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-gen-preset-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #fff;
}

/* Archetypes Flexible Row (No Truncation) */
.tb-gen-arch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-gen-arch-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tb-gen-arch-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.tb-gen-arch-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(0, 206, 201, 0.2));
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(9, 132, 227, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 6 Pokemon Cards Grid */
.tb-gen-squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
    padding-bottom: 8px;
}

.tb-gen-poke-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tb-gen-poke-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.tb-gen-poke-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.tb-gen-poke-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.tb-gen-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-poke-role {
    display: inline-block;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 3px;
}

.tb-gen-poke-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-gen-detail-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-poke-moves-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-gen-move-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 5px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================================
   SITE MODE SWITCHER FULL WIDTH DISTRIBUTION
   ========================================================================== */
.mode-switcher-header {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 8px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
}

.mode-switcher-header .site-mode-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

.mode-switcher-header .site-mode-btn span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 768px) {
    .mode-switcher-header {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    .mode-switcher-header .site-mode-btn {
        width: 100% !important;
        flex: none !important;
        padding: 10px 12px !important;
    }
}


/* Gimmick Toggles in Procedural Generator */
.tb-gen-gimmick-toggle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-gimmick-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-gimmick-toggle.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}


/* ==========================================================================
   DATABASE STAT FILTERS STYLING (MINIMALIST, UNDER TYPE FILTERS, MINECRAFT FONT)
   ========================================================================== */
.db-stat-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.db-stat-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 22px;
}

.db-stat-sliders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: 4px;
}

.db-stat-filter-item {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 2px 5px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    height: 26px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: all 0.15s ease;
}

.db-stat-filter-item:hover {
    background: rgba(26, 38, 70, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.db-stat-filter-item.has-filter {
    border-color: rgba(16, 185, 129, 0.6) !important;
    background: rgba(16, 185, 129, 0.12) !important;
}

.db-stat-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 0;
}

.db-stat-name i {
    font-size: 0.58rem;
}

.db-stat-name.hp { color: #ef4444; }
.db-stat-name.atk { color: #f97316; }
.db-stat-name.def { color: #eab308; }
.db-stat-name.spa { color: #38bdf8; }
.db-stat-name.spd { color: #a78bfa; }
.db-stat-name.spe { color: #10b981; }
.db-stat-name.bst { color: #fbbf24; }

.db-stat-inputs-row {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.db-stat-num-input {
    width: 32px !important;
    min-width: 0 !important;
    height: 20px !important;
    background: rgba(10, 15, 30, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 1px 2px !important;
    text-align: center !important;
    outline: none !important;
    transition: all 0.15s ease;
    box-sizing: border-box !important;
}

.db-stat-num-input:focus {
    border-color: #10b981 !important;
    background: rgba(15, 23, 42, 1) !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4) !important;
}

.db-stat-num-input::-webkit-outer-spin-button,
.db-stat-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.db-stat-num-input {
    -moz-appearance: textfield;
}

.db-stat-dash {
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.65rem;
    line-height: 1;
}

.db-stat-sort-toggles {
    display: flex;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.db-stat-sort-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 0 4px !important;
    height: 20px !important;
    line-height: 18px !important;
    cursor: pointer;
    transition: all 0.15s ease;
}

.db-stat-sort-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.db-stat-sort-btn.active {
    background: #10b981 !important;
    border-color: #34d399 !important;
    color: #fff !important;
    font-weight: bold;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.db-stat-reset-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 2px 8px;
    height: 22px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.db-stat-reset-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fff;
}

/* Category Filter Compact & 'More...' Drawer Styles */
.db-cat-more-btn {
    background: rgba(15, 52, 96, 0.25);
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    padding: 5px 10px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    white-space: nowrap;
    vertical-align: middle;
}

.db-cat-more-btn i {
    font-size: 0.52rem;
    opacity: 0.75;
    transition: transform 0.2s ease;
}

.db-cat-more-btn:hover {
    background: rgba(15, 52, 96, 0.45);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.db-cat-more-btn.is-open {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #34d399;
}

.db-cat-more-btn.has-active-child {
    background: rgba(16, 185, 129, 0.22);
    border: 1px solid #10b981;
    color: #34d399;
}

.db-cat-more-badge {
    background: #10b981;
    color: #052e16;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.52rem;
    border-radius: 8px;
    padding: 1px 4px;
    line-height: 1;
}

.db-cat-extra-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    padding: 6px 8px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    animation: fadeInCatExtra 0.18s ease-out;
}

@keyframes fadeInCatExtra {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Button in dbShowDetail to open full profile */
.db-detail-open-profile-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(9, 132, 227, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10b981;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.db-detail-open-profile-btn:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(9, 132, 227, 0.35));
    border-color: #34d399;
    color: #fff;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}


/* Move Slot Icons & Dual Name Styling */
.tb-slot-move-type-icon {
    width: 15px;
    height: 15px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 4px;
    vertical-align: middle;
}

.tb-move-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-move-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
}

.tb-move-en-sub {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.65rem;
    font-weight: normal;
    margin-left: 2px;
}


/* ==========================================================================
   BUILD ANALYSIS & SURVIVAL BENCHMARKS MODAL STYLES
   ========================================================================== */
.tb-build-analysis-container {
    margin-top: 18px;
    padding: 14px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.tb-build-analysis-header h4 {
    margin: 0 0 12px 0;
    color: #10b981;
    font-size: 0.95rem;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

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

.tb-analysis-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
}

.tb-analysis-card-title {
    font-weight: bold;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tb-bulk-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    margin-bottom: 6px;
}

.tb-bulk-label {
    color: rgba(255, 255, 255, 0.7);
}

.tb-bulk-val {
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.75rem;
}

.tb-bulk-val.badge-high {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.tb-bulk-val.badge-good {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.tb-bulk-val.badge-mid {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.tb-bulk-val.badge-low {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.tb-surv-meta-header {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 10px 0 6px 0;
    text-transform: uppercase;
}

.tb-surv-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.8);
}

.tb-surv-tag {
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tb-surv-tag.pass {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.tb-surv-tag.mid {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.tb-surv-tag.fail {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.tb-speed-tier-badge {
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.3);
    color: #38bdf8;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.tb-speed-benchmark-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
}

.tb-pros-cons-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tb-pros-list, .tb-cons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-pro-item {
    font-size: 0.72rem;
    color: #34d399;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-con-item {
    font-size: 0.72rem;
    color: #fb7185;
    display: flex;
    align-items: center;
    gap: 6px;
}


/* Slot Card Quick Bulk Summary */
.tb-slot-bulk-quick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    flex-wrap: wrap;
}

.tb-bulk-quick-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tb-bulk-quick-tag b {
    color: #10b981;
}

.tb-stats-modal-expanded {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(16, 185, 129, 0.3);
}


/* Z-Move Slot Badge Styles */
.tb-slot-zmove-badge {
    margin: 6px 0;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 211, 42, 0.1);
    border: 1px solid rgba(255, 211, 42, 0.3);
    color: #ffd32a;
    transition: all 0.2s ease;
}

.tb-slot-zmove-badge.ready {
    background: linear-gradient(135deg, rgba(255, 211, 42, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    border: 1px solid rgba(255, 211, 42, 0.45);
    box-shadow: 0 0 10px rgba(255, 211, 42, 0.15);
}

.tb-slot-zmove-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px dashed rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    font-size: 0.68rem;
}

.tb-zmove-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-zmove-title small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
    margin-left: 2px;
}


/* Profile Card Top Bar & Photo Button */
.db-profile-card-top-bar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    margin-bottom: 2px;
}
.db-profile-photo-btn {
    position: static;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
.db-profile-photo-btn:hover {
    background: #6366f1;
    border-color: #818cf8;
    color: #fff;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
}

.db-profile-search-wrap {
    position: relative;
    z-index: 550;
    min-width: 250px;
    max-width: 360px;
}
.db-profile-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    pointer-events: none;
}
.db-profile-search-input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    color: #fff;
    font-size: 0.82rem;
    transition: all 0.2s;
    font-family: inherit;
}
.db-profile-search-input:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
    background: #0f172a;
}
.db-profile-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 440px;
    max-width: min(460px, calc(100vw - 32px));
    background: #141b2d;
    border: 1px solid rgba(16, 185, 129, 0.55);
    border-radius: 12px;
    max-height: 380px;
    overflow-y: auto;
    z-index: 99999 !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 16px rgba(16, 185, 129, 0.25);
}
.db-profile-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
    text-decoration: none;
}
.db-profile-search-item:last-child {
    border-bottom: none;
}
.db-profile-search-item:hover {
    background: rgba(16, 185, 129, 0.22);
}
.db-profile-search-thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}
.db-profile-search-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    gap: 2px;
}
.db-profile-search-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-profile-search-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-profile-search-dex {
    font-size: 0.72rem;
    color: #10b981;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    flex-shrink: 0;
}
.db-profile-search-types {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}
.db-profile-search-type-pill {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.db-profile-search-empty {
    padding: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
}


/* ==========================================================================
   Z-MOVE BUTTON, MODAL & PER-MOVE EFFECTS
   ========================================================================== */
.tb-zmove-btn {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.16), rgba(255, 159, 26, 0.24));
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: #ffd700;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    font-family: inherit;
}
.tb-zmove-btn:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(255, 159, 26, 0.45));
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    transform: translateY(-1px);
}
.tb-zmove-btn.active {
    background: linear-gradient(135deg, #ffd700, #ff9f1a);
    color: #121829;
    border-color: #fff;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.65);
}

.tb-move-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tb-move-main-line {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.tb-move-z-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    padding: 3px 10px;
    margin-left: 20px;
    border-radius: 6px;
    margin-top: 3px;
    transition: all 0.2s;
    cursor: default;
}
.tb-move-z-sub.damage {
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: #ffd700;
}
.tb-move-z-sub.damage:hover {
    background: rgba(255, 215, 0, 0.16);
    border-color: #ffd700;
}
.tb-move-z-sub.status {
    background: rgba(255, 211, 42, 0.08);
    border: 1px solid rgba(255, 211, 42, 0.45);
    color: #ffd32a;
}
.tb-move-z-sub.status:hover {
    background: rgba(255, 211, 42, 0.18);
    border-color: #ffd32a;
}
.tb-move-z-title {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}
.tb-move-z-bp {
    color: #ffd32a;
    font-weight: 700;
    font-family: 'Minecraft', monospace, sans-serif;
    font-size: 0.72rem;
    flex-shrink: 0;
    margin-left: auto;
}
.tb-move-z-bp.status-boost {
    color: #ffd32a;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Z-Crystal Selection Modal */
.tb-zcrystal-modal-content {
    max-width: 800px !important;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.tb-zcrystal-modal-body {
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tb-zcrystal-actions {
    display: flex;
    justify-content: flex-end;
}
.tb-zcrystal-remove-btn {
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all 0.2s;
}
.tb-zcrystal-remove-btn:hover {
    background: rgba(239, 68, 68, 0.35);
    border-color: #ef4444;
    color: #fff;
}
.tb-zcrystal-section-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tb-zcrystal-section-title.signature {
    color: #ffd700;
}
.tb-zcrystal-signature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
.tb-zcrystal-sig-card {
    background: rgba(15, 23, 42, 0.85);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tb-zcrystal-sig-card:hover {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25);
}
.tb-zcrystal-sig-card.active {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 159, 26, 0.25));
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
}
.tb-zcrystal-sig-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tb-zcrystal-sig-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffd700;
    flex: 1;
}
.tb-zcrystal-sig-details {
    font-size: 0.78rem;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.35;
}
.tb-zcrystal-req-move {
    color: #38bdf8;
    font-weight: 600;
}
.tb-zcrystal-zmove-name {
    color: #f59e0b;
    font-weight: 700;
}
.tb-zcrystal-sig-desc {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 2px;
}

.tb-zcrystal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}
.tb-zcrystal-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tb-zcrystal-card:hover {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    transform: translateY(-2px);
}
.tb-zcrystal-card.compatible {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.08);
}
.tb-zcrystal-card.active {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.2);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}
.tb-zcrystal-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tb-zcrystal-type-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.tb-zcrystal-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
}
.tb-zcrystal-card-zmove {
    font-size: 0.72rem;
    color: #ffd700;
    font-weight: 600;
}
.tb-zcrystal-compat-badge {
    position: absolute;
    right: 8px;
    top: 8px;
    font-size: 0.62rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.25);
    color: #10b981;
    font-weight: 700;
}


/* ==========================================================================
   SYNERGY ANALYSIS TOGGLE & COVERAGE STYLES
   ========================================================================== */
.tb-synergy-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.tb-synergy-header-row .tb-synergy-title {
    margin-bottom: 0;
}
.tb-synergy-mode-tabs {
    display: flex;
    gap: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 4px;
}
.tb-syn-mode-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.tb-syn-mode-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.tb-syn-mode-btn.active {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35);
}
.tb-coverage-good {
    color: #10b981;
    font-weight: 700;
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tb-coverage-none {
    color: #f59e0b;
    font-weight: 700;
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tb-eff-badge.eff-super {
    background: #10b981 !important;
    color: #fff !important;
}


.tb-syn-tera-btn {
    margin-top: 5px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}
.tb-syn-tera-btn:hover {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.18);
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.35);
}
.tb-syn-tera-btn.active {
    background: linear-gradient(135deg, #00cec9, #0984e3);
    color: #fff;
    border-color: #fff;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.7);
}

/* ========================================================================== */
/* SYNERGY & WEAKNESS ANALYSIS ENHANCED DASHBOARD */
/* ========================================================================== */
.tb-syn-dash {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tb-syn-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}
.tb-syn-dash-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    font-family: 'Minecraft', monospace;
}
.tb-syn-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.tb-syn-status-badge.status-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.4));
    border: 1px solid #10b981;
    color: #a7f3d0;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}
.tb-syn-status-badge.status-yellow {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.4));
    border: 1px solid #f59e0b;
    color: #fde68a;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}
.tb-syn-status-badge.status-red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(185, 28, 28, 0.5));
    border: 1px solid #ef4444;
    color: #fecaca;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
    animation: synPulseRed 2s infinite ease-in-out;
}
@keyframes synPulseRed {
    0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.7); }
}

.tb-syn-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}
.tb-syn-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.2s, border-color 0.2s;
}
.tb-syn-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}
.tb-syn-card-label {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tb-syn-card-val {
    font-size: 1.15rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.tb-syn-card-sub {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
}

.tb-syn-tip-box {
    background: rgba(0, 206, 201, 0.08);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.73rem;
    color: #e2e8f0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.tb-syn-tip-box i {
    color: #00cec9;
    font-size: 0.95rem;
    margin-top: 2px;
}

.tb-balance-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
    gap: 4px;
    min-width: 60px;
}
.tb-bal-great {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #34d399;
}
.tb-bal-good {
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid #00cec9;
    color: #55efc4;
}
.tb-bal-neutral {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid #64748b;
    color: #cbd5e1;
}
.tb-bal-warn {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #fbbf24;
}
.tb-bal-danger {
    background: rgba(239, 68, 68, 0.25);
    border: 1px solid #ef4444;
    color: #f87171;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.tb-coverage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    gap: 5px;
    min-width: 68px;
}
.tb-cov-opt {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #34d399;
}
.tb-cov-single {
    background: rgba(9, 132, 227, 0.2);
    border: 1px solid #0984e3;
    color: #74b9ff;
}
.tb-cov-zero {
    background: rgba(244, 63, 94, 0.25);
    border: 1px solid #f43f5e;
    color: #fb7185;
}
.tb-cov-meta-alert {
    background: rgba(239, 68, 68, 0.3);
    border: 1px solid #ef4444;
    color: #fff;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
    animation: synPulseRed 2s infinite ease-in-out;
}



.tb-move-z-sub.status {
    background: rgba(255, 211, 42, 0.12);
    border-color: rgba(255, 211, 42, 0.5);
}
.tb-move-z-eff-badge {
    background: rgba(255, 211, 42, 0.25);
    color: #ffd32a;
    border: 1px solid rgba(255, 211, 42, 0.4);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.62rem;
    font-weight: 700;
    margin-left: auto;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.tb-move-z-sub:hover .tb-move-z-eff-badge {
    background: rgba(255, 211, 42, 0.4);
    box-shadow: 0 0 8px rgba(255, 211, 42, 0.6);
}


/* ==========================================================================
   TEAMBUILDER MOVE & Z-MOVE CONTAINED LAYOUT FIX
   ========================================================================== */
.tb-move-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
.tb-move-main-line {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
}
.tb-move-z-sub {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s !important;
    cursor: default !important;
    min-width: 0 !important;
}
.tb-move-z-sub.damage {
    background: rgba(255, 215, 0, 0.08) !important;
    border: 1px solid rgba(255, 215, 0, 0.4) !important;
    color: #ffd700 !important;
}
.tb-move-z-sub.damage:hover {
    background: rgba(255, 215, 0, 0.18) !important;
    border-color: #ffd700 !important;
}
.tb-move-z-sub.status {
    background: rgba(255, 211, 42, 0.08) !important;
    border: 1px solid rgba(255, 211, 42, 0.45) !important;
    color: #ffd32a !important;
}
.tb-move-z-sub.status:hover {
    background: rgba(255, 211, 42, 0.18) !important;
    border-color: #ffd32a !important;
}
.tb-move-z-title {
    color: #fff !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-right: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.tb-move-z-bp {
    color: #ffd32a !important;
    font-weight: 700 !important;
    font-family: 'Minecraft', monospace, sans-serif !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    white-space: nowrap !important;
}
.tb-move-z-bp.status-boost {
    color: #ffd32a !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
}

/* ===== MECHANICS JUMP BUTTONS & BANNERS ===== */
.db-mechanic-jump-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    margin-top: 14px;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.25) 0%, rgba(0, 206, 201, 0.15) 100%);
    border: 1px solid rgba(0, 206, 201, 0.45);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(0, 206, 201, 0.1);
}
.db-mechanic-jump-banner:hover {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.45) 0%, rgba(0, 206, 201, 0.3) 100%);
    border-color: #55efc4;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(85, 239, 196, 0.25);
}
.jump-banner-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.jump-banner-left i {
    font-size: 1.4rem;
    color: #55efc4;
}
.jump-banner-title {
    font-size: 0.92rem;
    font-weight: bold;
    color: #ffffff;
}
.jump-banner-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}
.jump-arrow {
    color: #55efc4;
    font-size: 1rem;
    transition: transform 0.2s ease;
}
.db-mechanic-jump-banner:hover .jump-arrow {
    transform: translateX(4px);
}
.db-mechanic-jump-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.4) 0%, rgba(0, 206, 201, 0.3) 100%);
    border: 1px solid #00cec9;
    border-radius: 10px;
    color: #55efc4;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(0, 206, 201, 0.2);
}
.db-mechanic-jump-btn:hover {
    background: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(85, 239, 196, 0.4);
}
.db-adv-tab-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid rgba(0, 206, 201, 0.5);
    color: #55efc4;
    font-size: 0.72rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-adv-tab-pill:hover {
    background: rgba(0, 206, 201, 0.45);
    border-color: #55efc4;
    color: #ffffff;
    transform: scale(1.05);
}

.db-math-formula-box {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: #55efc4;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(0, 206, 201, 0.5);
    box-shadow: 0 4px 20px rgba(0, 206, 201, 0.15), inset 0 0 15px rgba(0, 206, 201, 0.05);
    padding: 14px 18px;
    border-radius: 10px;
    margin: 12px 0;
    overflow-x: auto;
    line-height: 1.6;
    letter-spacing: 0.3px;
}
.db-section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 206, 201, 0.4), transparent);
    margin: 18px 0;
}

/* ===== TERA RULE CARD & EXCEPTIONS GRID ===== */
.db-tera-rule-card {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.15) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 10px;
}
.db-tera-rule-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: #55efc4;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 206, 201, 0.2);
}
.db-tera-rule-header i {
    font-size: 1.5rem;
    color: #00cec9;
}
.db-tera-exceptions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.db-tera-exception-item {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 10px 14px;
    border-left: 3px solid #ff7675;
}
.db-tera-exception-item.tech {
    border-left-color: #fdcb6e;
}
.db-tera-exception-item .exception-title {
    font-size: 0.82rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-tera-exception-item.bad .exception-title i {
    color: #ff7675;
}
.db-tera-exception-item.tech .exception-title i {
    color: #fdcb6e;
}
.db-tera-exception-item .exception-desc {
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}


.db-card-dl-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    font-size: 0.72rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.db-card-dl-action-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.db-status-cat-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
}

/* --- Status Card Avatar & Meta Chips Fixes --- */
.db-status-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.db-status-meta-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.db-status-chips-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.db-status-chip-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.85) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
}

.db-status-chips-row:has(.fa-shield-alt) .db-status-chip-label i {
    color: #2ecc71;
}

.db-status-chips-row:has(.fa-meteor) .db-status-chip-label i {
    color: #ff7675;
}

.db-status-chips-row:has(.fa-bolt) .db-status-chip-label i {
    color: #f1c40f;
}

.db-status-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.db-field-interactive-item.terrain .db-item-icon-box,
.db-field-interactive-item.field .db-item-icon-box {
    color: #a29bfe;
    background: rgba(162, 155, 254, 0.2);
}
.db-field-interactive-item.type .db-item-icon-box {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.2);
}
.db-field-interactive-item.item .db-item-icon-box {
    color: #0984e3;
    background: rgba(9, 132, 227, 0.2);
}


/* ==========================================================================
   TEAM GENERATOR 2.0 ENHANCED STYLES
   ========================================================================== */
.tb-gen-section-box {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s;
}
.tb-gen-section-box:hover {
    border-color: rgba(255, 255, 255, 0.16);
}
.tb-gen-input-wrap {
    width: 100%;
}
.tb-gen-text-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(10, 15, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
}
.tb-gen-text-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
    background: rgba(10, 18, 36, 0.95);
}
.tb-gen-chip-btn {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #e2e8f0;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    padding: 5px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    transition: all 0.18s ease;
}
.tb-gen-chip-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}
.tb-gen-chip-btn.active {
    background: rgba(245, 158, 11, 0.3) !important;
    border-color: #f59e0b !important;
    color: #fef08a !important;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}
.tb-gen-bring-badge {
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace !important;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
}
.tb-gen-pin-btn {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem;
    padding: 3px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
    transition: all 0.15s ease;
}
.tb-gen-pin-btn:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #fff;
}
.tb-gen-pin-btn.pinned {
    background: rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
    color: #f59e0b;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}
.tb-gen-reroll-btn {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem;
    padding: 3px 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
    transition: all 0.18s ease;
}
.tb-gen-reroll-btn:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    color: #10b981;
}
.tb-gen-bring-badge.core {
    background: rgba(16, 185, 129, 0.22);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #10b981;
}
.tb-gen-bring-badge.bench {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
}
.tb-gen-poke-card.is-core-card {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}


/* ==========================================================================
   ADMIN TRANSLATION & NAME CUSTOMIZATION SYSTEM STYLES
   ========================================================================== */
.admin-inline-pencil-btn {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #e94560;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.admin-inline-pencil-btn:hover {
    background: #e94560;
    color: #fff;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
    transform: scale(1.05);
}

.admin-inline-tag-btn {
    background: rgba(0, 206, 201, 0.15) !important;
    border: 1px dashed rgba(0, 206, 201, 0.6) !important;
    color: #00cec9 !important;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.admin-inline-tag-btn:hover {
    background: #00cec9 !important;
    color: #000 !important;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.6) !important;
    transform: translateY(-1px);
}

.admin-modal-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    background: rgba(0, 206, 201, 0.18);
    border: 1px solid rgba(0, 206, 201, 0.45);
    border-radius: 12px;
    color: #55efc4;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
}
.admin-modal-tag-chip i {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.15s;
}
.admin-modal-tag-chip i:hover {
    color: #ff4757;
}

.admin-modal-preset-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.admin-modal-preset-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
.admin-modal-preset-chip.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.admin-trans-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 7, 15, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999 !important;
}

.admin-trans-modal-content {
    background: #0f1123;
    border: 1px solid rgba(233, 69, 96, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(233, 69, 96, 0.2);
    border-radius: 14px;
    width: 95%;
    max-width: 520px;
    padding: 20px 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: adminTransFadeIn 0.2s ease;
}

@keyframes adminTransFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.admin-trans-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
}

.admin-trans-type-badge {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.5);
    color: #ff6b81;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
}

.admin-trans-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-trans-field-group label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: space-between;
}

.admin-trans-input {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 9px 12px;
    color: #fff;
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
}

.admin-trans-input:focus {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
    background: rgba(15, 23, 42, 0.8);
}

.admin-trans-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
    margin-top: 4px;
}

/* Admin Panel Translations Table */
.admin-trans-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    overflow: hidden;
}

.admin-trans-table th {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.admin-trans-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
}

.admin-trans-table tr:hover td {
    background: rgba(233, 69, 96, 0.05);
}

/* Modal Tabs & Stats Styling */
.admin-trans-tabs-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}

.admin-trans-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-trans-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.admin-trans-tab-btn.active {
    background: rgba(233, 69, 96, 0.2);
    border-color: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

.admin-trans-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-trans-textarea {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 70px;
    line-height: 1.4;
    transition: all 0.2s;
}

.admin-trans-textarea:focus {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
    background: rgba(15, 23, 42, 0.8);
}

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

.admin-trans-stat-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-trans-stat-label {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-weight: bold;
}

.admin-trans-stat-input {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 8px;
    color: #55efc4;
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: bold;
    text-align: center;
    outline: none;
    transition: all 0.2s;
}

.admin-trans-stat-input:focus {
    border-color: #55efc4;
    box-shadow: 0 0 8px rgba(85, 239, 196, 0.35);
}

.admin-trans-total-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(233, 69, 96, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 8px;
    padding: 8px 14px;
    margin-top: 4px;
}

.admin-trans-select {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    font-size: 0.82rem;
    outline: none;
}

/* ========================================================================== */
/* NEWS & UPDATES (CHANGELOG) MODE STYLES */
/* ========================================================================== */
.news-mode-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 14px 40px;
}

.news-header-banner {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.news-header-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 206, 201, 0.12), transparent 70%);
    pointer-events: none;
}

.news-header-main {
    flex: 1;
    min-width: 280px;
}

.news-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.news-header-title {
    font-size: 1.45rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-header-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    line-height: 1.45;
}

.news-header-stats-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.news-stat-pill {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.news-stat-pill i {
    font-size: 1.15rem;
}

.news-stat-val {
    font-size: 0.95rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    color: #fff;
}

.news-stat-lbl {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

/* Controls Bar */
.news-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.news-category-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.news-cat-btn {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.news-cat-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.news-cat-btn.active {
    background: linear-gradient(135deg, #e94560, #c0392b);
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 2px 10px rgba(233, 69, 96, 0.4);
}

.news-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
    flex: 0 1 320px;
}

.news-search-box i.fa-search {
    position: absolute;
    left: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    pointer-events: none;
}

.news-search-box input {
    width: 100%;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 32px 8px 34px;
    color: #fff;
    font-size: 0.78rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.news-search-box input:focus {
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.news-search-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 4px;
}

.news-search-clear:hover {
    color: #fff;
}

/* News Cards */
.news-posts-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.news-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.news-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.news-card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.news-card-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.news-version-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
}

.news-tag-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
}

.news-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
}

.news-date-text {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.news-card-title {
    font-size: 1.12rem;
    color: #fff;
    margin: 0 0 8px 0;
    font-family: 'Minecraft', monospace;
    line-height: 1.4;
}

.news-card-summary {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

.news-card-body.collapsed {
    display: none;
}

.news-highlights-wrap {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 14px;
}

.news-hl-header {
    font-size: 0.75rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.news-highlight-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.news-highlight-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-hl-badge-col {
    flex: 0 0 64px;
}

.news-hl-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    text-align: center;
    width: 100%;
}

.news-hl-content-col {
    flex: 1;
}

.news-hl-title {
    font-size: 0.82rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.news-hl-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.45;
}

.news-card-footer {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

.news-expand-toggle-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 5px 12px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.news-expand-toggle-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.news-empty-state {
    text-align: center;
    padding: 40px 20px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
}

.news-reset-btn {
    margin-top: 14px;
    background: linear-gradient(135deg, #0984e3, #00cec9);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
}

.news-reset-btn:hover {
    opacity: 0.9;
}

/* ==========================================================================
   POKE DIV COMMUNITY HUB (ACTIONS, TYPES, SUGGESTIONS & POLLS)
   ========================================================================== */

.comm-actions-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* Quick Suggest Translation Pencil Button for RU users */
.suggest-trans-pencil-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 206, 201, 0.14);
    border: 1px solid rgba(0, 206, 201, 0.38);
    color: #00cec9;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    font-size: 0.65rem;
    cursor: pointer;
    margin-left: 6px;
    padding: 0;
    vertical-align: middle;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.suggest-trans-pencil-btn:hover {
    background: #00cec9;
    color: #0f172a;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.6);
}

.comm-account-display {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 206, 201, 0.08);
    border: 1px solid rgba(0, 206, 201, 0.28);
    border-radius: 8px;
    padding: 10px 14px;
    user-select: none;
}

.comm-idea-card-title {
    margin: 12px 0 8px 0;
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.4;
}

.comm-idea-content-box {
    background: rgba(255, 255, 255, 0.035);
    border-left: 3px solid #00cec9;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 10px;
    white-space: pre-wrap;
    word-break: break-word;
}

.comm-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.comm-btn-suggest {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%);
    color: #fff;
    border: 1px solid rgba(0, 206, 201, 0.5);
}

.comm-btn-suggest:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.45);
    filter: brightness(1.1);
}

.comm-btn-poll {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: 1px solid rgba(245, 158, 11, 0.5);
}

.comm-btn-poll:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
    filter: brightness(1.1);
}

.comm-types-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.45);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.comm-types-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.comm-type-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.76rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.comm-type-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.comm-type-btn.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(233, 69, 96, 0.15));
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

.comm-sort-group {
    display: flex;
    gap: 4px;
}

.comm-sort-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 5px 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.comm-sort-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.comm-sort-btn.active {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    color: #00cec9;
}

/* Community Cards */
.comm-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.92) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.comm-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.comm-card.comm-card-suggestion {
    border-left: 4px solid #00cec9;
}

.comm-card.comm-card-suggestion.status-approved {
    border-left: 4px solid #10b981;
}

.comm-card.comm-card-poll {
    border-left: 4px solid #f59e0b;
}

.comm-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.comm-author-col {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comm-author-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(0, 206, 201, 0.15);
    color: #00cec9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    border: 1px solid rgba(0, 206, 201, 0.3);
}

.comm-author-avatar.admin {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
}

.comm-author-avatar.custom {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(0, 206, 201, 0.45) !important;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.25);
}

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

.comm-author-badge-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    vertical-align: middle;
    margin-left: 6px;
    border-radius: 4px;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.comm-author-badge-img:hover {
    transform: scale(1.25);
}

.comm-author-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comm-author-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.comm-admin-pill {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
    border: 1px solid rgba(233, 69, 96, 0.4);
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
}

.comm-post-date {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
}

.comm-badge-col {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.comm-cat-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.comm-cat-pill.poll {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
}

.comm-status-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-status-pill.approved {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.comm-status-pill.voting {
    background: rgba(9, 132, 227, 0.18);
    color: #0984e3;
    border: 1px solid rgba(9, 132, 227, 0.35);
}

.comm-admin-card-actions {
    display: inline-flex;
    gap: 6px;
    margin-left: 6px;
}

.comm-admin-btn {
    border: none;
    border-radius: 5px;
    padding: 4px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-admin-btn.approve {
    background: #10b981;
    color: #fff;
}

.comm-admin-btn.delete {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.comm-admin-btn:hover {
    filter: brightness(1.2);
}

/* Translation comparison bar */
.comm-trans-compare-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
}

.comm-trans-box {
    flex: 1;
}

.comm-trans-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.comm-trans-value {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    font-weight: bold;
}

.comm-trans-box.eng .comm-trans-value {
    color: #e2e8f0;
}

.comm-trans-box.rus .comm-trans-value {
    color: #00cec9;
}

.comm-trans-arrow {
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.1rem;
}

.comm-reasoning-box {
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid rgba(0, 206, 201, 0.5);
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 12px;
    line-height: 1.45;
}

.comm-admin-comment-box {
    display: flex;
    gap: 8px;
    font-size: 0.78rem;
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    border: 1px dashed rgba(16, 185, 129, 0.3);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.comm-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 10px;
}

.comm-vote-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comm-vote-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 5px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.comm-vote-btn.like:hover, .comm-vote-btn.like.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #10b981;
}

.comm-vote-btn.dislike:hover, .comm-vote-btn.dislike.active {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

.comm-rating-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
}

.comm-rating-pill.pos {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.comm-rating-pill.neg {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.comm-rating-pill.zero {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}

/* Poll styling */
.comm-poll-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #fff;
    margin: 8px 0 6px 0;
    line-height: 1.4;
}

.comm-poll-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
    line-height: 1.45;
}

.comm-poll-options-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.comm-poll-opt-row {
    position: relative;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
}

.comm-poll-opt-row:hover {
    border-color: rgba(245, 158, 11, 0.5);
    transform: translateX(2px);
}

.comm-poll-opt-row.selected {
    border-color: #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.comm-poll-opt-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.45) 100%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.comm-poll-opt-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
}

.comm-poll-opt-radio {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
}

.comm-poll-opt-row.selected .comm-poll-opt-radio {
    color: #f59e0b;
}

.comm-poll-opt-text {
    flex: 1;
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    color: #fff;
}

.comm-poll-opt-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
}

.comm-poll-opt-stat .votes-num {
    color: rgba(255, 255, 255, 0.5);
}

.comm-poll-opt-stat .votes-pct {
    font-weight: bold;
    color: #f59e0b;
    min-width: 35px;
    text-align: right;
}

.comm-poll-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 10px;
}

.comm-poll-total b {
    color: #fff;
}

/* Modals */
.comm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.comm-modal-card {
    background: #1a1a2e;
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 14px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    animation: modalIn 0.2s ease-out;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.comm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.5);
}

.comm-modal-header h1,
.comm-modal-header h2,
.comm-modal-header h3,
.comm-modal-header h4,
.comm-modal-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.comm-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.comm-modal-close:hover {
    color: #fff;
}

.comm-modal-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.comm-form-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
}

.comm-form-input, .comm-form-textarea {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 9px 12px;
    color: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s;
}

.comm-form-input:focus, .comm-form-textarea:focus {
    border-color: #00cec9;
}

.comm-btn-add-opt {
    background: rgba(245, 158, 11, 0.15);
    border: 1px dashed rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    border-radius: 6px;
    padding: 6px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    margin-top: 6px;
}

.comm-btn-add-opt:hover {
    background: rgba(245, 158, 11, 0.25);
}

.comm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.5);
}

.comm-btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 7px 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
}

.comm-btn-submit {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%);
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.comm-btn-submit:hover {
    filter: brightness(1.1);
}

/* ==========================================================================
   TERA GENERATOR & TACTICAL RECOMMENDATIONS
   ========================================================================== */
.tb-gen-tera-detail {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 6px;
    padding: 3px 8px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    transition: all 0.2s ease;
}

.tb-gen-tera-detail:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.5);
}

.tb-tera-rec-box {
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.tb-tera-rec-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-tera-rec-chip:hover {
    background: rgba(168, 85, 247, 0.18);
    border-color: rgba(168, 85, 247, 0.5);
    transform: translateY(-1px);
}

.tb-tera-rec-chip.active {
    background: rgba(168, 85, 247, 0.28);
    border-color: #a855f7;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}






/* ==========================================================================
   COMMUNITY BUILDS & TEAMS ON NEWS WALL
   ========================================================================== */
.comm-card.comm-card-team {
    border-left: 4px solid #00cec9 !important;
}

.comm-card.comm-card-build {
    border-left: 4px solid #a855f7 !important;
}

.comm-type-pill.team {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid #00cec9;
    color: #00cec9;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-type-pill.build {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid #a855f7;
    color: #c084fc;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-format-badge {
    padding: 3px 9px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.comm-team-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.08rem;
    color: #fff;
    margin: 6px 0 8px 0;
}

.comm-team-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
    margin-bottom: 12px;
}

.comm-team-pokes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.comm-team-poke-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.2s, transform 0.2s;
}

.comm-team-poke-card:hover {
    border-color: #00cec9;
    transform: translateY(-2px);
}

.comm-team-poke-art-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 6px;
}

.comm-team-poke-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

.comm-tera-badge {
    position: absolute;
    bottom: -4px;
    right: -6px;
    padding: 2px 6px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.comm-team-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.comm-team-poke-sub {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Minecraft', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.comm-team-poke-props {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    margin-top: 6px;
}

.comm-team-prop-chip {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comm-team-prop-chip i {
    font-size: 0.55rem;
    opacity: 0.7;
}

.comm-team-details-wrap {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.comm-details-header {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #00cec9;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.comm-poke-detail-row {
    background: rgba(10, 15, 30, 0.6);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.comm-poke-detail-head {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
}

.comm-poke-detail-title {
    color: #fff;
}

.comm-nature-tag {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid #10b981;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.62rem;
}

.comm-evs-tag {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.65rem;
}

.comm-poke-moves-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
}

.comm-detail-move-chip {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #e2e8f0;
    font-family: 'Minecraft', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comm-build-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.comm-build-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid;
    outline: none;
}

.comm-build-action-btn.details {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

.comm-build-action-btn.details:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.comm-build-action-btn.import {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    color: #00cec9;
}

.comm-build-action-btn.import:hover {
    background: rgba(0, 206, 201, 0.3);
    color: #fff;
    transform: translateY(-1px);
}

.comm-build-action-btn.copy {
    background: rgba(9, 132, 227, 0.15);
    border-color: #0984e3;
    color: #74b9ff;
}

.comm-build-action-btn.copy:hover {
    background: rgba(9, 132, 227, 0.3);
    color: #fff;
    transform: translateY(-1px);
}

/* Single Pokemon Hero Card */
.comm-single-build-box {
    display: flex;
    gap: 16px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 12px;
    padding: 16px;
    align-items: center;
    margin: 12px 0;
    flex-wrap: wrap;
}

.comm-single-art-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 90px;
}

.comm-single-art {
    width: 84px;
    height: 84px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
}

.comm-role-badge {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid #a855f7;
    color: #c084fc;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.58rem;
    font-family: 'Minecraft', monospace;
}

.comm-single-info-col {
    flex: 1;
    min-width: 220px;
}

.comm-single-head {
    margin-bottom: 8px;
}

.comm-single-name {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #fff;
    font-weight: bold;
}

.comm-single-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.comm-single-chips-wrap {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.comm-chip-pill {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.comm-chip-pill.item i { color: #f59e0b; }
.comm-chip-pill.ability i { color: #00cec9; }
.comm-chip-pill.nature i { color: #10b981; }
.comm-chip-pill.evs i { color: #818cf8; }

.comm-single-moves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
}

.comm-single-move-chip {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    color: #fff;
    font-family: 'Minecraft', monospace;
}

/* Modal Publish Build */
.modal-publish-build {
    max-width: 620px !important;
    width: 95% !important;
    max-height: 88vh;
    overflow-y: auto;
}

.publish-build-tabs-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    flex-wrap: wrap;
}

.pub-tab-btn {
    background: none;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.pub-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.pub-tab-btn.active {
    background: rgba(0, 206, 201, 0.18);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.pub-field-row {
    margin-bottom: 12px;
}

.pub-label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 5px;
}

.pub-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

.pub-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.2s;
}

.pub-input:focus {
    border-color: #00cec9;
}

.pub-team-chips-preview {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    min-height: 48px;
    align-items: center;
}

.pub-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    color: #fff;
    font-family: 'Minecraft', monospace;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pub-preview-chip img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.pub-search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid #00cec9;
    border-radius: 8px;
    padding: 8px;
    margin-top: 6px;
}

.pub-search-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.15s;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #fff;
}

.pub-search-item:hover {
    background: rgba(0, 206, 201, 0.25);
}

.pub-search-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.pub-selected-poke-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 206, 201, 0.1);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Minecraft', monospace;
}

.comm-btn-publish-build {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.2), rgba(9, 132, 227, 0.2)) !important;
    border: 1px solid #00cec9 !important;
    color: #00cec9 !important;
}

.comm-btn-publish-build:hover {
    background: linear-gradient(135deg, #00cec9, #0984e3) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.4);
}



/* ===== СХЕМА ЗОН ПОРАЖЕНИЯ ПРИЁМА (Move Target Diagram) ===== */
.db-move-target-box {
    background: rgba(18, 22, 36, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 20px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.db-target-diagram {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 380px;
}

.db-target-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    padding: 4px;
    border-radius: 14px;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

.db-target-row.side-active {
    outline: 3px solid #2ecc71;
    box-shadow: 0 0 16px rgba(46, 204, 113, 0.5);
    background: rgba(46, 204, 113, 0.1);
}

.db-target-pill {
    padding: 10px 4px;
    border-radius: 14px;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 700;
    color: #ffffff;
    border: 3.5px solid transparent;
    transition: all 0.2s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Enemy pills (orange like photo) */
.db-target-enemy {
    background: #de8326;
    opacity: 0.85;
}

/* Ally pills (cyan/blue like photo) */
.db-target-ally {
    background: #16c0eb;
    opacity: 0.85;
}

/* User pill (matches cyan from photo, sized to fit Пользователь) */
.db-target-user {
    background: #16c0eb;
    opacity: 0.85;
    font-size: 0.72rem;
    letter-spacing: -0.25px;
    white-space: nowrap;
}

/* Highlighted target pills (vibrant green border like photo) */
.db-target-pill.active {
    opacity: 1 !important;
    border: 3.5px solid #27ae60 !important;
    box-shadow: 0 0 12px rgba(39, 174, 96, 0.75), inset 0 0 6px rgba(39, 174, 96, 0.35);
}

.db-target-desc {
    margin-top: 14px;
    text-align: center;
    font-style: italic;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.45;
    max-width: 400px;
}

.db-detail-target-section {
    margin-top: 14px;
}

.db-detail-target-pill-badge {
    margin-left: 8px;
    font-size: 0.74rem;
    font-weight: normal;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(39, 174, 96, 0.2);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
    vertical-align: middle;
}

.db-move-target-badge, .db-move-meta-tag.db-move-target-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.35);
    white-space: nowrap;
}

.db-mcard-extra-pill.target {
    border-color: rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}


/* ==========================================================================
   ADMIN TAG & CATEGORY EDITOR STYLES (MINECRAFT FONT)
   ========================================================================== */
.comm-admin-btn.tags {
    background: rgba(0, 206, 201, 0.18) !important;
    border: 1px solid rgba(0, 206, 201, 0.4) !important;
    color: #00cec9 !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.15s ease !important;
}

.comm-admin-btn.tags:hover {
    background: rgba(0, 206, 201, 0.35) !important;
    color: #fff !important;
    border-color: #00cec9 !important;
}

.news-admin-tag-btn {
    background: rgba(0, 206, 201, 0.15) !important;
    border: 1px solid rgba(0, 206, 201, 0.35) !important;
    color: #00cec9 !important;
    border-radius: 6px !important;
    padding: 3px 9px !important;
    cursor: pointer !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.74rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.15s ease !important;
}

.news-admin-tag-btn:hover {
    background: rgba(0, 206, 201, 0.3) !important;
    border-color: #00cec9 !important;
    color: #fff !important;
}

.admin-editable {
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.admin-editable:hover {
    filter: brightness(1.25) !important;
    outline: 1px dashed rgba(0, 206, 201, 0.7) !important;
}

.news-tag-presets-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.news-tag-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    padding: 2px 8px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.news-tag-chip:hover {
    background: rgba(0, 206, 201, 0.2) !important;
    border-color: #00cec9 !important;
    color: #fff !important;
}

#modalAdminEditTags,
#modalAdminEditTags input,
#modalAdminEditTags select,
#modalAdminEditTags textarea,
#modalAdminEditTags button,
#modalAdminEditTags label,
#modalAdminEditTags span,
#modalAdminEditTags div {
    font-family: 'Minecraft', monospace !important;
}

#modalAdminEditTags i,
#modalAdminEditTags [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}

/* ==========================================================================
   PROFILE CRY CONTROLS - ULTRA-COMPACT SINGLE-ROW TOOLBAR
   ========================================================================== */
.db-profile-cry-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 2px;
    padding: 3px 8px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    max-width: 100%;
    flex-wrap: nowrap;
    position: relative;
    z-index: 5;
}

.db-profile-cry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.db-profile-cry-btn span {
    display: inline-block;
    line-height: 1;
}

.db-profile-cry-btn.play i,
.db-profile-cry-btn.retro i {
    display: inline-block;
    line-height: 1;
    transform: translateY(1.5px);
}

.db-profile-cry-btn.play {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(233, 69, 96, 0.18));
    border-color: rgba(233, 69, 96, 0.5);
    color: #fff;
}
.db-profile-cry-btn.play:hover {
    background: rgba(233, 69, 96, 0.6);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}
.db-profile-cry-btn.play.playing {
    background: linear-gradient(135deg, #e94560, #ff6b8b) !important;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out;
}

.db-profile-cry-btn.retro {
    background: rgba(108, 92, 231, 0.2);
    border-color: rgba(108, 92, 231, 0.4);
    color: #a29bfe;
    padding: 4px 8px;
}
.db-profile-cry-btn.retro:hover {
    background: rgba(108, 92, 231, 0.45);
    color: #fff;
    box-shadow: 0 0 8px rgba(108, 92, 231, 0.5);
}
.db-profile-cry-btn.retro.playing {
    background: #6c5ce7 !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(108, 92, 231, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out;
}

.db-profile-cry-btn.download {
    background: rgba(0, 184, 148, 0.15);
    border-color: rgba(0, 184, 148, 0.35);
    color: #55efc4;
    padding: 4px 7px;
    width: 26px;
    height: 26px;
}
.db-profile-cry-btn.download:hover {
    background: rgba(0, 184, 148, 0.4);
    color: #fff;
    box-shadow: 0 0 8px rgba(0, 184, 148, 0.5);
}

.db-profile-cry-vol-expandable {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.db-profile-cry-vol-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-profile-cry-vol-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.db-profile-cry-vol-pop {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 6px 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    align-items: center;
    gap: 8px;
    z-index: 100;
    white-space: nowrap;
}

.db-profile-cry-vol-expandable:hover .db-profile-cry-vol-pop,
.db-profile-cry-vol-expandable.active .db-profile-cry-vol-pop {
    display: flex;
}

.db-profile-cry-vol-pop::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #0f172a transparent transparent transparent;
}

.db-cry-compact-range {
    width: 65px;
    height: 4px;
    accent-color: #e94560;
    cursor: pointer;
}

#dbProfileCryVolVal {
    font-size: 0.68rem;
    color: #e94560;
    font-weight: 700;
    min-width: 28px;
    text-align: right;
    font-family: 'Minecraft', monospace;
}


/* ==========================================================================
   POKÉMON SOUNDS & CRIES DATABASE (SOUNDBOARD & CAPCUT TOOLS)
   ========================================================================== */

.db-cries-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 15px !important;
    box-sizing: border-box !important;
}

.db-cry-card {
    background: rgba(22, 27, 46, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    backdrop-filter: blur(10px) !important;
    font-family: 'Minecraft', monospace !important;
    box-sizing: border-box !important;
}

.db-cry-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(233, 69, 96, 0.5) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(233, 69, 96, 0.2) !important;
}

.db-cry-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

.db-cry-card-dex {
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    color: #e94560 !important;
    background: rgba(233, 69, 96, 0.15) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 0.5px !important;
    font-family: 'Minecraft', monospace !important;
}

.db-cry-card-types {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
}

.db-cry-card-type-dot {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.db-cry-card-type-dot img {
    width: 13px !important;
    height: 13px !important;
    object-fit: contain !important;
    display: block !important;
}

.db-cry-card-sprite-wrap {
    width: 90px !important;
    height: 90px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 6px auto !important;
    position: relative !important;
    cursor: pointer !important;
}

.db-cry-card-sprite {
    max-width: 85px !important;
    max-height: 85px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)) !important;
    transition: transform 0.25s ease !important;
}

.db-cry-card:hover .db-cry-card-sprite {
    transform: scale(1.08) !important;
}

.db-cry-card-name-ru {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    font-family: 'Minecraft', monospace !important;
    margin-top: 4px !important;
}

.db-cry-card-name-en {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    font-family: 'Minecraft', monospace !important;
}

.db-cry-card-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
}

.db-cry-play-row {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
}

.db-cry-play-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 10px !important;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(233, 69, 96, 0.1)) !important;
    border: 1px solid rgba(233, 69, 96, 0.4) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
}

.db-cry-play-btn:hover {
    background: rgba(233, 69, 96, 0.45) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.5) !important;
}

.db-cry-play-btn.playing {
    background: linear-gradient(135deg, #e94560, #ff6b8b) !important;
    border-color: #fff !important;
    box-shadow: 0 0 18px rgba(233, 69, 96, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out !important;
}

.db-cry-retro-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 7px 8px !important;
    background: rgba(108, 92, 231, 0.2) !important;
    border: 1px solid rgba(108, 92, 231, 0.4) !important;
    border-radius: 8px !important;
    color: #a29bfe !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
}

.db-cry-retro-btn:hover {
    background: rgba(108, 92, 231, 0.4) !important;
    color: #fff !important;
    border-color: #a29bfe !important;
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.4) !important;
}

.db-cry-retro-btn.playing {
    background: #6c5ce7 !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: 0 0 16px rgba(108, 92, 231, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out !important;
}

.db-cry-download-row {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
}

.db-cry-dl-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 5px 8px !important;
    background: rgba(0, 184, 148, 0.15) !important;
    border: 1px solid rgba(0, 184, 148, 0.3) !important;
    border-radius: 7px !important;
    color: #55efc4 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
}

.db-cry-dl-btn:hover {
    background: rgba(0, 184, 148, 0.35) !important;
    color: #fff !important;
    border-color: #00b894 !important;
    box-shadow: 0 0 10px rgba(0, 184, 148, 0.4) !important;
}

.db-cry-volume-slider {
    accent-color: #e94560 !important;
    height: 6px !important;
    border-radius: 3px !important;
}


/* ==========================================================================
   SOUND DATABASE STYLES (SFX, JINGLES, MOVES, OST)
   ========================================================================== */
.db-sound-card {
    background: rgba(22, 27, 46, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    backdrop-filter: blur(10px) !important;
    font-family: 'Minecraft', monospace !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.db-sound-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(233, 69, 96, 0.5) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(233, 69, 96, 0.2) !important;
}

.db-sound-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.db-sound-badge {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 0.4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-transform: uppercase !important;
}

.db-sound-format {
    font-size: 0.65rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}

.db-sound-icon-wrap {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    margin: 4px 0 10px 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease !important;
}

.db-sound-card:hover .db-sound-icon-wrap {
    transform: scale(1.08) !important;
}

.db-sound-name-ru {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 2px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.db-sound-name-en {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-style: italic !important;
    margin-bottom: 8px !important;
}

.db-sound-desc {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.db-sound-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
}

.db-sound-tag {
    font-size: 0.6rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
}

.db-sound-card-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
}

.db-sound-play-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(233, 69, 96, 0.5) !important;
    background: rgba(233, 69, 96, 0.2) !important;
    color: #fff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.db-sound-play-btn:hover {
    background: rgba(233, 69, 96, 0.4) !important;
    border-color: #e94560 !important;
    transform: scale(1.02) !important;
}

.db-sound-play-btn.playing {
    background: #e94560 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.6) !important;
    animation: soundPulse 1.2s infinite ease-in-out !important;
}

@keyframes soundPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(233, 69, 96, 0.5); }
    50% { box-shadow: 0 0 18px rgba(233, 69, 96, 0.9); }
}

.db-sound-dl-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.7rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.db-sound-dl-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.db-sound-progress-container {
    width: 100% !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
}

.db-sound-progress-bar {
    width: 100% !important;
    height: 5px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.db-sound-progress-fill {
    height: 100% !important;
    transition: width 0.2s linear !important;
}


/* ==========================================================================
   BACKDROP & VIDEO BACKGROUND GENERATOR (ADMIN PANEL)
   ========================================================================== */

.bd-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.bd-header-info {
    flex: 1;
    min-width: 260px;
}

.bd-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bd-main-grid {
    display: grid;
    grid-template-columns: minmax(360px, 460px) 1fr;
    gap: 24px;
    align-items: flex-start;
}

@media (max-width: 960px) {
    .bd-main-grid {
        grid-template-columns: 1fr;
    }
}

.bd-controls-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bd-panel-box {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s ease;
}

.bd-panel-box:hover {
    border-color: rgba(233, 69, 96, 0.25);
}

.bd-panel-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}

.bd-preset-chips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bd-preset-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.64rem;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-preset-chip:hover {
    background: rgba(233, 69, 96, 0.18);
    border-color: rgba(233, 69, 96, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.bd-preset-chip.active {
    background: rgba(233, 69, 96, 0.28);
    border-color: #e94560;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.35);
}

.bd-res-btns-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.bd-res-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bd-res-btn:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.4);
    color: #ffffff;
}

.bd-res-btn.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.bd-custom-res-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.bd-input-num {
    width: 80px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 5px 8px;
}

.bd-input-num:focus {
    border-color: #00cec9;
    outline: none;
}

.bd-colors-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.bd-color-chips-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bd-color-chip {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.bd-color-chip:hover {
    transform: scale(1.15);
    border-color: #ffffff;
}

.bd-color-chip.active {
    border-color: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.bd-color-input {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.bd-select {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 6px 10px;
    cursor: pointer;
    width: 100%;
}

.bd-select:focus {
    border-color: #e94560;
    outline: none;
}

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

.bd-slider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.bd-slider-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.bd-range {
    flex: 1;
    height: 4px;
    accent-color: #e94560;
    cursor: pointer;
}

.bd-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
}

.bd-checkbox-label input[type="checkbox"] {
    accent-color: #e94560;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.bd-input-text {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 7px 10px;
    width: 100%;
    box-sizing: border-box;
}

.bd-input-text:focus {
    border-color: #00cec9;
    outline: none;
}

/* Right Column: Preview */
.bd-preview-col {
    position: relative;
}

.bd-preview-sticky {
    position: sticky;
    top: 20px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.bd-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bd-res-badge {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.35);
    color: #00cec9;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 3px 8px;
    border-radius: 4px;
}

.bd-preview-fs-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.72rem;
    transition: all 0.2s ease;
}

.bd-preview-fs-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.bd-canvas-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #060911;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    min-height: 320px;
    overflow: hidden;
}

#backdropPreviewCanvas {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
    display: block;
}

.bd-preview-tips {
    margin-top: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.63rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
}

/* Fullscreen Modal */
.bd-fullscreen-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.bd-fullscreen-overlay {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bdFullscreenCanvas {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

.bd-fullscreen-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
}

.bd-fullscreen-close:hover {
    transform: rotate(90deg) scale(1.1);
}

.bd-fullscreen-tip {
    position: absolute;
    bottom: -32px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    text-align: center;
    width: 100%;
}


/* ==========================================================================
   TYPE BADGE & OVERLAY GENERATOR (ADMIN PANEL)
   ========================================================================== */

.tb-types-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 6px;
}

.tb-type-select-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-type-select-chip img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.tb-type-select-chip:hover {
    border-color: var(--t-color, #00cec9);
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.tb-type-select-chip.active {
    background: var(--t-color, #00cec9);
    border-color: #ffffff;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 12px var(--t-color, rgba(0, 206, 201, 0.5));
    font-weight: bold;
}

.tb-quick-combo-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 5px 9px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-quick-combo-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #ffffff;
}

.tb-canvas-checker-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(45deg, #1c2438 25%, transparent 25%),
                      linear-gradient(-45deg, #1c2438 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #1c2438 75%),
                      linear-gradient(-45deg, transparent 75%, #1c2438 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 24px 16px;
    min-height: 220px;
    overflow: auto;
}

#typeBadgePreviewCanvas {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px;
    display: block;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   HD SPRITE & ART DOWNLOAD DROPDOWN (DATABASE & STUDIO)
   ========================================================================== */
.db-hd-dl-dropdown {
    position: fixed;
    z-index: 999999 !important;
    width: 360px;
    background: #0f172a;
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 206, 201, 0.2);
    padding: 12px;
    font-family: 'Minecraft', monospace;
    animation: dbHdFadeIn 0.15s ease-out;
}

@keyframes dbHdFadeIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.db-hd-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: #ffffff;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.db-hd-menu-close {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.db-hd-menu-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.db-hd-menu-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 380px;
    overflow-y: auto;
}

.db-hd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.15s ease;
}

.db-hd-item:hover {
    background: rgba(0, 206, 201, 0.08);
    border-color: rgba(0, 206, 201, 0.3);
}

.db-hd-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.db-hd-item-title {
    font-size: 0.68rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-hd-item-sub {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.45);
}

.db-hd-item-btns {
    display: flex;
    gap: 5px;
}

.db-hd-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.db-hd-btn:hover {
    background: #00cec9;
    color: #000;
    border-color: #00cec9;
}

.db-hd-btn.copy:hover {
    background: #e94560;
    color: #fff;
    border-color: #e94560;
}

.db-hd-menu-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}


.hd-studio-type-btn.active {
    background: rgba(0, 206, 201, 0.25) !important;
    border-color: #00cec9 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3) !important;
}

#hdStudioShinyToggle.active {
    background: rgba(241, 196, 15, 0.25) !important;
    border-color: #f1c40f !important;
    color: #f1c40f !important;
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.4) !important;
}


/* ==========================================================================
   POKÉMON EVOLUTION CHAIN COMPONENT
   ========================================================================== */
.db-profile-evo-section {
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(10, 15, 28, 0.96) 100%);
    border: 1px solid rgba(0, 206, 201, 0.28);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.db-profile-evo-section:hover {
    border-color: rgba(0, 206, 201, 0.5);
    box-shadow: 0 12px 36px rgba(0, 206, 201, 0.15), 0 10px 30px rgba(0, 0, 0, 0.4);
}

.db-evo-collapse-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    margin: 0 !important;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(90deg, rgba(0, 206, 201, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    transition: all 0.25s ease;
}

.db-evo-collapse-title:hover {
    background: linear-gradient(90deg, rgba(0, 206, 201, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.db-evo-collapse-title.is-expanded {
    border-bottom: 1px solid rgba(0, 206, 201, 0.22);
}

.db-evo-collapse-title.is-expanded .db-evo-arrow {
    transform: rotate(180deg);
}

.db-evo-count-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 20px;
    color: #00cec9;
    text-shadow: 0 0 8px rgba(0, 206, 201, 0.3);
}

.db-evo-toggle-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    transition: color 0.2s ease;
}

.db-evo-collapse-title:hover .db-evo-toggle-hint {
    color: #00cec9;
}

.db-evo-arrow {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: #00cec9;
    font-size: 0.85rem;
}

.db-profile-evo-body {
    padding: 26px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    background: radial-gradient(ellipse at center, rgba(30, 41, 59, 0.35) 0%, rgba(8, 12, 22, 0.7) 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 206, 201, 0.4) transparent;
}

.db-profile-evo-body::-webkit-scrollbar {
    height: 6px;
}

.db-profile-evo-body::-webkit-scrollbar-thumb {
    background: rgba(0, 206, 201, 0.4);
    border-radius: 4px;
}

/* Linear & Branching Layouts */
.db-evo-linear-wrap,
.db-evo-branching-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: 100%;
}

.db-evo-branching-wrap {
    align-items: center;
}

.db-evo-branch-base {
    display: flex;
    align-items: center;
    position: relative;
}

.db-evo-branch-base::after {
    content: '';
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 6px rgba(0, 206, 201, 0.4);
    flex-shrink: 0;
}

.db-evo-branch-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    padding-left: 28px;
    border-left: none;
}

.db-evo-branch-row {
    display: flex;
    align-items: center;
    position: relative;
}

.db-evo-branch-row::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-branch-row::after {
    content: '';
    position: absolute;
    left: -28px;
    top: -7px;
    bottom: -7px;
    width: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-branch-row:first-child::after {
    top: 50%;
}

.db-evo-branch-row:last-child::after {
    bottom: 50%;
}

.db-evo-branch-row:only-child::after {
    display: none;
}

.db-evo-sub-branch {
    display: flex;
    align-items: center;
    position: relative;
}

.db-evo-sub-branch::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-sub-branch::after {
    content: '';
    position: absolute;
    left: -28px;
    top: -7px;
    bottom: -7px;
    width: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-sub-branch:first-child::after {
    top: 50%;
}

.db-evo-sub-branch:last-child::after {
    bottom: 50%;
}

.db-evo-sub-branch:only-child::after {
    display: none;
}

.db-evo-branches-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    padding-left: 28px;
    border-left: none;
}

.db-evo-card + .db-evo-branches-col::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

/* Card */
.db-evo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 126px;
    padding: 12px 8px 14px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
    user-select: none;
}

.db-evo-card:hover {
    transform: translateY(-4px);
    background: linear-gradient(180deg, rgba(40, 53, 76, 0.95) 0%, rgba(18, 28, 51, 0.98) 100%);
    border-color: rgba(0, 206, 201, 0.65);
    box-shadow: 0 10px 24px rgba(0, 206, 201, 0.25);
}

.db-evo-card:hover .db-evo-sprite {
    transform: scale(1.1);
}

.db-evo-card.is-current {
    background: linear-gradient(180deg, rgba(0, 206, 201, 0.18) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid #00cec9;
    box-shadow: 0 0 20px rgba(0, 206, 201, 0.4), inset 0 0 12px rgba(0, 206, 201, 0.12);
}

.db-evo-current-badge {
    position: absolute;
    top: -10px;
    background: linear-gradient(135deg, #00cec9, #0984e3);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 206, 201, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 5;
}

.db-evo-sprite-box {
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
}

.db-evo-sprite {
    max-width: 74px;
    max-height: 74px;
    object-fit: contain;
    image-rendering: auto !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.db-evo-name {
    font-size: 0.74rem;
    font-weight: 700;
    color: #f8fafc;
    text-align: center;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.15;
    height: 1.8rem;
    width: 100%;
    max-width: 120px;
    padding: 0 2px;
    box-sizing: border-box;
    margin-top: 3px;
    letter-spacing: 0.2px;
}

.db-evo-dex {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 1px;
    letter-spacing: 0.5px;
}

.db-evo-types {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.db-evo-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 6px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.2px;
}

.db-evo-type-chip img {
    width: 12px;
    height: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Step Arrow & Method Badge */
/* Step Arrow Container */
.db-evo-step-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 8px;
    min-width: 85px;
    max-width: 175px;
    width: auto;
    text-align: center;
    flex-shrink: 0;
    margin: 0 2px;
}

/* Method Badge (wrapping, multi-line, glow) */
.db-evo-method-badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.62rem;
    font-weight: 600;
    color: #fcd34d;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(252, 211, 77, 0.45);
    border-radius: 12px;
    padding: 4px 9px;
    line-height: 1.25;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 8px rgba(252, 211, 77, 0.15);
    margin-bottom: 7px;
    max-width: 155px;
    width: max-content;
    white-space: normal;
    text-align: center;
    word-break: normal;
    overflow-wrap: break-word;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.db-evo-method-badge:hover {
    border-color: rgba(252, 211, 77, 0.85);
    box-shadow: 0 4px 14px rgba(252, 211, 77, 0.35);
    transform: translateY(-1px);
    color: #fff;
}

.db-evo-method-badge i {
    flex-shrink: 0;
    font-size: 0.68rem;
    color: #fcd34d;
}

/* Elegant Directional Flow Track */
.db-evo-flow-track {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 55px;
    height: 18px;
}

.db-evo-flow-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 206, 201, 0.25) 0%, rgba(0, 206, 201, 0.85) 75%, #00cec9 100%);
    box-shadow: 0 0 6px rgba(0, 206, 201, 0.45);
    border-radius: 2px;
    position: relative;
}

.db-evo-flow-line::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 206, 201, 0.7);
    box-shadow: 0 0 6px rgba(0, 206, 201, 0.8);
}

.db-evo-flow-arrowhead {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -1px;
    color: #00cec9;
    font-size: 0.92rem;
    filter: drop-shadow(0 0 6px rgba(0, 206, 201, 0.85));
    transition: transform 0.2s ease;
    animation: evoArrowPulse 2.2s infinite ease-in-out;
}

.db-evo-arrow-icon {
    font-size: 0.9rem;
    color: #00cec9;
    filter: drop-shadow(0 0 4px rgba(0, 206, 201, 0.8));
}

@keyframes evoArrowPulse {
    0%, 100% {
        transform: translateX(0);
        filter: drop-shadow(0 0 5px rgba(0, 206, 201, 0.7));
    }
    50% {
        transform: translateX(4px);
        filter: drop-shadow(0 0 10px rgba(0, 206, 201, 1));
    }
}


/* ==========================================================================
   POKEMON SEARCH SPELL SUGGESTION & DROPDOWN STYLES
   ========================================================================== */
.hd-studio-search-wrap {
    position: relative;
    width: 100%;
}

.bd-panel-box:has(#hdStudioPokeSearchInp) {
    position: relative;
    z-index: 900 !important;
}

.hd-studio-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 999999 !important;
    background: #0b1329 !important;
    border: 1.5px solid #00cec9;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 206, 201, 0.3);
    max-height: 280px;
    overflow-y: auto;
    font-family: 'Minecraft', monospace;
    backdrop-filter: none !important;
}

.hd-drop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
}

.hd-drop-item:last-child {
    border-bottom: none;
}

.hd-drop-item:hover {
    background: rgba(0, 206, 201, 0.15);
}

.hd-drop-thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.hd-drop-text {
    flex: 1;
    overflow: hidden;
}

.hd-drop-name {
    font-size: 0.7rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-drop-sub {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.5);
}

.hd-drop-fuzzy-badge {
    color: #f1c40f;
    font-size: 0.6rem;
}

.db-search-suggest-box {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.3);
    border-radius: 8px;
    padding: 10px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffffff;
    margin-bottom: 16px;
}

.db-search-suggest-btn {
    background: rgba(241, 196, 15, 0.2);
    border: 1px solid #f1c40f;
    color: #f1c40f;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    transition: all 0.2s ease;
}

.db-search-suggest-btn:hover {
    background: #f1c40f;
    color: #000;
}


/* ==========================================================================
   VIDEO OVERLAY ELEMENTS GENERATOR STYLES
   ========================================================================== */
#adminSectionVideoElements {
    animation: fadeIn 0.3s ease;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.ve-recent-color-chip {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    cursor: pointer;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    display: inline-block;
    flex-shrink: 0;
}

.ve-recent-color-chip:hover {
    transform: scale(1.18);
    border-color: #00cec9;
    box-shadow: 0 4px 10px rgba(0, 206, 201, 0.4);
    z-index: 2;
}

.ve-recent-color-chip.active-c1 {
    border-color: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
}

.ve-recent-color-chip.active-c2 {
    border-color: #ffa502 !important;
    box-shadow: 0 0 8px rgba(255, 165, 2, 0.8) !important;
}

.ve-shape-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.ve-shape-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.18s ease;
    font-family: 'Minecraft', monospace;
}

.ve-shape-card:hover {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.12);
    transform: translateY(-2px);
}

.ve-shape-card.active {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.22);
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.4);
    color: #00cec9;
}

.ve-shape-name {
    font-size: 0.68rem;
    font-weight: bold;
    margin-top: 4px;
}

.ve-shape-desc {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
    line-height: 1.2;
}

.ve-color-preset-pill {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.ve-color-preset-pill:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.ve-preset-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ve-rot-quick-btn {
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ve-rot-quick-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #fff;
}

.ve-canvas-checker {
    background-color: #111827;
    background-image:
        linear-gradient(45deg, #1f293d 25%, transparent 25%),
        linear-gradient(-45deg, #1f293d 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1f293d 75%),
        linear-gradient(-45deg, transparent 75%, #1f293d 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
    border: 1.5px solid rgba(0, 206, 201, 0.3);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
}

#vePreviewCanvas {
    max-width: 100%;
    max-height: 520px;
    width: auto;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.6));
}

/* Download pills and matrix download buttons */
.db-chart-dl-pill {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.22), rgba(0, 206, 201, 0.22)) !important;
    border: 1px solid rgba(0, 206, 201, 0.45) !important;
    color: #00cec9 !important;
    font-weight: bold !important;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-chart-dl-pill:hover {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.38), rgba(0, 206, 201, 0.38)) !important;
    border-color: #00cec9 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.35) !important;
}

.db-matrix-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid rgba(0, 206, 201, 0.5);
    background: rgba(0, 206, 201, 0.12);
    color: #00cec9;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-matrix-dl-btn:hover {
    background: rgba(0, 206, 201, 0.28);
    border-color: #00cec9;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(0, 206, 201, 0.4);
    transform: translateY(-1px);
}



.db-table-name-cell {
    cursor: pointer;
    user-select: text;
    transition: color 0.15s ease;
}

.db-table-name-cell:hover .db-table-name-txt {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #00cec9;
}

.db-table-name-cell .db-title-copy-icon {
    font-size: 0.75em;
    opacity: 0.45;
    margin-left: 6px;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.db-table-name-cell:hover .db-title-copy-icon {
    opacity: 1;
    color: #00cec9;
    transform: scale(1.15);
}

.db-table-name-cell.copied {
    color: #2ed573 !important;
}

.db-table-name-cell.copied .db-table-name-txt {
    color: #2ed573 !important;
}


/* ==========================================================================
   TOP BAR DONATE & FRIENDS CHAT ENHANCEMENTS
   ========================================================================== */


/* Top Bar Actions Group */
.user-bar-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.top-bar-donate-btn {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(255, 107, 129, 0.25));
    border: 1px solid rgba(255, 107, 129, 0.5);
    border-radius: 20px;
    color: #ff6b81;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(255, 107, 129, 0.15);
}

.top-bar-donate-btn:hover {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.45), rgba(255, 107, 129, 0.45));
    border-color: #ff6b81;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 107, 129, 0.35);
}

.hosting-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 26, 0.85);
    backdrop-filter: blur(8px);
    z-index: 999999 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.hosting-modal-card {
    max-width: 480px;
    width: 100%;
    margin: 0;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(245, 200, 66, 0.2);
}

.hosting-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.hosting-modal-close:hover {
    color: #f5c842;
    transform: scale(1.1);
}

.friends-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 360px;
    max-height: 520px;
    overflow-y: auto;
    background: #16213e;
    border: 2px solid #e94560;
    border-radius: 14px;
    padding: 12px;
    z-index: 9999;
    box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 15px rgba(233,69,96,0.2);
    box-sizing: border-box;
}

.friends-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(233,69,96,0.25);
}

.friends-tabs-bar {
    display: flex;
    gap: 6px;
}

.friends-tab-btn {
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.friends-tab-btn:hover {
    color: #fff;
    border-color: rgba(233, 69, 96, 0.5);
}

.friends-tab-btn.active {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #fff;
}

.friends-dropdown-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.friends-dropdown-close:hover {
    color: #e94560;
}

.friends-item-actions button.chat-btn:hover {
    border-color: #4ecdc4;
    color: #4ecdc4;
}

#friendsChatsPanel {
    flex: 1;
    min-height: 0;
}


/* ========================================================================== */
/* NEW CLEAN NEWS & HUB SUBTABS (ОБНОВЛЕНИЯ, ПОМОЩЬ ПРОЕКТУ, СБОРКИ) */
/* ========================================================================== */
.news-subtabs-wrapper {
    margin-bottom: 22px;
}

.news-subtabs-nav {
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.news-subtabs-nav::-webkit-scrollbar {
    display: none;
}

.news-subtab-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
}

.news-subtab-btn:hover {
    background: rgba(30, 41, 59, 0.85);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.news-subtab-btn.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(198, 42, 71, 0.55));
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 0 24px rgba(233, 69, 96, 0.4), 0 4px 16px rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

.news-subtab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 15%;
    width: 70%;
    height: 3px;
    background: #e94560;
    border-radius: 3px;
    box-shadow: 0 0 10px #e94560;
}

.news-subtab-badge {
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid rgba(0, 206, 201, 0.5);
    color: #00cec9;
    font-size: 0.6rem;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 2px;
}

.news-support-pill-btn {
    background: linear-gradient(135deg, rgba(255, 107, 129, 0.15), rgba(233, 69, 96, 0.25));
    border: 1px solid rgba(255, 107, 129, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(255, 71, 87, 0.2);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-align: left;
}

.news-support-pill-btn:hover {
    background: linear-gradient(135deg, rgba(255, 107, 129, 0.25), rgba(233, 69, 96, 0.4));
    border-color: #ff6b81;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 71, 87, 0.35);
}

/* HELP SECTION HERO CARDS */
.news-help-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.news-help-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

.news-help-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.news-help-card.help-card-bug { border-color: rgba(233, 69, 96, 0.35); }
.news-help-card.help-card-bug:hover { border-color: #e94560; box-shadow: 0 8px 25px rgba(233, 69, 96, 0.25); }

.news-help-card.help-card-idea { border-color: rgba(245, 158, 11, 0.35); }
.news-help-card.help-card-idea:hover { border-color: #f59e0b; box-shadow: 0 8px 25px rgba(245, 158, 11, 0.25); }

.news-help-card.help-card-trans { border-color: rgba(0, 206, 201, 0.35); }
.news-help-card.help-card-trans:hover { border-color: #00cec9; box-shadow: 0 8px 25px rgba(0, 206, 201, 0.25); }

.news-help-card.help-card-donate { border-color: rgba(255, 107, 129, 0.35); }
.news-help-card.help-card-donate:hover { border-color: #ff6b81; box-shadow: 0 8px 25px rgba(255, 107, 129, 0.25); }

.news-help-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.help-card-bug .news-help-icon { background: rgba(233, 69, 96, 0.15); color: #e94560; }
.help-card-idea .news-help-icon { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.help-card-trans .news-help-icon { background: rgba(0, 206, 201, 0.15); color: #00cec9; }
.help-card-donate .news-help-icon { background: rgba(255, 107, 129, 0.15); color: #ff6b81; }

.news-help-title {
    font-size: 0.95rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.35;
}

.news-help-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin: 0 0 16px 0;
    font-family: 'Minecraft', monospace;
}

.news-help-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    width: 100%;
    transition: all 0.2s;
}

.btn-bug { background: linear-gradient(135deg, #e94560, #c0392b); box-shadow: 0 4px 14px rgba(233, 69, 96, 0.35); }
.btn-idea { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35); }
.btn-trans { background: linear-gradient(135deg, #00cec9, #0984e3); box-shadow: 0 4px 14px rgba(0, 206, 201, 0.35); }
.btn-donate { background: linear-gradient(135deg, #ff4757, #e84118); box-shadow: 0 4px 14px rgba(255, 71, 87, 0.35); }

.news-help-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

/* ROADMAP STYLES */
.news-roadmap-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.news-roadmap-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.news-roadmap-badge {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    padding: 3px 10px;
    border-radius: 12px;
}

.news-roadmap-title {
    font-size: 1.05rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0;
}

.news-roadmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.news-roadmap-item {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.news-roadmap-item .roadmap-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.news-roadmap-item.done .roadmap-dot { background: #10b981; box-shadow: 0 0 10px #10b981; }
.news-roadmap-item.in-progress .roadmap-dot { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; animation: pulse 1.5s infinite; }
.news-roadmap-item.planned .roadmap-dot { background: #00cec9; box-shadow: 0 0 10px #00cec9; }

.roadmap-status {
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}

.news-roadmap-item.done .roadmap-status { color: #10b981; }
.news-roadmap-item.in-progress .roadmap-status { color: #f59e0b; }
.news-roadmap-item.planned .roadmap-status { color: #00cec9; }

.roadmap-info h4 {
    margin: 0 0 4px 0;
    font-size: 0.82rem;
    color: #fff;
    font-family: 'Minecraft', monospace;
    line-height: 1.35;
}

.roadmap-info p {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
    font-family: 'Minecraft', monospace;
}

.news-section-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.news-section-heading {
    font-size: 1rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.news-empty-section-hint {
    background: rgba(15, 23, 42, 0.6);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}



/* Dedicated Modal Button Variants */
.comm-btn-submit-bug {
    background: linear-gradient(135deg, #e94560, #c0392b) !important;
    border-color: #e94560 !important;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4) !important;
}
.comm-btn-submit-bug:hover {
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.6) !important;
    filter: brightness(1.1) !important;
}
.comm-btn-submit-idea {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border-color: #f59e0b !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
}
.comm-btn-submit-idea:hover {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6) !important;
    filter: brightness(1.1) !important;
}
.comm-btn-submit-trans {
    background: linear-gradient(135deg, #00cec9, #0984e3) !important;
    border-color: #00cec9 !important;
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.4) !important;
}
.comm-btn-submit-trans:hover {
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.6) !important;
    filter: brightness(1.1) !important;
}



/* ==========================================================================
   GLOBAL FONT UNIFICATION - ALL UI ELEMENTS USE MINECRAFT FONT
   ========================================================================== */
button,
input,
select,
textarea,
optgroup,
option,
dialog {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace !important;
}

input::placeholder,
textarea::placeholder {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace !important;
}

/* Ensure Font Awesome icon glyphs are NEVER overridden by the font unification */
i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands,
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}


/* ==========================================================================
   MINI-GAMES SUITE STYLES (Poke DIV Game)
   ========================================================================== */

.mg-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 16px;
    font-family: 'Minecraft', monospace;
}

.mg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mg-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.4);
}

.mg-stats-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mg-stat-item {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mg-stat-label {
    color: rgba(255, 255, 255, 0.55);
}

.mg-stat-val {
    color: #fff;
    font-weight: bold;
}

.mg-stat-val.highlight {
    color: #ff6b81;
}

.mg-filters-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mg-filter-lbl {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 4px;
}

.mg-filter-btn {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s;
}

.mg-filter-btn:hover {
    border-color: #00cec9;
    color: #fff;
}

.mg-filter-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
}

/* TIMER */
.mg-timer-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.mg-timer-fill {
    height: 100%;
    background: #00cec9;
    transition: width 1s linear, background-color 0.3s;
}

/* ARENA / STAGE */
.mg-sil-arena, .mg-match-arena, .mg-evo-arena, .mg-cry-player-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.mg-sil-stage {
    position: relative;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 12px;
    background: radial-gradient(circle at center, rgba(0, 206, 201, 0.15) 0%, rgba(15, 23, 42, 0.4) 70%);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.mg-sil-spotlight {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 69, 96, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.mg-sil-img {
    max-height: 260px;
    max-width: 220px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: filter 0.4s ease, transform 0.4s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}

.mg-sil-img.silhouette {
    filter: brightness(0) drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));
    pointer-events: none;
}

.mg-sil-img.revealed {
    filter: drop-shadow(0 0 20px rgba(0, 206, 201, 0.6));
    animation: silFlash 0.5s ease-out;
    pointer-events: none;
}

@keyframes silFlash {
    0% { filter: brightness(4) drop-shadow(0 0 40px #fff); transform: scale(1.08); }
    100% { filter: drop-shadow(0 0 20px rgba(0, 206, 201, 0.6)); transform: scale(1); }
}

.mg-cry-replay-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 206, 201, 0.25);
    border: 1px solid #00cec9;
    color: #00cec9;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.2s;
}

.mg-cry-replay-btn:hover {
    background: #00cec9;
    color: #000;
    transform: scale(1.1);
}

/* 4 OPTIONS GRID */
.mg-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .mg-options-grid { grid-template-columns: 1fr; }
}

.mg-opt-btn {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
}

.mg-opt-btn:hover:not(:disabled) {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.15);
    transform: translateY(-2px);
}

.mg-opt-key {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.mg-opt-btn.correct {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}

.mg-opt-btn.wrong {
    background: rgba(233, 69, 96, 0.25) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
    opacity: 0.7;
}

/* RESULT BANNER */
.mg-sil-result-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-sil-result-banner.correct {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-sil-result-banner.wrong {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-result-icon {
    font-size: 2rem;
}

.mg-sil-result-banner.correct .mg-result-icon { color: #10b981; }
.mg-sil-result-banner.wrong .mg-result-icon { color: #e94560; }

.mg-result-status {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.mg-sil-result-banner.correct .mg-result-status { color: #10b981; }
.mg-sil-result-banner.wrong .mg-result-status { color: #e94560; }

.mg-result-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 6px;
}

.mg-result-types {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mg-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.65rem;
    border: 1px solid;
}

.mg-type-pill img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.mg-gen-badge {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
}

/* ACTIONS BAR */
.mg-actions-bar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.mg-btn-next {
    background: linear-gradient(135deg, #e94560 0%, #c0392b 100%);
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
}

.mg-btn-next:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

/* GAME 2: CRY QUIZ */
.mg-cry-player-box {
    text-align: center;
    padding: 30px;
    margin-bottom: 24px;
}

.mg-cry-big-btn {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%);
    border: none;
    border-radius: 50px;
    padding: 16px 36px;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.4);
    transition: all 0.25s;
    margin-bottom: 14px;
}

.mg-cry-big-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 206, 201, 0.6);
}

.mg-cry-hint {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.mg-audio-equalizer {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
}

.mg-audio-equalizer span {
    width: 3px;
    background: #fff;
    border-radius: 3px;
    height: 6px;
}

.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(1) { animation: eq 0.6s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(2) { animation: eq 0.4s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(3) { animation: eq 0.7s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(4) { animation: eq 0.5s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(5) { animation: eq 0.8s infinite ease-in-out; }

@keyframes eq {
    0%, 100% { height: 4px; }
    50% { height: 18px; }
}

.mg-cry-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

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

.mg-cry-card {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
}

.mg-cry-card:hover {
    border-color: #00cec9;
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 206, 201, 0.2);
}

.mg-cry-card-img-wrap {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.mg-cry-card-img {
    max-height: 100px;
    max-width: 100px;
    object-fit: contain;
}

.mg-cry-card-name {
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    min-height: 1.4em;
}

.mg-cry-card.correct {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.2) !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4) !important;
}

.mg-cry-card.wrong {
    border-color: #e94560 !important;
    background: rgba(233, 69, 96, 0.2) !important;
    opacity: 0.6;
}

/* GAME 3: POKÉDLE */
.mg-pokedle-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
}

.mg-pokedle-guide {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
}

.mg-pokedle-input-wrap {
    position: relative;
    max-width: 480px;
    margin: 0 auto 16px auto;
}

.mg-pokedle-input {
    width: 100%;
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 0.95rem;
    color: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.mg-pokedle-input:focus {
    border-color: #10b981;
}

.mg-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
}

.mg-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s;
}

.mg-ac-item:hover {
    background: rgba(16, 185, 129, 0.15);
}

.mg-ac-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.mg-ac-name {
    flex: 1;
    color: #fff;
    font-size: 0.85rem;
}

.mg-ac-num {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.mg-pokedle-status {
    text-align: center;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 18px;
}

.mg-pokedle-status span {
    color: #10b981;
    font-weight: bold;
}

.mg-pokedle-table-header {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: 8px;
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 8px;
    padding: 0 4px;
}

.mg-pokedle-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.mg-pokedle-row {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: 8px;
    animation: slideIn 0.3s ease;
}

.mg-pokedle-cell {
    border-radius: 8px;
    padding: 10px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: bold;
    text-align: center;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

.mg-pokedle-cell.poke-cell {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    justify-content: flex-start;
    padding-left: 10px;
    gap: 8px;
}

.mg-cell-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.mg-cell-name {
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mg-pokedle-cell.correct {
    background: #10b981;
    color: #fff;
}

.mg-pokedle-cell.partial {
    background: #f59e0b;
    color: #fff;
}

.mg-pokedle-cell.wrong {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

.mg-pokedle-result-modal {
    text-align: center;
    padding: 24px;
    border-radius: 14px;
    animation: fadeIn 0.4s ease;
}

.mg-pokedle-result-modal.won {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-pokedle-result-modal.lost {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-res-badge {
    font-size: 1.15rem;
    font-weight: bold;
    margin-bottom: 14px;
    letter-spacing: 1px;
}

.mg-pokedle-result-modal.won .mg-res-badge { color: #10b981; }
.mg-pokedle-result-modal.lost .mg-res-badge { color: #e94560; }

.mg-res-target-wrap {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: rgba(15, 23, 42, 0.8);
    padding: 12px 24px;
    border-radius: 12px;
    margin-bottom: 18px;
}

.mg-res-target-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.mg-res-target-name {
    font-size: 1.1rem;
    color: #fff;
    font-weight: bold;
}

.mg-res-target-dex {
    font-size: 0.75rem;
    color: #00cec9;
}

.mg-res-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.mg-btn-share {
    background: #10b981;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.mg-btn-share:hover {
    filter: brightness(1.1);
}

/* GAME 4: TYPE MATCHUP CLASH */
.mg-match-clash-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.mg-match-card {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    flex: 1;
    min-width: 220px;
}

.mg-match-lbl {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.mg-type-big-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 30px;
    border: 2px solid;
    font-size: 1.1rem;
    font-weight: bold;
}

.mg-type-big-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.mg-clash-vs {
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffbe26;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: pulse 1.5s infinite;
}

.mg-match-poke-img {
    height: 110px;
    object-fit: contain;
    margin-bottom: 8px;
}

.mg-match-poke-name {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 6px;
}

.mg-match-question {
    text-align: center;
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 18px;
}

.mg-mult-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

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

.mg-mult-btn {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 14px 8px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.mg-mult-sub {
    font-size: 0.55rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.5);
}

.mg-mult-btn:hover:not(:disabled) {
    border-color: #00cec9;
    transform: translateY(-2px);
}

.mg-mult-btn.correct {
    background: rgba(16, 185, 129, 0.3) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
}

.mg-mult-btn.wrong {
    background: rgba(233, 69, 96, 0.3) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
    opacity: 0.7;
}

.mg-match-expl {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-match-expl.correct {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-match-expl.wrong {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-expl-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.mg-match-expl.correct .mg-expl-head { color: #10b981; }
.mg-match-expl.wrong .mg-expl-head { color: #e94560; }

.mg-expl-ans {
    margin-left: auto;
    font-size: 0.9rem;
    color: #fff;
}

.mg-expl-calc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

/* GAME 5: EVOLUTION METHOD QUIZ */
.mg-evo-flow-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.mg-evo-card {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 18px 24px;
    text-align: center;
    min-width: 140px;
}

.mg-evo-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 8px;
}

.mg-evo-pname {
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
}

.mg-evo-arrow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.mg-evo-arrow-icon {
    font-size: 1.6rem;
    color: #a855f7;
    animation: bounceRight 1.5s infinite;
}

@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

.mg-evo-badge {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid #a855f7;
    color: #a855f7;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
}

.mg-evo-question {
    text-align: center;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 22px;
}

.mg-evo-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .mg-evo-options-grid { grid-template-columns: 1fr; }
}

.mg-evo-opt-btn {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
    text-align: left;
}

.mg-evo-opt-btn:hover:not(:disabled) {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.15);
    transform: translateY(-2px);
}

.mg-evo-opt-btn.correct {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}

.mg-evo-opt-btn.wrong {
    background: rgba(233, 69, 96, 0.25) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
    opacity: 0.7;
}

.mg-evo-expl {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-evo-expl.correct {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-evo-expl.wrong {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-evo-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #fff;
    margin-top: 6px;
}


/* ==========================================================================
   MINI-GAMES SUITE ENHANCEMENTS (Sound Controller, Silhouette Search, Font Awesome)
   ========================================================================== */

.mg-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Sound Controller Widget */
.mg-sound-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 5px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.mg-sound-toggle-btn {
    background: transparent;
    border: none;
    color: #00cec9;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, color 0.2s;
}

.mg-sound-toggle-btn:hover {
    transform: scale(1.15);
    color: #55efc4;
}

.mg-sound-toggle-btn.muted {
    color: #ff7675;
}

.mg-sound-slider-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mg-sound-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 68px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
}

.mg-sound-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00cec9;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.6);
    cursor: pointer;
    transition: transform 0.1s;
}

.mg-sound-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.mg-sound-val-lbl {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    min-width: 32px;
    text-align: right;
    font-family: 'Minecraft', monospace;
}

/* Fire and icons */
.mg-stat-fire {
    color: #ff6b81;
    margin-left: 2px;
    animation: flamePulse 1.8s infinite;
}

@keyframes flamePulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #ff6b81); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 6px #ff4757); }
}

/* Silhouette Search & Two-Phase UI */
.mg-sil-phase-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.82rem;
    padding: 8px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    flex-wrap: wrap;
    transition: all 0.3s ease;
}

.mg-sil-phase-hint.phase-1 {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.08);
}

.mg-sil-phase-hint.phase-2 {
    border-color: rgba(0, 206, 201, 0.4);
    background: rgba(0, 206, 201, 0.08);
}

.mg-sil-phase-hint b {
    color: #f59e0b;
    font-size: 0.95rem;
}

.mg-sil-bonus-tag {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #f59e0b;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mg-res-bonus-callout {
    margin-top: 8px;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #f59e0b;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: bounce 0.6s ease;
}

.mg-sil-search-wrap {
    position: relative;
    max-width: 520px;
    margin: 0 auto 20px auto;
    width: 100%;
}

.mg-sil-search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, 0.85);
    border: 2px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    padding: 0 16px;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.mg-sil-search-box:focus-within {
    border-color: #00cec9;
    box-shadow: 0 0 18px rgba(0, 206, 201, 0.35);
}

.mg-sil-search-box.shake {
    animation: shakeBox 0.4s ease;
    border-color: #e94560 !important;
    box-shadow: 0 0 18px rgba(233, 69, 96, 0.4) !important;
}

@keyframes shakeBox {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.mg-sil-search-icon {
    color: #00cec9;
    font-size: 1.05rem;
}

.mg-sil-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    padding: 13px 0;
}

.mg-sil-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Minecraft', monospace;
}

/* Animations */
.fadeInUp {
    animation: fadeInUp 0.35s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Poke-wordle arrows */
.mg-poke-arrow {
    font-size: 0.75rem;
    margin-left: 3px;
}

.mg-poke-arrow.up {
    color: #00cec9;
}

.mg-poke-arrow.down {
    color: #ff7675;
}

/* Matchup Clash calculation elements */
.mg-calc-part {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 4px 8px;
}

.mg-calc-times {
    opacity: 0.6;
    font-size: 0.7rem;
    margin: 0 4px;
}

.mg-calc-equals {
    opacity: 0.8;
    font-weight: bold;
    font-size: 1rem;
    margin: 0 6px;
}

.mg-calc-total {
    color: #00cec9;
    font-weight: bold;
    font-size: 1.1rem;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid #00cec9;
    border-radius: 6px;
    padding: 3px 8px;
}


/* ==========================================================================
   SILHOUETTE SEARCH MAXIMUM OVERLAY (z-index & floating layer)
   ========================================================================== */

.mg-sil-search-wrap {
    position: relative !important;
    max-width: 520px !important;
    margin: 0 auto 20px auto !important;
    width: 100% !important;
    z-index: 999999 !important;
}

.mg-sil-search-box {
    position: relative !important;
    z-index: 1000000 !important;
    background: rgba(15, 23, 42, 0.98) !important;
    border: 2px solid rgba(0, 206, 201, 0.6) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.75), 0 0 15px rgba(0, 206, 201, 0.2) !important;
}

.mg-sil-search-box:focus-within {
    border-color: #00cec9 !important;
    box-shadow: 0 0 25px rgba(0, 206, 201, 0.6), 0 10px 35px rgba(0, 0, 0, 0.9) !important;
}

.mg-sil-search-wrap .mg-autocomplete-dropdown,
#silDropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #0b132b !important;
    border: 2px solid #00cec9 !important;
    border-radius: 12px !important;
    max-height: 290px !important;
    overflow-y: auto !important;
    z-index: 9999999 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.98), 0 0 35px rgba(0, 206, 201, 0.45) !important;
}

.mg-options-grid {
    position: relative !important;
    z-index: 1 !important;
}

.mg-sil-result-banner {
    position: relative !important;
    z-index: 5 !important;
}

.mg-sil-stage {
    position: relative !important;
    z-index: 2 !important;
}

.mg-pokedle-input-wrap {
    position: relative !important;
    z-index: 999999 !important;
}

#pokedleDropdown {
    position: absolute !important;
    z-index: 9999999 !important;
    background: #0b132b !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.98), 0 0 35px rgba(16, 185, 129, 0.45) !important;
}


/* ==========================================================================
   GAME 6: SHINY HUNT STYLES
   ========================================================================== */
.mg-shiny-settings-card {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px 22px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.mg-shiny-setting-col {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mg-shiny-setting-col.actions-col {
    flex: 0 1 auto;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
}

.mg-shiny-setting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
}

.mg-shiny-setting-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mg-shiny-setting-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    color: #00cec9;
}

.mg-shiny-setting-val.highlight {
    color: #f59e0b;
}

/* Sliders */
.mg-shiny-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
}

.mg-shiny-range:hover {
    background: rgba(255, 255, 255, 0.25);
}

.mg-shiny-range.total::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.8);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mg-shiny-range.total::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px rgba(0, 206, 201, 1);
}

.mg-shiny-range.shiny::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mg-shiny-range.shiny::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px rgba(245, 158, 11, 1);
}

/* Preset Buttons */
.mg-shiny-presets {
    display: flex;
    gap: 6px;
}

.mg-shiny-preset-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.mg-shiny-preset-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.mg-shiny-preset-btn.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.mg-shiny-setting-col:nth-child(2) .mg-shiny-preset-btn.active {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

/* Mode toggle */
.mg-shiny-mode-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 4px;
}

.mg-shiny-mode-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}

.mg-shiny-mode-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.mg-shiny-mode-btn.active {
    background: #00cec9;
    color: #0b132b;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.5);
}

/* Start Button */
.mg-btn-start-hunt {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 9px 18px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.mg-btn-start-hunt:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
    background: linear-gradient(135deg, #34d399, #10b981);
}

.mg-btn-start-hunt:active {
    transform: translateY(1px);
}

/* Arena & HUD */
.mg-shiny-arena {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mg-shiny-hud {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: 'Minecraft', monospace;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.mg-hud-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.mg-hud-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    font-weight: bold;
    color: #00cec9;
}

.mg-hud-item.shiny-counter .mg-hud-val {
    color: #f59e0b;
}

.mg-hud-item.mistakes .mg-hud-val {
    color: #ff7675;
}

.mg-btn-reshuffle {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mg-btn-reshuffle:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
    transform: rotate(90deg);
}

/* Grid */
.mg-shiny-grid {
    --shiny-card-size: 90px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--shiny-card-size, 90px), 100%), 1fr));
    gap: 12px;
    padding: 18px;
    background: rgba(11, 19, 43, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    min-height: 250px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {
    .mg-shiny-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(var(--shiny-card-size, 72px), 100%), 1fr));
        gap: 8px;
        padding: 12px;
    }
}

/* Card */
.mg-shiny-card {
    position: relative;
    aspect-ratio: 1 / 1;
    background: rgba(26, 38, 57, 0.65);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    padding: 8px;
    overflow: hidden;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.mg-shiny-card:hover {
    transform: translateY(-4px) scale(1.05);
    background: rgba(36, 52, 78, 0.85);
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 14px rgba(245, 158, 11, 0.2);
}

.mg-shiny-card:active {
    transform: scale(0.95);
}

.mg-shiny-card-img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
    transition: transform 0.2s;
    pointer-events: none;
}

.mg-shiny-card:hover .mg-shiny-card-img {
    transform: scale(1.08);
}

/* Found Shiny Card State */
.mg-shiny-card.found-shiny {
    border-color: #f59e0b !important;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, rgba(20, 25, 42, 0.95) 100%) !important;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.65), inset 0 0 16px rgba(245, 158, 11, 0.35) !important;
    cursor: default !important;
    pointer-events: none !important;
    animation: shinyFoundGlow 2s infinite alternate ease-in-out;
}

@keyframes shinyFoundGlow {
    from { box-shadow: 0 0 20px rgba(245, 158, 11, 0.6), inset 0 0 12px rgba(245, 158, 11, 0.3); }
    to { box-shadow: 0 0 32px rgba(255, 215, 0, 0.85), inset 0 0 20px rgba(255, 215, 0, 0.5); }
}

.mg-shiny-sparkle-tag {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    color: #0b132b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.9);
    animation: shinyStarPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes shinyStarPop {
    0% { transform: scale(0) rotate(-60deg); }
    70% { transform: scale(1.3) rotate(20deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Shake Red Animation for mistakes */
.mg-shiny-card.shake-red {
    animation: shakeRed 0.45s cubic-bezier(.36,.07,.19,.97) both;
    border-color: #ff4757 !important;
    box-shadow: 0 0 18px rgba(255, 71, 87, 0.75) !important;
    background: rgba(255, 71, 87, 0.15) !important;
}

@keyframes shakeRed {
    10%, 90% { transform: translate3d(-3px, 0, 0); }
    20%, 80% { transform: translate3d(5px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* Victory Overlay Modal */
.mg-shiny-victory-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-victory-content {
    position: relative;
    background: #0f172a;
    border: 2px solid #f59e0b;
    border-radius: 20px;
    padding: 34px 38px;
    text-align: center;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 0 45px rgba(245, 158, 11, 0.45), 0 20px 40px rgba(0,0,0,0.8);
    animation: modalPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'Minecraft', monospace;
}

.mg-vic-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s;
}

.mg-vic-close:hover {
    background: rgba(255, 71, 87, 0.3);
    color: #ff7675;
}

.mg-victory-badge {
    font-size: 1.45rem;
    color: #ffd700;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.mg-victory-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}

.mg-vic-stat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mg-vic-stat .lbl {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.mg-vic-stat .val {
    font-size: 1.15rem;
    color: #fff;
    font-weight: bold;
}

.mg-record-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eab308;
    color: #0b132b;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
}

.mg-victory-actions {
    display: flex;
    justify-content: center;
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* Account badge and reset button in minigames */
.mg-stats-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mg-account-badge-wrap {
    display: inline-flex;
    align-items: center;
}

.mg-account-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
    user-select: none;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mg-account-badge.logged-in {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.mg-account-badge.guest {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.65);
}

.mg-stat-reset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 4px 6px;
    border-radius: 6px;
    margin-left: 2px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mg-stat-reset-btn:hover {
    background: rgba(255, 118, 117, 0.2);
    border-color: #ff7675;
    color: #ff7675;
    transform: rotate(-45deg);
}


/* ==========================================================================
   SHINY HUNT: MISTAKE LIMIT & FAIL STYLES
   ========================================================================== */
.mg-shiny-range.mistakes-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mg-shiny-range.mistakes-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px rgba(239, 68, 68, 1);
}

.mg-shiny-range.mistakes-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
    cursor: pointer;
    border: none;
}

.mg-shiny-setting-val.highlight-red {
    color: #ef4444;
}

.mg-shiny-mistake-presets .mg-shiny-preset-btn.active {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3) !important;
}

.mg-victory-content.fail {
    border-color: #ef4444 !important;
    box-shadow: 0 0 45px rgba(239, 68, 68, 0.45), 0 20px 40px rgba(0, 0, 0, 0.8) !important;
}

.mg-shiny-card.missed-shiny {
    border-color: #ef4444 !important;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, rgba(20, 25, 42, 0.95) 100%) !important;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.65), inset 0 0 16px rgba(239, 68, 68, 0.35) !important;
    cursor: default !important;
    pointer-events: none !important;
    animation: shinyMissedGlow 2s infinite alternate ease-in-out;
}

@keyframes shinyMissedGlow {
    from { box-shadow: 0 0 20px rgba(239, 68, 68, 0.6), inset 0 0 12px rgba(239, 68, 68, 0.3); }
    to { box-shadow: 0 0 32px rgba(248, 113, 113, 0.85), inset 0 0 20px rgba(248, 113, 113, 0.5); }
}

.mg-shiny-setting-col.actions-col {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mg-shiny-setting-col.actions-col .mg-btn-start-hunt {
    height: 48px !important;
    padding: 0 24px !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
}


/* ==========================================================================
   SILHOUETTE SEARCH MAXIMUM OVERLAY & BOUNDARY ESCAPE
   ========================================================================== */
#tabSilhouette,
.tab-content#tabSilhouette,
.games-mode-wrap,
.games-mode-wrap > .tab-content#tabSilhouette,
.mg-sil-arena,
.mg-container {
    overflow: visible !important;
}

.mg-sil-stage {
    height: 200px !important;
    margin-bottom: 12px !important;
}

.mg-sil-img {
    max-height: 175px !important;
    max-width: 195px !important;
}

.mg-sil-phase-hint {
    margin-bottom: 10px !important;
}

.mg-sil-search-wrap {
    position: relative !important;
    z-index: 9999999 !important;
}

.mg-sil-search-wrap .mg-autocomplete-dropdown,
#silDropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    background: #0b132b !important;
    border: 2px solid #00cec9 !important;
    border-radius: 12px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    z-index: 99999999 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.98), 0 0 40px rgba(0, 206, 201, 0.5) !important;
}

/* Avatar pokemon search sprite / shiny toggles */
.avatar-style-btn:hover {
    filter: brightness(1.25);
}


/* Avatar action buttons & icons alignment */
#avatarCropBtn,
#avatarSaveBtn,
.avatar-action-btn {
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
}

#avatarCropBtn i,
#avatarSaveBtn i,
.avatar-action-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.85em;
    position: relative;
    top: 1px;
}


/* Community Poll Voters & Friends display */
.comm-admin-btn.voters {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.comm-admin-btn.voters:hover {
    background: rgba(245, 158, 11, 0.28);
    border-color: #f59e0b;
}

.comm-poll-voters-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
}

.poll-voter-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    color: rgba(245, 158, 11, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
    cursor: default;
}

.poll-voter-label.friend {
    color: #00cec9;
}

.poll-voters-chips {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.poll-voter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 2px 7px 2px 3px;
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.15s ease;
}

.poll-voter-chip.admin-chip {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #f59e0b;
    cursor: pointer;
}

.poll-voter-chip.admin-chip:hover {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
}

.poll-voter-chip.friend-chip {
    background: rgba(0, 206, 201, 0.12);
    border-color: rgba(0, 206, 201, 0.35);
    color: #00cec9;
}

.poll-voter-chip.friend-chip:hover {
    background: rgba(0, 206, 201, 0.22);
    border-color: #00cec9;
}

.poll-voter-chip.more {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.55rem;
}

.poll-voter-avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.poll-voter-avatar.placeholder {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.5rem;
}

.poll-voter-name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   ADMIN NAME IMAGE SELECTOR MODAL
   ============================================ */
.admin-ni-tab-btn {
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s ease;
    line-height: 1;
}
.admin-ni-tab-btn:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.4);
    color: #fff;
}
.admin-ni-tab-btn.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.admin-ni-style-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}
.admin-ni-style-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.admin-ni-style-btn.active {
    background: rgba(0, 206, 201, 0.3);
    color: #00cec9;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.3);
}

.admin-ni-card {
    background: rgba(15, 52, 96, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
    position: relative;
    user-select: none;
    min-height: 64px;
    box-sizing: border-box;
}
.admin-ni-card:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.45);
    transform: translateY(-2px);
}
.admin-ni-card.selected {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.45);
}
.admin-ni-card img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    margin-bottom: 4px;
    pointer-events: none;
}
.admin-ni-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0 2px;
}
.admin-ni-card-sub {
    font-family: 'Minecraft', monospace;
    font-size: 0.46rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1px;
}

/* ============================================
   ADMIN BRAND ONLINE COUNTER
   ============================================ */
.admin-header-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    margin-left: 10px;
    padding: 3px 9px 3px 7px;
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.45);
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: normal;
    color: #2ecc71;
    text-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
    letter-spacing: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1;
}

.admin-header-online-badge:hover {
    background: rgba(46, 204, 113, 0.22);
    border-color: #2ecc71;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.4);
    transform: translateY(-1px);
}

.admin-online-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 6px #2ecc71;
    display: inline-block;
    animation: adminOnlinePulse 2s infinite ease-in-out;
    flex-shrink: 0;
}

@keyframes adminOnlinePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.35);
        opacity: 0.65;
    }
}

.admin-online-text {
    font-size: 0.55rem;
    opacity: 0.85;
}


/* ============================================
   ADMIN ACCOUNTS: MASKED FIELDS & CONTROLS
   ============================================ */
.admin-masked-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s ease;
    user-select: none;
    vertical-align: middle;
}

.admin-masked-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(233, 69, 96, 0.45);
    color: #ffffff;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.2);
}

.admin-masked-pill .admin-mask-text {
    letter-spacing: 1.5px;
    transition: color 0.2s;
}

.admin-masked-pill.is-revealed .admin-mask-text {
    letter-spacing: normal;
    color: #00cec9;
}

.admin-masked-pill-pass.is-revealed .admin-mask-text {
    color: #e94560;
}

.admin-masked-pill .admin-mask-eye {
    font-size: 0.5rem;
    margin-left: 2px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.admin-masked-pill:hover .admin-mask-eye {
    opacity: 1;
}

.admin-key-btn {
    background: rgba(233, 69, 96, 0.1);
    border: 1px solid rgba(233, 69, 96, 0.3);
    color: #e94560;
    font-size: 0.5rem;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.admin-key-btn:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
}


.db-profile-img.is-gen5 {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.db-profile-img.is-gen5:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.08));
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.85));
}

.db-scale-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}
.db-scale-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.4);
}


/* EN Toggle Button for Community Posts */
.comm-admin-btn.en-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1.2;
}
.comm-admin-btn.en-toggle.active {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
}
.comm-admin-btn.en-toggle.active:hover {
    background: rgba(16, 185, 129, 0.35);
    border-color: #34d399;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}
.comm-admin-btn.en-toggle.inactive {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.45);
}
.comm-admin-btn.en-toggle.inactive:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    transform: translateY(-1px);
}

.news-admin-preview-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
    margin-bottom: 12px;
    user-select: none;
}
.news-admin-preview-pill:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #ffffff;
}
.news-admin-preview-pill.active {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}


/* ==========================================================================
   Admin News & Changelog Publisher Studio (Redesigned 2-Column Suite)
   ========================================================================== */

.news-publisher-card {
    max-width: 1220px !important;
    width: 95vw !important;
    height: 90vh !important;
    max-height: 920px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0d1322 !important;
    border: 1px solid rgba(0, 206, 201, 0.45) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 206, 201, 0.12) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

.news-publisher-header {
    padding: 12px 20px !important;
    background: rgba(15, 23, 42, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.news-publisher-body {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 18px !important;
    padding: 16px 20px !important;
    overflow: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
}

@media (max-width: 980px) {
    .news-publisher-card {
        height: auto !important;
        max-height: 94vh !important;
    }
    .news-publisher-body {
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
    }
}

.news-publisher-form-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding-right: 12px;
    min-width: 0;
}

.news-publisher-form-col::-webkit-scrollbar {
    width: 6px;
}
.news-publisher-form-col::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
.news-publisher-form-col::-webkit-scrollbar-thumb {
    background: rgba(0, 206, 201, 0.3);
    border-radius: 3px;
}
.news-publisher-form-col::-webkit-scrollbar-thumb:hover {
    background: #00cec9;
}

.news-publisher-preview-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.news-form-section-box {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-section-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    font-weight: 700;
    color: #00cec9;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.news-form-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
}
@media (max-width: 768px) {
    .news-form-grid-4 {
        grid-template-columns: 1fr 1fr !important;
    }
}

.news-form-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
@media (max-width: 600px) {
    .news-form-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

.news-tag-presets-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.news-tag-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.news-tag-chip:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #ffffff;
    transform: translateY(-1px);
}

.news-color-row-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-color-swatches {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.news-swatch-btn {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.news-swatch-btn:hover {
    transform: scale(1.2);
}
.news-swatch-btn.active {
    border-color: #ffffff;
    box-shadow: 0 0 8px currentColor;
    transform: scale(1.15);
}

.news-toggle-box {
    background: rgba(0, 206, 201, 0.04);
    border: 1px solid rgba(0, 206, 201, 0.15);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
}

.news-switch-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    user-select: none !important;
    margin: 0 !important;
    width: 100%;
}
.news-switch-label input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none;
}
.news-switch-slider {
    position: relative;
    width: 38px;
    height: 22px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    transition: all 0.25s ease;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.news-switch-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.news-switch-label input:checked + .news-switch-slider {
    background: #10b981;
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}
.news-switch-label input:checked + .news-switch-slider::before {
    transform: translateX(16px);
}

.news-en-inputs-box {
    background: rgba(0, 206, 201, 0.03);
    border: 1px solid rgba(0, 206, 201, 0.2);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-highlights-builder-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-hl-builder-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s ease;
}
.news-hl-builder-card:hover {
    border-color: rgba(0, 206, 201, 0.35);
}

.news-hl-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.72rem;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.15s ease;
}
.news-hl-icon-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #00cec9;
}

.news-hl-del-btn {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.news-hl-del-btn:hover {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* EN disabled states inside builder */
.news-publisher-card.en-disabled .news-hl-en-col {
    display: none !important;
}
.news-publisher-card.en-disabled .news-hl-grid-responsive {
    grid-template-columns: 1fr !important;
}

.news-preview-wrapper {
    background: rgba(10, 15, 30, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.news-preview-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.news-preview-mode-switch {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    padding: 2px;
    gap: 2px;
}

.news-preview-mode-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.news-preview-mode-btn.active {
    background: #00cec9;
    color: #000;
    font-weight: bold;
}

.news-live-preview-card-wrap {
    overflow-y: auto;
    flex: 1;
    padding-right: 4px;
}

.news-live-preview-card-wrap::-webkit-scrollbar {
    width: 5px;
}
.news-live-preview-card-wrap::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
.news-live-preview-card-wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}


/* ==========================================================================
   PROCEDURAL TEAM GENERATOR STUDIO REDESIGN (2-COLUMN RESPONSIVE SUITE)
   ========================================================================== */

.tb-gen-modal-content {
    max-width: 1420px !important;
    width: 96vw !important;
    height: 92vh !important;
    max-height: 94vh !important;
    background: linear-gradient(155deg, #090e1a 0%, #111a2e 50%, #0d1527 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(16, 185, 129, 0.15) !important;
    overflow: hidden !important;
    color: #fff !important;
    box-sizing: border-box !important;
}

#tbTeamGenModalBody.tb-gen-studio-body,
#tbTeamGenModalBody,
.tb-gen-studio-body {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: 440px 1fr !important;
    gap: 18px !important;
    padding: 16px 20px !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 1100px) {
    .tb-gen-studio-body {
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Left Column: Control Panel */
.tb-gen-control-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    padding-right: 10px !important;
    min-height: 0 !important;
}

.tb-gen-control-panel::-webkit-scrollbar {
    width: 6px !important;
}
.tb-gen-control-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 4px !important;
}
.tb-gen-control-panel::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.4) !important;
    border-radius: 4px !important;
}
.tb-gen-control-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7) !important;
}

/* Right Column: Live Team Panel */
.tb-gen-team-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
    min-height: 0 !important;
}

.tb-gen-team-panel::-webkit-scrollbar {
    width: 6px !important;
}
.tb-gen-team-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 4px !important;
}
.tb-gen-team-panel::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.4) !important;
    border-radius: 4px !important;
}
.tb-gen-team-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7) !important;
}

/* Accordion for Advanced Settings */
.tb-gen-accordion-toggle {
    background: rgba(0, 206, 201, 0.08) !important;
    border: 1px solid rgba(0, 206, 201, 0.35) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    color: #00cec9 !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.82rem !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
}

.tb-gen-accordion-toggle:hover {
    background: rgba(0, 206, 201, 0.16) !important;
    border-color: #00cec9 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

.tb-gen-acc-icon {
    font-size: 0.8rem !important;
    color: #00cec9 !important;
    transition: transform 0.2s ease !important;
}

.tb-gen-accordion-content {
    display: none;
    flex-direction: column !important;
    gap: 12px !important;
    animation: tbFadeIn 0.2s ease !important;
}

/* Compact 2x2 Format Grid */
.tb-gen-format-grid-compact {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

/* 6 Pokemon Cards Grid in Right Column */
.tb-gen-squad-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 12px !important;
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(9, 132, 227, 0.12) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}


/* Pokemon Card Header & Action Buttons Fix (No Overflow) */
.tb-gen-poke-card {
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.tb-gen-poke-header {
    overflow: hidden !important;
    min-width: 0 !important;
}

.tb-gen-pin-btn {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
}

.tb-gen-pin-btn:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}

.tb-gen-pin-btn.pinned {
    background: rgba(245, 158, 11, 0.3) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.35) !important;
}

.tb-gen-reroll-btn {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
}

.tb-gen-reroll-btn:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    transform: rotate(90deg) !important;
}

.tb-gen-bring-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.62rem !important;
    font-family: 'Minecraft', monospace !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
}


/* Section Box Flex-Shrink & Sizing Fix (Never Collapse or Squish Blocks) */
.tb-gen-control-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.tb-gen-control-panel > * {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.tb-gen-section-box {
    flex-shrink: 0 !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.tb-gen-accordion-box {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tb-gen-accordion-content {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    display: none;
    flex-direction: column !important;
    gap: 12px !important;
}

.tb-gen-accordion-content > * {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tb-gen-section-title {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.tb-gen-section-title > span {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.tb-gen-preset-btn,
.tb-gen-chip-btn {
    box-sizing: border-box !important;
    max-width: 100% !important;
    white-space: nowrap !important;
}

.tb-gen-gimmick-toggle,
.tb-gen-arch-btn {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.tb-gen-format-grid,
.tb-gen-format-grid-compact,
.tb-gen-arch-grid {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tb-gen-format-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.tb-gen-format-card-title,
.tb-gen-format-card-desc {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    min-width: 0 !important;
}


/* ==========================================================================
   UNIVERSAL ZERO-OVERFLOW SHIELD & SAFE MOBILE RESPONSIVE SUITE
   Guarantees zero horizontal blowout, safe modals, and responsive layout
   without interfering with pointer events or click handling.
   ========================================================================== */

/* 1. Global Viewport & Box-Sizing Hard Defense */
html {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    -webkit-text-size-adjust: 100% !important;
}

body {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    position: relative !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

/* Universal Media Containment */
img, video, canvas, svg, iframe {
    max-width: 100% !important;
    height: auto;
}

/* Universal Word-Break & Overflow Wrap for all text nodes */
p, span, h1, h2, h3, h4, h5, h6, label, a, button, div, td, th {
    overflow-wrap: break-word;
}

/* Ensure empty mount containers never block pointer events */
#dbDetailModalContainer {
    pointer-events: none !important;
}
#dbDetailModalContainer > * {
    pointer-events: auto !important;
}

/* 2. Universal Table & Data Grid Safe Container */
.db-table-wrapper,
.db-table-container,
.table-responsive,
.table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.db-table,
.db-type-matrix-table,
.db-nature-matrix-table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 3. Safe Modal Content Responsive Sizing (Only scale cards, NEVER touch overlays) */
@media (max-width: 768px) {
    body {
        padding: 8px 6px !important;
    }

    .modal-content,
    .modal-large,
    .tb-modal-content,
    .tb-gen-modal-content,
    .calc-modal-content,
    .news-publisher-modal,
    .news-viewer-modal-card,
    .hosting-donate-card,
    .confirm-modal-content,
    .completion-modal-content {
        max-width: 96vw !important;
        box-sizing: border-box !important;
    }

    .modal-two-columns,
    .news-publisher-body,
    .news-hl-grid-responsive {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    .modal-filters,
    .modal-results {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* 4. Team Generator Studio Mobile Optimizations */
@media (max-width: 1100px) {
    .tb-gen-studio-body {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
    }
    .tb-gen-control-panel {
        max-width: 100% !important;
        width: 100% !important;
    }
    .tb-gen-team-panel {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .tb-gen-modal-content {
        height: 96vh !important;
        max-height: 96vh !important;
        width: 98vw !important;
        padding: 8px 10px !important;
    }
    .tb-gen-modal-header {
        padding: 8px 10px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .tb-gen-modal-title {
        font-size: 0.92rem !important;
    }
    .tb-gen-modal-subtitle {
        display: none !important;
    }
    .tb-gen-modal-footer {
        padding: 8px 10px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .tb-gen-modal-footer .tb-btn {
        font-size: 0.72rem !important;
        padding: 6px 12px !important;
    }
    .tb-gen-studio-body {
        padding: 6px 2px !important;
        gap: 12px !important;
    }
    .tb-gen-squad-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .tb-gen-active-squad-box {
        padding: 10px 12px !important;
    }
    .tb-gen-format-grid-compact {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .tb-gen-format-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .tb-gen-poke-card {
        padding: 10px !important;
    }
}

/* 5. Teambuilder Studio Mobile Optimizations */
@media (max-width: 768px) {
    .tb-slots-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .tb-slot-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .tb-hero-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .tb-hero-title-wrap {
        width: 100% !important;
    }
    .tb-hero-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .tb-hero-actions .tb-btn {
        flex: 1 1 auto !important;
        text-align: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        padding: 6px 10px !important;
    }
}

/* 6. Floating UI Shield (Notifications, Social, Lang) */
@media (max-width: 768px) {
    #notificationContainer {
        pointer-events: none !important;
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        max-width: calc(100vw - 20px) !important;
        box-sizing: border-box !important;
    }
    .notification {
        pointer-events: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .social-block {
        top: 10px !important;
        right: 10px !important;
    }
    .social-toggle {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    .lang-switch-floating {
        top: 10px !important;
        right: 52px !important;
    }
    .lang-switch-floating .lang-btn {
        font-size: 0.58rem !important;
        padding: 7px 9px !important;
    }
}

/* 7. Extra Small Phones (iPhone SE, Galaxy Fold, screens <= 400px) */
@media (max-width: 400px) {
    body {
        padding: 4px 2px !important;
    }
    .tb-gen-format-grid-compact {
        grid-template-columns: 1fr !important;
    }
    .tb-gen-arch-btn {
        font-size: 0.65rem !important;
        padding: 5px 8px !important;
    }
}


/* ==========================================================================
   TEAMBUILDER GENERATOR: MONOTYPE, ROLL HISTORY & POSTER ENHANCEMENTS
   ========================================================================== */

/* Monotype Grid & Chips */
.tb-gen-monotype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 6px;
    margin-top: 6px;
    box-sizing: border-box;
    max-width: 100%;
}

.tb-gen-monotype-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-monotype-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.tb-gen-monotype-chip.active {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.25) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

/* Roll History Controls */
.tb-gen-history-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.35);
    padding: 3px 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
    max-width: 100%;
}

.tb-gen-history-btn {
    background: transparent;
    border: none;
    color: #fff;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tb-gen-history-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    color: #10b981;
}

.tb-gen-history-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.tb-gen-history-counter {
    font-family: 'Minecraft', monospace, sans-serif;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    padding: 0 4px;
    user-select: none;
    white-space: nowrap;
}

/* Poster Modal & Preview */
.tb-poster-modal-content {
    max-width: 860px;
    width: 95%;
    background: #0d1322;
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(168, 85, 247, 0.2);
    border-radius: 16px;
    padding: 20px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    position: relative;
    animation: tbFadeIn 0.25s ease;
    box-sizing: border-box;
    max-height: 92vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tb-poster-preview-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #070a12;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    min-height: 220px;
    overflow: hidden;
}

.tb-poster-preview-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
    display: block;
}

.tb-poster-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 100%;
}

@media (max-width: 768px) {
    .tb-gen-monotype-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 4px;
    }
    .tb-gen-monotype-chip {
        font-size: 0.65rem;
        padding: 5px 6px;
    }
    .tb-poster-modal-content {
        padding: 14px;
        width: 98%;
        max-height: 96vh;
    }
    .tb-poster-actions {
        justify-content: stretch;
    }
    .tb-poster-actions .tb-btn {
        flex: 1 1 100%;
        text-align: center;
        justify-content: center;
    }
}


/* ==========================================================================
   Pokemon Species Biology, Physical Traits & Breeding Styles
   ========================================================================== */

/* Род / Категория покемона в заголовке профиля */
.db-profile-genus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffd166;
    background: rgba(255, 209, 102, 0.12);
    border: 1px solid rgba(255, 209, 102, 0.32);
    padding: 3px 10px;
    border-radius: 12px;
    margin: 4px 0 2px;
    box-shadow: 0 2px 8px rgba(255, 209, 102, 0.15);
    letter-spacing: 0.5px;
    width: fit-content;
}
.db-profile-genus i {
    font-size: 0.68rem;
    opacity: 0.85;
}

/* Физические параметры (Рост, Вес, Пол) в левой карточке */
.db-profile-physical-card {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.db-profile-physical-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.db-profile-physical-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: left;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.db-profile-physical-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}
.db-phys-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.db-phys-label i {
    color: #e94560;
    font-size: 0.7rem;
}
.db-phys-val {
    font-size: 0.88rem;
    color: #ffffff;
    font-weight: 500;
}
.db-phys-val b {
    color: #ffffff;
    font-weight: 700;
}
.db-phys-unit {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-phys-sub {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 2px;
}

/* Пол покемона (интерактивная шкала) */
.db-profile-gender-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.db-gender-genderless {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.74rem;
    font-family: 'Minecraft', monospace;
    padding: 6px 12px;
    border-radius: 8px;
    width: fit-content;
}
.db-gender-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.db-gender-bar {
    height: 8px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.db-gender-bar-m {
    background: linear-gradient(90deg, #38bdf8, #2563eb);
    height: 100%;
    transition: width 0.3s ease;
}
.db-gender-bar-f {
    background: linear-gradient(90deg, #f472b6, #e11d48);
    height: 100%;
    transition: width 0.3s ease;
}
.db-gender-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    padding: 0 2px;
}
.db-gender-label.male {
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 4px;
}
.db-gender-label.female {
    color: #f472b6;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Детальная секция биологии и разведения (Правая карточка) */
.db-bio-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.db-bio-detail-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-bio-detail-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.db-bio-detail-head {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-bio-detail-head i {
    color: #e94560;
    font-size: 0.72rem;
}
.db-bio-detail-value {
    font-size: 0.85rem;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}
.db-bio-detail-value b {
    color: #ffffff;
    font-weight: 700;
}
.db-bio-unit {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
}
.db-bio-sub-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    display: inline-flex;
    align-items: center;
}
.db-bio-egg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.db-bio-egg-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.35);
    color: #d8b4fe;
    padding: 3px 8px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 6px rgba(168, 85, 247, 0.15);
    transition: all 0.2s;
}
.db-bio-egg-chip:hover {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}
.db-bio-egg-chip i {
    font-size: 0.55rem;
    opacity: 0.8;
}
.db-bio-ev-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    background: rgba(233, 69, 96, 0.16);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #ff6b81;
    padding: 3px 9px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.2);
}
.db-bio-ev-badge i {
    font-size: 0.65rem;
}
.db-bio-exp-note {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 3px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
}
.db-bio-exp-note b {
    color: #f59e0b;
}
.db-bio-exp-note i {
    color: #f59e0b;
    font-size: 0.65rem;
}
.db-bio-dash {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .db-bio-details-grid {
        grid-template-columns: 1fr;
    }
    .db-profile-physical-row {
        grid-template-columns: 1fr 1fr;
    }
}


/* ========================================================================== */
/* NEWS & COMMUNITY: MUTED PLAYERS SYSTEM */
/* ========================================================================== */

.news-subtabs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.news-subtabs-nav {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.news-subtabs-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-manage-muted-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    padding: 9px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.news-manage-muted-btn:hover {
    background: rgba(233, 69, 96, 0.18);
    border-color: rgba(233, 69, 96, 0.5);
    color: #fff;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.25);
    transform: translateY(-1px);
}

.news-manage-muted-btn.has-muted {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.45);
    color: #fff;
}

.news-muted-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e94560;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 18px;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

/* Card Author Mute Button */
.comm-user-mute-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 8px;
    vertical-align: middle;
}

.comm-user-mute-btn:hover {
    background: rgba(233, 69, 96, 0.22);
    border-color: rgba(233, 69, 96, 0.6);
    color: #ff6b81;
    transform: translateY(-1px);
}

.comm-user-mute-btn.muted {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #ff6b81;
}

.comm-user-mute-btn i {
    font-size: 0.68rem;
}

/* Feed Banner for Hidden Muted Posts */
.news-muted-feed-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(233, 69, 96, 0.08);
    border: 1px dashed rgba(233, 69, 96, 0.35);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    animation: fadeIn 0.25s ease-out;
}

.news-muted-feed-banner i.fa-volume-xmark {
    color: #e94560;
    font-size: 0.9rem;
}

.news-muted-feed-banner button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.5);
    color: #ff8599;
    border-radius: 8px;
    padding: 4px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-muted-feed-banner button:hover {
    background: #e94560;
    color: #fff;
}

/* Modal for Muted Users */
.news-muted-modal-card {
    background: #121829 !important;
    border: 1px solid rgba(233, 69, 96, 0.3) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 24px rgba(233, 69, 96, 0.15) !important;
}

.news-muted-modal-desc {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

.news-muted-add-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.news-muted-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.news-muted-input-wrap i {
    position: absolute;
    left: 14px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.news-muted-input-wrap input {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 14px 10px 38px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    outline: none;
    transition: all 0.2s ease;
}

.news-muted-input-wrap input:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
}

.news-muted-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #e94560;
    border: none;
    color: #fff;
    border-radius: 10px;
    padding: 0 18px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease;
}

.news-muted-add-btn:hover {
    background: #ff5270;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4);
    transform: translateY(-1px);
}

.news-muted-list-wrap {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.news-muted-user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    transition: all 0.2s ease;
}

.news-muted-user-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(233, 69, 96, 0.3);
}

.news-muted-user-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.news-muted-avatar-box {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6b81;
    font-size: 0.85rem;
}

.news-muted-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.news-muted-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 700;
}

.news-muted-status-tag {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Minecraft', monospace;
}

.news-user-unmute-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #10b981;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-user-unmute-btn:hover {
    background: #10b981;
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.news-muted-empty-state {
    text-align: center;
    padding: 30px 16px;
    color: rgba(255, 255, 255, 0.4);
}

.news-muted-empty-icon {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 10px;
}

.news-muted-empty-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
}

.news-muted-empty-sub {
    font-size: 0.75rem;
    line-height: 1.4;
    max-width: 360px;
    margin: 0 auto;
}

.news-unmute-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(233, 69, 96, 0.12);
    border: 1px solid rgba(233, 69, 96, 0.35);
    color: #ff6b81;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-unmute-all-btn:hover {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #fff;
}

@media (max-width: 650px) {
    .news-subtabs-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    .news-subtabs-nav {
        width: 100%;
    }
    .news-manage-muted-btn {
        justify-content: center;
        width: 100%;
    }
}


/* ============================================
   ФИОЛЕТОВАЯ ПОДСВЕТКА УВЕДОМЛЕНИЙ АДМИНА
   ============================================ */

/* 1. Колокольчик в шапке (User Bar Bell) */
.notif-badge.has-admin-unread i {
    color: #c084fc !important;
    filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.95)) drop-shadow(0 0 14px rgba(168, 85, 247, 0.7)) !important;
    animation: adminBellPulse 1.8s infinite ease-in-out !important;
}

.notif-badge.has-admin-unread:hover i {
    color: #e9d5ff !important;
    filter: drop-shadow(0 0 8px rgba(233, 213, 255, 1)) drop-shadow(0 0 18px rgba(168, 85, 247, 0.9)) !important;
}

.notif-badge.has-admin-unread .notif-badge-count {
    background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.95), 0 0 14px rgba(147, 51, 234, 0.6) !important;
    border: 1px solid #d8b4fe !important;
    color: #ffffff !important;
}

@keyframes adminBellPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    15% {
        transform: scale(1.2) rotate(-14deg);
    }
    30% {
        transform: scale(1.2) rotate(14deg);
    }
    45% {
        transform: scale(1.1) rotate(-8deg);
    }
    60% {
        transform: scale(1.05) rotate(5deg);
    }
    75% {
        transform: scale(1) rotate(0deg);
    }
}

/* 2. Карточка прямого уведомления в дропдауне */
.notif-item.notif-item-admin {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(126, 34, 206, 0.28) 100%) !important;
    border: 1.5px solid rgba(192, 132, 252, 0.65) !important;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.35), inset 0 0 10px rgba(168, 85, 247, 0.15) !important;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    position: relative;
}

.notif-item.notif-item-admin.unread {
    border-color: #c084fc !important;
    box-shadow: 0 0 18px rgba(192, 132, 252, 0.55), inset 0 0 12px rgba(168, 85, 247, 0.25) !important;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.28) 0%, rgba(126, 34, 206, 0.45) 100%) !important;
}

.notif-item.notif-item-admin .notif-admin-title {
    color: #e9d5ff !important;
    font-weight: bold;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
}

.notif-item.notif-item-admin .notif-admin-title i {
    color: #c084fc;
    font-size: 0.75rem;
}

.notif-admin-tag {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.7);
    letter-spacing: 0.5px;
}

.notif-admin-body {
    color: #ffffff !important;
    font-size: 0.65rem;
    line-height: 1.5;
    margin-top: 6px;
    word-break: break-word;
    white-space: pre-wrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-family: 'Minecraft', monospace;
}

.notif-admin-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(192, 132, 252, 0.2);
}

.notif-admin-time {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(233, 213, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 4px;
}

.notif-admin-del-btn {
    background: transparent;
    border: none;
    color: rgba(233, 213, 255, 0.5);
    cursor: pointer;
    font-size: 0.6rem;
    padding: 2px 5px;
    border-radius: 4px;
    transition: all 0.2s;
}

.notif-admin-del-btn:hover {
    color: #ff6b81;
    background: rgba(255, 107, 129, 0.15);
}

/* 3. Кнопка отправки уведомления в строке пользователя */
.admin-send-user-notif-btn {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: #c084fc;
    font-size: 0.55rem;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 6px;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
}

.admin-send-user-notif-btn:hover {
    background: #a855f7;
    color: #fff;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.8);
}

/* 4. Модальное окно отправки */
.admin-notif-modal-content {
    max-width: 540px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    background: #151528;
    border: 2px solid #a855f7;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 20px rgba(168, 85, 247, 0.3);
}

.admin-notif-input,
.admin-notif-select,
.admin-notif-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: #0d0d1a;
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.2s;
}

.admin-notif-input:focus,
.admin-notif-select:focus,
.admin-notif-textarea:focus {
    border-color: #c084fc;
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.4);
}

/* ============================================
   СИНИЕ УВЕДОМЛЕНИЯ: ОТВЕТЫ ИГРОКОВ
   ============================================ */

.notif-item.notif-item-player-reply {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(37, 99, 235, 0.28) 100%) !important;
    border: 1.5px solid rgba(96, 165, 250, 0.65) !important;
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.35), inset 0 0 10px rgba(59, 130, 246, 0.1) !important;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    position: relative;
}

.notif-item.notif-item-player-reply.unread {
    border-color: #60a5fa !important;
    box-shadow: 0 0 18px rgba(96, 165, 250, 0.55), inset 0 0 12px rgba(59, 130, 246, 0.2) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.28) 0%, rgba(37, 99, 235, 0.42) 100%) !important;
}

.notif-player-reply-title {
    color: #bfdbfe !important;
    font-weight: bold;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
}

.notif-player-reply-title i {
    color: #60a5fa;
    font-size: 0.75rem;
}

.notif-player-reply-tag {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.7);
    letter-spacing: 0.5px;
}

.notif-player-reply-body {
    color: #93c5fd !important;
    font-size: 0.58rem;
    font-family: 'Minecraft', monospace;
    margin-top: 4px;
    opacity: 0.85;
}

.notif-player-reply-text {
    color: #ffffff !important;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    margin-top: 5px;
    padding: 5px 8px;
    background: rgba(59, 130, 246, 0.15);
    border-left: 2px solid #60a5fa;
    border-radius: 0 6px 6px 0;
    word-break: break-word;
    white-space: pre-wrap;
}


/* Approve & Apply Admin Button */
.comm-admin-btn.approve-apply {
    background: linear-gradient(135deg, #059669 0%, #00cec9 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 206, 201, 0.6) !important;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.35);
    font-weight: bold;
}
.comm-admin-btn.approve-apply:hover {
    filter: brightness(1.25);
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.6);
}


/* Translation comparison 3-box additions */
.comm-trans-box.cur .comm-trans-label {
    color: rgba(245, 158, 11, 0.8) !important;
}

.comm-trans-box.cur .comm-trans-value {
    color: #f59e0b !important;
}

.comm-trans-none {
    color: rgba(255, 255, 255, 0.35) !important;
    font-style: italic !important;
    font-weight: normal !important;
    font-size: 0.85rem !important;
}

.comm-trans-match-icon {
    font-size: 0.82rem !important;
    color: #10b981 !important;
    margin-left: 4px !important;
}

/* Real-time live highlight animation for new arrivals */
@keyframes commLivePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.85);
        transform: translateY(-4px) scale(1.01);
        border-color: rgba(16, 185, 129, 0.9) !important;
    }
    50% {
        box-shadow: 0 0 28px 6px rgba(16, 185, 129, 0.5);
        border-color: rgba(16, 185, 129, 0.75) !important;
    }
    100% {
        box-shadow: none;
        transform: translateY(0) scale(1);
    }
}

.comm-live-highlight {
    animation: commLivePulse 3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    position: relative;
    z-index: 5;
}

/* Unread live dot on modeBtnNews */
#modeBtnNews {
    position: relative;
}

.news-live-unread-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    animation: unreadPulse 1.8s infinite;
    pointer-events: none;
}

@keyframes unreadPulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 6px #10b981; }
    50% { transform: scale(1.35); opacity: 0.8; box-shadow: 0 0 14px #10b981; }
}

/* Translation Pokemon Sprite Card */
.comm-trans-poke-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(20, 24, 45, 0.75), rgba(10, 15, 30, 0.85));
    border: 1px solid rgba(0, 206, 201, 0.25);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.comm-trans-poke-card:hover {
    border-color: rgba(0, 206, 201, 0.45);
    transform: translateY(-1px);
}

.comm-trans-poke-avatar-box {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 10px;
    background: radial-gradient(circle, rgba(0, 206, 201, 0.15) 0%, rgba(10, 15, 30, 0.6) 80%);
    border: 1px solid rgba(0, 206, 201, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.comm-trans-poke-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
    transition: transform 0.25s ease;
}

.comm-trans-poke-card:hover .comm-trans-poke-img {
    transform: scale(1.1);
}

.comm-trans-poke-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.comm-trans-poke-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.comm-trans-poke-dex-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    color: #00cec9;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 6px;
    padding: 2px 7px;
    letter-spacing: 0.5px;
}

.comm-trans-poke-eng-name {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
}

.comm-trans-poke-cur-tag {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.comm-trans-poke-types-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.comm-trans-type-pill {
    font-size: 0.68rem;
    font-weight: bold;
    color: #fff;
    padding: 1px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}


/* Move Target Diagram (pokemondb style) */
.db-move-target-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 14px 14px;
    background: rgba(15, 52, 96, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    margin: 8px 0 6px;
}
.move-target {
    margin: 0 auto 12px;
    position: relative;
    width: 294px;
    height: 116px;
    box-sizing: border-box;
}
.move-target > .mt-pkmn {
    position: relative;
    z-index: 5;
    float: left;
    margin: 4px;
    width: 90px;
    height: 50px;
    border-radius: 20px / 44px;
    line-height: 44px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    box-sizing: border-box;
    transition: all 0.25s ease;
    user-select: none;
    letter-spacing: 0.3px;
    font-family: inherit;
}
.move-target > .mt-user {
    background-color: #13c2eb;
    border: 3px solid #13c2eb;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.move-target > .mt-foe {
    background-color: #e68929;
    border: 3px solid #e68929;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.move-target > .mt-selected {
    border-color: #2ecc71 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.55), inset 0 0 8px rgba(46, 204, 113, 0.25);
}
.move-target > .mt-unselected {
    opacity: 0.5;
}
.move-target > .mt-hspace,
.move-target > .mt-vspace {
    position: absolute;
    background: #2ecc71;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.9), 0 0 24px rgba(46, 204, 113, 0.5);
    z-index: 4;
    border-radius: 5px;
    pointer-events: none;
}

.move-target > .mt-hspace {
    width: 20px;
    height: 22px;
}
.move-target > .mt-hspace.tl { left: 88px; top: 18px; }
.move-target > .mt-hspace.tr { left: 186px; top: 18px; }
.move-target > .mt-hspace.bl { left: 88px; top: 76px; }
.move-target > .mt-hspace.br { left: 186px; top: 76px; }

.move-target > .mt-vspace {
    width: 22px;
    height: 20px;
}
.move-target > .mt-vspace.lt { left: 38px; top: 48px; }
.move-target > .mt-vspace.md { left: 136px; top: 48px; }
.move-target > .mt-vspace.rt { left: 234px; top: 48px; }

.mt-descr {
    color: #e2e8f0;
    font-style: italic;
    text-align: center;
    font-size: 0.92rem;
    margin: 4px 0 0;
    line-height: 1.45;
    max-width: 480px;
}


/* ==========================================================================
   MINI-GAMES SYNCHRONIZED DUEL HUD
   ========================================================================== */
.mg-duel-hud {
    position: sticky;
    top: 10px;
    z-index: 1500;
    width: calc(100% - 24px);
    max-width: 860px;
    margin: 10px auto 16px auto;
    animation: fadeInDown 0.3s ease;
}

.mg-duel-hud-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(22, 33, 62, 0.9));
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(233, 69, 96, 0.25);
    color: #fff;
    font-family: 'Rubik', sans-serif;
}

.mg-duel-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #e94560, #ff6b81);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
}

.mg-duel-opponent {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.mg-duel-label {
    color: #a0aec0;
    font-size: 0.78rem;
}

.mg-duel-name {
    color: #4ecdc4;
    font-weight: 700;
}

.mg-duel-progress,
.mg-duel-score {
    font-size: 0.82rem;
    color: #e2e8f0;
}

.mg-duel-progress strong,
.mg-duel-score strong {
    color: #ffd700;
    font-weight: 800;
    margin-left: 4px;
}

.mg-duel-surrender-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #ff6b81;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mg-duel-surrender-btn:hover {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .mg-duel-hud-inner {
        flex-wrap: wrap;
        padding: 8px 12px;
        gap: 8px;
        font-size: 0.75rem;
    }
    .mg-duel-surrender-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
}


/* ==========================================================================
   MINI-GAMES START SCREEN OVERLAY
   ========================================================================== */
.mg-start-overlay {
    position: relative;
    width: 100%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeInDown 0.3s ease;
    z-index: 10;
}

.mg-start-card {
    width: 100%;
    max-width: 540px;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.95), rgba(15, 23, 42, 0.98));
    border: 2px solid rgba(233, 69, 96, 0.4);
    border-radius: 20px;
    padding: 34px 26px;
    text-align: center;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.65), 0 0 25px rgba(233, 69, 96, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mg-start-icon-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px auto;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 70%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.mg-start-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
}

.mg-start-desc {
    color: #cbd5e1;
    font-size: 0.85rem;
    line-height: 1.65;
    margin: 0 0 22px 0;
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace !important;
    letter-spacing: 0.3px;
}

.mg-start-duel-badge {
    font-family: 'Minecraft', monospace !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(78, 205, 196, 0.25));
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 20px;
    padding: 8px 18px;
    margin-bottom: 22px;
    font-size: 0.9rem;
    color: #ffd700;
    font-weight: 700;
}

.mg-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 15px 42px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mg-start-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    background: linear-gradient(135deg, #34d399, #059669);
}

.mg-start-btn:active {
    transform: translateY(1px) scale(0.98);
}

.mg-start-btn.duel {
    background: linear-gradient(135deg, #e94560, #ff6b81);
    box-shadow: 0 6px 22px rgba(233, 69, 96, 0.45);
}

.mg-start-btn.duel:hover {
    background: linear-gradient(135deg, #ff4772, #e94560);
    box-shadow: 0 12px 30px rgba(233, 69, 96, 0.65);
}/* removed duplicate silDropdown *//* ============================================
   Poke DIV Game - Основные стили
   ============================================ */

/* ------------------- Шрифты ------------------- */
@font-face {
    font-family: 'Minecraft';
    src: url('Minecraft.woff2?v=glyphfix_1788792907') format('woff2'),
         url('Minecraft.otf?v=glyphfix_1788792907') format('opentype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ------------------- Базовые стили ------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
}

button, input, select, textarea, optgroup, option, dialog {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
}

input::placeholder, textarea::placeholder {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
}

body {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    color: #ffffff;
    min-height: 100vh;
    padding: 20px;
    font-size: 14px;
    position: relative;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
}

/* Анимированный фон */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(233, 69, 96, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ------------------- Анимации ------------------- */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes typesReveal {
    from { opacity: 0; transform: scale(0.9) translateY(-30px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cardReveal {
    from { opacity: 0; transform: translateY(30px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes presentationEnter {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes presentationExit {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes modalPop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes modalPopCenter {
    from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes slideEnter {
    from { opacity: 0; transform: translateX(100px) rotateY(10deg); }
    to { opacity: 1; transform: translateX(0) rotateY(0); }
}

@keyframes slideExit {
    from { opacity: 1; transform: translateX(0) rotateY(0); }
    to { opacity: 0; transform: translateX(-100px) rotateY(-10deg); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; visibility: hidden; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 20px rgba(233,69,96,0.2); }
    50% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(233,69,96,0.5); }
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes imageGlow {
    0%, 100% { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6)) brightness(1.05); }
    50% { filter: drop-shadow(0 20px 50px rgba(233, 69, 96, 0.4)) brightness(1.1); }
}

@keyframes completionPop {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}


/* ===== Плавающий переключатель языка (следует за скроллом) ===== */
.lang-switch-floating {
    position: fixed;
    top: 20px;
    right: 74px;
    z-index: 1000;
    display: inline-flex;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}
.lang-switch-floating:hover {
    border-color: rgba(233, 69, 96, 0.8);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.3);
}
.lang-switch-floating .lang-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: none;
    padding: 9px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.lang-switch-floating .lang-btn:hover {
    color: #fff;
    background: rgba(233, 69, 96, 0.2);
}
.lang-switch-floating .lang-btn.active {
    background: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.7);
}
@media (max-width: 768px) {
    .lang-switch-floating {
        top: 12px;
        right: 56px;
    }
    .lang-switch-floating .lang-btn {
        font-size: 0.55rem;
        padding: 7px 10px;
    }
}

/* ------------------- Социальный блок ------------------- */
.social-block {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.social-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(233,69,96,0.5);
    backdrop-filter: blur(10px);
    color: #e94560;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-toggle:hover {
    background: rgba(233,69,96,0.2);
    transform: scale(1.1);
}

.social-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.25s ease;
    background: rgba(0,0,0,0.7);
    padding: 12px 18px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233,69,96,0.4);
    text-align: center;
    margin-bottom: 8px;
    pointer-events: none;
}

.social-block.open .social-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 10px;
}

.social-link {
    font-size: 28px;
    transition: transform 0.3s;
}

.social-link.telegram { color: #26A5E4; }
.social-link.youtube { color: #FF0000; }
.social-link.twitch { color: #9146FF; }

.social-link:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px currentColor);
}

.social-credit {
    color: #aaa;
    font-size: 10px;
    letter-spacing: 1px;
    border-top: 1px solid rgba(233,69,96,0.3);
    padding-top: 8px;
    margin-top: 4px;
}

.social-credit i {
    color: #e94560;
    font-size: 8px;
}

.creator-name {
    color: #e94560;
    font-size: 11px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .social-block {
        top: 12px;
        right: 12px;
    }
    .social-toggle {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .social-panel {
        padding: 10px 14px;
    }
    .social-link {
        font-size: 22px;
    }
}

/* ------------------- Табы и контент ------------------- */
.tab-content {
    animation: pageFadeIn 0.4s ease-out;
}

.types-reveal-panel {
    display: none;
    gap: 60px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 45px;
    padding-top: 45px;
}

.types-reveal-panel.show {
    display: flex;
    animation: typesReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-type-card {
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    animation: cardReveal 0.4s ease-out backwards;
}

.reveal-type-card:nth-child(1) { animation-delay: 0.1s; }
.reveal-type-card:nth-child(2) { animation-delay: 0.2s; }

.reveal-type-card:hover {
    transform: scale(1.15);
}

.reveal-type-card img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
}

.reveal-type-card span {
    display: block;
    margin-top: 15px;
    font-size: 1rem;
    font-weight: bold;
    color: #e94560;
}

/* ------------------- Модальные окна ------------------- */
.modal {
    display: none;
    position: fixed;
    z-index: 20000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 700px;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    color: white;
    box-shadow: 0 0 40px rgba(233,69,96,0.3);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.modal-large {
    max-width: 1200px;
    width: 95%;
}

.modal-content h3 {
    color: #e94560;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-align: center;
}

.modal-content input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    background: #1a1a2e;
    border: 1px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.modal-content input:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233,69,96,0.3);
}

.modal-two-columns {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    margin-bottom: 20px;
}

.modal-filters {
    flex: 1;
    min-width: 250px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 20px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
    overflow-y: auto;
}

.modal-results {
    flex: 2;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-buttons {
    margin-top: auto;
    text-align: center;
    flex-shrink: 0;
}

/* Подтверждение удаления */
.confirm-modal {
    display: none;
    position: fixed;
    z-index: 20001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.confirm-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 400px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 50px rgba(233,69,96,0.4);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-modal-content h3 {
    color: #e94560;
    margin-bottom: 15px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.confirm-modal-content p {
    font-size: 0.7rem;
    line-height: 1.5;
    color: #ddd;
    margin-bottom: 5px;
}

.confirm-modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.confirm-modal-buttons button {
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.confirm-modal-buttons button:first-child {
    background: #e74c3c;
    color: white;
}

.confirm-modal-buttons button:first-child:hover {
    background: #c0392b;
    transform: scale(1.05);
}

.confirm-modal-buttons button:last-child {
    background: #2c3e50;
    color: white;
}

.confirm-modal-buttons button:last-child:hover {
    background: #1a252f;
    transform: scale(1.05);
}

/* Модальное окно завершения */
.completion-modal {
    display: none;
    position: fixed;
    z-index: 20002;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(233,69,96,0.3), rgba(0,0,0,0.95));
    backdrop-filter: blur(10px);
    font-family: 'Minecraft', monospace;
}

.completion-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 35px 50px;
    border: 2px solid #e94560;
    border-radius: 40px;
    width: 500px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 70px rgba(233,69,96,0.5);
    animation: completionPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.completion-modal-content i.fa-trophy {
    font-size: 2rem;
    color: #f39c12;
    margin-bottom: 15px;
}

.completion-modal-content h2 {
    color: #e94560;
    font-size: 1.2rem;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.completion-modal-content p {
    font-size: 0.7rem;
    color: #ddd;
}

.completion-modal-content button {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.completion-modal-content button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(233,69,96,0.5);
}

/* ------------------- Фильтры ------------------- */
.filter-section {
    margin-bottom: 20px;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(233, 69, 96, 0.2);
}

.filter-title {
    font-size: 0.7rem;
    color: #e94560;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.filter-buttons {
    display: flex;
    gap: 12px;
}

.filter-toggle {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px 16px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-toggle.active {
    background: #e94560;
    border-color: white;
    box-shadow: 0 0 8px rgba(233,69,96,0.5);
}

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

.filter-tag {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 5px 12px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-tag:hover {
    transform: scale(1.03);
    background: #e94560;
}

.filter-tag.active {
    background: #e94560;
    border-color: white;
}

.filter-gen-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.filter-gen {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    text-align: center;
    transition: all 0.2s;
}

.filter-gen.active {
    background: #e94560;
    border-color: white;
}

.filter-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.filter-stats {
    font-size: 0.6rem;
    color: #aaa;
    text-align: center;
    margin-top: 10px;
    padding: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
}

/* ------------------- Список покемонов ------------------- */
.pokemon-list-grid {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 15px;
    padding-right: 5px;
}

.template-pokemon-card {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 15px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.template-pokemon-card:hover {
    transform: scale(1.02);
    border-color: #fff;
    box-shadow: 0 5px 20px rgba(233,69,96,0.3);
}

.template-pokemon-card img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.template-pokemon-card .pokemon-name {
    font-weight: bold;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------- Уведомления (Poke DIV Toasts) ------------------- */
#notificationContainer {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999999 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 440px;
    width: calc(100vw - 48px);
}

.custom-notification {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.96) 0%, rgba(15, 23, 42, 0.96) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 5px solid #38bdf8;
    border-radius: 12px;
    padding: 14px 16px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    line-height: 1.4;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 206, 201, 0.15);
    animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: auto;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
}

.custom-notification:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 255, 255, 0.1);
}

.custom-notification.toast-fade-out {
    opacity: 0 !important;
    transform: translateX(40px) scale(0.95) !important;
}

.custom-notification.success {
    border-left-color: #00cec9;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 206, 201, 0.25);
}

.custom-notification.error {
    border-left-color: #e94560;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(233, 69, 96, 0.3);
}

.custom-notification.warning {
    border-left-color: #f59e0b;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.25);
}

.custom-notification.info {
    border-left-color: #38bdf8;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.25);
}

.toast-icon-wrap {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: rgba(255, 255, 255, 0.08);
}

.custom-notification.success .toast-icon-wrap {
    background: rgba(0, 206, 201, 0.15);
    color: #00cec9;
}

.custom-notification.error .toast-icon-wrap {
    background: rgba(233, 69, 96, 0.18);
    color: #e94560;
}

.custom-notification.warning .toast-icon-wrap {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}

.custom-notification.info .toast-icon-wrap {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
}

.toast-body {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    color: #ffffff;
}

.toast-title {
    font-weight: bold;
    font-size: 0.82rem;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.custom-notification.success .toast-title { color: #00cec9; }
.custom-notification.error .toast-title { color: #e94560; }
.custom-notification.warning .toast-title { color: #f59e0b; }
.custom-notification.info .toast-title { color: #38bdf8; }

.toast-message {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    line-height: 1.35;
}

.toast-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.toast-close-btn:hover {
    color: #ffffff;
    transform: scale(1.15);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
}

.toast-progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: left;
    transition: width linear;
}

.custom-notification.success .toast-progress-bar { background: #00cec9; }
.custom-notification.error .toast-progress-bar { background: #e94560; }
.custom-notification.warning .toast-progress-bar { background: #f59e0b; }
.custom-notification.info .toast-progress-bar { background: #38bdf8; }

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ------------------- Главное меню ------------------- */
.main-menu {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.6s ease;
}

.menu-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 40px;
    background: rgba(22, 33, 62, 0.6);
    border-radius: 60px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(233, 69, 96, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(233, 69, 96, 0.2);
    animation: glowPulse 3s infinite;
}

.menu-header h1 {
    color: #e94560;
    font-size: 2.2rem;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
    letter-spacing: 2px;
}

.menu-header p {
    color: #aaa;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

/* ------------------- Табы ------------------- */
.tabs {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.tab-btn {
    background: rgba(15, 52, 96, 0.7);
    border: 2px solid rgba(233, 69, 96, 0.5);
    padding: 15px 40px;
    font-size: 1rem;
    font-family: 'Minecraft', monospace;
    color: white;
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.tab-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(233, 69, 96, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.tab-btn:hover::before {
    width: 300px;
    height: 300px;
}

.tab-btn:hover {
    border-color: #e94560;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(233, 69, 96, 0.3);
}

.tab-btn.active {
    background: #e94560;
    border-color: #fff;
    box-shadow: 0 0 30px rgba(233, 69, 96, 0.6);
}

.tab-content {
    display: none;
    background: rgba(15, 52, 96, 0.5);
    border-radius: 40px;
    padding: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    height: auto !important;
    min-height: auto !important;
    overflow: hidden;
}

.tab-content.active {
    display: block;
}

/* ------------------- Игровые карточки ------------------- */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.game-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
    border-radius: 25px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(233, 69, 96, 0.3);
    position: relative;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(233,69,96,0.1), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.game-card:hover::before {
    opacity: 1;
}

.game-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #e94560;
    box-shadow: 0 20px 40px rgba(233, 69, 96, 0.3);
}

.game-card h3 {
    color: #e94560;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.game-card p {
    color: #aaa;
    font-size: 0.6rem;
}

.delete-collection-btn {
    background: rgba(231, 76, 60, 0.8);
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    margin-top: 15px;
    transition: all 0.3s;
    z-index: 10;
    position: relative;
}

.delete-collection-btn:hover {
    background: #e74c3c;
    transform: scale(1.05);
}

/* ============================================
   Poke DIV Game - Основные стили
   ============================================ */

/* ------------------- Шрифты ------------------- */
/* Duplicate Minecraft @font-face removed */

/* ------------------- Базовые стили ------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    min-height: 100vh;
    padding: 20px;
    font-size: 14px;
    position: relative;
    overflow-x: hidden;
}

/* Анимированный фон */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(233, 69, 96, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ------------------- Анимации ------------------- */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes typesReveal {
    from { opacity: 0; transform: scale(0.9) translateY(-30px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cardReveal {
    from { opacity: 0; transform: translateY(30px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes presentationEnter {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes presentationExit {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes modalPop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes modalPopCenter {
    from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes slideEnter {
    from { opacity: 0; transform: translateX(100px) rotateY(10deg); }
    to { opacity: 1; transform: translateX(0) rotateY(0); }
}

@keyframes slideExit {
    from { opacity: 1; transform: translateX(0) rotateY(0); }
    to { opacity: 0; transform: translateX(-100px) rotateY(-10deg); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; visibility: hidden; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 20px rgba(233,69,96,0.2); }
    50% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(233,69,96,0.5); }
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes imageGlow {
    0%, 100% { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6)) brightness(1.05); }
    50% { filter: drop-shadow(0 20px 50px rgba(233, 69, 96, 0.4)) brightness(1.1); }
}

@keyframes completionPop {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}


/* ===== Плавающий переключатель языка (следует за скроллом) ===== */
.lang-switch-floating {
    position: fixed;
    top: 20px;
    right: 74px;
    z-index: 1000;
    display: inline-flex;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}
.lang-switch-floating:hover {
    border-color: rgba(233, 69, 96, 0.8);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.3);
}
.lang-switch-floating .lang-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: none;
    padding: 9px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.lang-switch-floating .lang-btn:hover {
    color: #fff;
    background: rgba(233, 69, 96, 0.2);
}
.lang-switch-floating .lang-btn.active {
    background: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.7);
}
@media (max-width: 768px) {
    .lang-switch-floating {
        top: 12px;
        right: 56px;
    }
    .lang-switch-floating .lang-btn {
        font-size: 0.55rem;
        padding: 7px 10px;
    }
}

/* ------------------- Социальный блок ------------------- */
.social-block {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.social-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(233,69,96,0.5);
    backdrop-filter: blur(10px);
    color: #e94560;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-toggle:hover {
    background: rgba(233,69,96,0.2);
    transform: scale(1.1);
}

.social-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.25s ease;
    background: rgba(0,0,0,0.7);
    padding: 12px 18px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233,69,96,0.4);
    text-align: center;
    margin-bottom: 8px;
    pointer-events: none;
}

.social-block.open .social-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 10px;
}

.social-link {
    font-size: 28px;
    transition: transform 0.3s;
}

.social-link.telegram { color: #26A5E4; }
.social-link.youtube { color: #FF0000; }
.social-link.twitch { color: #9146FF; }

.social-link:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px currentColor);
}

.social-credit {
    color: #aaa;
    font-size: 10px;
    letter-spacing: 1px;
    border-top: 1px solid rgba(233,69,96,0.3);
    padding-top: 8px;
    margin-top: 4px;
}

.social-credit i {
    color: #e94560;
    font-size: 8px;
}

.creator-name {
    color: #e94560;
    font-size: 11px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .social-block {
        top: 12px;
        right: 12px;
    }
    .social-toggle {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .social-panel {
        padding: 10px 14px;
    }
    .social-link {
        font-size: 22px;
    }
}

/* ------------------- Табы и контент ------------------- */
.tab-content {
    animation: pageFadeIn 0.4s ease-out;
}

/* ------------------- Модальные окна ------------------- */
.modal {
    display: none;
    position: fixed;
    z-index: 20000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 700px;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    color: white;
    box-shadow: 0 0 40px rgba(233,69,96,0.3);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.modal-large {
    max-width: 1200px;
    width: 95%;
}

.modal-content h3 {
    color: #e94560;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-align: center;
}

.modal-content input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    background: #1a1a2e;
    border: 1px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.modal-content input:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233,69,96,0.3);
}

.modal-two-columns {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    margin-bottom: 20px;
}

.modal-filters {
    flex: 1;
    min-width: 250px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 20px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
    overflow-y: auto;
}

.modal-results {
    flex: 2;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-buttons {
    margin-top: auto;
    text-align: center;
    flex-shrink: 0;
}

/* Подтверждение удаления */
.confirm-modal {
    display: none;
    position: fixed;
    z-index: 20001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.confirm-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 400px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 50px rgba(233,69,96,0.4);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-modal-content h3 {
    color: #e94560;
    margin-bottom: 15px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.confirm-modal-content p {
    font-size: 0.7rem;
    line-height: 1.5;
    color: #ddd;
    margin-bottom: 5px;
}

.confirm-modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.confirm-modal-buttons button {
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.confirm-modal-buttons button:first-child {
    background: #e74c3c;
    color: white;
}

.confirm-modal-buttons button:first-child:hover {
    background: #c0392b;
    transform: scale(1.05);
}

.confirm-modal-buttons button:last-child {
    background: #2c3e50;
    color: white;
}

.confirm-modal-buttons button:last-child:hover {
    background: #1a252f;
    transform: scale(1.05);
}

/* Модальное окно завершения */
.completion-modal {
    display: none;
    position: fixed;
    z-index: 20002;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(233,69,96,0.3), rgba(0,0,0,0.95));
    backdrop-filter: blur(10px);
    font-family: 'Minecraft', monospace;
}

.completion-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 35px 50px;
    border: 2px solid #e94560;
    border-radius: 40px;
    width: 500px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 70px rgba(233,69,96,0.5);
    animation: completionPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.completion-modal-content i.fa-trophy {
    font-size: 2rem;
    color: #f39c12;
    margin-bottom: 15px;
}

.completion-modal-content h2 {
    color: #e94560;
    font-size: 1.2rem;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.completion-modal-content p {
    font-size: 0.7rem;
    color: #ddd;
}

.completion-modal-content button {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.completion-modal-content button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(233,69,96,0.5);
}

/* ------------------- Фильтры ------------------- */
.filter-section {
    margin-bottom: 20px;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(233, 69, 96, 0.2);
}

.filter-title {
    font-size: 0.7rem;
    color: #e94560;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.filter-buttons {
    display: flex;
    gap: 12px;
}

.filter-toggle {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px 16px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-toggle.active {
    background: #e94560;
    border-color: white;
    box-shadow: 0 0 8px rgba(233,69,96,0.5);
}

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

.filter-tag {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 5px 12px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-tag:hover {
    transform: scale(1.03);
    background: #e94560;
}

.filter-tag.active {
    background: #e94560;
    border-color: white;
}

.filter-gen-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.filter-gen {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    text-align: center;
    transition: all 0.2s;
}

.filter-gen.active {
    background: #e94560;
    border-color: white;
}

.filter-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.filter-stats {
    font-size: 0.6rem;
    color: #aaa;
    text-align: center;
    margin-top: 10px;
    padding: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
}

/* ------------------- Список покемонов ------------------- */
.pokemon-list-grid {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 15px;
    padding-right: 5px;
}

.template-pokemon-card {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 15px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.template-pokemon-card:hover {
    transform: scale(1.02);
    border-color: #fff;
    box-shadow: 0 5px 20px rgba(233,69,96,0.3);
}

.template-pokemon-card img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.template-pokemon-card .pokemon-name {
    font-weight: bold;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ------------------- Главное меню ------------------- */
.main-menu {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.6s ease;
}

.menu-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 40px;
    background: rgba(22, 33, 62, 0.6);
    border-radius: 60px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(233, 69, 96, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(233, 69, 96, 0.2);
    animation: glowPulse 3s infinite;
}

.menu-header h1 {
    color: #e94560;
    font-size: 2.2rem;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
    letter-spacing: 2px;
}

.menu-header p {
    color: #aaa;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.tab-btn {
    background: rgba(20, 20, 40, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 32px;
    font-size: 0.85rem;
    font-family: 'Minecraft', monospace;
    color: #ccc;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn i {
    margin-right: 8px;
    opacity: 0.7;
}

.tab-btn:hover {
    border-color: rgba(233, 69, 96, 0.4);
    color: white;
    background: rgba(233, 69, 96, 0.1);
}

.tab-btn[data-tab="hosting"] {
    border-color: rgba(245, 200, 66, 0.4);
    color: #f5c842;
}

.tab-btn[data-tab="hosting"]:hover {
    border-color: rgba(245, 200, 66, 0.7);
    color: #f5c842;
    background: rgba(245, 200, 66, 0.15);
}

.tab-btn.active {
    border-color: #e94560;
    color: #e94560;
    background: rgba(233, 69, 96, 0.15);
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.2);
}

.tab-btn.active[data-tab="hosting"] {
    border-color: #f5c842;
    color: #f5c842;
    background: rgba(245, 200, 66, 0.15);
    box-shadow: 0 0 20px rgba(245, 200, 66, 0.2);
}
/* ------------------- Игровые карточки ------------------- */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.game-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
    border-radius: 25px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(233, 69, 96, 0.3);
    position: relative;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(233,69,96,0.1), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.game-card:hover::before {
    opacity: 1;
}

.game-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #e94560;
    box-shadow: 0 20px 40px rgba(233, 69, 96, 0.3);
}

.game-card h3 {
    color: #e94560;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.game-card p {
    color: #aaa;
    font-size: 0.6rem;
}

.delete-collection-btn {
    background: rgba(231, 76, 60, 0.8);
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    margin-top: 15px;
    transition: all 0.3s;
    z-index: 10;
    position: relative;
}

.delete-collection-btn:hover {
    background: #e74c3c;
    transform: scale(1.05);
}

/* ------------------- Режим презентации ------------------- */
.fullscreen-presentation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('background/Fon.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 99999 !important;
    display: none;
    flex-direction: column;
    animation: presentationEnter 0.5s ease-out;
    overflow-y: auto;
}

.fullscreen-presentation.active {
    display: flex;
}

.main-menu:has(.fullscreen-presentation.active) {
    z-index: 99999 !important;
}

/* Hide floating language and social widgets during presentation */
body.in-presentation .lang-switch-floating,
body.in-presentation .social-block,
body.in-presentation #floatingLangSwitch,
body.in-presentation #socialBlock,
body:has(.fullscreen-presentation.active) .lang-switch-floating,
body:has(.fullscreen-presentation.active) .social-block,
body:has(.fullscreen-presentation.active) #floatingLangSwitch,
body:has(.fullscreen-presentation.active) #socialBlock,
.fullscreen-presentation.active ~ .lang-switch-floating,
.fullscreen-presentation.active ~ .social-block {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    z-index: -1 !important;
}

.fullscreen-presentation.exit {
    animation: presentationExit 0.4s ease-in forwards;
}

.pres-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(233,69,96,0.3), rgba(0,0,0,0.8));
    z-index: 999999 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.pres-transition-overlay.active {
    opacity: 1;
}

.pres-header {
    background: rgba(0, 0, 0, 0.7);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(20px);
    border-bottom: 2px solid rgba(233, 69, 96, 0.5);
    z-index: 100002;
    position: sticky;
    top: 0;
    pointer-events: auto;
}

.pres-header h3 {
    color: #e94560;
    font-size: 1rem;
    text-shadow: 0 0 15px rgba(233,69,96,0.8);
}

.close-pres-btn, #closePresBtn {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 10px 28px !important;
    border-radius: 50px !important;
    color: white !important;
    cursor: pointer !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.8rem !important;
    position: relative !important;
    z-index: 100005 !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    user-select: none !important;
}

.close-pres-btn:hover, #closePresBtn:hover {
    background: linear-gradient(135deg, #ff5252, #d63031) !important;
    transform: scale(1.06) !important;
    box-shadow: 0 6px 25px rgba(231, 76, 60, 0.7) !important;
}

.close-pres-btn:active, #closePresBtn:active {
    transform: scale(0.96) !important;
}

.pres-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    position: relative;
    z-index: 5;
}

.pres-card-container {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    perspective: 1200px;
    transition: all 0.3s ease;
}

.pres-card {
    background: rgba(10, 20, 40, 0.75);
    backdrop-filter: blur(25px);
    border-radius: 60px;
    width: 95vw;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 60px;
    padding: 60px 60px;
    border: 2px solid rgba(233, 69, 96, 0.5);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 0 0 80px rgba(233, 69, 96, 0.2);
    animation: cardFloat 3s ease-in-out infinite;
}

.pres-card.slide-enter {
    animation: slideEnter 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

.pres-card.slide-exit {
    animation: slideExit 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

.pres-image-area {
    flex: 1;
    min-width: 400px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.pres-image-area img {
    width: 100%;
    max-height: 55vh;
    object-fit: contain;
    border-radius: 40px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
    animation: imageGlow 2s ease-in-out infinite;
}

.pres-info-area {
    flex: 1.5;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
}

.pres-pokemon-name {
    font-size: 3.6rem;
    margin-bottom: 30px;
    color: #e94560;
    text-shadow: 0 0 25px rgba(233, 69, 96, 0.7);
    letter-spacing: 4px;
}

/* Описание — нормальное состояние */
.pres-description {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 45px;
    color: #f0f0f0;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 30px;
    transition: all 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
    overflow: hidden;
}

/* Описание сжатое — когда карточка раскрыта */
.pres-card.types-expanded .pres-description {
    margin-bottom: 15px;
    padding: 10px 20px;
    font-size: 0.9rem;
    line-height: 1.3;
    max-height: 80px;
    overflow-y: auto;
}

.reveal-btn {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 20px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    border-radius: 60px;
    cursor: pointer;
    width: 100%;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s;
}

.reveal-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(233, 69, 96, 0.6);
}

.pres-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 45px;
}

.pres-nav-btn,
.pres-counter-wrapper {
    display: inline-flex;
    align-items: center;
    height: 52px;
}

.pres-nav-btn {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.9), rgba(198, 42, 71, 0.9));
    border: none;
    padding: 0 30px;
    border-radius: 60px;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    will-change: transform;
    line-height: 1;
}

.pres-counter-wrapper {
    margin: 0;
}

.pres-counter {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    padding: 0 30px;
    border-radius: 60px;
    color: #e94560;
    font-size: 1rem;
    border: 1px solid rgba(233, 69, 96, 0.5);
    line-height: 52px;
    white-space: nowrap;
    height: 52px;
    display: inline-block;
    box-sizing: border-box;
}
.pres-nav-btn:hover {
    background: #e94560;
}

.pres-nav-btn:active {
    transform: scale(0.96);
}

.pres-nav-btn:first-child:hover {
    transform: translateX(-5px);
}

.pres-nav-btn:last-child:hover {
    transform: translateX(5px);
}

/* ------------------- Режим разработчика ------------------- */
.back-to-play-btn {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    transition: all 0.3s;
    border: none;
    padding: 12px 25px;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    margin-bottom: 20px;
}

.back-to-play-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(243, 156, 18, 0.4);
}

.editor-panel, .slides-list-panel {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    transition: all 0.3s;
    border-radius: 16px;
    padding: 20px;
    color: white;
}

.editor-panel:hover, .slides-list-panel:hover {
    border-color: rgba(233, 69, 96, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.image-upload-area {
    border: 2px dashed #e94560;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: #1a1a2e;
    transition: all 0.3s;
}

.image-upload-area:hover {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.1);
}

.type-icons-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 15px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    padding: 5px !important;
}

.type-icon-item {
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    text-align: center;
    width: 85px;
    transition: all 0.2s;
}

.type-icon-item.selected {
    background: #e94560;
}

.type-icon-item:hover {
    transform: scale(1.05);
    border-color: white;
}

.type-icon-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.type-icon-item span {
    font-size: 9px;
    display: block;
    margin-top: 5px;
    color: white;
}

.save-btn {
    background: #2ecc71;
    border: none;
    padding: 12px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    flex: 1;
}

.delete-btn {
    background: #e74c3c;
    border: none;
    padding: 12px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    flex: 1;
}

.btn-confirm {
    background: #2ecc71;
    border: none;
    padding: 10px 30px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.btn-cancel {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border: none;
    padding: 10px 30px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.btn-confirm:hover, .btn-cancel:hover {
    transform: translateY(-2px);
}

/* ------------------- Игра "Угадай тип" ------------------- */
.types-game-container {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.95));
    border-radius: 25px;
    padding: 20px;
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.types-game-layout {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.types-game-main {
    flex: 1;
    min-width: 300px;
}

.types-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: rgba(233, 69, 96, 0.1);
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.types-game-header span:first-child {
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: #e94560;
}

.types-game-score {
    font-size: 1.5rem;
    font-weight: bold;
    color: #f39c12;
    background: #1a1a2e;
    padding: 4px 18px;
    border-radius: 15px;
    border: 1px solid #e94560;
    font-family: 'Minecraft', monospace;
}

.types-game-section {
    background: rgba(15, 52, 96, 0.5);
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    overflow: hidden;
}

.types-game-section-header {
    background: rgba(233, 69, 96, 0.15);
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.types-game-section-header:hover {
    background: rgba(233, 69, 96, 0.25);
}

.types-game-section-title {
    font-size: 0.65rem;
    color: #e94560;
    letter-spacing: 1.5px;
}

.types-game-section-title i {
    margin-right: 6px;
}

.types-game-types-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 15px;
}

.types-game-type-btn {
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 10px 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
}

.types-game-type-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: white;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.3);
}

.types-game-type-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.types-game-type-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.types-game-type-btn img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.types-game-type-btn span {
    font-size: 0.55rem;
    font-weight: bold;
    color: white;
    text-transform: capitalize;
    text-align: center;
    word-break: break-word;
}

.types-game-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 15px;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(233,69,96,0.2);
    min-height: 50px;
}

.types-game-chip {
    background: linear-gradient(135deg, #e94560, #c62a47);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-family: 'Minecraft', monospace;
    border: 1px solid rgba(255,255,255,0.2);
}

.types-game-remove {
    background: rgba(0,0,0,0.4);
    border: none;
    color: white;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.types-game-remove:hover {
    background: rgba(0,0,0,0.6);
    transform: scale(1.05);
}

.types-game-note {
    font-size: 0.5rem;
    padding: 8px 15px;
    color: #aaa;
    border-top: 1px solid rgba(233,69,96,0.2);
}

.types-game-commit {
    width: 100%;
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    margin-bottom: 20px;
    transition: 0.2s;
    font-family: 'Minecraft', monospace;
    letter-spacing: 2px;
}

.types-game-commit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(233,69,96,0.4);
}

.types-game-panel {
    background: rgba(233, 69, 96, 0.1);
    border-radius: 20px;
    padding: 15px;
    margin-bottom: 20px;
    display: none;
    border: 1px solid rgba(233,69,96,0.3);
}

.types-game-panel.visible {
    display: block;
}

.types-game-panel-title {
    text-align: center;
    font-size: 0.65rem;
    color: #e94560;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.types-game-real-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.types-game-real-btn {
    background: #1a1a2e;
    border: 2px solid #3498db;
    border-radius: 12px;
    padding: 10px 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
}

.types-game-real-btn:hover {
    transform: translateY(-3px);
    border-color: white;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
}

.types-game-real-btn:active {
    transform: scale(0.97);
}

.types-game-real-btn img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.types-game-real-btn span {
    font-size: 0.55rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    text-align: center;
    word-break: break-word;
}

.types-game-status {
    text-align: center;
    font-size: 0.6rem;
    color: #f39c12;
    font-family: 'Minecraft', monospace;
}

.types-game-reset-area {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.types-game-reset-btn {
    background: rgba(15, 52, 96, 0.8);
    border: 1px solid #e94560;
    padding: 8px 20px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
}

.types-game-reset-btn:hover {
    background: rgba(233, 69, 96, 0.3);
    transform: translateY(-2px);
}

.types-game-history-panel {
    background: rgba(15, 52, 96, 0.5);
    border-radius: 20px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
    flex: 0 0 280px;
}

.types-game-history-title {
    font-size: 0.6rem;
    color: #e94560;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(233,69,96,0.3);
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.types-game-history-item {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 0.55rem;
    color: #ccc;
    line-height: 1.5;
}

.types-game-history-item strong {
    color: #e94560;
}

/* ------------------- Менеджер фона и музыки ------------------- */
.bg-music-manager {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    min-height: 300px;
}

.bg-panel,
.music-panel {
    flex: 1;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-title {
    font-size: 0.8rem;
    color: #e94560;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e94560;
    flex-shrink: 0;
}

/* Сетка фонов */
.bg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    overflow-y: auto;
    flex: 1;
}

.bg-card {
    background: #1a1a2e;
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    position: relative;
}

.bg-card:hover {
    transform: translateY(-3px);
    border-color: #e94560;
    box-shadow: 0 5px 15px rgba(233, 69, 96, 0.3);
}

.bg-card.active {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.2);
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

.bg-card img {
    width: 100%;
    height: 123px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
}

.bg-card span {
    font-size: 0.55rem;
    color: white;
    display: block;
}

.bg-card .delete-bg-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #e74c3c;
    border: none;
    border-radius: 6px;
    color: white;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.bg-card .delete-bg-btn:nth-child(3) {
    right: 26px;
    background: #e94560;
}

.bg-card:hover .delete-bg-btn {
    opacity: 1;
}

.music-rename-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.music-rename-btn:hover {
    color: #e94560;
    border-color: #e94560;
}

/* Карточка текущего фона */
.bg-card--preview {
    cursor: default;
}
.bg-card--preview:hover {
    transform: none;
    border-color: rgba(233, 69, 96, 0.3);
    box-shadow: none;
}
.bg-preview-thumb {
    width: 100%;
    height: 123px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px;
    background: #111;
}
.bg-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0;
}

/* Карточка загрузки */
.bg-card--upload {
    border-style: dashed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

/* Список треков */
.music-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
}

.music-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(26, 26, 46, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.music-item:hover {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.1);
}

.music-item:has(.fa-plus) {
    border-style: dashed;
    border-color: rgba(233, 69, 96, 0.3);
}

.music-item.active {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.2);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

.music-item-info {
    flex: 1 1 auto;
    min-width: 0;
}

.music-item-name {
    font-size: 0.65rem;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-item-file {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-item-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(233, 69, 96, 0.4);
    background: rgba(26, 26, 46, 0.8);
    color: #e94560;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.music-item-btn:hover {
    background: rgba(233, 69, 96, 0.2);
    transform: scale(1.1);
}

.music-delete-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(231, 76, 60, 0.4);
    background: rgba(26, 26, 46, 0.8);
    color: #e74c3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    transition: all 0.2s;
    flex-shrink: 0;
    opacity: 1;
}

.music-delete-btn:hover {
    background: #e74c3c;
    color: white;
    transform: scale(1.1);
}

.music-volume-slider {
    flex: 0 1 120px;
    min-width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(233, 69, 96, 0.25);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.music-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

.music-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

.music-vol-val {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.5);
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.music-controls-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(233, 69, 96, 0.2);
    flex-shrink: 0;
}

.music-master-btn {
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid rgba(233, 69, 96, 0.4);
    background: rgba(26, 26, 46, 0.8);
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.music-master-btn:hover {
    background: rgba(233, 69, 96, 0.2);
}

.music-master-btn.active {
    background: #e94560;
    border-color: #e94560;
}

@media (max-width: 768px) {
    .bg-music-manager {
        flex-direction: column;
    }
}

/* ------------------- Селектор музыки в панели режимов ------------------- */
#gameMusicSelect {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e94560'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px !important;
    min-width: 130px;
}

#gameMusicSelect:hover {
    border-color: #ff6b81;
}

#gameMusicSelect option {
    background: #1a1a2e;
    color: white;
}

/* ------------------- Стилизация скроллбаров ------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff6b81;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #e94560 rgba(26, 26, 46, 0.5);
}
/* ============================================
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ ИСПРАВЛЕНИЙ
   ============================================ */

/* Стили для заголовков вкладок и текста */
.tab-content h2 {
    color: #e94560 !important;
    text-shadow: 0 0 5px rgba(233, 69, 96, 0.3);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* Стили для полей ввода в режиме разработчика */
#devMode input,
#devMode textarea,
#devMode select {
    background: #1a1a2e;
    border: 2px solid #e94560;
    color: white;
    padding: 12px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    width: 100%;
    transition: all 0.3s;
}

#devMode input:focus,
#devMode textarea:focus,
#devMode select:focus {
    outline: none;
    border-color: #ff6b81;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

#devMode input::placeholder,
#devMode textarea::placeholder {
    color: #666;
    font-size: 0.6rem;
}

#devMode textarea {
    resize: vertical;
    min-height: 80px;
}

/* Стили для меток в режиме разработчика */
#devMode label {
    color: #e94560;
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

/* Стили для заголовков панелей в режиме разработчика */
#devMode .editor-title {
    font-size: 0.8rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e94560;
    color: white;
}

#devMode .admin-header .logo {
    font-size: 0.9rem;
}

/* Стили для селектора коллекции */
#devMode .game-selector span {
    color: white !important;
}

/* Стили для списка покемонов в редакторе */
#devMode .pokemon-list {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Стилизация скроллбара для списка покемонов */
#devMode .pokemon-list::-webkit-scrollbar {
    width: 6px;
}

#devMode .pokemon-list::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
}

#devMode .pokemon-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

/* Улучшенные стили для карточек покемонов в редакторе */
#devMode .pokemon-card {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    gap: 12px;
    align-items: center;
}

#devMode .pokemon-card:hover {
    transform: translateX(5px);
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.2);
}

#devMode .pokemon-card.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border-color: white;
}

#devMode .pokemon-card .pokemon-name {
    font-weight: bold;
    color: white;
    font-size: 0.75rem;
}

/* Стили для кнопок в режиме разработчика */
#devMode .save-btn,
#devMode .delete-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    letter-spacing: 1px;
    transition: all 0.3s;
}

#devMode .save-btn:hover,
#devMode .delete-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* Стили для области загрузки изображения */
#devMode .image-upload-area {
    border: 2px dashed #e94560;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: #1a1a2e;
    transition: all 0.3s;
}

#devMode .image-upload-area:hover {
    border-color: #ff6b81;
    background: rgba(233, 69, 96, 0.1);
}

#devMode .image-upload-area p {
    color: #aaa;
    font-size: 0.6rem;
    margin-top: 10px;
}

#devMode .image-upload-area i {
    color: #e94560;
    font-size: 2rem;
}

/* Стили для превью изображения */
#devMode .image-preview {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    margin-top: 10px;
    border-radius: 12px;
    border: 2px solid #e94560;
    background: #1a1a2e;
}
.image-preview {
    max-height: 260px;
    width: auto;
    object-fit: contain;
}
/* ЗАГОЛОВКИ НЕ СЖИМАЮТСЯ */
.editor-panel .editor-title,
.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e94560 !important;
}

/* Стили для сетки типов */
#devMode .type-icons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
    max-height: 300px;
    overflow-y: auto;
    padding: 5px;
}

#devMode .type-icon-item {
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    text-align: center;
    width: 85px;
    transition: all 0.2s;
}

#devMode .type-icon-item.selected {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border-color: white;
    transform: scale(1.05);
}

#devMode .type-icon-item:hover {
    transform: scale(1.05);
    border-color: white;
}

#devMode .type-icon-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

#devMode .type-icon-item span {
    font-size: 9px;
    display: block;
    margin-top: 5px;
    color: white;
}

/* Стили для главной сетки игр */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

/* Стили для информационных сообщений */
#tabPlay h2 {
    color: #e94560 !important;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

/* Улучшенные стили для модального окна */
.modal-content input,
.modal-content textarea {
    background: #1a1a2e;
    border: 2px solid #e94560;
    color: white;
    padding: 12px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    width: 100%;
}

.modal-content input:focus,
.modal-content textarea:focus {
    outline: none;
    border-color: #ff6b81;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

.modal-content input::placeholder {
    color: #666;
}

/* Стили для статистики фильтров */
.filter-stats {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(233, 69, 96, 0.3);
}
/* Стили для селектора коллекции - фикс расположения элементов */
.game-selector {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    position: relative !important;
    z-index: 1001 !important;
}

.game-selector i,
.game-selector span,
.game-selector select,
.game-selector button {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.game-selector span {
    margin: 0 !important;
    padding: 0 !important;
}

/* Убираем лишние отступы */
.admin-header {
    gap: 15px !important;
}

.admin-header > div {
    margin: 0 !important;
}
/* ------------------- Адаптивность ------------------- */
@media (max-width: 768px) {
    body {
        padding: 8px;
    }
    
    .menu-header h1 {
        font-size: 1.2rem;
    }
    
    .tab-btn {
        padding: 6px 15px;
        font-size: 0.7rem;
    }
    
    .filter-gen-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .filter-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .modal-two-columns {
        flex-direction: column;
    }
    
    .modal-filters {
        max-height: 250px;
        overflow-y: auto;
    }
    
    .pokemon-list-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .pres-card {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    
    .pres-image-area {
        min-width: auto;
    }
    
    .pres-pokemon-name {
        font-size: 1.5rem;
    }
    
    .pres-description {
        font-size: 0.8rem;
    }
    
    .reveal-btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
    
    .pres-nav-btn {
        padding: 8px 20px;
        font-size: 0.7rem;
    }
    
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    #devMode .type-icons-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    #devMode .type-icon-item {
        width: 70px;
    }
    
    #devMode .type-icon-item img {
        width: 40px;
        height: 40px;
    }
    
    .games-grid {
        grid-template-columns: 1fr;
    }
/* Дополнительные стили для заголовков и текста */
#tabPlay h2,
#tabDev h2,
#tabTypes h2 {
    color: #e94560 !important;
    text-shadow: 0 0 5px rgba(233, 69, 96, 0.3);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* Стили для текста в селекторах */
.game-selector span {
    color: white !important;
}

/* Улучшенные стили для полей ввода в редакторе */
#pokemonNameDev,
#pokemonDescriptionDev {
    resize: vertical;
    min-height: 80px;
}

#pokemonNameDev:focus,
#pokemonDescriptionDev:focus {
    outline: none !important;
    border-color: #ff6b81 !important;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5) !important;
}

#pokemonNameDev::placeholder,
#pokemonDescriptionDev::placeholder {
    color: #666 !important;
    font-size: 0.6rem !important;
}

/* Стили для меток в редакторе */
#devMode label {
    color: #e94560 !important;
    font-size: 0.75rem !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
    display: block !important;
}
    .game-selector {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
/* Исправление для панели списка покемонов в режиме разработчика */
.slides-list-panel {
    flex: 1 !important;
    min-width: 280px !important;
}

.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
}

.pokemon-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-right: 5px !important;
    min-height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Для главной сетки в режиме разработчика */
.main-grid {
    align-items: stretch !important;
    min-height: 600px !important;
    flex: 1 !important;
}

.editor-panel,
.slides-list-panel {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 550px !important;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .slides-list-panel {
        min-height: 400px !important;
    }
    
    .pokemon-list {
        min-height: 300px !important;
    }
}

/* ЗАГОЛОВОК ПАНЕЛИ - НЕ СЖИМАЕТСЯ */
.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e94560 !important;
}

.pokemon-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-right: 5px !important;
    min-height: 400px !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

/* ЛЕВАЯ ПАНЕЛЬ */
.editor-panel {
    flex: 2 !important;
    min-width: 350px !important;
}

/* КОНТЕНТ ЛЕВОЙ ПАНЕЛИ */
.editor-panel .form-group {
    flex-shrink: 0;
}

.editor-panel .action-buttons {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

//* ОСНОВНОЙ КОНТЕЙНЕР РАЗРАБОТЧИКА - УБИРАЕМ ОГРАНИЧЕНИЯ */
#devMode {
    height: auto !important;
    min-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ГЛАВНАЯ СЕТКА - РОДИТЕЛЬСКИЙ КОНТЕЙНЕР */
.main-grid {
    display: flex !important;
    gap: 25px !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;  /* ← ЗАСТАВЛЯЕТ ДОЧЕРНИЕ ЭЛЕМЕНТЫ РАСТЯГИВАТЬСЯ */
    min-height: 500px !important;
}

/* ОБЕ ПАНЕЛИ - ОДИНАКОВАЯ ВЫСОТА */
.editor-panel, 
.slides-list-panel {
    display: flex !important;
    flex-direction: column !important;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    transition: all 0.3s;
    border-radius: 16px;
    padding: 20px;
    color: white;
    height: auto !important;  /* ← АВТОМАТИЧЕСКАЯ ВЫСОТА */
    min-height: 100% !important;  /* ← ЗАНИМАЮТ ВСЮ ВЫСОТУ РОДИТЕЛЯ */
}
/* Адаптив для мобильных */
@media (max-width: 768px) {
    .slides-list-panel {
        min-height: 350px !important;
    }
    
    .pokemon-list {
        min-height: 300px !important;
    }
}
/* ФИНАЛЬНЫЙ ФИКС - ЗАСТАВЛЯЕМ СПИСОК РАСТЯНУТЬСЯ */
body {
    min-height: 100vh;
}

#mainMenu {
    min-height: auto;
    display: flex;
    flex-direction: column;
}

#tabDev.active {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 500px !important;
}

#devMode {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

#tabDevNew {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 500px !important;
}

#devModeNew {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
}

.main-grid {
    flex: 1 !important;
    display: flex !important;
}

/* Карточки покемонов на всю ширину */
#pokemonListDev > div {
    width: 100% !important;
    box-sizing: border-box !important;
}
.action-buttons {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* АДАПТИВ */
@media (max-width: 768px) {
    .main-grid {
        min-height: 400px !important;
    }
    
    .pokemon-list {
        min-height: 150px !important;
    }
}
/* ФИКС ДЛЯ РОДИТЕЛЬСКИХ КОНТЕЙНЕРОВ */
#tabDev.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

#devMode {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

.main-grid {
    flex: 1 !important;
}
/* Замените существующий стиль для .pokemon-list на этот */

#devMode .pokemon-list {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Добавьте эти стили для лучшей работы скролла */

.slides-list-panel {
    flex: 1;
    min-width: 280px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: 80vh;
}

.slides-list-panel .editor-title {
    flex-shrink: 0;
}

#devMode .pokemon-list {
    flex: 1;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Стилизация скроллбара */
#devMode .pokemon-list::-webkit-scrollbar {
    width: 6px;
}

#devMode .pokemon-list::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
}

#devMode .pokemon-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

#devMode .pokemon-list::-webkit-scrollbar-thumb:hover {
    background: #ff6b81;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .slides-list-panel {
        max-height: 400px;
    }
    
    #devMode .pokemon-list {
        max-height: 300px;
    }
}
/* Дополнительный фикс для списка покемонов */
.main-grid {
    align-items: stretch !important;
}

.slides-list-panel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
    margin-bottom: 20px !important;
}

#devMode .pokemon-list {
    flex: 1 1 auto !important;
    min-height: 200px !important;
    max-height: calc(80vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
@media (max-width: 768px) {
    .pres-content {
        flex-direction: column !important;
    }
    .pres-card {
        padding: 20px !important;
    }
    .pres-pokemon-name {
        font-size: 1.5rem !important;
    }
}
}
/* ============================================
   ОБЫЧНАЯ ПРЕЗЕНТАЦИЯ (БЕЗ САЙДБАРА)
   ============================================ */

/* Обычная презентация: карточка по центру, колонка */
.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-card-container {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-card {
    width: 95vw !important;
    max-width: 1400px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 60px !important;
    padding: 60px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-image-area {
    flex: 1 !important;
    min-width: 400px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-image-area img {
    width: 100% !important;
    max-height: 55vh !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-info-area {
    flex: 1.5 !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-pokemon-name {
    font-size: 3.6rem !important;
    margin-bottom: 30px !important;
    text-align: left !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .reveal-btn {
    padding: 20px 40px !important;
    font-size: 1.2rem !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-nav {
    margin-top: 45px !important;
    gap: 40px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-nav-btn {
    padding: 15px 45px !important;
    font-size: 1rem !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-counter-wrapper {
    margin-top: 30px !important;
}

/* Адаптив обычной презентации на мобильных */
@media (max-width: 768px) {
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-card {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 20px !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-image-area {
        min-width: auto !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-pokemon-name {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-description {
        font-size: 0.8rem !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .reveal-btn {
        padding: 10px 20px !important;
        font-size: 0.8rem !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-nav-btn {
        padding: 8px 20px !important;
        font-size: 0.7rem !important;
    }
}

/* ============================================
   РЕЖИМ "ОДИН ИГРОК" — САЙДБАР ВНУТРИ .pres-content
   Левая часть = карточка (~70%), Правая = пульт (~30%)
   ============================================ */

/* Сайдбара нет — скрыт по умолчанию */
#gameSidebar {
    display: none;
}

/* Когда сайдбар виден — переключаем pres-content на строку */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 20px !important;
}

/* Карточка покемона — левая часть ~62% */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card-container {
    flex: 1 1 62% !important;
    min-width: 0 !important;
    max-width: 62% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Карточка растягивается на всю ширину контейнера */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card {
    width: 100% !important;
    padding: 25px !important;
    gap: 30px !important;
    flex: 1 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-image-area {
    order: 2 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-info-area {
    order: 1 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-pokemon-name {
    text-align: right !important;
    font-size: 1.8rem !important;
    margin-bottom: 15px !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-description {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    padding: 14px !important;
    margin-bottom: 15px !important;
}

/* Навигация под карточкой */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-nav {
    margin-top: 15px !important;
    gap: 20px !important;
    flex-shrink: 0 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-nav-btn {
    padding: 10px 25px !important;
    font-size: 0.8rem !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-counter-wrapper {
    margin-top: 0 !important;
}

/* Скрыть кнопку "Раскрыть тип" и навигацию в режиме один игрок */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .reveal-types-container {
    display: none !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-nav {
    display: none !important;
}

/* В комнате (room-mode) — показать раскрытие типов в карточке, скрыть навигацию */
.fullscreen-presentation.room-mode:has(#gameSidebar[style*="display: block"]) .reveal-types-container {
    display: flex !important;
}

.fullscreen-presentation.room-mode:has(#gameSidebar[style*="display: block"]) .pres-nav {
    display: none !important;
}

/* Кнопки управления комнатой в sidebar */
#roomPresPrevBtn, #roomPresNextBtn {
    background: rgba(15,52,96,0.5) !important;
}

#roomPresPrevBtn:hover, #roomPresNextBtn:hover {
    background: rgba(233,69,96,0.3) !important;
}

/* Пульт — правая часть ~30% */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 38% !important;
    max-width: 38% !important;
    min-width: 260px !important;
    background: rgba(10, 20, 40, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 30px !important;
    padding: 20px !important;
    border: 1px solid rgba(233, 69, 96, 0.4) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}

/* Стили элементов пульта */
#gameSidebar h3 {
    color: #e94560 !important;
    font-size: 1rem !important;
    margin-bottom: 15px !important;
    text-align: center !important;
}

#gameSidebar .types-game-section {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    margin-bottom: 15px !important;
    border: 1px solid rgba(233, 69, 96, 0.2) !important;
    overflow: hidden !important;
    flex: none !important;
}

#gameSidebar .types-game-section.section-active {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#gameSidebar .types-game-section-header {
    background: rgba(233, 69, 96, 0.15) !important;
    padding: 10px 15px !important;
    font-size: 0.65rem !important;
    color: #e94560 !important;
    flex-shrink: 0 !important;
}

#gameSidebar #singleMainContent,
#gameSidebar #singleExtraContent {
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#gameSidebar .types-game-types-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    align-content: stretch !important;
}

#gameSidebar .types-game-type-btn,
#gameSidebar .types-game-real-btn {
    background: #1a1a2e !important;
    border: 2px solid #e94560 !important;
    border-radius: 10px !important;
    padding: 10px 4px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

#gameSidebar .types-game-type-btn img,
#gameSidebar .types-game-real-btn img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
}

#gameSidebar .types-game-type-btn.type-selected {
    background: rgba(233, 69, 96, 0.4) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4) !important;
}

#gameSidebar .types-game-type-btn span,
#gameSidebar .types-game-real-btn span {
    font-size: 0.5rem !important;
    color: white !important;
}

#gameSidebar .types-game-selected-list {
    padding: 8px 12px !important;
    display: none !important;
}

#gameSidebar #singleCommitBtn {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

#gameSidebar .types-game-chip {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    padding: 3px 8px !important;
    border-radius: 15px !important;
    font-size: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: white !important;
}

#gameSidebar .types-game-remove {
    background: rgba(0,0,0,0.4) !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
    padding: 1px 5px !important;
    border-radius: 10px !important;
    font-size: 0.5rem !important;
}

#gameSidebar .types-game-real-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
}

#gameSidebar .types-game-status {
    font-size: 0.55rem !important;
    text-align: center !important;
    color: #f39c12 !important;
    padding: 8px !important;
}

#singleCommitBtn {
    width: 100% !important;
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border: none !important;
    padding: 10px !important;
    font-size: 0.65rem !important;
    border-radius: 25px !important;
    color: white !important;
    cursor: pointer !important;
    margin-bottom: 15px !important;
    font-family: 'Minecraft', monospace !important;
    letter-spacing: 1px !important;
}

#singleCommitBtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 20px rgba(233,69,96,0.4) !important;
}

#singleResetBtn {
    background: rgba(15, 52, 96, 0.8) !important;
    border: 1px solid #e94560 !important;
    padding: 6px 15px !important;
    border-radius: 20px !important;
    color: white !important;
    cursor: pointer !important;
    font-size: 0.55rem !important;
    font-family: 'Minecraft', monospace !important;
}

#singleRealPanel {
    background: rgba(233, 69, 96, 0.1) !important;
    border-radius: 15px !important;
    padding: 10px !important;
    margin-top: 10px !important;
    border: 1px solid rgba(233,69,96,0.3) !important;
}

#singleGameScore {
    font-size: 1rem !important;
    font-weight: bold !important;
    color: #f39c12 !important;
    text-align: center !important;
    margin-bottom: 15px !important;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-content {
        flex-direction: column !important;
    }
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card-container {
        flex: none !important;
        max-width: 100% !important;
    }
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
        flex: none !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}
/* ============================================
   ПУЛЬТ ИГРОКА КОМНАТЫ (room.html) — точная копия #gameSidebar
   ============================================ */
#roomSidebarArea {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 38% !important;
    max-width: 38% !important;
    min-width: 280px !important;
    background: rgba(10, 20, 40, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 30px !important;
    padding: 20px !important;
    border: 1px solid rgba(233, 69, 96, 0.4) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

#roomSidebarArea h3 {
    color: #e94560 !important;
    font-size: 1rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-family: 'Minecraft', monospace !important;
}

#roomSidebarArea .types-game-section {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    margin-bottom: 15px !important;
    border: 1px solid rgba(233, 69, 96, 0.2) !important;
    overflow: hidden !important;
    flex: none !important;
}

#roomSidebarArea .types-game-section.section-active {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#roomSidebarArea .types-game-section-header {
    background: rgba(233, 69, 96, 0.15) !important;
    padding: 10px 15px !important;
    font-size: 0.65rem !important;
    color: #e94560 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    user-select: none !important;
    font-family: 'Minecraft', monospace !important;
}

#roomSidebarArea #roomMainContent,
#roomSidebarArea #roomExtraContent {
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#roomSidebarArea .types-game-types-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    align-content: stretch !important;
}

#roomSidebarArea .types-game-type-btn {
    background: #1a1a2e !important;
    border: 2px solid #e94560 !important;
    border-radius: 10px !important;
    padding: 10px 4px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 100% !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#roomSidebarArea .types-game-type-btn img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
}

#roomSidebarArea .types-game-type-btn span {
    font-size: 0.5rem !important;
    color: white !important;
    font-family: 'Minecraft', monospace !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

#roomSidebarArea .types-game-type-btn.type-selected {
    background: rgba(233, 69, 96, 0.4) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4) !important;
    transform: translateY(-2px) !important;
}

#roomSidebarArea .types-game-type-btn:hover:not(:disabled) {
    border-color: #ff6b81 !important;
    background: #252542 !important;
    transform: translateY(-1px) !important;
}

#roomSidebarArea .types-game-type-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

#roomSidebarArea .types-game-selected-list {
    display: none !important;
}

#roomSidebarArea .types-game-commit {
    width: 100% !important;
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border: none !important;
    padding: 14px 20px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
    color: white !important;
    cursor: pointer !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    font-family: 'Minecraft', monospace !important;
    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4) !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

#roomSidebarArea .types-game-commit:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.6) !important;
    transform: translateY(-1px) !important;
}

#roomSidebarArea .types-game-commit:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

#roomSidebarArea .types-game-reset-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 6px 18px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#roomSidebarArea .types-game-reset-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* Стили презентации для комнаты room.html */
.room-fullscreen {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 100vh !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

.room-fullscreen .pres-header {
    background: rgba(10, 20, 40, 0.75) !important;
    backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(233, 69, 96, 0.25) !important;
    padding: 10px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
}

.room-fullscreen .pres-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 20px !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
}

.room-fullscreen .pres-card-container {
    flex: 1 1 62% !important;
    min-width: 0 !important;
    max-width: 62% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.room-fullscreen .pres-card {
    width: 100% !important;
    background: rgba(10, 20, 40, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 30px !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 25px !important;
    gap: 30px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.room-fullscreen .pres-image-area {
    order: 2 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.room-fullscreen .pres-image-area img {
    max-width: 100% !important;
    max-height: 50vh !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6)) !important;
}

.room-fullscreen .pres-info-area {
    order: 1 !important;
    flex: 1.2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.room-fullscreen .pres-pokemon-name {
    text-align: right !important;
    font-size: 1.8rem !important;
    margin-bottom: 15px !important;
    color: #e94560 !important;
    font-family: 'Minecraft', monospace !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.6) !important;
    word-break: break-word !important;
}

.room-fullscreen .pres-description {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    padding: 16px !important;
    margin-bottom: 15px !important;
    background: rgba(15, 30, 55, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: 'Minecraft', monospace !important;
    backdrop-filter: blur(10px) !important;
    max-height: 250px !important;
    overflow-y: auto !important;
}

@media (max-width: 992px) {
    .room-fullscreen .pres-content {
        flex-direction: column !important;
        padding: 12px !important;
        gap: 16px !important;
    }
    .room-fullscreen .pres-card-container {
        max-width: 100% !important;
        flex: none !important;
    }
    .room-fullscreen .pres-card {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 16px !important;
    }
    .room-fullscreen .pres-image-area {
        order: 1 !important;
    }
    .room-fullscreen .pres-image-area img {
        max-height: 200px !important;
    }
    .room-fullscreen .pres-info-area {
        order: 2 !important;
        width: 100% !important;
    }
    .room-fullscreen .pres-pokemon-name {
        text-align: center !important;
        font-size: 1.5rem !important;
    }
    #roomSidebarArea {
        flex: none !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
    }
}

@media (max-width: 540px) {
    #roomSidebarArea .types-game-types-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    #roomSidebarArea .types-game-type-btn {
        min-height: 52px !important;
        padding: 6px 2px !important;
    }
    #roomSidebarArea .types-game-type-btn img {
        width: 28px !important;
        height: 28px !important;
    }
    #roomSidebarArea .types-game-type-btn span {
        font-size: 0.42rem !important;
    }
}

/* ============================================
   РАСКРЫТИЕ ТИПОВ
   ============================================ */

/* Контейнер-обёртка — красивая последовательная анимация */
.reveal-types-container {
    position: relative;
    width: 100%;
    border-radius: 60px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    background: linear-gradient(90deg, 
        /* Красные/Оранжевые */
        #F08030, #F85888, #C03028, #EE99AC,
        /* Жёлтые/Золотые */
        #F8D030, #E0C068, #B8A038,
        /* Зелёные/Травяные */
        #78C850, #A8B820, #98D8D8,
        /* Синие/Водные */
        #6890F0, #7038F8, #705898, #A890F0,
        /* Нейтральные/Тёмные */
        #A8A878, #705848, #A040A0, #B8B8D0,
        /* Замыкание */
        #F08030
    );
    background-size: 400% auto;
    animation: pokemonRainbow 18s linear infinite;
}

@keyframes pokemonRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* Контейнер раскрыт — увеличиваем высоту с плавной анимацией */
.reveal-types-container.types-expanded {
    padding-bottom: 250px;
    transition: padding-bottom 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* Кнопка — прозрачная */
#revealPresBtn {
    width: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    border: none;
    padding: 20px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #FFD700;
    border-radius: 60px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    text-shadow: 
        -1px -1px 0 rgba(0,0,0,0.5),
        1px -1px 0 rgba(0,0,0,0.5),
        -1px 1px 0 rgba(0,0,0,0.5),
        1px 1px 0 rgba(0,0,0,0.5),
        0 0 5px rgba(0,0,0,0.5);
}

/* Кнопка раскрыта */
#revealPresBtn.types-expanded {
    opacity: 0.7;
    font-size: 0.8rem;
    padding-top: 10px;
    padding-bottom: 10px;
    text-shadow: 
        -1px -1px 0 rgba(0,0,0,0.6),
        1px -1px 0 rgba(0,0,0,0.6),
        -1px 1px 0 rgba(0,0,0,0.6),
        1px 1px 0 rgba(0,0,0,0.6);
}


/* Панель типов — плавное появление */
.types-reveal-panel {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1), visibility 0.4s;
    z-index: 3;
}

.types-reveal-panel.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1) 0.1s, visibility 0.4s;
}

/* Карточки типов — анимация появления с задержкой */
.types-reveal-panel .reveal-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px 35px;
    border-radius: 35px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.types-reveal-panel.show .reveal-type-card {
    opacity: 1;
    transform: translateY(0);
}

.types-reveal-panel.show .reveal-type-card:nth-child(1) { transition-delay: 0.05s; }
.types-reveal-panel.show .reveal-type-card:nth-child(2) { transition-delay: 0.1s; }

.types-reveal-panel .reveal-type-card:hover {
    transform: scale(1.05);
    background: rgba(233, 69, 96, 0.4);
    border-color: #e94560;
}

.types-reveal-panel .reveal-type-card img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.types-reveal-panel .reveal-type-card span {
    font-size: 1.1rem;
    color: white;
    font-weight: bold;
}
/* ============================================
   СЖАТИЕ ОПИСАНИЯ
   ============================================ */

/* Описание — нормальное состояние */
.pres-description {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 45px;
    color: #f0f0f0;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 30px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

/* Описание сжатое — когда карточка раскрыта */
.pres-card.types-expanded .pres-description {
    margin-bottom: 15px;
    padding: 10px 20px;
    font-size: 0.9rem;
    line-height: 1.3;
    max-height: 80px;
    overflow-y: auto;
    transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
/* ============================================
   ЦВЕТНЫЕ РАМКИ ДЛЯ КАРТОЧЕК ПОКЕМОНОВ
   ============================================ */

/* Анимация мерцания для рамок */
@keyframes borderPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);
        border-color: rgba(233, 69, 96, 0.6);
    }
    70% {
        box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1);
        border-color: rgba(233, 69, 96, 1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
        border-color: rgba(233, 69, 96, 0.6);
    }
}

/* Базовый стиль карточки */
#devMode .pokemon-card {
    position: relative;
    transition: all 0.3s ease;
}

/* Цвета типов для рамок */
.border-type-normal { border-color: #A8A878; }
.border-type-fire { border-color: #F08030; }
.border-type-water { border-color: #6890F0; }
.border-type-electric { border-color: #F8D030; }
.border-type-grass { border-color: #78C850; }
.border-type-ice { border-color: #98D8D8; }
.border-type-fighting { border-color: #C03028; }
.border-type-poison { border-color: #A040A0; }
.border-type-ground { border-color: #E0C068; }
.border-type-flying { border-color: #A890F0; }
.border-type-psychic { border-color: #F85888; }
.border-type-bug { border-color: #A8B820; }
.border-type-rock { border-color: #B8A038; }
.border-type-ghost { border-color: #705898; }
.border-type-dragon { border-color: #7038F8; }
.border-type-dark { border-color: #705848; }
.border-type-steel { border-color: #B8B8D0; }
.border-type-fairy { border-color: #EE99AC; }

/* Один тип — сплошная рамка */
#devMode .pokemon-card[data-type-count="1"] {
    border: 2px solid;
    transition: all 0.3s ease;
}

/* Два типа — градиентная рамка (по диагонали) */
#devMode .pokemon-card[data-type-count="2"] {
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.3s ease;
}

/* Анимация мерцания для всех карточек */
#devMode .pokemon-card {
    animation: borderPulse 2s ease-in-out infinite;
}

/* Замедляем анимацию для карточек без типов */
#devMode .pokemon-card[data-type-count="0"] {
    animation: borderPulse 3s ease-in-out infinite;
    border-color: rgba(233, 69, 96, 0.4);
}

/* У карточек с градиентом убираем стандартную анимацию border, добавляем свою */
#devMode .pokemon-card[data-type-count="2"] {
    animation: none;
    position: relative;
    background-clip: padding-box;
}

#devMode .pokemon-card[data-type-count="2"]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--color1), var(--color2));
    border-radius: 15px;
    z-index: -1;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

#devMode .pokemon-card[data-type-count="2"]:hover::before {
    opacity: 1;
}

/* Для градиентных карточек своя анимация */
#devMode .pokemon-card[data-type-count="2"] {
    animation: borderGradientPulse 2s ease-in-out infinite;
}

@keyframes borderGradientPulse {
    0% { box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.3); }
    50% { box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(233, 69, 96, 0); }
}
/* ============================================
   ЦВЕТНЫЕ РАМКИ ДЛЯ КАРТОЧЕК ПОКЕМОНОВ
   ============================================ */

/* Анимация мерцания */
@keyframes borderPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

/* Базовый стиль карточки */
#devMode .pokemon-card {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 74px;
}

/* Контейнер списка — убираем горизонтальный скролл */
#devMode .pokemon-list,
#devMode .slides-list-panel {
    overflow-x: hidden !important;
}

/* Подсветка при наведении для всех карточек — только сдвиг и лёгкое свечение */
#devMode .pokemon-card:hover {
    transform: translateX(5px);
    filter: brightness(1.03);
    box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.2);
}

/* Карточка с одним типом */
#devMode .pokemon-card[data-type-count="1"] {
    border: 2px solid var(--card-color);
    animation: borderPulse 2s ease-in-out infinite;
}

/* Карточка с двумя типами — градиентная рамка */
#devMode .pokemon-card[data-type-count="2"] {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: none;
    position: relative;
    z-index: 0;
}

#devMode .pokemon-card[data-type-count="2"]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--color1), var(--color2));
    border-radius: 17px;
    z-index: -2;
    transition: opacity 0.3s ease;
    opacity: 0.8;
    animation: borderPulse 2s ease-in-out infinite;
}

#devMode .pokemon-card[data-type-count="2"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border-radius: 13px;
    z-index: -1;
}

/* Карточка без типов */
#devMode .pokemon-card[data-type-count="0"] {
    border: 2px solid rgba(233, 69, 96, 0.5);
    animation: borderPulse 3s ease-in-out infinite;
}

/* Активная карточка */
#devMode .pokemon-card.active {
    border: 2px solid white !important;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
}

/* У активной карточки с двумя типами отключаем псевдоэлементы */
#devMode .pokemon-card.active[data-type-count="2"]::before,
#devMode .pokemon-card.active[data-type-count="2"]::after {
    display: none;
}

/* ============================================
   ФОН ДЛЯ ОБЛАСТИ ЗАГРУЗКИ ФОТО
   ============================================ */

/* Фон для области загрузки фото покемона */
#uploadAreaDev {
    background-image: url('background/PhotoFon.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

/* Затемнение фона, чтобы фото покемона было лучше видно */
#uploadAreaDev::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 16px;
    pointer-events: none;
    z-index: 0;
}

/* Само фото покемона поверх фона */
#imagePreviewDev {
    position: relative;
    z-index: 2;
    background: transparent !important;
}

/* Плейсхолдер тоже поверх фона */
#imagePlaceholder {
    position: relative;
    z-index: 2;
}
/* ============================================
   ТЕНЬ ДЛЯ ФОТО ПОКЕМОНА
   ============================================ */

/* Тень для фото покемона */
#imagePreviewDev {
    filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.9));
    transition: filter 0.3s ease;
}

#imagePreviewDev:hover {
    filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 1));
}
/* ============================================
   СТИЛИ ДЛЯ АКТИВНОЙ КАРТОЧКИ
   ============================================ */

#devMode .pokemon-card.active .pokemon-name,
#devMode .pokemon-card.active > div div:last-child {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: bold;
}
/* ============================================
   ФИКС ОБРЕЗАНИЯ ИМЕНИ ПОКЕМОНА
   ============================================ */

#devMode .pokemon-card .pokemon-name {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.3;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 0.7rem !important;
}

#devMode .pokemon-card {
    min-height: 74px;
    height: auto;
}

#devMode .pokemon-card > div {
    min-width: 0;
    flex: 1;
}
/* ============================================
   ЭФФЕКТ БЛИКА ДЛЯ АКТИВНОЙ КАРТОЧКИ
   ============================================ */

/* Общий контейнер для всех карточек - обеспечиваем overflow hidden */
#devMode .pokemon-card.active {
    position: relative;
    overflow: hidden;
}

/* Анимация блика - используем отдельный класс, который будет добавляться через JS */
#devMode .pokemon-card.active .shine-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.7), 
        transparent
    );
    animation: shineSimple 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 9999;
}

@keyframes shineSimple {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}



/* Фикс для занавески — чтобы доходила до краёв */
.tab-btn {
    overflow: hidden;
}

.tab-btn:hover::before {
    width: 1000px;
    height: 1000px;
}

/* Кнопки действий в режиме разработчика — яркие, но приятные глазу */
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev) {
    transition: all 0.2s ease !important;
    font-weight: normal !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    color: white !important;
    border: none !important;
}

/* Вернуться к игре — ярко-жёлтый */
.back-to-play-btn {
    background: #e67e22 !important;
}
.back-to-play-btn:hover {
    background: #f39c12 !important;
    transform: translateY(-2px);
}

/* Добавить покемона — синий */
#addPokemonBtnDev {
    background: #2980b9 !important;
}
#addPokemonBtnDev:hover {
    background: #3498db !important;
    transform: translateY(-2px);
}

/* По шаблону — фиолетовый */
#templateBtn {
    background: #8e44ad !important;
}
#templateBtn:hover {
    background: #9b59b6 !important;
    transform: translateY(-2px);
}

/* Случайный — оранжевый */
#randomPokemonBtn {
    background: #d35400 !important;
}
#randomPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}

/* Сохранить — зелёный */
#savePokemonBtnDev {
    background: #27ae60 !important;
}
#savePokemonBtnDev:hover {
    background: #2ecc71 !important;
    transform: translateY(-2px);
}

/* Удалить — красный */
#deletePokemonBtnDev {
    background: #c0392b !important;
}
#deletePokemonBtnDev:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Новая коллекция — бирюзовый */
#createGameBtnDev {
    background: #16a085 !important;
}
#createGameBtnDev:hover {
    background: #1abc9c !important;
    transform: translateY(-2px);
}

/* Экспорт — тёмно-синий */
#exportCollectionBtn {
    background: #2c3e50 !important;
}
#exportCollectionBtn:hover {
    background: #34495e !important;
    transform: translateY(-2px);
}

/* Импорт — серо-синий */
#importCollectionBtn {
    background: #3a6a7a !important;
}
#importCollectionBtn:hover {
    background: #4a8a9a !important;
    transform: translateY(-2px);
}

/* Удалить коллекцию */
#deleteCurrentGameBtn {
    background: #c0392b !important;
}
#deleteCurrentGameBtn:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Очистить пустые записи */
#clearEmptyPokemonBtn {
    background: #d35400 !important;
}
#clearEmptyPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}
/* ============================================
   ГЛОБАЛЬНОЕ ЕДИНООБРАЗИЕ СКРУГЛЕНИЙ
   ============================================ */

/* Основные контейнеры */
.main-menu,
.menu-header,
.tab-content,
.game-card,
.modal-content,
.confirm-modal-content,
.completion-modal-content,
.pres-card,
.editor-panel,
.slides-list-panel,
.bg-manager,
.bg-card,
.types-game-container,
.types-game-section,
.types-game-history-panel {
    border-radius: 20px !important;
}

/* Кнопки */
.tab-btn,
.pres-nav-btn,
.close-pres-btn,
.reveal-btn,
.back-to-play-btn,
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev),
.save-btn,
.delete-btn,
.btn-confirm,
.btn-cancel,
.types-game-commit,
.types-game-reset-btn,
#singleCommitBtn,
#singleResetBtn,
.filter-toggle,
.filter-tag,
.filter-gen {
    border-radius: 30px !important;
}

/* Карточки и маленькие блоки */
.pokemon-card,
.template-pokemon-card,
.type-icon-item,
.bg-card img,
.pres-image-area img,
#uploadAreaDev,
.modal-content input,
.modal-content textarea,
#devMode input,
#devMode textarea,
#devMode select {
    border-radius: 12px !important;
}

/* Мелкие элементы */
.types-game-chip,
.types-game-remove,
.social-block,
.custom-notification,
.pres-counter,
.filter-section {
    border-radius: 16px !important;
}

/* Иконки типов и их контейнеры */
.reveal-type-card,
.types-game-type-btn,
.types-game-real-btn {
    border-radius: 14px !important;
}

/* Убираем лишние скругления у внутренних элементов */
.pres-card .reveal-types-container {
    border-radius: 40px !important;
}

/* Полоски и разделители оставляем без скруглений */
.filter-title,
.editor-title,
.bg-title,
.types-game-history-title {
    border-radius: 0 !important;
}
/* ============================================
   АНИМАЦИИ ДЛЯ КАРТОЧЕК КОЛЛЕКЦИЙ
   ============================================ */

/* Появление карточек при загрузке */
.game-card {
    opacity: 0;
    transform: translateY(30px);
    animation: collectionCardReveal 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

@keyframes collectionCardReveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Задержки для каждой карточки */
.games-grid .game-card:nth-child(1) { animation-delay: 0.05s; }
.games-grid .game-card:nth-child(2) { animation-delay: 0.10s; }
.games-grid .game-card:nth-child(3) { animation-delay: 0.15s; }
.games-grid .game-card:nth-child(4) { animation-delay: 0.20s; }
.games-grid .game-card:nth-child(5) { animation-delay: 0.25s; }
.games-grid .game-card:nth-child(6) { animation-delay: 0.30s; }

/* При наведении — плавный подъём и увеличение тени */
.game-card {
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.2);
}

.game-card:hover {
    transform: translateY(-10px) scale(1.02);
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.2);
}

/* Иконка папки внутри карточки — небольшой акцент при наведении */
.game-card:hover h3 i {
    animation: iconPop 0.3s ease-out;
}

@keyframes iconPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Кнопка удаления — появляется с небольшой задержкой при наведении */
.delete-collection-btn {
    opacity: 0.7;
    transition: all 0.2s ease;
}

.game-card:hover .delete-collection-btn {
    opacity: 1;
}

/* Подсветка краёв карточки при наведении */
.game-card {
    position: relative;
    overflow: hidden;
}

.game-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(233, 69, 96, 0.15), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.game-card:hover::after {
    left: 100%;
}
/* Кнопки действий в режиме разработчика — яркие, но приятные глазу */
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev) {
    transition: all 0.2s ease !important;
    font-weight: normal !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    color: white !important;
    border: none !important;
}

/* Вернуться к игре — ярко-жёлтый */
.back-to-play-btn {
    background: #e67e22 !important;
}
.back-to-play-btn:hover {
    background: #f39c12 !important;
    transform: translateY(-2px);
}

/* Добавить покемона — синий */
#addPokemonBtnDev {
    background: #2980b9 !important;
}
#addPokemonBtnDev:hover {
    background: #3498db !important;
    transform: translateY(-2px);
}

/* По шаблону — фиолетовый */
#templateBtn {
    background: #8e44ad !important;
}
#templateBtn:hover {
    background: #9b59b6 !important;
    transform: translateY(-2px);
}

/* Случайный — оранжевый */
#randomPokemonBtn {
    background: #d35400 !important;
}
#randomPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}

/* Сохранить — зелёный */
#savePokemonBtnDev {
    background: #27ae60 !important;
}
#savePokemonBtnDev:hover {
    background: #2ecc71 !important;
    transform: translateY(-2px);
}

/* Удалить — красный */
#deletePokemonBtnDev {
    background: #c0392b !important;
}
#deletePokemonBtnDev:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Новая коллекция — бирюзовый */
#createGameBtnDev {
    background: #16a085 !important;
}
#createGameBtnDev:hover {
    background: #1abc9c !important;
    transform: translateY(-2px);
}

/* Экспорт — тёмно-синий */
#exportCollectionBtn {
    background: #2c3e50 !important;
}
#exportCollectionBtn:hover {
    background: #34495e !important;
    transform: translateY(-2px);
}

/* Импорт — серо-синий */
#importCollectionBtn {
    background: #3a6a7a !important;
}
#importCollectionBtn:hover {
    background: #4a8a9a !important;
    transform: translateY(-2px);
}

/* Удалить коллекцию */
#deleteCurrentGameBtn {
    background: #c0392b !important;
}
#deleteCurrentGameBtn:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Очистить пустые записи */
#clearEmptyPokemonBtn {
    background: #d35400 !important;
}
#clearEmptyPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}
/* ============================================
   ГЛОБАЛЬНОЕ ЕДИНООБРАЗИЕ СКРУГЛЕНИЙ
   ============================================ */

/* Основные контейнеры */
.main-menu,
.menu-header,
.tab-content,
.game-card,
.modal-content,
.confirm-modal-content,
.completion-modal-content,
.pres-card,
.editor-panel,
.slides-list-panel,
.bg-manager,
.bg-card,
.types-game-container,
.types-game-section,
.types-game-history-panel {
    border-radius: 20px !important;
}

/* Кнопки */
.tab-btn,
.pres-nav-btn,
.close-pres-btn,
.reveal-btn,
.back-to-play-btn,
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev),
.save-btn,
.delete-btn,
.btn-confirm,
.btn-cancel,
.types-game-commit,
.types-game-reset-btn,
#singleCommitBtn,
#singleResetBtn,
.filter-toggle,
.filter-tag,
.filter-gen {
    border-radius: 30px !important;
}

/* Карточки и маленькие блоки */
.pokemon-card,
.template-pokemon-card,
.type-icon-item,
.bg-card img,
.pres-image-area img,
#uploadAreaDev,
.modal-content input,
.modal-content textarea,
#devMode input,
#devMode textarea,
#devMode select {
    border-radius: 12px !important;
}

/* Мелкие элементы */
.types-game-chip,
.types-game-remove,
.social-block,
.custom-notification,
.pres-counter,
.filter-section {
    border-radius: 16px !important;
}

/* Иконки типов и их контейнеры */
.reveal-type-card,
.types-game-type-btn,
.types-game-real-btn {
    border-radius: 14px !important;
}

/* Убираем лишние скругления у внутренних элементов */
.pres-card .reveal-types-container {
    border-radius: 40px !important;
}

/* Полоски и разделители оставляем без скруглений */
.filter-title,
.editor-title,
.bg-title,
.types-game-history-title {
    border-radius: 0 !important;
}
/* Просто красим обычный select */
#gameSelectDev {
    display: inline-block !important;
    cursor: pointer;
    transition: all 0.25s ease !important;
    background: #1a1a2e !important;
    border: 2px solid #e94560 !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.7rem !important;
    min-width: 180px !important;
}

#gameSelectDev:hover {
    background: #2a2a4e !important;
    border-color: #ff6b81 !important;
    transform: translateY(-2px);
}

#gameSelectDev:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.3);
}
/* ============================================
   АНИМАЦИЯ СМЕНЫ КОЛЛЕКЦИИ
   ============================================ */

/* Анимация сжатия каждой карточки */
.card-collapsing {
    animation: cardCollapse 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes cardCollapse {
    0% {
        opacity: 1;
        transform: scale(1);
        margin-bottom: 12px;
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
        margin-bottom: 0;
        height: 0;
        padding: 0;
    }
}

/* Анимация появления карточек - каждая со своим сдвигом */
.pokemon-card {
    opacity: 1;
}

.pokemon-card.card-enter {
    animation: cardEnter 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

@keyframes cardEnter {
    0% {
        opacity: 0;
        transform: translateX(60px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
/* Анимация смены коллекции - простая версия */
@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.pokemon-card.slide-out {
    animation: slideOut 0.2s ease forwards !important;
}

.pokemon-card.slide-in {
    animation: slideIn 0.3s ease forwards !important;
}
/* Анимация смены коллекции */
.slide-out {
    animation: slideOutAnim 0.2s ease forwards !important;
}

.slide-in {
    animation: slideInAnim 0.3s ease forwards !important;
}

@keyframes slideOutAnim {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes slideInAnim {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ============================================
   АНИМАЦИЯ СМЕНЫ ВЫБРАННОГО ПОКЕМОНА
   ============================================ */

/* Анимация для имени */
.pokemon-name-changing {
    animation: namePulse 0.25s ease-out;
}

@keyframes namePulse {
    0% {
        transform: scale(1);
        color: #e94560;
    }
    40% {
        transform: scale(1.02);
        color: #ff6b81;
    }
    100% {
        transform: scale(1);
        color: #e94560;
    }
}

/* Анимация для описания */
.pokemon-desc-changing {
    animation: descFade 0.25s ease-out;
}

@keyframes descFade {
    0% {
        opacity: 0.5;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Анимация для картинки */
.pokemon-image-changing {
    animation: imagePop 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

@keyframes imagePop {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Анимация для поля загрузки фото */
.upload-area-changing {
    animation: uploadAreaPulse 0.25s ease-out;
}

@keyframes uploadAreaPulse {
    0% {
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);
    }
    50% {
        border-color: #ff6b81;
        box-shadow: 0 0 0 5px rgba(233, 69, 96, 0.2);
    }
    100% {
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

/* Анимация для сетки типов */
.types-grid-changing {
    animation: typesSlide 0.25s ease-out;
}

@keyframes typesSlide {
    0% {
        opacity: 0;
        transform: translateX(-8px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ============================================
   АНИМАЦИЯ ЗАЛИВКИ ВЫБРАННОГО ТИПА
   ============================================ */

/* Базовый стиль иконки типа */
.type-icon-item {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Анимация появления выбранного состояния */
.type-icon-item.selected {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border-color: white !important;
    transform: scale(1.02);
    animation: selectGlow 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

/* Анимация снятия выбора */
.type-icon-item.deselecting {
    animation: deselectShrink 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes selectGlow {
    0% {
        transform: scale(0.95);
        background: #1a1a2e;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.7);
    }
    50% {
        transform: scale(1.05);
        background: linear-gradient(135deg, #e94560, #c62a47);
        box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.3);
    }
    100% {
        transform: scale(1.02);
        background: linear-gradient(135deg, #e94560, #c62a47);
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

@keyframes deselectShrink {
    0% {
        transform: scale(1.02);
        background: linear-gradient(135deg, #e94560, #c62a47);
        opacity: 1;
    }
    50% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        background: #1a1a2e;
        opacity: 1;
    }
}

/* Пульсация при добавлении нового типа */
.type-icon-item.adding {
    animation: typeAddedPulse 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes typeAddedPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #2ecc71;
    }
    30% {
        transform: scale(1.1);
        box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.5);
        border-color: #2ecc71;
    }
    70% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #2ecc71;
        border-color: #e94560;
    }
}

/* Пульсация при удалении типа */
.type-icon-item.removing {
    animation: typeRemovedPulse 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes typeRemovedPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #e74c3c;
    }
    40% {
        transform: scale(0.92);
        box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.4);
        border-color: #e74c3c;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #e74c3c;
        border-color: #e94560;
    }
}
/* ============================================
   ЗАКРУЧЕННАЯ АНИМАЦИЯ ДЛЯ СЛУЧАЙНОГО ПОКЕМОНА
   ============================================ */

/* Анимация для имени - закручивается сверху */
.random-name-animate {
    animation: randomNameTwist 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards !important;
}

@keyframes randomNameTwist {
    0% {
        opacity: 0;
        transform: translateY(-30px) rotateX(-90deg);
        letter-spacing: 8px;
    }
    50% {
        opacity: 0.7;
        transform: translateY(5px) rotateX(10deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
        letter-spacing: normal;
    }
}

/* Анимация для описания - закручивается изнутри */
.random-desc-animate {
    animation: randomDescTwist 0.45s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards !important;
}

@keyframes randomDescTwist {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
        filter: blur(4px);
    }
    40% {
        transform: scale(1.02) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
        filter: blur(0);
    }
}

/* Анимация для картинки - вылетает с вращением */
.random-image-animate {
    animation: randomImageTwist 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards !important;
}

@keyframes randomImageTwist {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-180deg);
    }
    40% {
        transform: scale(1.05) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* Анимация для области загрузки */
.random-upload-animate {
    animation: randomUploadPulse 0.4s ease-out forwards !important;
}

@keyframes randomUploadPulse {
    0% {
        transform: scale(0.95);
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.5);
    }
    50% {
        transform: scale(1.02);
        border-color: #ff6b81;
        box-shadow: 0 0 0 8px rgba(233, 69, 96, 0.2);
    }
    100% {
        transform: scale(1);
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

/* Анимация для типов - закрученная */
.type-icon-item.random-type-animate {
    animation: randomTypeTwist 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards !important;
}

@keyframes randomTypeTwist {
    0% {
        opacity: 0;
        transform: rotate(-180deg) scale(0.2);
        filter: blur(4px);
    }
    40% {
        transform: rotate(10deg) scale(1.1);
        filter: blur(0);
    }
    70% {
        transform: rotate(-5deg) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
        filter: blur(0);
    }
}
/* ============================================
   РЕГУЛЯТОР МАСШТАБА ПРЕЗЕНТАЦИИ
   ============================================ */

.pres-zoom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 14px;
    border-radius: 40px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.pres-zoom-btn {
    background: rgba(233, 69, 96, 0.8);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .pres-zoom-btn:hover {
        background: #e94560;
        transform: scale(1.1);
        box-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
    }

    .pres-zoom-btn:active {
        transform: scale(0.95);
    }

.pres-zoom-reset {
    width: auto;
    padding: 0 12px;
    border-radius: 20px;
    font-size: 0.6rem;
}

.pres-zoom-value {
    color: #e94560;
    font-size: 0.7rem;
    font-family: 'Minecraft', monospace;
    min-width: 42px;
    text-align: center;
    font-weight: bold;
}

.pres-volume-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(233, 69, 96, 0.3);
}

.pres-volume-controls i {
    color: #e94560;
    font-size: 0.8rem;
}

.pres-volume-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(233, 69, 96, 0.25);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.pres-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

.pres-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

/* ============================================
   ОКНО РАСКРЫТИЯ ТИПОВ (Один игрок)
   ============================================ */
.type-reveal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.92);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

.type-reveal-overlay.active {
    display: flex !important;
}

.type-reveal-overlay .reveal-title {
    font-family: 'Minecraft', monospace;
    color: #f0f0f0;
    font-size: 2.2rem;
    margin-bottom: 80px;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.6);
    transition: margin-bottom 0.5s ease;
}

.type-reveal-overlay .reveal-title.shrink {
    margin-bottom: 15px;
}

.type-reveal-overlay .reveal-types-row {
    display: flex;
    gap: 30px;
    align-items: center;
    transform: scale(1.5);
    margin-bottom: 20px;
    transition: transform 0.5s ease, margin-bottom 0.5s ease;
}

.type-reveal-overlay .reveal-types-row.shrink {
    transform: scale(0.7);
    margin-bottom: 0;
}

.type-reveal-overlay .reveal-type-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 30px;
    border-radius: 20px;
    background: rgba(15, 52, 96, 0.6);
    border: 2px solid rgba(233, 69, 96, 0.5);
    animation: typePopIn 0.4s ease backwards;
}

.type-reveal-overlay .reveal-type-item:nth-child(2) {
    animation-delay: 0.15s;
}

.type-reveal-overlay .reveal-type-item img {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 10px rgba(233, 69, 96, 0.5));
}

.type-reveal-overlay .reveal-type-item span {
    font-family: 'Minecraft', monospace;
    color: #e0e0e0;
    font-size: 1.1rem;
    text-transform: capitalize;
}

@keyframes typePopIn {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.reveal-pokemon-container {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
}

.reveal-pokemon-container.show {
    opacity: 1;
    transform: translateY(0);
}

.reveal-pokemon-container img {
    width: 360px;
    height: 360px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(233, 69, 96, 0.5));
    animation: typePopIn 0.5s ease;
}

.reveal-pokemon-name {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 1.5rem;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.4);
    text-transform: capitalize;
}

.reveal-next-btn {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    padding: 14px 40px;
    background: linear-gradient(135deg, #e94560, #c23152);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    margin-top: 30px;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.4s ease 0.8s forwards;
}

.reveal-next-btn:hover {
    background: linear-gradient(135deg, #ff6b81, #e94560);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
}

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

/* ============================================
   МОДАЛЬНОЕ ОКНО ЗАВЕРШЕНИЯ РАУНДА (Один игрок)
   ============================================ */
.completion-single {
    width: 620px !important;
    max-height: 85vh;
    overflow-y: auto;
    padding: 30px 35px !important;
}

.completion-single::-webkit-scrollbar {
    width: 6px;
}
.completion-single::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

.completion-trophy {
    font-size: 2.2rem !important;
    color: #f39c12 !important;
    margin-bottom: 10px !important;
}

.completion-collection {
    font-size: 0.7rem;
    color: #ccc;
    margin-bottom: 15px !important;
}

.completion-mode-label {
    font-size: 0.6rem;
    color: #e94560;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px !important;
}
.completion-collection strong {
    color: #e94560;
}

.completion-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 18px;
    padding: 12px 0;
    background: rgba(233, 69, 96, 0.1);
    border-radius: 15px;
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.completion-score-label {
    font-size: 0.6rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.completion-score-value {
    font-size: 2rem;
    color: #f39c12;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(243, 156, 18, 0.4);
}

.completion-history-list {
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 18px;
    padding-right: 5px;
}
.completion-history-list::-webkit-scrollbar {
    width: 4px;
}
.completion-history-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 2px;
}

.completion-history-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 10px;
    margin-bottom: 6px;
    font-size: 0.65rem;
    border: 1px solid rgba(233, 69, 96, 0.15);
}

.completion-history-num {
    color: #888;
    font-size: 0.6rem;
    min-width: 18px;
    text-align: center;
}

.completion-history-img img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(233, 69, 96, 0.4);
}
.completion-history-img .no-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(233, 69, 96, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 0.8rem;
}

.completion-history-info {
    flex: 1;
    min-width: 0;
}

.completion-history-name {
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.completion-history-types,
.completion-history-guess {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.completion-history-types .label,
.completion-history-guess .label {
    color: #999;
    font-size: 0.55rem;
}

.type-icon-sm {
    width: 20px;
    height: 20px;
}
.type-icon-sm.guessed {
    filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.6));
}
.type-icon-sm.guessed-extra {
    filter: drop-shadow(0 0 4px rgba(241, 196, 15, 0.6));
}

.no-guess {
    color: #777;
    font-style: italic;
    font-size: 0.55rem;
}

.completion-history-earned {
    font-weight: bold;
    font-size: 0.7rem;
    min-width: 35px;
    text-align: right;
}
.completion-history-earned.positive { color: #2ecc71; }
.completion-history-earned.negative { color: #e74c3c; }

.completion-save-block {
    margin-bottom: 12px;
}

.completion-save-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.completion-name-input {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.3s;
    margin-top: 0 !important;
}
.completion-name-input:focus {
    border-color: #e94560;
}
.completion-name-input::placeholder {
    color: #777;
}

.completion-name-clear {
    flex: 0 0 auto;
    background: none !important;
    border: none !important;
    color: #888 !important;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    line-height: 1;
    transition: color 0.2s;
    transform: none !important;
    box-shadow: none !important;
}
.completion-name-clear:hover {
    color: #e94560 !important;
    transform: none !important;
    box-shadow: none !important;
}

.completion-remember {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #aaa;
    font-size: 0.6rem;
    cursor: pointer;
    white-space: nowrap;
    margin-top: 0 !important;
}
.completion-remember input[type="checkbox"] {
    accent-color: #e94560;
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin-top: 0 !important;
}

.completion-desc-input {
    width: 100%;
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.3s;
    margin-top: 10px;
    box-sizing: border-box;
}
.completion-desc-input:focus {
    border-color: #e94560;
}
.completion-desc-input::placeholder {
    color: #777;
}

.completion-save-btn {
    width: 100%;
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    font-size: 0.7rem !important;
}
.completion-save-btn:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4) !important;
}
.completion-save-btn:disabled {
    cursor: default;
}

.completion-close-btn {
    background: linear-gradient(135deg, #1a1a2e, #0f3460) !important;
    border: 1px solid #e94560 !important;
    padding: 8px 25px !important;
    border-radius: 12px !important;
    font-size: 0.65rem !important;
}

/* ============================================
   ВКЛАДКА "ИСТОРИИ РАУНДОВ"
   ============================================ */
.histories-section {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

.hist-mode-switcher {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.hist-mode-btn {
    background: rgba(15, 52, 96, 0.3);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 50px;
    color: rgba(255,255,255,0.6);
    padding: 8px 16px;
    font-size: 0.7rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hist-mode-btn.active {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #e94560;
}

.hist-mode-count {
    font-size: 0.55rem;
    opacity: 0.7;
}

.histories-mode-block {
    display: none;
    background: rgba(15, 52, 96, 0.3);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 20px;
    padding: 20px;
    width: 100%;
}

.histories-mode-block.hist-active {
    display: block;
}

.histories-mode-title {
    color: #e94560;
    font-size: 0.85rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.histories-mode-chevron {
    font-size: 0.6rem;
    color: #888;
    transition: transform 0.3s ease;
}

.histories-mode-block.collapsed .histories-mode-chevron {
    transform: rotate(-90deg);
}

.histories-mode-block.collapsed .history-empty,
.histories-mode-block.collapsed .history-card {
    display: none;
}

.histories-mode-count {
    color: #888;
    font-size: 0.55rem;
    font-style: italic;
}

.history-card {
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 15px;
    margin-bottom: 12px;
    transition: all 0.3s;
    overflow: hidden;
}
.history-card:hover {
    border-color: #e94560;
    box-shadow: 0 4px 20px rgba(233, 69, 96, 0.2);
}

.history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.history-card-header:hover {
    background: rgba(233, 69, 96, 0.05);
}

.history-card-toggle {
    color: #888;
    font-size: 0.6rem;
    margin-left: 8px;
    transition: transform 0.3s;
}
.history-card.expanded .history-card-toggle {
    transform: rotate(180deg);
}

.history-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 15px;
}
.history-card.expanded .history-card-body {
    max-height: 600px;
    padding: 0 15px 15px 15px;
}

.history-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.history-card-name {
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}
.history-card-name:hover {
    color: #e94560;
}

.history-card-desc {
    color: #ccc;
    font-size: 0.6rem;
    font-style: italic;
    cursor: pointer;
    transition: color 0.2s;
    margin-top: 2px;
}
.history-card-desc:hover {
    color: #e94560;
}
.history-card-desc-empty {
    color: #666;
}
.history-card-desc-empty:hover {
    color: #888;
}

.history-edit-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #e94560;
    border-radius: 6px;
    padding: 4px 8px;
    color: #fff;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    outline: none;
    margin-top: 2px;
    box-sizing: border-box;
}

.history-card-collection {
    color: #aaa;
    font-size: 0.6rem;
}

.history-card-date {
    color: #777;
    font-size: 0.55rem;
}

.history-card-score {
    font-size: 1.1rem;
    color: #f39c12;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

.history-card-rounds {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.history-round-pokemon {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 52, 96, 0.5);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.55rem;
    color: #ccc;
}

.history-round-pokemon img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.history-round-types {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.history-round-arrow {
    color: #666;
    font-size: 0.55rem;
    margin: 0 2px;
}

.history-round-guessed .type-icon-sm {
    filter: drop-shadow(0 0 3px rgba(46, 204, 113, 0.5));
}

.history-round-skipped {
    color: #666;
    font-size: 0.5rem;
    font-style: italic;
}

.history-card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.history-card-btn {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #e94560;
    padding: 5px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.3s;
}
.history-card-btn:hover {
    background: #e94560;
    color: #fff;
}
.history-card-btn.delete-btn:hover {
    background: #c0392b;
    border-color: #c0392b;
}

.history-empty {
    color: #666;
    font-size: 0.65rem;
    text-align: center;
    padding: 30px;
    font-style: italic;
}

/* ============================================
   ТАБЛИЦА ЛИДЕРОВ — СТИЛЬ РЕЖИМА РАЗРАБОТЧИКА
   ============================================ */

@keyframes lbPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes lbGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(233,69,96,0.15); }
    50% { box-shadow: 0 0 30px rgba(233,69,96,0.3); }
}

@keyframes lbFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes lbScaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes lbFadeSlide {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.lb-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}

/* ---- Header (dev panel style) ---- */
.lb-header {
    text-align: center;
    padding: 28px 20px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    animation: lbGlow 3s ease-in-out infinite;
}

.lb-header-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(233,69,96,0.06) 0%, transparent 60%);
    animation: lbPulse 4s ease-in-out infinite;
    pointer-events: none;
}

.lb-header i:first-child {
    font-size: 2.2rem;
    color: #e94560;
    margin-bottom: 8px;
    display: block;
    filter: drop-shadow(0 0 10px rgba(233,69,96,0.4));
    animation: lbFloat 3s ease-in-out infinite;
}

.lb-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    color: white;
    margin: 0 0 6px;
    letter-spacing: 1px;
}

.lb-header p {
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
    margin: 0;
}

/* ---- Tabs (dev toggle style) ---- */
.lb-tabs {
    display: flex;
    gap: 4px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 4px;
}

.lb-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.lb-tab:hover {
    color: rgba(255,255,255,0.7);
    background: rgba(233, 69, 96, 0.1);
}

.lb-tab.active {
    color: white;
    background: linear-gradient(135deg, #e94560, #c62a47);
    box-shadow: 0 2px 12px rgba(233, 69, 96, 0.4);
}

.lb-tab i {
    font-size: 0.7rem;
}

/* ---- Tab Content ---- */
.lb-tab-content {
    display: none;
    animation: lbFadeSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lb-tab-content.active {
    display: block;
}

/* ---- Sub-tabs ---- */
.lb-tabs .lb-subtab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.35);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.lb-tabs .lb-subtab:hover {
    color: rgba(255,255,255,0.6);
    background: rgba(233, 69, 96, 0.08);
}

.lb-tabs .lb-subtab.active {
    color: white;
    background: rgba(233, 69, 96, 0.3);
    box-shadow: inset 0 0 10px rgba(233, 69, 96, 0.2);
}

.lb-tabs .lb-subtab i {
    font-size: 0.6rem;
}

.lb-subtab-content {
    animation: lbFadeSlide 0.3s ease;
}

/* ---- Stats Row ---- */
.lb-stats-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.lb-stat-card {
    flex: 1;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 14px 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.lb-stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    transition: left 0.5s;
}

.lb-stat-card:hover::after {
    left: 200%;
}

.lb-stat-card:hover {
    transform: translateY(-3px);
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.25);
}

.lb-stat-card--rounds {
    border-color: rgba(99,144,240,0.4);
}

.lb-stat-card--rounds:hover {
    box-shadow: 0 5px 20px rgba(99,144,240,0.25);
    border-color: #6390f0;
}

.lb-stat-card--perfect {
    border-color: rgba(46,204,113,0.4);
}

.lb-stat-card--perfect:hover {
    box-shadow: 0 5px 20px rgba(46,204,113,0.25);
    border-color: #2ecc71;
}

.lb-stat-card--best {
    border-color: rgba(255,215,0,0.4);
}

.lb-stat-card--best:hover {
    box-shadow: 0 5px 20px rgba(255,215,0,0.25);
    border-color: #ffd700;
}

.lb-stat-icon {
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.lb-stat-card--rounds .lb-stat-icon { color: #6390f0; }
.lb-stat-card--perfect .lb-stat-icon { color: #2ecc71; }
.lb-stat-card--best .lb-stat-icon { color: #ffd700; }

.lb-stat-value {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: white;
    font-weight: bold;
}

.lb-stat-label {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    margin-top: 3px;
}

/* ---- Mode Block ---- */
.lb-mode-block {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    padding: 22px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
}

.lb-mode-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
}

.lb-mode-block--speed::before { background: linear-gradient(90deg, #f7d02c, #ee8130); }
.lb-mode-block--check::before { background: linear-gradient(90deg, #2ecc71, #3498db); }
.lb-mode-block--single::before { background: linear-gradient(90deg, #e94560, #d63384); }

.lb-mode-block:hover {
    border-color: rgba(233, 69, 96, 0.35);
}

/* ---- Podium ---- */
.lb-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 0 0;
}

.lb-podium-item {
    text-align: center;
    padding: 14px 10px 10px;
    border-radius: 16px 16px 0 0;
    position: relative;
    min-width: 80px;
    animation: lbScaleIn 0.5s ease backwards;
    transition: all 0.3s;
}

.lb-podium-item:hover {
    transform: translateY(-4px);
}

.lb-podium-first {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(255,215,0,0.5);
    border-bottom: none;
    padding-top: 18px;
    order: 2;
    animation-delay: 0.1s;
}

.lb-podium-first:hover {
    box-shadow: 0 5px 20px rgba(255,215,0,0.25);
    border-color: #ffd700;
}

.lb-podium-second {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(192,192,192,0.4);
    border-bottom: none;
    order: 1;
    animation-delay: 0.2s;
}

.lb-podium-second:hover {
    box-shadow: 0 5px 20px rgba(192,192,192,0.2);
    border-color: #c0c0c0;
}

.lb-podium-third {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(205,127,50,0.4);
    border-bottom: none;
    order: 3;
    animation-delay: 0.3s;
}

.lb-podium-third:hover {
    box-shadow: 0 5px 20px rgba(205,127,50,0.2);
    border-color: #cd7f32;
}

.lb-podium-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    border: 2px solid rgba(233,69,96,0.3);
}

.lb-podium-first .lb-podium-avatar { background: linear-gradient(135deg, #ffd700, #ffaa00); box-shadow: 0 0 12px rgba(255,215,0,0.5); border-color: #ffd700; }
.lb-podium-second .lb-podium-avatar { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); box-shadow: 0 0 12px rgba(192,192,192,0.4); border-color: #c0c0c0; }
.lb-podium-third .lb-podium-avatar { background: linear-gradient(135deg, #cd7f32, #b87333); box-shadow: 0 0 12px rgba(205,127,50,0.4); border-color: #cd7f32; }

.lb-podium-medal {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.lb-podium-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    margin: 0 auto;
    letter-spacing: 0.5px;
}

.lb-podium-score {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #e94560;
    font-weight: bold;
    margin-top: 4px;
}

.lb-guest-tag {
    display: inline-block;
    font-size: 0.5rem;
    background: rgba(255,255,255,0.15);
    color: #ccc;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 1px 4px;
    margin-left: 3px;
    vertical-align: middle;
    font-family: 'Minecraft', monospace;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.lb-guest-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: #666;
    border: 1px solid #444;
    border-radius: 50%;
    font-size: 8px;
    line-height: 14px;
    text-align: center;
    color: #ccc;
    font-weight: bold;
}

/* ---- Category ---- */
.lb-category {
    background: #1a1a2e;
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 14px;
    margin-bottom: 12px;
    transition: all 0.3s;
}

.lb-category:hover {
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.15);
}

.lb-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e94560;
}

.lb-category-label {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 0.7rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 1px;
}

.lb-category-label i {
    font-size: 0.6rem;
    opacity: 0.7;
}

.lb-category-count {
    color: rgba(255,255,255,0.3);
    font-size: 0.5rem;
    font-family: 'Minecraft', monospace;
}

/* ---- Rows ---- */
.lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    margin-bottom: 4px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.lb-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background 0.3s;
}

.lb-row:hover {
    background: rgba(233, 69, 96, 0.08);
    border-color: rgba(233, 69, 96, 0.2);
    transform: translateX(3px);
}

.lb-row:hover::before {
    background: #e94560;
}

.lb-medal {
    font-size: 1.1rem;
    min-width: 30px;
    text-align: center;
    animation: lbFloat 2s ease-in-out infinite;
}

.lb-rank {
    color: rgba(255,255,255,0.3);
    font-size: 0.65rem;
    min-width: 30px;
    text-align: center;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
}

.lb-row-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lb-row-name {
    color: white;
    font-size: 0.68rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Minecraft', monospace;
}

.lb-row-meta {
    color: rgba(255,255,255,0.3);
    font-size: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-row-score {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 0.8rem;
    font-weight: bold;
    min-width: 50px;
    text-align: right;
    text-shadow: 0 0 8px rgba(233,69,96,0.3);
}

/* ---- Best ---- */
.lb-category-best {
    margin-top: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 1px solid rgba(255,165,0,0.3);
    border-radius: 10px;
    color: #ffa500;
    font-size: 0.55rem;
    text-align: center;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s;
}

.lb-category-best:hover {
    border-color: #ffa500;
    box-shadow: 0 3px 12px rgba(255,165,0,0.2);
}

.lb-category-best i {
    margin-right: 4px;
    filter: drop-shadow(0 0 4px rgba(255,165,0,0.4));
}

/* ---- Horizontal Scroll Row ---- */
.lb-scroll-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 2px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.lb-scroll-row::-webkit-scrollbar { height: 5px; }
.lb-scroll-row::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.lb-scroll-row::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.3); border-radius: 4px; }
.lb-scroll-row::-webkit-scrollbar-thumb:hover { background: rgba(233,69,96,0.6); }

.lb-scroll-card {
    flex: 0 0 130px;
    scroll-snap-align: start;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    transition: all 0.3s;
    position: relative;
}
.lb-scroll-card:first-child {
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
}
.lb-scroll-card:nth-child(2) {
    border-color: rgba(192, 192, 192, 0.4);
}
.lb-scroll-card:nth-child(3) {
    border-color: rgba(205, 127, 50, 0.4);
}
.lb-scroll-card:hover {
    transform: translateY(-3px);
    border-color: rgba(233, 69, 96, 0.5);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.2);
}

.lb-scroll-medal {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.5));
}
.lb-scroll-rank {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    font-weight: 700;
}

.lb-scroll-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e94560, #c23152);
    border: 2px solid rgba(233, 69, 96, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    position: relative;
}
.lb-scroll-card:first-child .lb-scroll-avatar {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255,215,0,0.5);
}
.lb-scroll-card:nth-child(2) .lb-scroll-avatar {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    border-color: #c0c0c0;
    box-shadow: 0 0 12px rgba(192,192,192,0.4);
}
.lb-scroll-card:nth-child(3) .lb-scroll-avatar {
    background: linear-gradient(135deg, #cd7f32, #b87333);
    border-color: #cd7f32;
    box-shadow: 0 0 12px rgba(205,127,50,0.4);
}

.lb-scroll-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: visible !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}
.lb-scroll-meta {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
}
.lb-scroll-score {
    font-size: 1.1rem;
    font-weight: 900;
    color: #e94560;
    text-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

/* ---- Empty ---- */
.lb-empty {
    color: rgba(255,255,255,0.2);
    font-size: 0.6rem;
    text-align: center;
    padding: 15px;
    font-style: italic;
}

.lb-empty-full {
    text-align: center;
    padding: 50px 20px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px dashed rgba(233, 69, 96, 0.3);
    color: rgba(255,255,255,0.3);
    font-size: 0.7rem;
    line-height: 1.6;
}

.lb-empty-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    color: rgba(233,69,96,0.25);
    animation: lbFloat 3s ease-in-out infinite;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .lb-podium {
        gap: 6px;
    }
    .lb-podium-item {
        min-width: 60px;
        padding: 10px 6px;
    }
    .lb-podium-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
    .lb-scroll-card {
        flex: 0 0 110px;
        padding: 10px 8px;
    }
    .lb-scroll-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }
    .lb-scroll-score {
        font-size: 0.95rem;
    }
    .lb-stats-row {
        gap: 6px;
    }
    .lb-stat-card {
        padding: 10px 6px;
    }
}

/* ============================================
   МОДАЛЬНЫЕ ОКНА НАСТРОЙКИ РЕЖИМОВ
   ============================================ */
.mode-setup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.92);
    z-index: 1000002 !important;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}
.mode-setup-overlay.active {
    display: flex !important;
}

.mode-setup-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 30px;
    padding: 35px 40px;
    text-align: center;
    color: white;
    width: 420px;
    max-width: 90%;
    box-shadow: 0 0 70px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}

.mode-setup-modal h2 {
    color: #e94560;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.mode-setup-desc {
    font-size: 0.65rem;
    color: #bbb;
    margin-bottom: 20px;
    line-height: 1.5;
}

.mode-setup-options {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mode-setup-btn {
    background: rgba(15, 52, 96, 0.6);
    border: 2px solid rgba(233, 69, 96, 0.4);
    color: white;
    padding: 12px 20px;
    border-radius: 15px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 70px;
}
.mode-setup-btn:hover {
    background: #e94560;
    border-color: #e94560;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
}

.mode-setup-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.mode-setup-custom label {
    color: #aaa;
    font-size: 0.6rem;
}

.mode-setup-input {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    width: 100px;
    text-align: center;
    outline: none;
}
.mode-setup-input:focus {
    border-color: #e94560;
}

.mode-setup-go-btn {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s;
}
.mode-setup-go-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(233, 69, 96, 0.4);
}

.mode-setup-cancel {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #999;
    padding: 8px 20px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s;
}
.mode-setup-cancel:hover {
    border-color: #e94560;
    color: #e94560;
}

/* ============================================
   ТАЙМЕР "НА СКОРОСТЬ!"
   ============================================ */
.speed-timer-overlay {
    display: none;
}
.speed-timer-overlay.active {
    display: block !important;
}

.speed-timer-inline {
    display: none;
}
.speed-timer-inline.active {
    display: inline-flex !important;
    align-items: center;
}

.speed-timer-value {
    background: rgba(15, 52, 96, 0.85);
    backdrop-filter: blur(15px);
    border: 2px solid #e94560;
    border-radius: 40px;
    padding: 4px 16px;
    font-size: 0.85rem;
    color: #fff;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.6);
    box-shadow: 0 0 30px rgba(233, 69, 96, 0.3);
    transition: all 0.3s;
    white-space: nowrap;
}

.speed-timer-value.warning {
    border-color: #f39c12;
    color: #f39c12;
    text-shadow: 0 0 15px rgba(243, 156, 18, 0.6);
    box-shadow: 0 0 30px rgba(243, 156, 18, 0.3);
    animation: timerPulse 1s infinite;
}

.speed-timer-value.danger {
    border-color: #e74c3c;
    color: #e74c3c;
    text-shadow: 0 0 15px rgba(231, 76, 60, 0.6);
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.3);
    animation: timerPulse 0.5s infinite;
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   СКРОЛЛ-БАРЫ ДЛЯ МОДАЛОК
   ============================================ */
.mode-setup-modal::-webkit-scrollbar {
    width: 5px;
}
.mode-setup-modal::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

/* ============================================
   УВЕДОМЛЕНИЕ ТИПОВ "НА СКОРОСТЬ!" (сверху по центру)
   ============================================ */
.speed-type-notification {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(-30px);
    z-index: 1000003 !important;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    backdrop-filter: blur(20px);
    border: 2px solid #e94560;
    border-radius: 20px;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Minecraft', monospace;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 30px rgba(233, 69, 96, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.speed-type-notification.active {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

.speed-type-label {
    color: #ccc;
    font-size: 0.65rem;
    white-space: nowrap;
}

.speed-type-icons {
    display: flex;
    gap: 10px;
}

.speed-type-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 5px 10px;
    animation: speedTypePop 0.3s ease backwards;
}

.speed-type-item:nth-child(2) {
    animation-delay: 0.1s;
}

.speed-type-item img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 6px rgba(233, 69, 96, 0.4));
}

.speed-type-item span {
    color: #fff;
    font-size: 0.6rem;
    text-transform: capitalize;
}

@keyframes speedTypePop {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* ============================================
   МОДАЛЬНОЕ ОКНО ПОДТВЕРЖДЕНИЯ ВЫХОДА
   ============================================ */
.exit-confirm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.85);
    z-index: 1000002 !important;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}

.exit-confirm-overlay.active {
    display: flex !important;
}

.exit-confirm-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    text-align: center;
    color: white;
    width: 380px;
    max-width: 90%;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}

.exit-confirm-modal i {
    font-size: 2rem;
    color: #f39c12;
    margin-bottom: 12px;
}

.exit-confirm-modal h3 {
    color: #e94560;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.exit-confirm-modal p {
    color: #bbb;
    font-size: 0.6rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.exit-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.exit-confirm-btn {
    padding: 10px 22px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.exit-confirm-btn.yes {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}
.exit-confirm-btn.yes:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.5);
}

.exit-confirm-btn.no {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: white;
}
.exit-confirm-btn.no:hover {
    background: #e94560;
    transform: scale(1.05);
}

/* ============================================
   МОДАЛЬНОЕ ОКНО ОЧИСТКИ СЛУЧАЙНЫХ КОЛЛЕКЦИЙ
   ============================================ */
.clear-random-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 1000002 !important;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}

.clear-random-overlay.active {
    display: flex !important;
}

.clear-random-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    text-align: center;
    color: white;
    width: 500px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}

.clear-random-modal h2 {
    color: #e94560;
    font-size: 1rem;
    margin-bottom: 8px;
}

.clear-random-modal p {
    color: #bbb;
    font-size: 0.6rem;
    margin-bottom: 18px;
}

.clear-random-list {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 18px;
    text-align: left;
}

.clear-random-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 10px;
    margin-bottom: 6px;
    border: 1px solid rgba(233, 69, 96, 0.15);
    cursor: pointer;
    transition: all 0.3s;
}

.clear-random-item:hover {
    border-color: #e94560;
}

.clear-random-item.excluded {
    opacity: 0.4;
    border-color: rgba(46, 204, 113, 0.4);
}

.clear-random-item input[type="checkbox"] {
    accent-color: #2ecc71;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.clear-random-item-name {
    flex: 1;
    font-size: 0.65rem;
    color: #ddd;
}

.clear-random-item-count {
    font-size: 0.55rem;
    color: #888;
}

.clear-random-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.clear-random-btn {
    padding: 10px 20px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.clear-random-btn.delete {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}
.clear-random-btn.delete:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.5);
}

.clear-random-btn.cancel {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: white;
}
.clear-random-btn.cancel:hover {
    background: #e94560;
    transform: scale(1.05);
}

.clear-random-modal::-webkit-scrollbar {
    width: 5px;
}
.clear-random-modal::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

.collection-picker-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}
.collection-picker-overlay.active {
    display: flex !important;
}
.collection-picker-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    text-align: center;
    color: white;
    width: 420px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}
.collection-picker-modal h2 {
    color: #e94560;
    font-size: 1rem;
    margin-bottom: 18px;
}
.collection-picker-list {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 18px;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: #e94560 transparent;
}
.collection-picker-list::-webkit-scrollbar {
    width: 5px;
}
.collection-picker-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}
.collection-picker-list::-webkit-scrollbar-track {
    background: transparent;
}
.collection-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.collection-picker-item:hover {
    background: rgba(15, 52, 96, 0.7);
    border-color: rgba(233, 69, 96, 0.3);
    transform: translateX(4px);
}
.collection-picker-item.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
}
.collection-picker-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: all 0.2s;
}
.collection-picker-item.active .dot {
    background: #e94560;
}
.collection-picker-item .name {
    flex: 1;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.collection-picker-item.active .name {
    color: #e94560;
}
.collection-picker-item .count {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.6rem;
    flex-shrink: 0;
}
.collection-picker-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.collection-picker-btn {
    padding: 10px 20px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.collection-picker-btn.cancel {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    width: 100%;
}
.collection-picker-btn.cancel:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
    color: #e94560;
}
.collection-picker-modal::-webkit-scrollbar {
    width: 5px;
}
.collection-picker-modal::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.leaderboard-launch-section {
    grid-column: 1 / -1;
    text-align: center;
    padding: 28px 20px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
}

.leaderboard-launch-title {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 0.85rem;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.leaderboard-launch-subtitle {
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
    margin-bottom: 20px;
}

.leaderboard-launch-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.leaderboard-launch-btn {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 25px 35px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s;
    min-width: 140px;
}

.leaderboard-launch-btn:hover {
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.25);
    transform: translateY(-3px);
}

.leaderboard-launch-count {
    font-size: 1.8rem;
    color: #e94560;
    font-weight: bold;
}

.leaderboard-launch-label {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    margin-top: 5px;
}

.leaderboard-launch-custom {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.leaderboard-launch-custom-label {
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
}

.leaderboard-launch-custom-input {
    width: 80px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 8px 12px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    text-align: center;
    outline: none;
    transition: all 0.3s;
}

.leaderboard-launch-custom-input:focus {
    border-color: #ff6b81;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
}

.leaderboard-launch-custom-input::placeholder {
    color: #555;
}

.leaderboard-launch-custom-btn {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    border-radius: 12px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.leaderboard-launch-custom-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 12px rgba(233, 69, 96, 0.4);
}

@keyframes modalZoomIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== DATABASE TAB ===== */

/* Анимации для базы данных */
@keyframes dbCardIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dbHeaderGlow {
    0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 20px rgba(233,69,96,0.1); }
    50% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 40px rgba(233,69,96,0.25); }
}

@keyframes dbStatCount {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes dbDetailIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes dbOverlayIn {
    from { opacity: 0; backdrop-filter: blur(0px); }
    to { opacity: 1; backdrop-filter: blur(6px); }
}

@keyframes dbShine {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes dbStatBarGrow {
    from { width: 0; }
}

@keyframes dbPillPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233,69,96,0.4); }
    50% { box-shadow: 0 0 0 4px rgba(233,69,96,0); }
}

/* Заголовок базы данных */
.db-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding: 24px 30px;
    background: linear-gradient(135deg, rgba(15,52,96,0.6), rgba(26,26,46,0.6));
    border-radius: 20px;
    border: 1px solid rgba(233,69,96,0.2);
    backdrop-filter: blur(12px);
    animation: dbHeaderGlow 4s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.db-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(233,69,96,0.08), transparent);
    animation: dbShine 6s ease-in-out infinite;
}

.db-header-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(233,69,96,0.4);
}

.db-header-text {
    flex: 1;
}

.db-header-text h2 {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 1.2rem;
    margin-bottom: 4px;
    text-shadow: 0 0 15px rgba(233,69,96,0.4);
    letter-spacing: 1px;
}

.db-header-text p {
    font-family: 'Minecraft', monospace;
    color: rgba(255,255,255,0.5);
    font-size: 0.6rem;
    letter-spacing: 0.5px;
}

.db-header-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    margin-right: 4px;
}

.db-chart-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.6);
    color: rgba(255,255,255,0.85);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.db-chart-btn i {
    color: #e94560;
    font-size: 0.8rem;
}

.db-chart-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: white;
    box-shadow: 0 4px 12px rgba(233,69,96,0.25);
}

.db-header-stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.db-header-stat {
    text-align: center;
    padding: 10px 18px;
    background: rgba(0,0,0,0.3);
    border-radius: 14px;
    border: 1px solid rgba(233,69,96,0.15);
    min-width: 80px;
}

.db-header-stat-value {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 1.3rem;
    color: #e94560;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(233,69,96,0.4);
    animation: dbStatCount 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.db-header-stat-label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
    letter-spacing: 1px;
}
.db-autoscroll-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}
.db-autoscroll-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(233,69,96,0.4);
    background: rgba(15,52,96,0.6);
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.db-autoscroll-btn:hover {
    background: rgba(233,69,96,0.3);
    border-color: #e94560;
}
.db-autoscroll-btn.active {
    background: #e94560;
    border-color: #e94560;
    animation: autoScrollPulse 1.5s infinite;
}
@keyframes autoScrollPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233,69,96,0.4); }
    50% { box-shadow: 0 0 12px 4px rgba(233,69,96,0.3); }
}
.db-autoscroll-speed {
    display: flex;
    align-items: center;
    gap: 4px;
}
.db-autoscroll-speed input[type="range"] {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    outline: none;
}
.db-autoscroll-speed input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    cursor: pointer;
}
.db-autoscroll-speed span {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    min-width: 12px;
    text-align: center;
}

/* Панель управления */
.db-controls {
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(15,52,96,0.3);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
}

.db-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.db-search-wrapper {
    flex: 1;
    min-width: 220px;
    position: relative;
}

.db-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
    transition: color 0.3s;
    pointer-events: none;
}

.db-search-wrapper:focus-within .db-search-icon {
    color: #e94560;
}

.db-search-input {
    width: 100%;
    padding: 12px 40px 12px 40px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.5);
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.db-search-input:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.15), 0 4px 12px rgba(0,0,0,0.2);
    background: rgba(15,52,96,0.7);
}

.db-search-input::placeholder { color: rgba(255,255,255,0.3); }

.db-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.5);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.db-search-clear:hover {
    background: rgba(233,69,96,0.4);
    color: white;
}

.db-sort-select {
    padding: 12px 18px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.5);
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    outline: none;
    transition: all 0.3s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.db-sort-select:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.15);
}

.db-sort-select option { background: #1a1a2e; color: white; }

.db-view-toggle { display: flex; gap: 4px; }

.db-view-btn {
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.5);
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.db-view-btn:hover {
    color: white;
    border-color: rgba(233,69,96,0.4);
    background: rgba(233,69,96,0.1);
}

.db-view-btn.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: white;
    border-color: #e94560;
    box-shadow: 0 4px 12px rgba(233,69,96,0.3);
}

/* Подвкладки БД */
.db-subtabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 16px;
    padding: 8px;
    background: rgba(15,52,96,0.25);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}
.db-subtabs .db-view-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    font-size: 0.85rem;
    font-family: 'Minecraft', monospace;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.db-subtabs .db-view-btn i { font-size: 0.95rem; }

/* Сетка способностей */
.db-abil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.db-abil-card {
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 18px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: dbCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
    cursor: default;
}
.db-abil-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e94560, #ff6b9d);
    opacity: 0.5;
}
.db-abil-card:hover {
    transform: translateY(-3px);
    border-color: rgba(233,69,96,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.db-abil-names {
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
    width: fit-content;
    transition: all 0.2s ease;
}
.db-abil-names:hover .db-abil-name-ru {
    color: #e94560;
    text-decoration: underline;
}
.db-abil-name-ru {
    color: #fff;
    font-size: 0.95rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
}
.db-abil-name-en {
    color: rgba(255,255,255,0.4);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.db-abil-desc { margin-top: 10px; color: rgba(255,255,255,0.85); font-size: 0.72rem; line-height: 1.6; }
.db-abil-holders { margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.06); }
.db-abil-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    margin: -2px -8px 0;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.45);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-align: left;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.db-abil-toggle i { font-size: 0.5rem; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
.db-abil-toggle .db-abil-count {
    margin-left: auto;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(233,69,96,0.15);
    color: #ff8ba0;
    font-size: 0.55rem;
}
.db-abil-toggle:hover { color: #fff; background: rgba(233,69,96,0.08); }
.db-abil-holders.open .db-abil-toggle { color: #fff; }
.db-abil-holders.open .db-abil-toggle i { transform: rotate(90deg); }
.db-abil-collapse {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.db-abil-holders.open .db-abil-collapse { display: grid; animation: dbCardIn 0.3s ease backwards; }
.db-abil-holders-modal {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(72px, 86px)) !important;
    gap: 8px !important;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px 4px;
}
.db-abil-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 6px 4px 6px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.6);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.db-abil-holder:hover {
    border-color: #ff4757;
    background: rgba(255, 71, 87, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.25);
}
.db-abil-holder-img {
    width: 52px;
    height: 52px;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    padding: 2px;
    flex-shrink: 0;
}
.db-abil-holder-dex {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.52rem;
    font-family: 'Minecraft', monospace;
    line-height: 1;
}
.db-abil-holder-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.56rem;
    font-family: 'Minecraft', monospace;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Сетка движений (Компактный вид по умолчанию + Режим постера) */
.db-moves-view-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}
.db-moves-view-modes {
    display: inline-flex;
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 3px;
    gap: 4px;
}
.db-view-mode-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 5px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-view-mode-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.db-view-mode-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #e94560, #c23152);
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
}

.db-moves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.db-moves-grid.db-moves-grid-poster {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

/* 1. Классическая компактная карточка (Основной вид) */
.db-move-card {
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 18px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: dbCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
    cursor: default;
    display: flex;
    flex-direction: column;
}
.db-move-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--card-accent, #888), transparent);
    opacity: 0.6;
}
.db-move-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.db-move-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}
.db-move-typecat {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.08);
}
.db-move-tc-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.db-move-type-img, .db-move-cat-img { width: 26px; height: 26px; object-fit: contain; }
.db-move-type-name {
    color: rgba(255,255,255,0.9);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.db-move-names {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-move-names:hover .db-move-name-ru {
    color: #e94560;
    text-decoration: underline;
}
.db-move-name-ru {
    color: #fff;
    font-size: 0.95rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    text-align: center;
    white-space: normal;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
    line-height: 1.25;
    max-width: 100%;
}
.db-move-name-en {
    color: rgba(255,255,255,0.4);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
}
.db-move-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.db-move-cat-label {
    color: rgba(255,255,255,0.55);
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.db-move-gen {
    margin-left: auto;
    color: rgba(255,255,255,0.35);
    font-size: 0.58rem;
    font-family: 'Minecraft', monospace;
}
.db-move-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
}
.db-move-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
.db-move-stat i { color: var(--card-accent, #888); font-size: 0.7rem; opacity: 0.8; }
.db-move-stat b { color: #fff !important; font-size: 0.85rem; font-family: 'Minecraft', monospace; }
.db-move-stat b .db-move-pp-max {
    font-size: 0.52rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.65);
    margin-left: 2px;
}
.db-move-stat span { color: rgba(255,255,255,0.35); font-size: 0.52rem; font-family: 'Minecraft', monospace; text-transform: uppercase; letter-spacing: 0.03em; }

/* 2. Карточка-постер (Вид по шаблону) */
.db-moves-grid.db-moves-grid-poster {
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 24px;
}
@media (max-width: 540px) {
    .db-moves-grid.db-moves-grid-poster {
        grid-template-columns: 1fr;
    }
}
.db-move-card.db-move-card-poster {
    background-color: var(--card-accent, #777);
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.15) 100%), var(--card-accent, #777);
    border: 4px solid #ffffff;
    border-radius: 26px;
    padding: 16px 20px 20px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.45), inset 0 2px 6px rgba(255,255,255,0.75);
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}
.db-move-card.db-move-card-poster::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--type-icon-url);
    background-repeat: repeat;
    background-size: 52px 52px;
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
    height: auto;
}
.db-move-card.db-move-card-poster:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 14px 34px rgba(0,0,0,0.55), inset 0 2px 6px rgba(255,255,255,0.9);
}
.db-mcard-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
}
.db-mcard-title {
    position: relative;
    z-index: 1;
    font-family: 'Minecraft', monospace;
    font-size: 1.45rem;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
    cursor: pointer;
    transition: transform 0.2s ease, text-shadow 0.2s ease;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        0 2.5px 0 #000,
        0 -2px 0 #000,
        2px 0 0 #000,
        -2px 0 0 #000,
        0 4px 6px rgba(0,0,0,0.8);
}
.db-mcard-title:hover {
    transform: scale(1.03);
    text-shadow:
        -2px -2px 0 #e94560,
        2px -2px 0 #e94560,
        -2px 2px 0 #e94560,
        2px 2px 0 #e94560,
        0 3px 8px rgba(233, 69, 96, 0.85);
}
.db-mcard-tags {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
.db-mcard-body {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 14px;
    align-items: stretch;
    justify-content: space-between;
    flex: 1;
}
.db-mcard-info-box {
    flex: 1;
    min-width: 0;
    background: var(--card-dark-accent-grad, linear-gradient(180deg, #2b1218 0%, #1e0a0f 100%));
    border: 3px solid #ffffff;
    border-radius: 18px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 3px 10px rgba(0,0,0,0.3);
    overflow: hidden;
}
.db-mcard-stats-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.2fr;
    gap: 6px;
    align-items: flex-start;
}
.db-mcard-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    min-width: 0;
}
.db-mcard-stat-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: var(--card-stat-lbl-color, #ffb3b8);
    white-space: nowrap;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.db-mcard-stat-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        0 2px 0 #000,
        0 -2px 0 #000,
        2px 0 0 #000,
        -2px 0 0 #000,
        0 3px 5px rgba(0,0,0,0.85);
}
.db-mcard-pp-max {
    font-size: 0.52rem;
    font-weight: normal;
    color: #ffffff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    margin-left: 2px;
}
.db-mcard-desc-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.db-mcard-desc {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: #ffffff;
    text-align: center;
    line-height: 1.38;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0,0,0,0.9);
}
.db-mcard-extras {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.db-mcard-extra-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 1px 6px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
}
.db-mcard-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-shrink: 0;
    width: 148px;
}
.db-mcard-type-pill {
    border-radius: 999px;
    border: 3.5px solid #ffffff;
    padding: 6px 12px;
    background: var(--card-accent, #777);
    box-shadow: 0 4px 10px rgba(0,0,0,0.22), inset 0 2px 4px rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-mcard-type-txt {
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow:
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px 1.5px 0 #000,
        1.5px 1.5px 0 #000,
        0 1.5px 0 #000,
        0 -1.5px 0 #000,
        1.5px 0 0 #000,
        -1.5px 0 0 #000,
        0 2px 4px rgba(0,0,0,0.85);
    white-space: nowrap;
    display: block;
    letter-spacing: 0.02em;
    line-height: 1;
}
.db-mcard-cat-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 46px;
}
.db-mcard-cat-img {
    width: 70px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}
.db-mcard-side-extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-top: 2px;
}
.db-mcard-extra-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    padding: 2px 7px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
}
.db-mcard-extra-pill.tag {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    padding: 2.5px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.7);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 18%, rgba(15, 23, 42, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 55%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--pill-color, #FF0045) 20%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    transition: all 0.2s ease;
}
.db-mcard-extra-pill.tag i {
    font-size: 0.6rem;
    color: var(--pill-color, #ffffff);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--pill-color, #ffffff) 80%, transparent));
}
.db-mcard-extra-pill.tag:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 28%, rgba(15, 23, 42, 0.85));
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 80%, transparent);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--pill-color, #FF0045) 40%, transparent);
}

/* Модалка движения */
.db-move-detail-table { display: flex; flex-direction: column; gap: 6px; }
.db-move-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(15,52,96,0.3);
}
.db-move-detail-label {
    color: rgba(255,255,255,0.5);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    white-space: nowrap;
}
.db-move-detail-value {
    color: #fff;
    font-size: 0.78rem;
    font-family: 'Minecraft', monospace;
    text-align: right;
    margin-left: auto;
    word-break: break-word;
}

/* Фильтры */
.db-filters-section {
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-filter-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.db-mode-toggle {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.db-mode-btn {
    padding: 4px 12px;
    border: none;
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.db-mode-btn:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.06);
}

.db-mode-btn.active {
    background: #e94560;
    color: white;
}

.db-mode-btn:hover:not(.active) {
    background: rgba(233,69,96,0.2);
    color: rgba(255,255,255,0.7);
}

.db-pill.active.multi {
    background: rgba(233,69,96,0.6);
    border-color: #e94560;
}

.db-filters-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.db-filters-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-filters-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-filter-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-filter-label {
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    white-space: nowrap;
    letter-spacing: 0.5px;
    min-width: 110px;
    flex-shrink: 0;
}

.db-filter-label i {
    color: #e94560;
    margin-right: 3px;
    font-size: 0.55rem;
}

.db-filter-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.db-type-pills {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.db-type-pills .db-pill {
    padding: 6px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-transform: capitalize;
    aspect-ratio: 3/2;
}

.db-type-pills .db-pill img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    border-radius: 50%;
}

.db-pill {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.db-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(233,69,96,0.2), transparent);
    opacity: 0;
    transition: opacity 0.25s;
}

.db-pill:hover {
    background: rgba(233,69,96,0.2);
    color: white;
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-1px);
}

.db-pill:hover::after { opacity: 1; }

.db-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: white;
    border-color: #e94560;
    box-shadow: 0 2px 10px rgba(233,69,96,0.3);
    animation: dbPillPulse 2s ease-in-out infinite;
}

/* Контент */
.db-content {
    min-height: 200px;
}

/* Карточки */
.db-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.db-card {
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 18px;
    cursor: default;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: dbCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.db-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--card-accent, #e94560), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.db-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    transition: left 0.6s;
    pointer-events: none;
}

.db-card:hover {
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3), 0 0 20px rgba(233,69,96,0.1);
}

.db-card:hover::before { opacity: 1; }
.db-card:hover::after { left: 200%; }

.db-card-top {
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
}

.db-card-img {
    width: 75px;
    height: 75px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
    flex-shrink: 0;
    transition: all 0.3s;
}

.db-card:hover .db-card-img {
    transform: scale(1.08);
    filter: drop-shadow(0 5px 12px rgba(233,69,96,0.3));
}

.db-card-info { flex: 1; min-width: 0; }

.db-card-id {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1px;
}

.db-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: white;
    margin: 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
.db-card-name:hover {
    color: #e94560;
    text-decoration: underline;
}
.db-card-img {
    cursor: pointer;
    transition: transform 0.2s ease;
}
.db-card-img:hover {
    transform: scale(1.08);
}

.db-card-engname {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.3);
    margin-bottom: 5px;
    font-style: italic;
}

.db-card-types {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.db-card-type-badge {
    padding: 3px 10px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: white;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: transform 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.1);
}

.db-card-type-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
    border-radius: 3px;
}

.db-card:hover .db-card-type-badge {
    transform: scale(1.05);
}

.db-card-stats-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 10px;
    margin-bottom: 8px;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}

.db-stat-item {
    display: flex;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: rgba(255,255,255,0.5);
}

.db-stat-item span:last-child {
    color: white;
    font-weight: bold;
}

.db-stat-total {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 4px;
    margin-top: 2px;
}

.db-stat-total span:last-child {
    color: #e94560 !important;
}

.db-card-abilities {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.5;
    margin-bottom: 6px;
}

.db-card-abilities b { color: rgba(255,255,255,0.6); }

.db-abil-mini {
    cursor: pointer;
    color: inherit;
    transition: color .15s;
}

.db-abil-mini:hover {
    color: #ff8ba0;
}

.db-card-tags {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.db-tag {
    padding: 2px 7px;
    border-radius: 5px;
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
    transition: all 0.2s;
}

.db-card:hover .db-tag {
    background: rgba(233,69,96,0.1);
    color: rgba(255,255,255,0.6);
}

/* Таблица */
.db-table-wrapper {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(15,52,96,0.2);
}

.db-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: white;
    table-layout: fixed;
}

.db-table th {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, #1a1a2e, rgba(26,26,46,0.95));
    padding: 12px 8px;
    text-align: left;
    color: #e94560;
    border-bottom: 2px solid rgba(233,69,96,0.3);
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}

/* Ширина колонок */
.th-id { width: 60px; }
.th-img { width: 48px; }
.th-name { width: 140px; }
.th-types { width: 70px; }
.th-stat { width: 44px; text-align: center; }
.th-total { width: 50px; text-align: center; }
.th-abilities { width: 200px; }
.th-tags { width: 110px; }

.db-table th:hover {
    color: white;
    background: rgba(233,69,96,0.15);
}

.db-table td {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
    transition: background 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-table .td-id {
    color: rgba(255,255,255,0.4);
    text-align: center;
    padding-left: 8px;
}

.db-table .td-stat {
    text-align: center;
    font-size: 0.56rem;
    padding: 8px 4px;
}

.db-table .td-total {
    text-align: center;
    color: #e94560;
    font-weight: bold;
    padding: 8px 4px;
}

.db-table .td-abilities {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.5);
    overflow: hidden;
}

.db-abs-grid {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.db-abs-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.db-abs-col span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.db-abs-sep {
    color: rgba(255,255,255,0.15);
    flex-shrink: 0;
}

.db-abs-empty {
    color: rgba(255,255,255,0.15);
}

.db-table .td-tags {
    max-width: 0;
}

.db-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.db-tags-grid .db-move-meta-tag {
    font-size: 0.58rem;
    padding: 1.5px 6px;
    gap: 3.5px;
}
.db-tags-grid .db-move-meta-tag i {
    font-size: 0.55rem;
}

.db-table .db-tag {
    display: block;
    padding: 1px 4px;
    border-radius: 3px;
    font-family: 'Minecraft', monospace;
    font-size: 0.42rem;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.4;
    max-width: 44px;
}

.db-table tr {
    transition: all 0.2s;
}

.db-table tbody tr:hover td {
    background: rgba(15,52,96,0.3);
}

.db-table tbody tr:hover {
    box-shadow: inset 3px 0 0 #e94560;
}

.db-table-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
    border-radius: 8px;
    transition: transform 0.2s;
}

.db-table tbody tr:hover .db-table-img {
    transform: scale(1.15);
}

.db-table-types {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.db-table-type-wrap {
    position: relative;
    display: inline-flex;
    cursor: help;
}

.db-table-type-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
    border-radius: 4px;
    transition: transform 0.2s;
}

.db-table-type-wrap:hover .db-table-type-icon {
    transform: scale(1.3);
}

.db-floating-tip {
    display: none;
    position: absolute;
    background: #16213e;
    color: white;
    font-size: 0.55rem;
    padding: 3px 10px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 999999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    border: 1px solid rgba(233,69,96,0.4);
    text-transform: capitalize;
    font-family: 'Minecraft', monospace;
}

.cstm-confirm-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Minecraft', monospace;
}
.cstm-confirm-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    min-width: 320px;
    max-width: 420px;
    text-align: center;
    color: white;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}
.cstm-confirm-icon {
    font-size: 1.5rem;
    color: #e94560;
    margin-bottom: 10px;
}
.cstm-confirm-msg {
    color: #bbb;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    line-height: 1.5;
    margin-bottom: 22px;
}
.cstm-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.cstm-confirm-btn {
    padding: 10px 24px;
    border-radius: 12px;
    border: none;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}
.cstm-confirm-yes {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}
.cstm-confirm-yes:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.5);
}
.cstm-confirm-no {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: white;
}
.cstm-confirm-no:hover {
    background: #e94560;
    transform: scale(1.05);
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.db-table-name-cell {
    white-space: nowrap;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-table-desc {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255,255,255,0.35);
    font-size: 0.55rem;
}

/* Детальное модальное окно */
.db-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: dbOverlayIn 0.3s ease-out;
    backdrop-filter: blur(6px);
}

.db-detail-modal {
    background: linear-gradient(145deg, #16213e, #1a1a2e);
    border: 1px solid var(--modal-border, rgba(233,69,96,0.3));
    border-radius: 22px;
    padding: 32px;
    max-width: 620px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    animation: dbDetailIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 40px var(--modal-glow, rgba(233,69,96,0.15));
    scrollbar-color: var(--modal-accent, rgba(255, 255, 255, 0.25)) rgba(26, 26, 46, 0.5);
}

.db-detail-modal::-webkit-scrollbar {
    width: 6px;
}
.db-detail-modal::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
    margin: 12px 0;
}
.db-detail-modal::-webkit-scrollbar-thumb {
    background: var(--modal-accent, rgba(255, 255, 255, 0.25));
    border-radius: 3px;
    transition: background 0.2s ease;
}
.db-detail-modal::-webkit-scrollbar-thumb:hover {
    background: var(--modal-accent-hover, var(--modal-accent, rgba(255, 255, 255, 0.45)));
}

.db-status-detail-modal,
.db-field-detail-modal,
.db-gimmick-detail-modal,
.db-type-detail-modal,
.db-adv-detail-modal {
    border: 1px solid var(--modal-border, rgba(255, 255, 255, 0.15)) !important;
    border-top: 4px solid var(--modal-accent, #9c88ff) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px var(--modal-glow, rgba(255, 255, 255, 0.1)) !important;
}

.db-status-detail-modal .db-detail-section-title,
.db-field-detail-modal .db-detail-section-title,
.db-gimmick-detail-modal .db-detail-section-title,
.db-type-detail-modal .db-detail-section-title,
.db-adv-detail-modal .db-detail-section-title {
    color: var(--modal-accent, #00cec9) !important;
    border-bottom: 1px solid var(--modal-border, rgba(255, 255, 255, 0.12)) !important;
}

.db-status-detail-modal .db-detail-close:hover,
.db-field-detail-modal .db-detail-close:hover,
.db-gimmick-detail-modal .db-detail-close:hover,
.db-type-detail-modal .db-detail-close:hover,
.db-adv-detail-modal .db-detail-close:hover {
    color: white !important;
    background: var(--modal-border, rgba(255, 255, 255, 0.15)) !important;
    border-color: var(--modal-accent, #00cec9) !important;
}

.db-detail-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.db-detail-close:hover {
    color: white;
    background: rgba(233,69,96,0.4);
    border-color: #e94560;
    transform: rotate(90deg);
}

.db-detail-top {
    display: flex;
    gap: 22px;
    margin-bottom: 22px;
    align-items: flex-start;
}

.db-detail-img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
    border-radius: 20px;
    background: rgba(0,0,0,0.2);
    padding: 10px;
    transition: transform 0.3s;
}

.db-detail-img:hover {
    transform: scale(1.05);
}

.db-detail-info { flex: 1; }

.db-detail-id {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1px;
}

.db-detail-name {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    color: white;
    margin: 5px 0;
    text-shadow: 0 0 10px rgba(233,69,96,0.3);
}

.db-detail-engname {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    margin-bottom: 10px;
    font-style: italic;
}

.db-detail-types {
    display: flex;
    gap: 7px;
    margin-bottom: 10px;
}

.db-detail-type-badge {
    padding: 5px 14px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: white;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: transform 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.1);
}

.db-detail-type-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
    border-radius: 4px;
}

.db-detail-type-badge:hover {
    transform: scale(1.08);
}

.db-detail-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.db-detail-section {
    margin-bottom: 16px;
    padding: 14px;
    background: rgba(0,0,0,0.15);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.04);
}

.db-detail-section-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(233,69,96,0.15);
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}

.db-detail-section-title i {
    font-size: 0.6rem;
}

.db-detail-desc {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.6;
}

.db-detail-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-detail-stat {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 12px;
    background: rgba(15,52,96,0.4);
    border-radius: 8px;
    transition: all 0.2s;
    gap: 8px;
}

.db-detail-stat:hover {
    background: rgba(15,52,96,0.6);
}

.db-detail-stat .label { color: rgba(255,255,255,0.45); text-align: right; }

.stat-bar-wrap {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}

.stat-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.db-detail-stat .value { color: white; font-weight: bold; min-width: 30px; text-align: right; }

.db-detail-stat.total {
    grid-column: 1 / -1;
    text-align: center;
    background: linear-gradient(135deg, rgba(233,69,96,0.15), rgba(233,69,96,0.08));
    border: 1px solid rgba(233,69,96,0.2);
    padding: 8px;
}

.db-detail-stat.total .value {
    color: #e94560;
    font-size: 0.85rem;
    text-shadow: 0 0 8px rgba(233,69,96,0.4);
}

.db-detail-abilities { line-height: 1.9; }

.db-detail-efx { display: flex; flex-direction: column; gap: 6px; }
.efx-grid { display: flex; flex-direction: column; gap: 6px; }
.efx-group { display: flex; align-items: center; gap: 8px; }
.efx-label {
    min-width: 32px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    font-weight: bold;
    flex-shrink: 0;
}
.efx-types {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.efx-type-chip {
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    white-space: nowrap;
}

.db-detail-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 12px 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.25s;
}
.db-detail-download:hover {
    background: rgba(233,69,96,0.15);
    border-color: rgba(233,69,96,0.4);
    color: white;
}

.db-detail-ability {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.65);
    padding: 3px 0;
}

.db-detail-ability .db-abil-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: color .15s;
}

.db-detail-ability .db-abil-link:hover {
    color: #ff8ba0;
}

.db-detail-ability b { color: white; }
.db-detail-ability .hidden-label {
    color: #e94560;
    font-size: 0.52rem;
    font-style: italic;
}

.db-detail-holders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 12px;
    max-height: 330px;
    overflow-y: auto;
    padding-right: 4px;
}

.db-abil-scale-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.45);
    margin-right: 2px;
}

.db-abil-scale {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.85);
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    transition: all .15s;
}

.db-abil-scale:hover {
    background: rgba(255,255,255,0.12);
}

.db-abil-scale.active {
    border-color: #e94560;
    background: rgba(233,69,96,0.18);
    color: #ff8ba0;
}

.db-loading {
    text-align: center;
    padding: 60px;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
}

.db-loading i {
    margin-right: 8px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.db-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.3);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
}

.db-empty i {
    display: block;
    font-size: 2rem;
    margin-bottom: 15px;
    color: rgba(233,69,96,0.3);
}

/* Адаптив для базы данных */
@media (max-width: 768px) {
    .db-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px;
    }

    .db-header-stats {
        width: 100%;
        justify-content: center;
    }

    .db-header-text h2 {
        font-size: 1rem;
    }

    .db-cards {
        grid-template-columns: 1fr;
    }

    .db-search-row {
        flex-direction: column;
    }

    .db-search-wrapper {
        min-width: auto;
    }

    .db-sort-select {
        width: 100%;
    }

    .db-filter-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .db-filters-columns {
        grid-template-columns: 1fr;
    }

    .db-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .db-table {
        table-layout: auto;
        min-width: 700px;
    }

    .db-detail-modal {
        padding: 20px;
        border-radius: 18px;
    }

    .db-detail-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .db-detail-types,
    .db-detail-tags {
        justify-content: center;
    }
}

/* ============================================
   ВКЛАДКА: ПОМОЩЬ С ПРОЕКТОМ
   ============================================ */

#tabHelp h2 {
    font-family: 'Minecraft', monospace;
    color: white;
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

/* ========================================
   HELP TAB — SUPER DESIGN
   ======================================== */

/* Hero */
.help-hero {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 15px 25px;
    background: rgba(15, 52, 96, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 20px;
    margin-bottom: 16px;
}

.help-hero-icon {
    font-size: 1.2rem;
    color: #e94560;
    flex-shrink: 0;
}

.help-hero h2 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    color: white;
    margin: 0;
}

.help-hero p {
    color: rgba(255,255,255,0.4);
    font-size: 0.65rem;
    margin: 0 0 0 auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
    flex: 1 1 100%;
}

/* Cards */
.help-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 900px;
    margin: 0 auto 24px;
}

.help-card {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    padding: 24px 18px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.help-card:nth-child(1) { animation-delay: 0.1s; }
.help-card:nth-child(2) { animation-delay: 0.2s; }
.help-card:nth-child(3) { animation-delay: 0.3s; }

.help-card-shine {
    display: none;
}

.help-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #e94560, #c62a47);
    opacity: 0.6;
    transition: opacity 0.3s;
}

.help-card:hover::before {
    opacity: 1;
}

.help-card:hover {
    transform: translateY(-3px);
    border-color: rgba(233, 69, 96, 0.4);
    box-shadow: 0 8px 25px rgba(233, 69, 96, 0.1);
}

.help-card-icon {
    font-size: 1.8rem;
    margin-bottom: 12px;
    position: relative;
    transition: transform 0.3s;
    color: #e94560;
    filter: drop-shadow(0 0 8px rgba(233,69,96,0.3));
}

.help-card:hover .help-card-icon {
    transform: scale(1.1);
}

.help-card-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: white;
    margin-bottom: 6px;
    position: relative;
}

.help-card-desc {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.5;
    position: relative;
}

.help-card-arrow {
    margin-top: 12px;
    color: rgba(255,255,255,0.15);
    font-size: 0.7rem;
    transition: all 0.3s;
    position: relative;
}

.help-card:hover .help-card-arrow {
    color: #e94560;
    transform: translateX(4px);
}

/* Submissions Button */
.help-submissions-wrap {
    text-align: center;
    margin-bottom: 20px;
}

.help-submissions-btn {
    padding: 10px 24px;
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.help-submissions-btn:hover {
    border-color: #e94560;
    color: white;
    box-shadow: 0 4px 20px rgba(233,69,96,0.15);
    transform: translateY(-2px);
}

/* Submissions Tabs */
.help-sub-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    padding: 4px;
}

.help-sub-tab {
    flex: 1;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.help-sub-tab:hover {
    color: rgba(255,255,255,0.7);
    background: rgba(233,69,96,0.08);
}

.help-sub-tab.active {
    background: rgba(233,69,96,0.2);
    color: white;
}

.help-sub-tab i {
    font-size: 0.5rem;
}

/* Submission Items */
.help-submission-item {
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.15);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    position: relative;
    transition: border-color 0.2s;
}

.help-submission-item:hover {
    border-color: rgba(233,69,96,0.3);
}

.help-submission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.help-submission-type {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

.help-submission-date {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.25);
}

.help-submission-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
}

.help-submission-details b {
    color: white;
}

.help-submission-reply {
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.7);
}

.help-submission-reply i {
    color: #3498db;
    margin-right: 4px;
}

.help-submission-reply b {
    color: #3498db;
}

.help-submission-delete {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.15);
    cursor: pointer;
    font-size: 0.6rem;
    padding: 4px;
    transition: color 0.2s;
    border-radius: 6px;
}

.help-submission-delete:hover {
    color: #e74c3c;
    background: rgba(231,76,60,0.1);
}

/* Forms */
.help-form {
    max-width: 700px;
    margin: 0 auto;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    overflow: hidden;
}

.help-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 2px solid #e94560;
}

.help-form-header h3 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-form-header h3 i {
    color: #e94560;
}

.help-close-btn {
    background: #c0392b;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 0.7rem;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.help-close-btn:hover {
    background: #e74c3c;
    transform: translateY(-2px);
}

.help-form-body {
    padding: 22px;
}

.help-form-body label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #e94560;
    margin-bottom: 6px;
    margin-top: 16px;
}

.help-form-body label:first-child {
    margin-top: 0;
}

.help-input,
.help-textarea,
.help-select {
    width: 100%;
    padding: 10px 14px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    transition: all 0.25s;
    box-sizing: border-box;
}

.help-input:focus,
.help-textarea:focus,
.help-select:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.15);
}

.help-textarea {
    resize: vertical;
    min-height: 80px;
}

.help-select {
    cursor: pointer;
}

.help-select option {
    background: #1a1a2e;
    color: white;
}

/* Фильтры в форме идеи */
.help-filters-section {
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 12px;
    padding: 15px;
    margin-top: 6px;
}

.help-filter-group {
    margin-bottom: 12px;
}

.help-filter-group:last-child {
    margin-bottom: 0;
}

.help-filter-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-bottom: 8px;
}

.help-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.help-filter-tag {
    padding: 5px 12px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
}

.help-filter-tag:hover {
    border-color: #e94560;
    color: white;
}

.help-filter-tag.selected {
    background: #e94560;
    border-color: #e94560;
    color: white;
}

/* Чипсы покемонов */
.help-pokemon-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.help-pokemon-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
}

.help-pokemon-chip .remove-chip {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
}

.help-pokemon-chip .remove-chip:hover {
    color: #e94560;
}

.help-add-pokemon-btn {
    background: rgba(233, 69, 96, 0.1);
    border: 1px dashed rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
}

.help-add-pokemon-btn:hover {
    border-color: #e94560;
    color: white;
}

/* Mechanics Grid */
.help-mechanics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}

.help-mech-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0 !important;
}

.help-mech-check:hover {
    border-color: rgba(233,69,96,0.5);
    background: rgba(233,69,96,0.08);
    color: rgba(255,255,255,0.8);
}

.help-mech-check input {
    display: none;
}

.help-mech-box {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(233,69,96,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    background: rgba(233,69,96,0.05);
    transition: all 0.25s;
    flex-shrink: 0;
    position: relative;
}

.help-mech-check input:checked ~ .help-mech-box {
    background: rgba(233,69,96,0.25);
    border-color: #e94560;
    color: #e94560;
}

.help-mech-check input:checked ~ .help-mech-box i {
    display: none;
}

.help-mech-check input:checked ~ .help-mech-box::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: #e94560;
}

.help-mech-check input:checked ~ *:last-child {
    color: white;
}

.help-mech-check--other {
    grid-column: 1 / -1;
}

/* Submit Button */
.help-submit-btn {
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    background: #2ecc71;
    border: none;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.help-submit-btn:hover {
    background: #27ae60;
    transform: translateY(-2px);
}

/* Селектор покемона */
.help-pokemon-selector {
    position: relative;
}

.help-pokemon-list {
    max-height: 260px;
    overflow-y: auto;
    background: #1a1a2e;
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 10px;
    margin-top: 6px;
}

.help-pokemon-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.help-pokemon-item:hover {
    background: rgba(233, 69, 96, 0.15);
}

.help-pokemon-item img {
    width: 30px;
    height: 30px;
}

.help-pokemon-item .name {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: white;
}

.help-pokemon-item .engname {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

.help-selected-pokemon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 10px;
    margin-top: 6px;
}

.help-selected-pokemon img {
    width: 40px;
    height: 40px;
}

/* Чекбоксы */
.help-replace-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.help-replace-options .help-check-label {
    margin: 0 !important;
    min-height: 36px;
    font-size: 0.62rem;
}

.help-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0;
    min-height: 36px;
    box-sizing: border-box;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s;
}

.help-check-label:hover {
    border-color: rgba(233,69,96,0.5);
    background: rgba(233,69,96,0.08);
    color: white;
}

.help-check-label:has(input:checked) {
    border-color: #e94560;
    background: rgba(233,69,96,0.15);
    color: white;
}

.help-check-label input[type="checkbox"] {
    accent-color: #e94560;
    width: 14px;
    height: 14px;
}

/* Модалка выбора покемона для идеи */
.help-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-picker-modal {
    background: rgba(15, 52, 96, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 16px;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.help-picker-modal h3 {
    font-family: 'Minecraft', monospace;
    color: white;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* Секции редактирования */
.help-edit-section {
    margin-top: 10px;
    padding: 10px 12px;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    animation: helpFadeIn 0.25s ease;
}

.help-edit-section label {
    margin-top: 0 !important;
    font-size: 0.6rem !important;
    margin-bottom: 4px !important;
}

.help-edit-section .help-input,
.help-edit-section .help-textarea {
    padding: 7px 10px;
    font-size: 0.65rem;
}

.help-name-row {
    display: flex;
    gap: 8px;
}

.help-name-field {
    flex: 1;
}

.help-name-field label {
    display: block;
    margin-bottom: 3px !important;
}

/* Сетка иконок типов */
.help-type-icons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.help-type-icons-grid .type-icon-item {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 30, 60, 0.5);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0.5;
}

.help-type-icons-grid .type-icon-item:hover {
    opacity: 0.8;
    transform: scale(1.08);
}

.help-type-icons-grid .type-icon-item.selected {
    opacity: 1;
    border-color: white;
    background: linear-gradient(135deg, #e94560, #c62a47);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.4);
}

.help-type-icons-grid .type-icon-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.help-selected-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.help-selected-type-tag {
    padding: 4px 12px;
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(233, 69, 96, 0.3);
    border: 1px solid rgba(233, 69, 96, 0.4);
}

.help-selected-type-tag .remove-type {
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.7rem;
}

.help-selected-type-tag .remove-type:hover {
    opacity: 1;
}

/* Сетка статов */
.help-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
}

.help-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.help-stat-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.5);
    min-width: 45px;
}

.help-stat-input {
    flex: 1;
    padding: 5px 8px;
    background: rgba(10,30,60,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    outline: none;
    width: 50px;
}

.help-stat-input:focus {
    border-color: rgba(233,69,96,0.5);
}

/* Abilities grid */
.help-abs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.help-abs-item label {
    font-size: 0.55rem !important;
    margin-bottom: 3px !important;
}

.help-abs-item .help-input {
    padding: 5px 8px;
    font-size: 0.6rem;
}

/* ==================== НОВЫЙ РЕЖИМ РАЗРАБОТЧИКА ==================== */

@keyframes devnewGlow {
    0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 20px rgba(233,69,96,0.1); }
    50% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 40px rgba(233,69,96,0.25); }
}

@keyframes devnewShine {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes devnewFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes devnewCardIn {
    from { opacity: 0; transform: translateY(15px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes devnewPillPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233,69,96,0.3); }
    50% { box-shadow: 0 0 0 4px rgba(233,69,96,0); }
}

@keyframes devnewStatPop {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes devnewFadeSlide {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes devnewTypeGlow {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46,204,113,0.6); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(46,204,113,0.2); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}

@keyframes devnewTypeRemove {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231,76,60,0.5); }
    40% { transform: scale(0.88); box-shadow: 0 0 0 4px rgba(231,76,60,0.3); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231,76,60,0); }
}

/* ===== Hero Header ===== */
.dn-hero {
    text-align: center;
    padding: 30px 20px 24px;
    background: linear-gradient(135deg, rgba(15,52,96,0.6), rgba(26,26,46,0.7));
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.2);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    animation: devnewGlow 4s ease-in-out infinite;
}

.dn-hero::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(233,69,96,0.06), transparent);
    animation: devnewShine 6s ease-in-out infinite;
}

.dn-hero-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: white;
    box-shadow: 0 6px 20px rgba(233,69,96,0.4);
    margin-bottom: 12px;
    animation: devnewFloat 3s ease-in-out infinite;
    position: relative; z-index: 1;
}

.dn-hero h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem; color: white;
    text-shadow: 0 0 20px rgba(233,69,96,0.4);
    margin-bottom: 4px;
    position: relative; z-index: 1;
}

.dn-hero p {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: rgba(255,255,255,0.4);
    position: relative; z-index: 1;
}

.dn-hero-stats {
    display: flex; gap: 12px; justify-content: center;
    margin-top: 16px;
    position: relative; z-index: 1;
}

.dn-hero-stat {
    text-align: center;
    padding: 8px 16px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    border: 1px solid rgba(233,69,96,0.12);
    min-width: 70px;
}

.dn-hero-stat-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem; color: #e94560; font-weight: bold;
    text-shadow: 0 0 8px rgba(233,69,96,0.3);
    animation: devnewStatPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dn-hero-stat-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem; color: rgba(255,255,255,0.35);
    letter-spacing: 0.5px;
}

/* ===== Toolbar ===== */
.dn-toolbar {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    padding: 14px 18px;
    background: rgba(15,52,96,0.3);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
}

.dn-toolbar-group {
    display: flex; gap: 6px; align-items: center;
}

.dn-toolbar-sep {
    width: 1px; height: 24px;
    background: rgba(233,69,96,0.2);
    margin: 0 4px;
}

.dn-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.4);
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
    white-space: nowrap;
}

.dn-pill:hover {
    background: rgba(233,69,96,0.15);
    color: white;
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-1px);
}

.dn-pill i { font-size: 0.6rem; }

.dn-pill--accent {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: white;
    border-color: #e94560;
}
.dn-pill--accent:hover {
    box-shadow: 0 4px 14px rgba(233,69,96,0.35);
    transform: translateY(-2px);
}

.dn-pill--green { border-color: rgba(46,204,113,0.3); }
.dn-pill--green:hover { background: rgba(46,204,113,0.15); border-color: rgba(46,204,113,0.5); }

.dn-pill--purple { border-color: rgba(155,89,182,0.3); }
.dn-pill--purple:hover { background: rgba(155,89,182,0.15); border-color: rgba(155,89,182,0.5); }

.dn-pill--orange { border-color: rgba(243,156,18,0.3); }
.dn-pill--orange:hover { background: rgba(243,156,18,0.15); border-color: rgba(243,156,18,0.5); }

.dn-pill--blue { border-color: rgba(52,152,219,0.3); }
.dn-pill--blue:hover { background: rgba(52,152,219,0.15); border-color: rgba(52,152,219,0.5); }

.dn-pill--red { border-color: rgba(231,76,60,0.3); }
.dn-pill--red:hover { background: rgba(231,76,60,0.15); border-color: rgba(231,76,60,0.5); }

.dn-pill--teal { border-color: rgba(22,160,133,0.3); }
.dn-pill--teal:hover { background: rgba(22,160,133,0.15); border-color: rgba(22,160,133,0.5); }

.dn-select {
    padding: 7px 12px;
    background: rgba(26,26,46,0.8);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 10px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    min-width: 160px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.dn-select:focus {
    border-color: #e94560;
    outline: none;
}

/* ===== Main Layout ===== */
.dn-main {
    display: flex; gap: 20px; align-items: stretch;
    flex-wrap: wrap;
}

/* ===== Editor Panel ===== */
.dn-editor {
    flex: 2; min-width: 340px;
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px;
    padding: 22px;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    transition: border-color 0.3s;
}

.dn-editor:hover {
    border-color: rgba(233,69,96,0.2);
}

.dn-editor-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem; color: white;
    padding-bottom: 12px; margin-bottom: 18px;
    border-bottom: 2px solid rgba(233,69,96,0.3);
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}

.dn-editor-title i { color: #e94560; }

/* Upload area */
.dn-upload {
    width: 200px; min-height: 200px;
    background: #1a1a2e;
    border: 2px dashed rgba(233,69,96,0.35);
    border-radius: 16px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative; overflow: hidden;
    flex-shrink: 0;
}

.dn-upload:hover {
    border-color: #e94560;
    background: rgba(26,26,46,0.9);
    box-shadow: 0 0 20px rgba(233,69,96,0.1);
}

.dn-upload-icon {
    font-size: 2rem; color: #e94560;
    margin-bottom: 8px;
    transition: transform 0.3s;
}

.dn-upload:hover .dn-upload-icon { transform: scale(1.1); }

.dn-upload-text {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.4);
}

.dn-upload-img {
    width: 100%; max-height: 180px;
    object-fit: contain; border-radius: 12px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
    transition: filter 0.3s;
}

.dn-upload-img:hover {
    filter: drop-shadow(0 6px 18px rgba(233,69,96,0.3));
}

/* Editor form fields */
.dn-editor-body {
    display: flex; gap: 20px; margin-bottom: 20px;
}

.dn-editor-fields { flex: 1; }

.dn-field-label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.dn-field-label i { color: #e94560; margin-right: 4px; }

.dn-input {
    width: 100%;
    padding: 9px 14px;
    background: rgba(10,20,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    transition: all 0.25s;
    box-sizing: border-box;
}

.dn-input:focus {
    border-color: rgba(233,69,96,0.5);
    box-shadow: 0 0 0 3px rgba(233,69,96,0.1), 0 2px 8px rgba(0,0,0,0.2);
    outline: none;
}

.dn-input::placeholder { color: rgba(255,255,255,0.2); }

.dn-textarea {
    width: 100%;
    padding: 9px 14px;
    background: rgba(10,20,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    resize: vertical;
    min-height: 80px;
    transition: all 0.25s;
    box-sizing: border-box;
}

.dn-textarea:focus {
    border-color: rgba(233,69,96,0.5);
    box-shadow: 0 0 0 3px rgba(233,69,96,0.1), 0 2px 8px rgba(0,0,0,0.2);
    outline: none;
}

.dn-textarea::placeholder { color: rgba(255,255,255,0.2); }

/* Type grid */
.dn-types-section {
    margin-bottom: 20px;
}

.dn-types-grid {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 4px 0;
}

.dn-type-item {
    width: 80px;
    text-align: center;
    padding: 8px 4px 6px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10,20,40,0.4);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
}

.dn-type-item:hover {
    border-color: rgba(233,69,96,0.3);
    transform: translateY(-2px);
    background: rgba(233,69,96,0.08);
}

.dn-type-item img {
    width: 42px; height: 42px; object-fit: contain;
    transition: transform 0.2s;
}

.dn-type-item:hover img { transform: scale(1.1); }

.dn-type-item span {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.45rem;
    color: rgba(255,255,255,0.5);
    margin-top: 3px;
}

.dn-type-item.selected {
    border-color: rgba(46,204,113,0.5);
    background: rgba(46,204,113,0.12);
    animation: devnewTypeGlow 0.35s ease;
}

.dn-type-item.selected span { color: #2ecc71; }

.dn-type-item.removing {
    animation: devnewTypeRemove 0.3s ease;
}

/* Action buttons row */
.dn-actions {
    display: flex; gap: 12px;
    margin-top: auto; padding-top: 14px;
}

.dn-btn {
    flex: 1;
    padding: 11px 16px;
    border: none; border-radius: 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: white;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

.dn-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

.dn-btn--save {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    box-shadow: 0 4px 12px rgba(46,204,113,0.25);
}
.dn-btn--save:hover { box-shadow: 0 6px 18px rgba(46,204,113,0.35); }

.dn-btn--delete {
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    box-shadow: 0 4px 12px rgba(231,76,60,0.25);
}
.dn-btn--delete:hover { box-shadow: 0 6px 18px rgba(231,76,60,0.35); }

/* ===== List Panel ===== */
.dn-list {
    flex: 1; min-width: 260px;
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px;
    padding: 22px;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    transition: border-color 0.3s;
}

.dn-list:hover {
    border-color: rgba(233,69,96,0.2);
}

.dn-list-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem; color: white;
    padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 2px solid rgba(233,69,96,0.3);
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}

.dn-list-title i { color: #e94560; }

.dn-list-scroll {
    flex: 1;
    display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
}

.dn-list-scroll::-webkit-scrollbar { width: 5px; }
.dn-list-scroll::-webkit-scrollbar-track { background: transparent; }
.dn-list-scroll::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.3); border-radius: 10px; }

/* Pokemon cards in list */
.dn-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(15,52,96,0.4), rgba(26,26,46,0.5));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
    animation: devnewCardIn 0.35s ease backwards;
}

.dn-card::before {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    transition: left 0.5s;
}

.dn-card:hover {
    border-color: rgba(233,69,96,0.3);
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.dn-card:hover::before { left: 200%; }

.dn-card.active {
    border-color: rgba(233,69,96,0.5);
    background: linear-gradient(135deg, rgba(233,69,96,0.12), rgba(26,26,46,0.5));
    box-shadow: 0 0 15px rgba(233,69,96,0.1);
}

.dn-card-img {
    width: 46px; height: 46px;
    object-fit: cover; border-radius: 10px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.dn-card-placeholder {
    width: 46px; height: 46px;
    background: rgba(26,26,46,0.8);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.dn-card-placeholder i { font-size: 1.2rem; color: #e94560; }

.dn-card-info { flex: 1; min-width: 0; }

.dn-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem; color: white; font-weight: bold;
    white-space: normal; word-break: break-word;
    line-height: 1.3;
    transition: color 0.2s;
}

.dn-card.active .dn-card-name {
    background: linear-gradient(135deg, #ffd700, #f39c12);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dn-card-types {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem; color: rgba(233,69,96,0.7);
    margin-top: 3px;
}

/* Clear empty button */
.dn-clear-btn {
    margin-top: 14px;
    padding: 9px 14px;
    background: rgba(243,156,18,0.15);
    border: 1px solid rgba(243,156,18,0.25);
    border-radius: 12px;
    color: rgba(243,156,18,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.25s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

.dn-clear-btn:hover {
    background: rgba(243,156,18,0.25);
    border-color: rgba(243,156,18,0.4);
    color: #f39c12;
}

/* ===== Background Manager ===== */
.dn-bg-manager {
    margin-top: 20px;
    padding: 18px;
    background: linear-gradient(145deg, rgba(15,52,96,0.4), rgba(26,26,46,0.5));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
}

.dn-bg-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem; color: #e94560;
    padding-bottom: 8px; margin-bottom: 12px;
    border-bottom: 1px solid rgba(233,69,96,0.2);
    display: flex; align-items: center; gap: 6px;
}

.dn-bg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.dn-bg-card {
    position: relative; border-radius: 12px; overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.06);
    aspect-ratio: 16/9;
    transition: all 0.3s;
}

.dn-bg-card:hover {
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.dn-bg-card.active {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233,69,96,0.3);
}

.dn-bg-card img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.dn-bg-card .dn-bg-delete {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px;
    background: rgba(231,76,60,0.8);
    border: none; border-radius: 50%;
    color: white; font-size: 0.6rem;
    cursor: pointer;
    display: none; align-items: center; justify-content: center;
    transition: background 0.2s;
}

.dn-bg-card .dn-bg-rename {
    position: absolute; top: 4px; right: 30px;
    width: 22px; height: 22px;
    background: rgba(233,69,96,0.8);
    border: none; border-radius: 50%;
    color: white; font-size: 0.55rem;
    cursor: pointer;
    display: none; align-items: center; justify-content: center;
    transition: background 0.2s;
}

.dn-bg-card:hover .dn-bg-delete { display: flex; }
.dn-bg-card:hover .dn-bg-rename { display: flex; }
.dn-bg-card .dn-bg-delete:hover { background: #e74c3c; }
.dn-bg-card .dn-bg-rename:hover { background: #e94560; }

.dn-bg-upload {
    border: 2px dashed rgba(233,69,96,0.25);
    border-radius: 12px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    aspect-ratio: 16/9;
    cursor: pointer;
    transition: all 0.3s;
    color: rgba(255,255,255,0.3);
}

.dn-bg-upload:hover {
    border-color: rgba(233,69,96,0.5);
    color: rgba(233,69,96,0.7);
}

.dn-bg-upload i { font-size: 1.3rem; margin-bottom: 4px; }
.dn-bg-upload span { font-family: 'Minecraft', monospace; font-size: 0.48rem; }

.dn-bg-current {
    margin-top: 10px;
    text-align: center;
}

.dn-bg-current-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
}

.dn-bg-current img {
    max-width: 200px; max-height: 100px;
    object-fit: cover; border-radius: 10px;
    border: 1px solid rgba(233,69,96,0.2);
}

/* ===== Modal (new style) ===== */
.dn-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 20000;
    backdrop-filter: blur(6px);
    animation: devnewFadeSlide 0.25s ease;
}

.dn-modal {
    background: linear-gradient(145deg, #16213e, #1a1a2e);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 22px;
    padding: 28px;
    max-width: 500px; width: 92%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 30px rgba(233,69,96,0.1);
    animation: devnewCardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dn-modal h3 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem; color: white;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}

.dn-modal h3 i { color: #e94560; }

.dn-modal-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(10,20,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    margin-bottom: 18px;
    box-sizing: border-box;
}

.dn-modal-input:focus {
    border-color: rgba(233,69,96,0.5);
    outline: none;
}

.dn-modal-actions {
    display: flex; gap: 10px; justify-content: flex-end;
}

.dn-modal-btn {
    padding: 9px 20px;
    border: none; border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: white;
    cursor: pointer;
    transition: all 0.25s;
    display: flex; align-items: center; gap: 6px;
}

.dn-modal-btn:hover { transform: translateY(-2px); }

.dn-modal-btn--confirm {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}
.dn-modal-btn--cancel {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
}
.dn-modal-btn--cancel:hover {
    background: rgba(255,255,255,0.12);
}

/* Template modal (new style) */
.dn-template-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 20000;
    backdrop-filter: blur(6px);
    animation: devnewFadeSlide 0.25s ease;
}

.dn-template-modal {
    background: linear-gradient(145deg, #16213e, #1a1a2e);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 22px;
    padding: 28px;
    max-width: 800px; width: 95%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 30px rgba(233,69,96,0.1);
    animation: devnewCardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dn-template-modal::-webkit-scrollbar { width: 5px; }
.dn-template-modal::-webkit-scrollbar-track { background: transparent; }
.dn-template-modal::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.3); border-radius: 10px; }

.dn-template-modal h3 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem; color: white;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}

.dn-template-modal h3 i { color: #e94560; }

.dn-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 14px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 4px;
}

.dn-template-grid::-webkit-scrollbar { width: 4px; }
.dn-template-grid::-webkit-scrollbar-track { background: transparent; }
.dn-template-grid::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.2); border-radius: 10px; }

.dn-template-card {
    background: linear-gradient(135deg, rgba(15,52,96,0.4), rgba(26,26,46,0.5));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative; overflow: hidden;
}

.dn-template-card:hover {
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.dn-template-card img {
    width: 60px; height: 60px;
    object-fit: contain;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.dn-template-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: white;
}

.dn-template-card-types {
    font-family: 'Minecraft', monospace;
    font-size: 0.45rem; color: rgba(233,69,96,0.6);
    margin-top: 2px;
}

/* ===== Back to Play Button ===== */
.dn-back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: rgba(243,156,18,0.15);
    border: 1px solid rgba(243,156,18,0.3);
    border-radius: 30px;
    color: #f39c12;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.25s;
    margin-bottom: 16px;
}

.dn-back-btn:hover {
    background: rgba(243,156,18,0.25);
    border-color: rgba(243,156,18,0.5);
    transform: translateX(-3px);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .dn-main { flex-direction: column; }
    .dn-editor, .dn-list { min-width: 100%; }
    .dn-hero-stats { flex-wrap: wrap; }
    .dn-toolbar { gap: 6px; }
    .dn-card { padding: 8px 10px; }
    .dn-type-item { width: 65px; }
    .dn-type-item img { width: 36px; height: 36px; }
}

/* ==================== НОВАЯ ТАБЛИЦА ЛИДЕРОВ (СТИЛЬ РЕЖИМА РАЗРАБОТЧИКА) ==================== */

/* Back button */
.lbn-back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: #e67e22;
    border: none; border-radius: 30px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 16px;
}
.lbn-back-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(230,126,34,0.4); }

/* Header */
.lbn-header {
    display: flex; align-items: center; gap: 20px;
    padding: 20px 28px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    margin-bottom: 20px;
}
.lbn-header-icon {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(233,69,96,0.3);
    flex-shrink: 0;
}
.lbn-header-text h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1rem; color: white;
    margin-bottom: 2px;
    letter-spacing: 1px;
}
.lbn-header-text p {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: rgba(255,255,255,0.4);
}

/* Toolbar (tab switcher) */
.lbn-toolbar {
    display: flex; gap: 4px; margin-bottom: 20px;
    background: #1a1a2e;
    padding: 4px;
    border-radius: 12px;
    border: 2px solid #e94560;
    flex-wrap: wrap;
}
.lbn-tab {
    flex: 1;
    padding: 8px 16px;
    border: none; border-radius: 10px;
    background: transparent;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.3s;
}
.lbn-tab:hover { color: rgba(255,255,255,0.7); background: rgba(233, 69, 96, 0.1); }
.lbn-tab.active { color: white; box-shadow: 0 2px 12px rgba(233, 69, 96, 0.4); }
.lbn-tab[data-lbn-tab="speed"].active { background: linear-gradient(135deg, #f39c12, #e67e22); }
.lbn-tab[data-lbn-tab="speed"]:not(.active) { background: rgba(243,156,18,0.15); border: 1px solid rgba(243,156,18,0.3); }
.lbn-tab[data-lbn-tab="check"].active { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.lbn-tab[data-lbn-tab="check"]:not(.active) { background: rgba(46,204,113,0.15); border: 1px solid rgba(46,204,113,0.3); }
.lbn-tab[data-lbn-tab="single"].active { background: linear-gradient(135deg, #e94560, #c62a47); }
.lbn-tab[data-lbn-tab="single"]:not(.active) { background: rgba(233,69,96,0.15); border: 1px solid rgba(233,69,96,0.3); }

/* Tab content */
.lbn-tab-content { display: none; }
.lbn-tab-content.active { display: block; }

/* Mode block */
.lbn-mode-block {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    transition: border-color 0.3s;
}
.lbn-mode-block:hover { border-color: rgba(233, 69, 96, 0.35); }

/* Stats row */
.lbn-stats-row {
    display: flex; gap: 10px; margin-bottom: 16px;
    flex-wrap: wrap;
}
.lbn-stat-card {
    flex: 1; min-width: 100px;
    text-align: center;
    padding: 14px 10px;
    border-radius: 15px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    transition: all 0.3s;
}
.lbn-stat-card:hover { transform: translateY(-3px); border-color: #e94560; box-shadow: 0 5px 20px rgba(233, 69, 96, 0.2); }
.lbn-stat-card--rounds { border-color: rgba(99,144,240,0.4); }
.lbn-stat-card--rounds:hover { box-shadow: 0 5px 20px rgba(99,144,240,0.2); border-color: #6390f0; }
.lbn-stat-card--perfect { border-color: rgba(46,204,113,0.4); }
.lbn-stat-card--perfect:hover { box-shadow: 0 5px 20px rgba(46,204,113,0.2); border-color: #2ecc71; }
.lbn-stat-card--best { border-color: rgba(255,215,0,0.4); }
.lbn-stat-card--best:hover { box-shadow: 0 5px 20px rgba(255,215,0,0.2); border-color: #ffd700; }
.lbn-stat-icon { font-size: 1.1rem; margin-bottom: 6px; }
.lbn-stat-card--rounds .lbn-stat-icon { color: #6390f0; }
.lbn-stat-card--perfect .lbn-stat-icon { color: #2ecc71; }
.lbn-stat-card--best .lbn-stat-icon { color: #ffd700; }
.lbn-stat-value {
    font-family: 'Minecraft', monospace;
    font-size: 1rem; color: white; font-weight: bold;
}
.lbn-stat-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem; color: rgba(255,255,255,0.4);
    margin-top: 3px;
}

/* Category */
.lbn-category {
    background: #1a1a2e;
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 16px;
    margin-bottom: 14px;
    transition: all 0.3s;
}
.lbn-category:last-child { margin-bottom: 0; }
.lbn-category:hover { border-color: #e94560; box-shadow: 0 5px 20px rgba(233, 69, 96, 0.15); }
.lbn-category-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e94560;
}
.lbn-category-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem; color: #e94560; font-weight: bold;
    display: flex; align-items: center; gap: 8px;
    letter-spacing: 1px;
}
.lbn-category-label i { color: #e94560; }
.lbn-category-count {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.35);
}

/* Podium */
.lbn-podium {
    display: flex; justify-content: center; align-items: flex-end;
    gap: 12px; margin-bottom: 16px; padding: 10px 0 0;
}
.lbn-podium-item {
    text-align: center;
    padding: 14px 10px 10px;
    border-radius: 16px 16px 0 0;
    min-width: 80px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    transition: all 0.3s;
}
.lbn-podium-item:hover { transform: translateY(-4px); }
.lbn-podium-first {
    border: 2px solid rgba(255,215,0,0.5); border-bottom: none;
    padding-top: 18px; order: 2;
}
.lbn-podium-first:hover { box-shadow: 0 5px 20px rgba(255,215,0,0.2); border-color: #ffd700; }
.lbn-podium-second {
    border: 2px solid rgba(192,192,192,0.4); border-bottom: none;
    order: 1;
}
.lbn-podium-second:hover { box-shadow: 0 5px 20px rgba(192,192,192,0.15); border-color: #c0c0c0; }
.lbn-podium-third {
    border: 2px solid rgba(205,127,50,0.4); border-bottom: none;
    order: 3;
}
.lbn-podium-third:hover { box-shadow: 0 5px 20px rgba(205,127,50,0.15); border-color: #cd7f32; }
.lbn-podium-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    margin: 0 auto 6px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem; font-weight: bold; color: white;
    border: 2px solid rgba(233,69,96,0.3);
}
.lbn-podium-first .lbn-podium-avatar { background: linear-gradient(135deg, #ffd700, #ffaa00); box-shadow: 0 0 10px rgba(255,215,0,0.4); border-color: #ffd700; }
.lbn-podium-second .lbn-podium-avatar { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); border-color: #c0c0c0; }
.lbn-podium-third .lbn-podium-avatar { background: linear-gradient(135deg, #cd7f32, #b87333); border-color: #cd7f32; }
.lbn-podium-medal { font-size: 1.3rem; margin-bottom: 4px; }
.lbn-podium-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: white; font-weight: bold;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px;
    letter-spacing: 0.5px;
}
.lbn-podium-score {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem; color: #e94560; font-weight: bold;
}

/* Player rows */
.lbn-rows { display: flex; flex-direction: column; gap: 6px; }
.lbn-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
}
.lbn-row:hover {
    background: rgba(233, 69, 96, 0.08);
    border-color: rgba(233, 69, 96, 0.2);
    transform: translateX(3px);
}
.lbn-medal { font-size: 1rem; min-width: 28px; text-align: center; }
.lbn-rank {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem; color: rgba(255,255,255,0.35);
    min-width: 28px; text-align: center;
}
.lbn-row-info { flex: 1; min-width: 0; }
.lbn-row-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem; color: white; display: block;
}
.lbn-row-meta {
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem; color: rgba(255,255,255,0.3);
    display: block; margin-top: 2px;
}
.lbn-row-score {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem; color: #e94560; font-weight: bold;
}

/* Best player highlight */
.lbn-best {
    margin-top: 12px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: #ffd700;
    display: flex; align-items: center; gap: 6px;
}
.lbn-best:hover { border-color: #ffd700; box-shadow: 0 3px 12px rgba(255,215,0,0.2); }
.lbn-best i { color: #ffd700; }

/* Empty state */
.lbn-empty {
    text-align: center;
    padding: 50px 20px;
    color: rgba(255,255,255,0.3);
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px dashed rgba(233, 69, 96, 0.3);
}
.lbn-empty i { font-size: 2rem; color: #e94560; margin-bottom: 12px; display: block; }
.lbn-empty span {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem; display: block;
}
.lbn-empty-sub {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.2); display: block; margin-top: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .lbn-stats-row { flex-direction: column; }
    .lbn-podium { flex-wrap: wrap; }
    .lbn-toolbar { justify-content: center; }
}

/* ============================================
   ИСПРАВЛЕНИЯ ХАРДКОДИРОВАННЫХ ШИРИН
   ============================================ */
.completion-single {
    max-width: 95vw;
}

.reveal-pokemon-container img {
    width: 360px;
    height: 360px;
    max-width: 90vw;
    max-height: 90vw;
    object-fit: contain;
}

/* ============================================
   ПЛАНШЕТЫ (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .menu-header {
        padding: 30px 20px;
        border-radius: 40px;
    }

    .menu-header h1 {
        font-size: 1.8rem;
    }

    .tab-btn {
        padding: 10px 25px;
        font-size: 0.8rem;
    }

    .tab-content {
        padding: 20px;
    }

    .pres-card {
        padding: 30px;
        gap: 30px;
    }

    .pres-image-area {
        min-width: 300px;
    }

    .pres-pokemon-name {
        font-size: 2.5rem;
    }

    .pres-description {
        font-size: 1.1rem;
    }

    .filter-buttons {
        flex-wrap: wrap;
    }

    .help-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
        flex: 0 0 35% !important;
        max-width: 35% !important;
        min-width: 220px !important;
    }

    .completion-single {
        width: 550px !important;
    }

    .dn-editor {
        min-width: 280px;
    }

    .editor-panel {
        min-width: 280px !important;
    }

    .custom-notification {
        max-width: 300px;
        bottom: 20px;
        right: 20px;
    }
}

/* ============================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    body {
        padding: 6px;
        font-size: 14px;
    }

    .menu-header {
        padding: 20px 12px;
        margin-bottom: 30px;
        border-radius: 30px;
    }

    .menu-header h1 {
        font-size: 1.1rem;
    }

    .tab-btn {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    .tab-content {
        padding: 12px;
    }

    /* Фильтры */
    .filter-section {
        padding: 8px;
        margin-bottom: 12px;
    }

    .filter-buttons {
        gap: 6px;
    }

    .filter-toggle {
        padding: 5px 10px;
        font-size: 0.55rem;
    }

    .filter-gen-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .filter-types-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Модальные окна */
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 15px !important;
    }

    .modal-large {
        max-height: 85vh;
    }

    .modal-two-columns {
        flex-direction: column !important;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .modal-filters {
        max-height: 28vh;
        flex: none;
        max-width: 100%;
        overflow-y: auto;
        padding: 10px;
    }

    .modal-filters .filter-section {
        margin-bottom: 8px;
        padding: 8px;
    }

    .modal-filters .filter-title {
        margin-bottom: 6px;
        font-size: 0.6rem;
    }

    .filter-type-icon {
        width: 18px;
        height: 18px;
        object-fit: contain;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
        border-radius: 3px;
        vertical-align: middle;
        margin-right: 4px;
    }

    .filter-tags {
        gap: 6px;
    }

    .filter-tag {
        padding: 4px 8px;
    }

    .modal-results {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 10px;
    }

    .modal-results .filter-section {
        margin-bottom: 4px;
        padding: 6px 8px;
    }

    .modal-results .filter-title {
        margin-bottom: 2px;
    }

    .pokemon-list-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .completion-single {
        width: 95vw !important;
        padding: 15px !important;
        max-height: 80vh;
    }

    .completion-trophy {
        font-size: 2rem;
    }

    .exit-confirm-modal,
    .clear-random-modal,
    .mode-setup-modal {
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* Презентация */
    .pres-card {
        padding: 15px;
        gap: 15px;
        border-radius: 16px;
    }

    .pres-image-area {
        min-width: auto !important;
    }

    .pres-pokemon-name {
        font-size: 1.2rem;
    }

    .pres-description {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .reveal-btn {
        padding: 8px 16px;
        font-size: 0.7rem;
    }

    .pres-nav {
        gap: 10px;
    }

    .pres-nav-btn {
        padding: 6px 14px;
        font-size: 0.65rem;
    }

    /* Fullscreen presentation */
    .fullscreen-presentation .pres-card {
        padding: 12px;
        gap: 12px;
    }

    .fullscreen-presentation .pres-pokemon-name {
        font-size: 1.1rem;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-content {
        min-width: 0 !important;
        flex-direction: column !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card-container {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        gap: 8px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-info-area {
        text-align: center !important;
        order: 1 !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-image-area {
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-image-area img {
        max-height: 15vh !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-pokemon-name {
        text-align: center !important;
        font-size: 1rem !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-description {
        font-size: 0.5rem !important;
        line-height: 1.3 !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        display: block !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
        flex: 1 1 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 16px !important;
        padding: 12px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-section {
        overflow: visible !important;
        flex: none !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-section.section-active {
        flex: none !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar #singleMainContent,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar #singleExtraContent {
        flex: none !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-types-grid,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-grid {
        flex: none !important;
        min-height: auto !important;
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-type-btn,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-btn {
        padding: 6px 2px !important;
        gap: 3px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-type-btn img,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-btn img {
        width: 32px !important;
        height: 32px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-type-btn span,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-btn span {
        font-size: 0.4rem !important;
    }

    /* Side-by-side: stack on mobile */
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card {
        flex-direction: column !important;
    }

    /* Reveal типов */
    .type-reveal-overlay .reveal-title {
        font-size: 1.2rem !important;
        margin-bottom: 40px !important;
    }

    .type-reveal-overlay .reveal-title.shrink {
        margin-bottom: 10px !important;
    }

    .type-reveal-overlay .reveal-types-row {
        transform: scale(1) !important;
        gap: 15px !important;
    }

    .type-reveal-overlay .reveal-types-row.shrink {
        transform: scale(0.6) !important;
    }

    .type-reveal-overlay .reveal-type-item {
        padding: 12px 18px !important;
        gap: 8px !important;
    }

    .type-reveal-overlay .reveal-type-item img {
        width: 50px !important;
        height: 50px !important;
    }

    .type-reveal-overlay .reveal-type-item span {
        font-size: 0.7rem !important;
    }

    .reveal-pokemon-name {
        font-size: 1rem;
    }

    .reveal-next-btn {
        font-size: 0.9rem;
        padding: 10px 24px;
    }

    /* Типы */
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #devMode .type-icons-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #devMode .type-icon-item {
        width: 55px !important;
    }

    #devMode .type-icon-item img {
        width: 30px !important;
        height: 30px !important;
    }

    /* Dev mode */
    .editor-panel {
        min-width: 0 !important;
    }

    .slides-list-panel {
        min-width: 0 !important;
    }

    .dn-editor {
        min-width: 0 !important;
    }

    .dn-list {
        min-width: 0 !important;
    }

    .dn-upload {
        width: 140px !important;
        min-height: 140px !important;
    }

    .dn-card {
        padding: 10px !important;
    }

    .dn-type-item {
        width: 45px !important;
    }

    .dn-hero-stats {
        gap: 8px !important;
    }

    /* Games grid */
    .games-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .game-card {
        padding: 12px !important;
    }

    /* Help tab */
    .help-cards {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .help-card {
        padding: 20px 14px 18px !important;
    }

    .help-form {
        max-width: 100% !important;
        padding: 0 8px;
    }

    /* Уведомления */
    .custom-notification {
        left: 10px;
        right: 10px;
        bottom: 15px;
        max-width: none;
        font-size: 0.7rem;
        padding: 12px 16px;
    }

    /* Database tab */
    .db-header {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .db-search-row {
        flex-direction: column !important;
    }

    .db-cards {
        grid-template-columns: 1fr !important;
    }
    .db-pill-name {
        display: none;
    }
    .db-type-pills .db-pill {
        padding: 4px;
        aspect-ratio: 1;
    }
    .db-type-pills {
        grid-template-columns: repeat(9, 1fr);
    }

    .db-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .db-table {
        min-width: 600px;
    }

    /* Leaderboard */
    .lb-podium {
        gap: 8px !important;
    }

    .lb-podium-item {
        padding: 12px 8px !important;
    }

    .lb-podium-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .lb-scroll-row {
        gap: 8px !important;
    }
    .lb-scroll-card {
        flex: 0 0 100px !important;
        padding: 10px 6px !important;
    }

    .lb-stats-row {
        flex-direction: column !important;
    }

    .lbn-stats-row {
        flex-direction: column !important;
    }

    .lbn-podium {
        gap: 8px !important;
    }

    /* Speed timer */
    .speed-timer-value {
        font-size: 0.75rem !important;
        padding: 3px 10px !important;
    }

    /* Music manager */
    .bg-music-manager {
        flex-direction: column;
    }

    .music-item {
        flex-wrap: wrap;
    }

    /* Game selector */
    .game-selector {
        padding: 8px;
        gap: 6px;
    }

    .game-selector select {
        font-size: 0.65rem;
        padding: 6px 8px;
    }
}

/* ===== Custom Number Input +/- ===== */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

.num-input-group {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(233, 69, 96, 0.4);
    background: rgba(15, 52, 96, 0.6);
}

.num-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 32px;
    background: rgba(233, 69, 96, 0.25);
    border: none;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
    flex-shrink: 0;
}

.num-btn:hover {
    background: rgba(233, 69, 96, 0.5);
}

.num-btn:active {
    background: rgba(233, 69, 96, 0.7);
    transform: scale(0.92);
}

.num-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.num-input-group input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    -webkit-appearance: textfield;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(15, 52, 96, 0.6);
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    text-align: center;
    outline: none;
    width: 50px;
    height: 32px;
    padding: 0 4px;
}

.num-input-group input[type="number"]::-webkit-inner-spin-button,
.num-input-group input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.num-input-group input[type="number"]:focus {
    background: rgba(20, 60, 110, 0.8);
}

/* Stat inputs variant */
.num-input-group.help-stat-num input[type="number"] {
    width: 40px;
    font-size: 0.6rem;
    background: rgba(10, 30, 60, 0.5);
}

.num-input-group.help-stat-num .num-btn {
    width: 24px;
    height: 26px;
    font-size: 0.7rem;
    background: rgba(233, 69, 96, 0.15);
}

/* Модальное окно ввода (prompt) */
.prompt-modal {
    display: none;
    position: fixed;
    z-index: 20001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.prompt-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 400px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 50px rgba(233,69,96,0.4);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.prompt-modal-content h3 {
    color: #e94560;
    margin-bottom: 15px;
    font-size: 1rem;
    letter-spacing: 1px;
}

.prompt-modal-content input {
    width: 100%;
    padding: 10px 15px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    margin-bottom: 5px;
    box-sizing: border-box;
}

.prompt-modal-content input:focus {
    border-color: #ff6b81;
    box-shadow: 0 0 12px rgba(233,69,96,0.3);
}

.prompt-modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.prompt-modal-buttons button {
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.prompt-modal-buttons button:first-child {
    background: #2ecc71;
    color: white;
}

.prompt-modal-buttons button:first-child:hover {
    background: #27ae60;
    transform: scale(1.05);
}

.prompt-modal-buttons button:last-child {
    background: #2c3e50;
    color: white;
}

.prompt-modal-buttons button:last-child:hover {
    background: #1a252f;
    transform: scale(1.05);
}

/* Подрежим "Усложняющийся" */
.progressive-mode-toggle {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(233,69,96,0.2);
}

.progressive-toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.progressive-toggle-label input[type="checkbox"] {
    display: none;
}

.progressive-toggle-slider {
    width: 44px;
    height: 24px;
    background: #2c3e50;
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
}

.progressive-toggle-slider::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
}

.progressive-toggle-label input:checked + .progressive-toggle-slider {
    background: #2ecc71;
}

.progressive-toggle-label input:checked + .progressive-toggle-slider::after {
    transform: translateX(20px);
}

.progressive-toggle-text {
    display: flex;
    flex-direction: column;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: white;
    line-height: 1.4;
}

.progressive-toggle-text i {
    color: #2ecc71;
    margin-right: 4px;
}

.progressive-toggle-hint {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
}

.progressive-guessed-count {
    margin-top: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 8px;
}

.progressive-guessed-count strong {
    color: #2ecc71;
}

.progressive-reset-btn {
    background: rgba(231,76,60,0.2);
    border: 1px solid rgba(231,76,60,0.3);
    color: #e74c3c;
    padding: 3px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    transition: all 0.2s;
}

.progressive-reset-btn:hover {
    background: rgba(231,76,60,0.4);
}

.progressive-view-btn {
    background: rgba(52,152,219,0.2);
    border: 1px solid rgba(52,152,219,0.3);
    color: #3498db;
    padding: 3px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    transition: all 0.2s;
}

.progressive-view-btn:hover {
    background: rgba(52,152,219,0.4);
}

.guessed-pokemon-modal {
    max-width: 90vw !important;
    width: 700px !important;
}

.guessed-pokemon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0;
    margin: 15px 0;
}

.guessed-pokemon-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    transition: all 0.2s;
}

.guessed-pokemon-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(233,69,96,0.3);
    transform: translateY(-2px);
}

.guessed-pokemon-card img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.guessed-pokemon-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
    margin-top: 6px;
    font-weight: bold;
}

.guessed-pokemon-types {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.guessed-pokemon-types .type-chip {
    font-size: 0.4rem;
    padding: 2px 6px;
    border-radius: 6px;
}

.guessed-pokemon-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0;
    margin: 15px 0;
}

.guessed-round-group {
    margin-bottom: 15px;
}

.guessed-round-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    padding: 5px 10px;
    border-bottom: 1px solid rgba(233,69,96,0.2);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================
   Лекция: стили
   ============================================ */

.lecture-container {
    max-width: 900px;
    margin: 0 auto;
}

.lecture-hero {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(233,69,96,0.15), rgba(15,52,96,0.3));
    border-radius: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(233,69,96,0.3);
}

.lecture-hero-icon {
    font-size: 3rem;
    color: #e94560;
    margin-bottom: 15px;
}

.lecture-hero h2 {
    font-size: 1.3rem;
    color: white;
    margin-bottom: 10px;
}

.lecture-hero p {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
}

.lecture-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.lecture-meta span {
    color: rgba(255,255,255,0.6);
    font-size: 0.7rem;
    background: rgba(0,0,0,0.3);
    padding: 5px 12px;
    border-radius: 20px;
}

.lecture-meta i {
    color: #e94560;
    margin-right: 5px;
}

/* Навигация по блокам */
.lecture-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    justify-content: center;
}

.lecture-nav-btn {
    background: rgba(15,52,96,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s;
}

.lecture-nav-btn:hover {
    border-color: #e94560;
    transform: translateY(-2px);
}

.lecture-nav-btn.active {
    background: #e94560;
    border-color: #fff;
}

/* Блоки лекции */
.lecture-block {
    background: rgba(15,52,96,0.4);
    border-radius: 25px;
    margin-bottom: 20px;
    border: 1px solid rgba(233,69,96,0.2);
    overflow: hidden;
}

.lecture-block-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 25px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(233,69,96,0.2);
}

.lecture-block-num {
    width: 40px;
    height: 40px;
    background: #e94560;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    flex-shrink: 0;
}

.lecture-block-header h3 {
    font-size: 0.9rem;
    color: white;
    margin: 0;
}

.lecture-time {
    color: rgba(255,255,255,0.5);
    font-size: 0.65rem;
}

.lecture-time i {
    color: #e94560;
    margin-right: 4px;
}

.lecture-block-content {
    padding: 20px 25px;
}

/* Слайды */
.lecture-slide {
    background: rgba(0,0,0,0.2);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.05);
}

.lecture-slide:last-child {
    margin-bottom: 0;
}

.lecture-slide-title {
    font-size: 0.8rem;
    color: #e94560;
    margin-bottom: 12px;
    font-weight: bold;
}

.lecture-slide-title i {
    margin-right: 6px;
}

.lecture-slide p {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.lecture-slide p:last-child {
    margin-bottom: 0;
}

.lecture-slide ul {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    line-height: 1.6;
    margin: 10px 0;
    padding-left: 20px;
}

.lecture-slide li {
    margin-bottom: 5px;
}

/* Таблицы */
.lecture-table-wrap {
    overflow-x: auto;
    margin: 12px 0;
}

.lecture-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}

.lecture-table th {
    background: rgba(233,69,96,0.2);
    color: white;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid rgba(233,69,96,0.4);
}

.lecture-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}

.lecture-table tbody tr:hover {
    background: rgba(233,69,96,0.1);
}

/* Бейджи типов */
.type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

.type-fire { background: linear-gradient(135deg, #F08030, #DD4A1C); }
.type-water { background: linear-gradient(135deg, #6890F0, #4070C8); }
.type-grass { background: linear-gradient(135deg, #78C850, #50A030); }
.type-electric { background: linear-gradient(135deg, #F8D030, #E0A000); }
.type-ice { background: linear-gradient(135deg, #98D8D8, #70B8B8); }
.type-fighting { background: linear-gradient(135deg, #C03028, #982820); }
.type-poison { background: linear-gradient(135deg, #A040A0, #803080); }
.type-ground { background: linear-gradient(135deg, #E0C068, #C0A050); }
.type-flying { background: linear-gradient(135deg, #A890F0, #8870D0); }
.type-psychic { background: linear-gradient(135deg, #F85888, #D83868); }
.type-bug { background: linear-gradient(135deg, #A8B820, #889818); }
.type-rock { background: linear-gradient(135deg, #B8A038, #988028); }
.type-ghost { background: linear-gradient(135deg, #705898, #584078); }
.type-dragon { background: linear-gradient(135deg, #7038F8, #5028C8); }
.type-dark { background: linear-gradient(135deg, #705848, #584038); }
.type-steel { background: linear-gradient(135deg, #B8B8D0, #9898B0); }
.type-fairy { background: linear-gradient(135deg, #EE99AC, #CC7788); }

/* Цитаты */
.lecture-quote {
    background: linear-gradient(135deg, rgba(233,69,96,0.15), rgba(233,69,96,0.05));
    border-left: 4px solid #e94560;
    padding: 15px 20px;
    border-radius: 0 12px 12px 0;
    margin: 15px 0;
    color: rgba(255,255,255,0.9);
    font-size: 0.75rem;
    line-height: 1.6;
    font-style: italic;
}

.lecture-quote-main {
    background: linear-gradient(135deg, rgba(233,69,96,0.25), rgba(233,69,96,0.1));
    border-left-width: 6px;
    font-size: 0.85rem;
    padding: 20px 25px;
}

/* Карточки */
.lecture-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.lecture-card {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
}

.lecture-card-title {
    color: #e94560;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.lecture-card p {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

.lecture-card-info {
    background: rgba(15,52,96,0.4);
}

.lecture-card-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lecture-card-info li {
    padding: 4px 0;
    color: rgba(255,255,255,0.7);
    font-size: 0.7rem;
}

.lecture-card-info li::before {
    content: '•';
    color: #e94560;
    margin-right: 8px;
}

/* Интерактив */
.lecture-interactive {
    background: linear-gradient(135deg, rgba(15,52,96,0.5), rgba(0,0,0,0.3));
    border: 2px solid rgba(233,69,96,0.4);
    border-radius: 20px;
    overflow: hidden;
    margin: 15px 0;
}

.lecture-interactive-header {
    background: rgba(233,69,96,0.2);
    padding: 12px 20px;
    color: #e94560;
    font-size: 0.8rem;
    font-weight: bold;
    border-bottom: 1px solid rgba(233,69,96,0.3);
}

.lecture-interactive-header i {
    margin-right: 8px;
}

.lecture-interactive-content {
    padding: 20px;
}

.lecture-interactive-content p {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    line-height: 1.6;
}

.lecture-interactive-content ul {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    margin: 10px 0;
    padding-left: 20px;
}

.lecture-interactive-answer {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
    border: 1px solid rgba(76,175,80,0.3);
}

.lecture-interactive-answer-title {
    color: #4CAF50;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.lecture-interactive-answer-title i {
    margin-right: 6px;
}

.lecture-interactive-answer p {
    color: rgba(255,255,255,0.8);
}

.lecture-interactive-answer ul {
    color: rgba(255,255,255,0.8);
}

.lecture-interactive-small {
    border-color: rgba(255,193,7,0.4);
}

.lecture-interactive-small .lecture-interactive-header {
    background: rgba(255,193,7,0.15);
    color: #FFC107;
    border-bottom-color: rgba(255,193,7,0.3);
}

/* Да/Нет бейджи */
.lecture-no {
    background: rgba(76,175,80,0.2);
    color: #4CAF50;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.65rem;
}

.lecture-yes {
    background: rgba(255,193,7,0.2);
    color: #FFC107;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.65rem;
}

/* Финальный слайд */
.lecture-slide-final {
    text-align: center;
    background: linear-gradient(135deg, rgba(233,69,96,0.1), rgba(15,52,96,0.3));
    border: 1px solid rgba(233,69,96,0.3);
}

/* Дополнительные материалы */
.lecture-extras {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(233,69,96,0.2);
}

.lecture-extras h3 {
    color: white;
    font-size: 0.9rem;
    margin-bottom: 15px;
    text-align: center;
}

.lecture-extras h3 i {
    color: #e94560;
    margin-right: 8px;
}

/* Скрытие блоков при фильтрации */
.lecture-block.hidden {
    display: none;
}

/* ------------------- Помощь с хостингом (золотая тема) ------------------- */
.hosting-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 25px;
    background: rgba(30, 25, 10, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 200, 50, 0.2);
    border-radius: 20px;
    margin-bottom: 24px;
}

.hosting-hero-icon {
    font-size: 1.2rem;
    color: #f5c842;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(245, 200, 66, 0.4));
}

.hosting-hero h2 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    color: #f5c842;
    margin: 0;
}

.hosting-hero p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
    margin: 0 0 0 auto;
    white-space: nowrap;
}

.hosting-donate-card {
    background: linear-gradient(135deg, rgba(30, 25, 10, 0.7), rgba(20, 18, 8, 0.8));
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 200, 50, 0.5);
    border-radius: 20px;
    padding: 35px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(245, 200, 66, 0.1);
}

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

.hosting-donate-shine {
    display: none;
}

.hosting-donate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #f5c842, transparent);
    opacity: 0.6;
}

.hosting-donate-icon {
    font-size: 2.5rem;
    color: #f5c842;
    margin-bottom: 14px;
    filter: drop-shadow(0 0 15px rgba(245, 200, 66, 0.4));
    animation: cardFloat 3s ease-in-out infinite;
}

.hosting-donate-card h3 {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    color: #f5c842;
    margin-bottom: 10px;
}

.hosting-donate-card p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

.hosting-donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: linear-gradient(135deg, #f5c842, #d4a520);
    border: none;
    border-radius: 50px;
    color: #1a1a2e;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(245, 200, 66, 0.3);
}

.hosting-donate-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 30px rgba(245, 200, 66, 0.5);
    color: #1a1a2e;
}

.hosting-donate-btn:active {
    transform: translateY(0) scale(0.98);
}

.hosting-donate-note {
    margin-top: 14px;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.hosting-donate-note i {
    color: rgba(255, 200, 50, 0.4);
}

/* Адаптив для хостинга */
@media (max-width: 768px) {
    .hosting-hero {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .hosting-hero p {
        margin: 0;
    }
    .hosting-donate-card {
        padding: 25px 18px;
    }
    .hosting-donate-btn {
        padding: 12px 28px;
        font-size: 0.7rem;
    }
}

/* Адаптив */
@media (max-width: 768px) {
    .lecture-hero h2 {
        font-size: 1rem;
    }
    
    .lecture-meta {
        flex-direction: column;
        align-items: center;
    }
    
    .lecture-nav {
        gap: 6px;
    }
    
    .lecture-nav-btn {
        padding: 6px 12px;
        font-size: 0.6rem;
    }
    
    .lecture-block-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .lecture-cards-row {
        grid-template-columns: 1fr;
    }
    
    .lecture-table {
        font-size: 0.6rem;
    }
    
    .lecture-table th,
    .lecture-table td {
        padding: 6px 8px;
    }
}

/* ------------------- Авторизация ------------------- */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 40%, rgba(233, 69, 96, 0.08) 0%, transparent 50%),
                linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    z-index: 50000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInUp 0.6s ease;
}

.auth-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(15, 52, 96, 0.95));
    border: 2px solid #e94560;
    border-radius: 30px;
    padding: 24px 35px 30px 35px;
    width: 420px;
    max-width: 92%;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(233, 69, 96, 0.2);
    animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.auth-card-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 12px;
}

.auth-lang-switch {
    display: inline-flex;
    background: rgba(10, 10, 26, 0.85);
    border: 1.5px solid rgba(233, 69, 96, 0.45);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
    transition: all 0.2s ease;
}

.auth-lang-switch:hover {
    border-color: rgba(233, 69, 96, 0.85);
    box-shadow: 0 3px 15px rgba(233, 69, 96, 0.3);
}

.auth-lang-switch .lang-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: none;
    padding: 6px 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.auth-lang-switch .lang-btn:hover {
    color: #fff;
    background: rgba(233, 69, 96, 0.2);
}

.auth-lang-switch .lang-btn.active {
    background: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

.auth-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -6px;
    margin-bottom: 12px;
}

.auth-forgot-link {
    color: #e94560;
    font-size: 0.62rem;
    text-decoration: none;
    transition: opacity 0.2s;
    font-family: 'Minecraft', monospace;
}

.auth-forgot-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.auth-subtitle {
    color: #aaa;
    font-size: 0.65rem;
    margin-bottom: 18px;
    line-height: 1.4;
}

.auth-back-link {
    margin-top: 16px;
    color: #aaa;
    font-size: 0.65rem;
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
    text-align: center;
}

.auth-back-link:hover {
    color: #e94560;
}

.auth-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    background: rgba(20, 20, 40, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-tab:hover {
    border-color: rgba(233, 69, 96, 0.5);
    color: white;
}

.auth-tab.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: #e94560;
    color: #e94560;
}

.auth-form {
    text-align: center;
}

.auth-icon {
    font-size: 2.5rem;
    color: #e94560;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 15px rgba(233, 69, 96, 0.4));
}

.auth-form h2 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    color: white;
    margin-bottom: 20px;
}

.auth-field {
    text-align: left;
    margin-bottom: 14px;
}

.auth-field label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
}

.auth-field label i {
    margin-right: 6px;
    color: #e94560;
    width: 14px;
    text-align: center;
}

.auth-field input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(10, 10, 30, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
}

.auth-field input:focus {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.2);
}

.auth-field input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.auth-error {
    color: #e74c3c;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    min-height: 18px;
    margin-bottom: 10px;
}

.auth-submit-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    border-radius: 14px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(233, 69, 96, 0.4);
}

.auth-submit-btn:active {
    transform: translateY(0);
}

.auth-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.auth-skip {
    text-align: center;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: color 0.2s;
}

.auth-skip:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* Панель пользователя */
.user-bar {
    position: relative;
    z-index: 10000;
    max-width: 1200px;
    margin: 0 auto 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
}

.user-bar-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.user-bar-info i {
    color: #e94560;
    font-size: 1.1rem;
}

.user-avatar-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #e94560;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
}
.user-avatar-wrap:hover {
    border-color: #f39c12;
    box-shadow: 0 0 10px rgba(243,156,18,0.4);
}
.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-name-image {
    height: 40px;
    width: 40px;
    object-fit: contain;
    margin-left: 6px;
    vertical-align: middle;
    border-radius: 4px;
    flex-shrink: 0;
}

.admin-badge {
    background: #e94560;
    color: #fff;
    font-size: 0.55rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    padding: 0 4px;
    cursor: pointer;
    animation: badgePulse 2s infinite;
    flex-shrink: 0;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.notif-badge {
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    transition: all 0.2s;
}

.notif-badge:hover {
    background: transparent;
    opacity: 0.8;
}

.notif-badge:hover i {
    color: #ff6b81;
}

.notif-badge.has-unread {
    background: transparent;
    border: none;
    animation: badgePulse 2s infinite;
}

.notif-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e94560;
    color: #fff;
    font-size: 0.45rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    min-width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    border-radius: 50%;
    padding: 0 2px;
}

.notif-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: rgba(15, 20, 40, 0.97);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 16px;
    padding: 12px;
    min-width: 280px;
    max-width: 350px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 9999;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.notif-dropdown-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #e94560;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 8px;
}

.notif-dropdown-title i {
    margin-right: 6px;
}

.notif-item {
    padding: 8px 10px;
    border-radius: 10px;
    margin-bottom: 6px;
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.2);
    cursor: default;
}

.notif-item.unread {
    background: rgba(52, 152, 219, 0.15);
    border-color: rgba(52, 152, 219, 0.4);
}

.notif-item-header {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notif-item-header span {
    color: #3498db;
}

.notif-item-text {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
}

.notif-empty {
    text-align: center;
    color: rgba(255,255,255,0.25);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 16px 0;
}

.notif-item-user-reply {
    background: rgba(233, 69, 96, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.6);
}

.notif-item-user-reply i {
    color: #e94560;
    margin-right: 4px;
}

.notif-item-user-reply b {
    color: #e94560;
}

.notif-reply-box {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.notif-reply-input {
    flex: 1;
    background: rgba(10, 10, 30, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    outline: none;
}

.notif-reply-input:focus {
    border-color: rgba(233, 69, 96, 0.5);
}

.notif-reply-send {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 8px;
    padding: 4px 10px;
    color: #e94560;
    cursor: pointer;
    transition: all 0.2s;
}

.notif-reply-send:hover {
    background: rgba(233, 69, 96, 0.4);
    color: white;
}

.user-bar-logout {
    background: rgba(231, 76, 60, 0.2);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 20px;
    color: #e74c3c;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.user-bar-logout:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
}

.guest-bar-login {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.guest-bar-login:hover {
    background: rgba(46, 204, 113, 0.3);
    border-color: #2ecc71;
}

/* ------------------- Админ-панель ------------------- */
.admin-controls {
    margin-bottom: 20px;
}

.admin-filter-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.admin-filter-btn {
    background: rgba(20, 20, 40, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 10px;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-filter-btn:hover {
    border-color: rgba(233, 69, 96, 0.5);
    color: white;
}

.admin-filter-btn.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: #e94560;
    color: #e94560;
}

.admin-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

.admin-stat b {
    margin-right: 3px;
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-item {
    background: rgba(15, 52, 96, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.15);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color 0.2s;
}

.admin-item:hover {
    border-color: rgba(233, 69, 96, 0.35);
}

.admin-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.admin-item-type {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
}

.admin-item-user {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
}

.admin-item-user i { margin-right: 4px; }

.admin-item-status {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    margin-left: auto;
}

.admin-item-date {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.25);
}

.admin-item-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin-bottom: 10px;
}

.admin-item-details b {
    color: white;
}

.admin-item-actions {
    display: flex;
    gap: 8px;
}

.admin-item-actions button {
    background: rgba(20, 20, 40, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-item-actions button:hover {
    border-color: rgba(233, 69, 96, 0.5);
    color: white;
    background: rgba(233, 69, 96, 0.15);
}

.admin-delete-btn:hover {
    border-color: #e74c3c !important;
    color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.15) !important;
}

.admin-item-reply {
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
    font-family: 'Minecraft', monospace;
}

.admin-item-reply i {
    color: #3498db;
    margin-right: 4px;
}

.admin-item-user-reply {
    background: rgba(233, 69, 96, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
    font-family: 'Minecraft', monospace;
}

.admin-item-user-reply i {
    color: #e94560;
    margin-right: 4px;
}

.admin-item-user-reply b {
    color: #e94560;
}

.admin-mark-read-btn {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: 6px;
    padding: 2px 8px;
    color: #2ecc71;
    cursor: pointer;
    font-size: 0.55rem;
    margin-left: 8px;
    transition: all 0.2s;
    vertical-align: middle;
}

.admin-mark-read-btn:hover {
    background: rgba(46, 204, 113, 0.3);
    color: white;
}

.admin-sub-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.admin-sub-tab {
    background: rgba(15, 52, 96, 0.6);
    border: 2px solid rgba(233, 69, 96, 0.4);
    border-radius: 50px;
    color: rgba(255,255,255,0.7);
    padding: 8px 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-sub-tab:hover {
    border-color: rgba(233, 69, 96, 0.4);
    color: rgba(255,255,255,0.8);
}

.admin-sub-tab.active {
    background: rgba(233, 69, 96, 0.2);
    border-color: #e94560;
    color: #e94560;
}

.admin-item-reply-box {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.admin-reply-input {
    flex: 1;
    background: rgba(10, 10, 30, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 8px;
    padding: 6px 10px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
}

.admin-reply-input:focus {
    border-color: rgba(233, 69, 96, 0.6);
}

.admin-reply-send {
    background: rgba(233, 69, 96, 0.25);
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 8px;
    padding: 6px 12px;
    color: #e94560;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-reply-send:hover {
    background: rgba(233, 69, 96, 0.4);
    color: white;
}

@media (max-width: 480px) {
    .auth-card { padding: 22px 18px; }
    .auth-tab { font-size: 0.6rem; padding: 8px; }
    .admin-filter-btns { gap: 5px; }
    .admin-item-header { gap: 6px; }
}

/* ============================================
   ПОЛНАЯ АДАПТИВНОСТЬ ДЛЯ ТЕЛЕФОНОВ
   ============================================ */

/* --- Табы: перенос на мобильных --- */
.tabs {
    gap: 10px;
    justify-content: center;
}

.tab-btn {
    white-space: nowrap;
    flex-shrink: 1;
}

/* --- Мобильный: <=768px --- */
@media (max-width: 768px) {
    body { padding: 6px; }

    .main-menu { max-width: 100%; }

    .menu-header {
        padding: 20px 15px;
        margin-bottom: 20px;
        border-radius: 30px !important;
    }
    .menu-header h1 {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }
    .menu-header p {
        font-size: 0.6rem;
        line-height: 1.4;
    }

    .tab-btn {
        padding: 8px 16px;
        font-size: 0.65rem;
    }

    .tab-content {
        padding: 15px;
        border-radius: 20px !important;
    }

    /* Переключатель режимов — перенос */
    .mode-switcher,
    [style*="display: flex"][style*="justify-content: space-between"][style*="border-radius: 20px"] {
        flex-direction: column !important;
        align-items: stretch !important;
        border-radius: 20px !important;
        padding: 10px !important;
        gap: 10px !important;
    }
    [style*="display: flex"][style*="justify-content: space-between"][style*="border-radius: 20px"] > div {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    /* Модалки */
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 15px !important;
        border-radius: 20px !important;
    }
    .modal-two-columns {
        flex-direction: column !important;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    .modal-filters {
        max-height: 28vh;
        flex: none;
        max-width: 100%;
        overflow-y: auto;
        padding: 8px;
    }
    .modal-filters .filter-section {
        margin-bottom: 6px;
        padding: 6px;
    }
    .modal-filters .filter-title {
        margin-bottom: 4px;
        font-size: 0.55rem;
    }
    .filter-type-icon {
        width: 16px;
        height: 16px;
        margin-right: 3px;
    }
    .filter-tags {
        gap: 5px;
    }
    .filter-tag {
        padding: 3px 6px;
    }
    .modal-results {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 8px;
    }
    .modal-results .filter-section {
        margin-bottom: 3px;
        padding: 5px 6px;
    }
    .modal-results .filter-title {
        margin-bottom: 1px;
    }
    .modal-buttons {
        flex-direction: column;
        gap: 8px;
    }
    .modal-buttons button {
        width: 100%;
        padding: 12px;
    }

    .confirm-modal-content,
    .completion-modal-content,
    .exit-confirm-modal,
    .clear-random-modal,
    .mode-setup-modal {
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* Презентация */
    .pres-card {
        flex-direction: column !important;
        padding: 15px !important;
        gap: 15px !important;
    }
    .pres-image-area {
        min-width: auto !important;
        width: 100% !important;
    }
    .pres-pokemon-name {
        font-size: 1.3rem;
    }
    .pres-description {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    /* Карточки игр */
    .games-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .game-card {
        padding: 12px !important;
    }

    /* Фильтры */
    .filter-section {
        padding: 8px;
        margin-bottom: 10px;
    }
    .filter-buttons {
        gap: 6px;
    }
    .filter-toggle {
        padding: 5px 10px;
        font-size: 0.55rem;
    }
    .filter-gen-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .filter-types-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Список покемонов */
    .pokemon-list-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* Один игрок / Speed */
    .completion-single {
        width: 95vw !important;
        padding: 15px !important;
        max-height: 80vh;
    }
    .speed-timer-value {
        padding: 3px 10px !important;
        font-size: 0.75rem !important;
    }

    /* Типы */
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .reveal-type-card img {
        width: 80px;
        height: 80px;
    }
    .types-reveal-panel {
        gap: 30px;
    }

    /* Reveal покемон */
    .reveal-pokemon-container img {
        width: 180px;
        height: 180px;
    }
    .reveal-pokemon-name {
        font-size: 1rem;
    }

    /* Dev mode */
    .editor-panel,
    .slides-list-panel,
    .dn-editor,
    .dn-list {
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    .dev-main-grid {
        flex-direction: column !important;
    }
    .back-to-play-btn {
        width: 100%;
    }
    .admin-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .admin-header > div {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .game-selector {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .game-selector select {
        min-width: 0 !important;
        flex: 1 !important;
    }
    #uploadAreaDev {
        min-height: 150px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #tabDev .editor-panel > div:nth-child(2) {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    #tabDev .editor-panel > div:nth-child(2) > div {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    #typeIconsGridDev {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        flex-wrap: unset !important;
        padding: 5px !important;
    }
    #typeIconsGridDev .type-icon-item {
        width: auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        max-width: none !important;
        flex: none !important;
        justify-self: stretch !important;
        align-self: stretch !important;
    }
    #tabDev .action-buttons {
        flex-direction: column !important;
    }
    #tabDev .action-buttons button {
        width: 100%;
    }
    .dn-upload {
        width: 120px !important;
        min-height: 120px !important;
    }
    .dn-card {
        padding: 8px !important;
    }
    .dn-type-item {
        width: 40px !important;
    }
    #devMode .type-icons-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #devMode .type-icon-item {
        width: auto !important;
    }
    #devMode .type-icon-item img {
        width: 28px !important;
        height: 28px !important;
    }

    /* Помощь */
    .help-cards {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .help-card {
        padding: 15px 12px !important;
    }
    .help-form {
        max-width: 100% !important;
        padding: 0;
    }

    /* Leaderboard */
    .lbn-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .lbn-toolbar {
        flex-wrap: wrap;
        justify-content: center;
    }
    .lbn-tab {
        padding: 6px 12px;
        font-size: 0.6rem;
    }
    .lbn-stats-row {
        flex-direction: column !important;
    }
    .lbn-podium {
        gap: 8px !important;
        flex-wrap: wrap;
    }
    .lbn-podium-item {
        padding: 10px 6px !important;
        min-width: 90px;
    }
    .lbn-podium-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    .lbn-row {
        padding: 8px 10px;
        gap: 6px;
    }

    /* Database */
    .db-header {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .db-search-row {
        flex-direction: column !important;
    }
    .db-cards {
        grid-template-columns: 1fr !important;
    }
    .db-pill-name {
        display: none;
    }
    .db-type-pills .db-pill {
        padding: 3px;
        aspect-ratio: 1;
    }
    .db-type-pills {
        grid-template-columns: repeat(9, 1fr) !important;
    }
    .db-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* User bar */
    .user-bar {
        top: 8px;
        right: 8px;
        left: 8px;
        padding: 8px 12px;
    }
    .user-bar-info {
        font-size: 0.65rem;
    }

    /* Уведомления */
    .custom-notification {
        left: 8px;
        right: 8px;
        bottom: 10px;
        max-width: none;
        font-size: 0.7rem;
        padding: 10px 14px;
    }

    /* Lecture table */
    .lecture-table {
        font-size: 0.6rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .lecture-table th,
    .lecture-table td {
        padding: 5px 6px;
        white-space: nowrap;
    }

    /* Music manager */
    .bg-music-manager {
        flex-direction: column;
    }
    .music-item {
        flex-wrap: wrap;
    }

    /* Auth overlay */
    .auth-overlay {
        padding: 15px;
    }
    .auth-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        border-radius: 20px !important;
    }

    /* Game selector */
    .game-selector {
        padding: 8px;
        gap: 6px;
    }
    .game-selector select {
        font-size: 0.65rem;
        padding: 6px 8px;
    }
}

/* --- Маленькие телефоны: <=400px --- */
@media (max-width: 400px) {
    .menu-header h1 {
        font-size: 0.95rem;
    }
    .tab-btn {
        padding: 6px 10px;
        font-size: 0.58rem;
    }
    .pres-pokemon-name {
        font-size: 1.1rem;
    }
    .lbn-podium-item {
        min-width: 80px;
    }
    .reveal-pokemon-container img {
        width: 140px;
        height: 140px;
    }
}

/* ============================================
   СИСТЕМА ДРУЗЕЙ
   ============================================ */

.friends-badge,
.invites-badge {
    display: none;
    position: relative;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    transition: color 0.3s;
    z-index: 10000;
}
.friends-badge:hover,
.invites-badge:hover {
    color: #e94560;
}
.friends-badge.has-requests {
    color: #3498db;
}
.invites-badge.has-invites {
    color: #fff;
    background: #f39c12;
    border-radius: 50%;
    padding: 2px 5px;
}
.friends-badge .friends-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e94560;
    color: #fff;
    font-size: 0.5rem;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-family: 'Minecraft', monospace;
}
.invites-badge .invites-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e94560;
    color: #fff;
    font-size: 0.5rem;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-family: 'Minecraft', monospace;
}

/* Friends Dropdown */
.friends-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 340px;
    max-height: 450px;
    overflow-y: auto;
    background: #16213e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 12px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.friends-dropdown-title {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(233,69,96,0.3);
}
.friends-search-box {
    position: relative;
    margin-bottom: 10px;
}
.friends-search-box input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(15,52,96,0.5);
    border: 1px solid rgba(233,69,96,0.3);
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    box-sizing: border-box;
}
.friends-search-box input:focus {
    border-color: #e94560;
}
.friends-search-box input::placeholder {
    color: rgba(255,255,255,0.3);
}
.friends-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.3);
    border-radius: 8px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 10;
    display: none;
}
.friends-search-results.has-results {
    display: block;
}
.friends-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.8);
    cursor: default;
}
.friends-search-item:last-child {
    border-bottom: none;
}
.friends-search-item button {
    background: rgba(233,69,96,0.3);
    border: 1px solid #e94560;
    border-radius: 6px;
    color: #e94560;
    padding: 3px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.2s;
}
.friends-search-item button:hover {
    background: #e94560;
    color: #fff;
}
.friends-search-item button.friend-pending {
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.4);
    cursor: default;
}
.friends-section {
    margin-top: 8px;
}
.friends-section-title {
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.friends-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: background 0.2s;
}
.friends-item:hover {
    background: rgba(233,69,96,0.1);
}
.friends-item .online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}
.friends-item .online-dot.online {
    background: #2ecc71;
}
.friends-item-name {
    flex: 1;
    color: rgba(255,255,255,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.friends-item-actions {
    display: flex;
    gap: 4px;
}
.friends-item-actions button {
    background: none;
    border: 1px solid rgba(233,69,96,0.3);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    padding: 2px 6px;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
}
.friends-item-actions button:hover {
    border-color: #e94560;
    color: #e94560;
}
.friends-item-actions button.invite-btn:hover {
    border-color: #f39c12;
    color: #f39c12;
}
.friends-item-actions button.accept-btn {
    border-color: #2ecc71;
    color: #2ecc71;
}
.friends-item-actions button.accept-btn:hover {
    background: #2ecc71;
    color: #fff;
}
.friends-item-actions button.reject-btn {
    border-color: #e74c3c;
    color: #e74c3c;
}
.friends-item-actions button.reject-btn:hover {
    background: #e74c3c;
    color: #fff;
}
.friends-empty {
    text-align: center;
    color: rgba(255,255,255,0.25);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 12px;
}

/* Invites Dropdown */
.invites-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: #16213e;
    border: 2px solid #f39c12;
    border-radius: 12px;
    padding: 12px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.invites-dropdown-title {
    color: #f39c12;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(243,156,18,0.3);
}
.invites-list {
    margin-bottom: 8px;
}
.invites-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(15,52,96,0.3);
    border-radius: 8px;
    margin-bottom: 6px;
}
.invites-item-info {
    flex: 1;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.8);
}
.invites-item-info .mode-label {
    color: #f39c12;
    font-size: 0.55rem;
}
.invites-item-actions {
    display: flex;
    gap: 4px;
}
.invites-item-actions button {
    background: none;
    border: 1px solid rgba(243,156,18,0.3);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    padding: 3px 8px;
    font-size: 0.55rem;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
}
.invites-item-actions button.accept-btn {
    border-color: #2ecc71;
    color: #2ecc71;
}
.invites-item-actions button.accept-btn:hover {
    background: #2ecc71;
    color: #fff;
}
.invites-item-actions button.reject-btn {
    border-color: #e74c3c;
    color: #e74c3c;
}
.invites-item-actions button.reject-btn:hover {
    background: #e74c3c;
    color: #fff;
}

/* Invite Modal */
.invite-mode-btn {
    flex: 1;
    padding: 10px;
    background: rgba(15,52,96,0.3);
    border: 2px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}
.invite-mode-btn:hover {
    border-color: rgba(233,69,96,0.5);
    color: rgba(255,255,255,0.9);
}
.invite-mode-btn.active {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}
.invite-setting-btn {
    padding: 8px 16px;
    background: rgba(15,52,96,0.3);
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
}
.invite-setting-btn:hover {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.9);
}
.invite-setting-btn.active {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}
.invite-send-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #e94560, #c0392b);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s;
}
.invite-send-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(233,69,96,0.4);
}

/* Waiting dots animation */
.invite-wait-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.wait-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f39c12;
    animation: waitPulse 1.4s infinite ease-in-out both;
}
.wait-dot:nth-child(1) { animation-delay: -0.32s; }
.wait-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes waitPulse {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* ============================================
   МОБИЛЬНАЯ АДАПТАЦИЯ ИГРОВОГО ИНТЕРФЕЙСА
   ============================================ */

/* --- pres-header на мобильных --- */
@media (max-width: 768px) {
    .pres-header {
        padding: 10px 12px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .pres-header h3 {
        font-size: 0.65rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }
    .pres-zoom-controls {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 4px 8px !important;
        order: 3;
        width: 100%;
        justify-content: center;
    }
    .pres-zoom-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.65rem !important;
    }
    .pres-zoom-value {
        font-size: 0.6rem !important;
        min-width: 30px !important;
    }
    .pres-volume-controls {
        margin-left: 0 !important;
        padding-left: 8px !important;
        border-left: 1px solid rgba(233,69,96,0.3) !important;
    }
    .pres-volume-slider {
        width: 100px !important;
    }
    .pres-zoom-reset {
        padding: 0 22px !important;
        font-size: 0.6rem !important;
    }
    .close-pres-btn, #closePresBtn {
        padding: 6px 16px !important;
        font-size: 0.6rem !important;
        order: 2;
        flex-shrink: 0;
    }
    /* Карточка покемона */
    .pres-card {
        padding: 12px !important;
        gap: 12px !important;
        border-radius: 20px !important;
        width: 100% !important;
        animation: none !important;
    }
    /* Пульт участника - сетка типов */
    .types-game-section {
        overflow: visible !important;
    }
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .pres-image-area {
        min-width: auto !important;
        width: 100%;
    }
    .pres-image-area img {
        max-height: 35vh !important;
    }
    .pres-pokemon-name {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
        text-align: center;
    }
    .pres-description {
        font-size: 0.6rem !important;
        line-height: 1.3 !important;
        padding: 10px !important;
    }
    .reveal-btn {
        padding: 10px 20px !important;
        font-size: 0.75rem !important;
    }
    .pres-nav {
        gap: 10px !important;
        margin-top: 20px !important;
    }
    .pres-nav-btn {
        padding: 8px 16px !important;
        font-size: 0.7rem !important;
    }
    .pres-counter {
        padding: 0 16px !important;
        font-size: 0.7rem !important;
        line-height: 36px !important;
        height: 36px !important;
    }
    .pres-content {
        padding: 12px !important;
    }
}

/* --- Маленькие телефоны --- */
@media (max-width: 480px) {
    .pres-header {
        padding: 8px 10px !important;
    }
    .pres-header h3 {
        font-size: 0.55rem !important;
    }
    .pres-zoom-controls {
        gap: 3px !important;
        padding: 3px 6px !important;
    }
    .pres-zoom-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.55rem !important;
    }
    .pres-zoom-reset {
        padding: 0 18px !important;
        font-size: 0.55rem !important;
    }
    .pres-volume-slider {
        width: 80px !important;
    }
    #closePresBtn {
        padding: 5px 10px !important;
        font-size: 0.55rem !important;
        border-radius: 20px !important;
    }
    #closePresBtn i {
        font-size: 0.6rem;
    }
    .pres-card {
        padding: 10px !important;
        gap: 10px !important;
        border-radius: 14px !important;
    }
    .pres-image-area img {
        max-height: 28vh !important;
    }
    .pres-pokemon-name {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }
    .pres-description {
        font-size: 0.6rem !important;
        padding: 8px !important;
    }
    .reveal-btn {
        padding: 8px 14px !important;
        font-size: 0.65rem !important;
    }
    .pres-nav-btn {
        padding: 6px 12px !important;
        font-size: 0.6rem !important;
    }
    .pres-counter {
        padding: 0 12px !important;
        font-size: 0.6rem !important;
        line-height: 30px !important;
        height: 30px !important;
    }
    /* Модалка завершения */
    .completion-single {
        width: 95vw !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }
    .completion-score-value {
        font-size: 1.5rem !important;
    }
    .completion-history-row {
    padding: 3px 6px !important;
        font-size: 0.55rem !important;
    }
    .completion-history-img img {
        width: 28px !important;
        height: 28px !important;
    }
    /* Speed timer */
    .speed-timer-value {
        padding: 4px 12px !important;
        font-size: 0.8rem !important;
    }
    /* Mode setup modal */
    .mode-setup-modal {
        padding: 20px 16px !important;
        border-radius: 20px !important;
    }
    .mode-setup-btn {
        padding: 8px 14px !important;
        font-size: 0.6rem !important;
    }
    /* Exit confirm */
    .exit-confirm-modal {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }
}

.chat-conversation-item {
    transition: background 0.2s !important;
}
.chat-conversation-item:hover {
    background: rgba(233, 69, 96, 0.1) !important;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.duel-results-container {
    display: flex;
    gap: 15px;
    margin: 15px 0;
    align-items: stretch;
}

.duel-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
}

@media (max-width: 600px) {
    .duel-results-container {
        flex-direction: column;
        gap: 0;
    }
    .duel-vs {
        padding: 8px 0;
        font-size: 1.2rem;
    }
}

.duels-friend-list {
    display: flex;
    gap: 8px;
    padding: 10px 0;
    overflow-x: auto;
    flex-wrap: wrap;
}

.duels-friend-item {
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Minecraft', monospace;
}

.duels-friend-item:hover,
.duels-friend-item.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    color: #e94560;
}

.duels-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.duel-history-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.2s;
}

.duel-history-card:hover {
    background: rgba(233, 69, 96, 0.08);
    border-color: rgba(233, 69, 96, 0.2);
}

.duel-history-icon {
    font-size: 1.2rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.duel-history-info {
    flex: 1;
    min-width: 0;
}

.duel-history-names {
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
}

.duel-history-mode {
    color: #888;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    margin-top: 2px;
}

.duel-history-scores {
    display: flex;
    gap: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* ===== ROOM ANIMATIONS ===== */
@keyframes roomFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes roomSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes roomCodeGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(233,69,96,0.4), 0 0 40px rgba(233,69,96,0.2); }
    50% { text-shadow: 0 0 30px rgba(233,69,96,0.7), 0 0 60px rgba(233,69,96,0.4), 0 0 90px rgba(233,69,96,0.2); }
}

@keyframes roomPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

#roomRoleSelectOverlay[style*="display: flex"],
#roomSetupOverlay[style*="display: flex"],
#roomResultsOverlay[style*="display: flex"] {
    animation: roomFadeIn 0.25s ease-out;
}

#roomRoleSelectOverlay[style*="display: flex"] > div,
#roomSetupOverlay[style*="display: flex"] > div,
#roomResultsOverlay[style*="display: flex"] > div {
    animation: roomSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#roomWaitingOverlay[style*="display: flex"] {
    animation: roomFadeIn 0.3s ease-out;
}

#roomWaitingOverlay[style*="display: flex"] > div {
    animation: roomSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#roomCodeDisplay {
    animation: roomCodeGlow 2s ease-in-out infinite;
    transition: letter-spacing 0.3s ease;
}

#roomRoleSelectOverlay button[onclick*="selectRoomRole"],
#roomSetupOverlay button[onclick*="createRoom"],
#roomWaitingOverlay button[onclick*="startRoomGame"],
#roomResultsOverlay button[onclick*="closeRoom"] {
    transition: all 0.2s ease;
}

#roomRoleSelectOverlay button[onclick*="selectRoomRole"]:hover,
#roomSetupOverlay button[onclick*="createRoom"]:hover,
#roomWaitingOverlay button[onclick*="startRoomGame"]:hover:not([style*="opacity: 0.5"]) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(233,69,96,0.4);
}

#roomRoleSelectOverlay button[onclick*="selectRoomRole"]:active,
#roomSetupOverlay button[onclick*="createRoom"]:active,
#roomWaitingOverlay button[onclick*="startRoomGame"]:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(233,69,96,0.3);
}

#roomRoleSelectOverlay button[onclick*="closeRoomRoleSelect"],
#roomSetupOverlay button[onclick*="closeRoomSetup"],
#roomWaitingOverlay button[onclick*="closeRoom"]:not(#roomStartBtn),
#roomResultsOverlay button[onclick*="closeRoom"] {
    transition: all 0.2s ease;
}

#roomRoleSelectOverlay button[onclick*="closeRoomRoleSelect"]:hover,
#roomSetupOverlay button[onclick*="closeRoomSetup"]:hover,
#roomWaitingOverlay button[onclick*="closeRoom"]:hover:not(#roomStartBtn),
#roomResultsOverlay button[onclick*="closeRoom"]:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

#roomRoleSelectOverlay button[onclick*="closeRoomRoleSelect"]:active,
#roomSetupOverlay button[onclick*="closeRoomSetup"]:active,
#roomWaitingOverlay button[onclick*="closeRoom"]:active:not(#roomStartBtn),
#roomResultsOverlay button[onclick*="closeRoom"]:active {
    transform: translateY(1px);
}

#roomPlayersList > div {
    animation: roomSlideUp 0.3s ease-out;
    animation-fill-mode: both;
}

#roomPlayersList > div:nth-child(1) { animation-delay: 0.05s; }
#roomPlayersList > div:nth-child(2) { animation-delay: 0.1s; }
#roomPlayersList > div:nth-child(3) { animation-delay: 0.15s; }
#roomPlayersList > div:nth-child(4) { animation-delay: 0.2s; }
#roomPlayersList > div:nth-child(5) { animation-delay: 0.25s; }
#roomPlayersList > div:nth-child(6) { animation-delay: 0.3s; }

#roomResultsTable > div {
    animation: roomSlideUp 0.3s ease-out;
    animation-fill-mode: both;
}

#roomResultsTable > div:nth-child(1) { animation-delay: 0.05s; }
#roomResultsTable > div:nth-child(2) { animation-delay: 0.1s; }
#roomResultsTable > div:nth-child(3) { animation-delay: 0.15s; }
#roomResultsTable > div:nth-child(4) { animation-delay: 0.2s; }
#roomResultsTable > div:nth-child(5) { animation-delay: 0.25s; }
#roomResultsTable > div:nth-child(6) { animation-delay: 0.3s; }

@keyframes roomCodePopIn {
    0% { opacity: 0; transform: scale(0.5); }
    70% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

#roomCodeDisplay.animate-in {
    animation: roomCodePopIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== CHAT ANIMATIONS ===== */
@keyframes chatItemSlideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes chatMsgSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes chatWindowOpen {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes chatReplySlide {
    from { opacity: 0; max-height: 0; padding: 0 15px; }
    to { opacity: 1; max-height: 60px; padding: 8px 15px; }
}

#tabChat .chat-conversation-item {
    animation: chatItemSlideIn 0.3s ease-out;
    animation-fill-mode: both;
}

#tabChat .chat-conversation-item:nth-child(2) { animation-delay: 0.03s; }
#tabChat .chat-conversation-item:nth-child(3) { animation-delay: 0.06s; }
#tabChat .chat-conversation-item:nth-child(4) { animation-delay: 0.09s; }
#tabChat .chat-conversation-item:nth-child(5) { animation-delay: 0.12s; }
#tabChat .chat-conversation-item:nth-child(6) { animation-delay: 0.15s; }
#tabChat .chat-conversation-item:nth-child(7) { animation-delay: 0.18s; }
#tabChat .chat-conversation-item:nth-child(8) { animation-delay: 0.21s; }

#tabChat .chat-conversation-item:hover {
    transform: translateX(4px);
    background: rgba(233,69,96,0.08);
}

#chatWindow[style*="display: flex"] {
    animation: chatWindowOpen 0.25s ease-out;
}



#chatReplyPreview[style*="display: flex"] {
    animation: chatReplySlide 0.2s ease-out;
}

#chatSendBtn {
    transition: all 0.2s ease;
}

#chatSendBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233,69,96,0.4);
}

#chatSendBtn:active {
    transform: translateY(1px) scale(0.97);
}

#chatInput:focus {
    border-color: #e94560 !important;
    box-shadow: 0 0 0 2px rgba(233,69,96,0.2);
}

/* ===== ADMIN ANIMATIONS ===== */
@keyframes adminCardSlideIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes adminSubTabPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.admin-sub-tab {
    transition: all 0.2s ease;
}

.admin-sub-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233,69,96,0.3);
}

.admin-sub-tab.active {
    animation: adminSubTabPulse 0.3s ease-out;
}

.admin-filter-btn {
    transition: all 0.2s ease;
}

.admin-filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(233,69,96,0.25);
}

.admin-filter-btn:active {
    transform: translateY(0) scale(0.97);
}

#adminSubmissionsList > div,
#adminSubmissionsList > .admin-card {
    animation: adminCardSlideIn 0.3s ease-out;
    animation-fill-mode: both;
}

#adminSubmissionsList > div:nth-child(1),
#adminSubmissionsList > .admin-card:nth-child(1) { animation-delay: 0.03s; }
#adminSubmissionsList > div:nth-child(2),
#adminSubmissionsList > .admin-card:nth-child(2) { animation-delay: 0.06s; }
#adminSubmissionsList > div:nth-child(3),
#adminSubmissionsList > .admin-card:nth-child(3) { animation-delay: 0.09s; }
#adminSubmissionsList > div:nth-child(4),
#adminSubmissionsList > .admin-card:nth-child(4) { animation-delay: 0.12s; }
#adminSubmissionsList > div:nth-child(5),
#adminSubmissionsList > .admin-card:nth-child(5) { animation-delay: 0.15s; }
#adminSubmissionsList > div:nth-child(6),
#adminSubmissionsList > .admin-card:nth-child(6) { animation-delay: 0.18s; }
#adminSubmissionsList > div:nth-child(7),
#adminSubmissionsList > .admin-card:nth-child(7) { animation-delay: 0.21s; }
#adminSubmissionsList > div:nth-child(8),
#adminSubmissionsList > .admin-card:nth-child(8) { animation-delay: 0.24s; }
#adminSubmissionsList > div:nth-child(9),
#adminSubmissionsList > .admin-card:nth-child(9) { animation-delay: 0.27s; }
#adminSubmissionsList > div:nth-child(10),
#adminSubmissionsList > .admin-card:nth-child(10) { animation-delay: 0.3s; }

#tabAdmin .admin-sub-tabs {
    animation: chatItemSlideIn 0.3s ease-out;
}

#tabAdmin .admin-controls {
    animation: chatMsgSlideUp 0.3s ease-out 0.1s both;
}

.hosting-hero {
    animation: chatMsgSlideUp 0.4s ease-out;
}

/* ===== CHAT CONTEXT MENU ===== */
@keyframes ctxMenuIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes ctxMenuOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.92); }
}

#chatContextMenu {
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#chatContextMenu.ctx-menu-hiding {
    animation: ctxMenuOut 0.15s ease forwards;
    pointer-events: none;
}

#chatContextMenu button:hover {
    background: rgba(233,69,96,0.15);
}

#chatContextMenu button:active {
    background: rgba(233,69,96,0.25);
}

#chatContextMenu #ctxDelete:hover {
    background: rgba(233,69,96,0.15);
}

#chatContextMenu hr {
    border: none;
    border-top: 1px solid rgba(233,69,96,0.15);
    margin: 4px 0;
}

/* ===== UNIFIED MODAL SYSTEM ===== */
.confirm-modal,
.prompt-modal,
.mode-setup-overlay,
.exit-confirm-overlay,
.clear-random-overlay {
    background: rgba(5, 10, 25, 0.92);
    backdrop-filter: blur(10px);
    z-index: 1000002 !important;
}

.completion-modal {
    background: radial-gradient(circle, rgba(233,69,96,0.15), rgba(5,10,25,0.95));
    backdrop-filter: blur(10px);
}

.confirm-modal-content,
.completion-modal-content,
.prompt-modal-content,
.mode-setup-modal,
.exit-confirm-modal,
.clear-random-modal {
    background: linear-gradient(145deg, #0f0f23, #1a1a2e) !important;
    border: 2px solid #e94560 !important;
    border-radius: 20px !important;
    box-shadow: 0 0 40px rgba(233,69,96,0.3), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.confirm-modal-content h3,
.completion-modal-content h2,
.prompt-modal-content h3,
.mode-setup-modal h2,
.exit-confirm-modal h3,
.clear-random-modal h2 {
    color: #e94560 !important;
    letter-spacing: 1px;
}

.confirm-modal-content p,
.completion-modal-content p,
.prompt-modal-content p,
.mode-setup-desc,
.exit-confirm-modal p,
.clear-random-modal p {
    color: rgba(255,255,255,0.6) !important;
}

.confirm-modal-buttons button,
.prompt-modal-buttons button,
.completion-modal-content button,
.exit-confirm-btn,
.mode-setup-start-btn {
    font-family: 'Minecraft', monospace;
    border-radius: 12px !important;
    padding: 10px 24px !important;
    border: none !important;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.2s ease;
}

.confirm-modal-buttons button:first-child,
.mode-setup-start-btn {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    color: white !important;
}

.confirm-modal-buttons button:first-child:hover,
.mode-setup-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233,69,96,0.4);
}

.confirm-modal-buttons button:last-child,
.prompt-modal-buttons button:last-child,
.exit-confirm-btn {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.7) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

.confirm-modal-buttons button:last-child:hover,
.prompt-modal-buttons button:last-child:hover,
.exit-confirm-btn:hover {
    background: rgba(255,255,255,0.15) !important;
    transform: translateY(-2px);
}

.prompt-modal-buttons button:first-child {
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    color: white !important;
}

.prompt-modal-buttons button:first-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46,204,113,0.4);
}

.completion-modal-content button {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    color: white !important;
    padding: 12px 30px !important;
    margin-top: 20px;
}

.completion-modal-content button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(233,69,96,0.5);
}

.exit-confirm-btn.yes {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    color: white !important;
}

.exit-confirm-btn.yes:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233,69,96,0.4);
}

@keyframes modalPopCenter {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes modalZoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes completionPop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    70% { transform: translate(-50%, -50%) scale(1.02); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Type icons in filter tags */
.filter-type-icon {
    width: 12px !important;
    height: 12px !important;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 3px;
}

.filter-tag {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* ============================================
   ТИР-ЛИСТ
   ============================================ */
.tl-header {
    text-align: center;
    margin-bottom: 24px;
}
.tl-header h2 {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    margin-bottom: 8px;
}
.tl-header p {
    color: rgba(255,255,255,0.5);
    font-size: 0.65rem;
    margin-bottom: 16px;
}
.tl-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.tl-btn {
    background: rgba(15,52,96,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.tl-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
}
.tl-btn-save { border-color: rgba(76,175,80,0.5); }
.tl-btn-save:hover { background: rgba(76,175,80,0.2); border-color: #4caf50; }
.tl-btn-reset { border-color: rgba(244,67,54,0.5); }
.tl-btn-reset:hover { background: rgba(244,67,54,0.2); border-color: #f44336; }
.tl-btn-export { border-color: rgba(33,150,243,0.5); }
.tl-btn-export:hover { background: rgba(33,150,243,0.2); border-color: #2196f3; }
.tl-btn-add { border-color: rgba(233,69,96,0.5); }
.tl-btn-add:hover { background: rgba(233,69,96,0.2); border-color: #e94560; }
.tl-btn-saves { border-color: rgba(255,193,7,0.5); }
.tl-btn-saves:hover { background: rgba(255,193,7,0.2); border-color: #ffc107; }
.tl-save-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); margin-bottom:6px; cursor:pointer; transition:all 0.2s; }
.tl-save-item:hover { background:rgba(255,255,255,0.08); border-color:rgba(233,69,96,0.4); }
.tl-save-del { background:none; border:1px solid rgba(233,69,96,0.3); color:#e94560; width:28px; height:28px; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.6rem; transition:all 0.2s; flex-shrink:0; }
.tl-save-del:hover { background:rgba(233,69,96,0.2); border-color:#e94560; }

#tabTierlist {
    overflow: visible;
}
.tl-board {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}
.tl-tier-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 64px;
    border-radius: 10px;
    overflow: visible;
    background: rgba(15,15,35,0.5);
    border: 1px solid rgba(255,255,255,0.06);
}
.tl-tier-label {
    width: 48px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 1.1rem;
    flex-shrink: 0;
    border-radius: 10px 0 0 10px;
    user-select: none;
}
.tl-tier-drop {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 0 0 8px;
    min-height: 64px;
    align-items: center;
    transition: background 0.2s;
}
.tl-drop-hover {
    background: rgba(233,69,96,0.15) !important;
    outline: 2px dashed rgba(233,69,96,0.5);
    outline-offset: -2px;
}
.tl-tier-controls {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}
.tl-tier-row:hover .tl-tier-controls {
    opacity: 1;
}
.tl-ctrl-btn {
    background: rgba(255,255,255,0.06);
    border: none;
    color: rgba(255,255,255,0.4);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    transition: all 0.15s;
}
.tl-ctrl-btn:hover {
    background: rgba(233,69,96,0.2);
    color: #e94560;
}
.tl-ctrl-btn--del:hover {
    background: rgba(244,67,54,0.2);
    color: #f44336;
}
.tl-tier-arrows {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 4px 4px 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.tl-tier-row:hover .tl-tier-arrows {
    opacity: 1;
}
.tl-arrow-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.5rem;
    transition: color 0.15s;
}
.tl-arrow-btn:hover {
    color: #e94560;
}
.tl-add-tier-row {
    display: flex;
    justify-content: center;
    padding: 8px;
}
.tl-add-tier-btn {
    background: rgba(233,69,96,0.1);
    border: 1px dashed rgba(233,69,96,0.4);
    color: rgba(233,69,96,0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.tl-add-tier-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}

.tl-pool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: rgba(15,52,96,0.3);
    border-radius: 10px;
    border: 1px solid rgba(233,69,96,0.15);
}
.tl-pool-header span {
    color: rgba(255,255,255,0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
}
.tl-search {
    background: rgba(10,10,26,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    padding: 5px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    outline: none;
    width: 200px;
    transition: border-color 0.2s;
}
.tl-search:focus {
    border-color: #e94560;
}
.tl-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
    background: rgba(10,10,26,0.3);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}
.tl-pool::-webkit-scrollbar {
    width: 6px;
}
.tl-pool::-webkit-scrollbar-track {
    background: transparent;
}
.tl-pool::-webkit-scrollbar-thumb {
    background: rgba(233,69,96,0.3);
    border-radius: 3px;
}

.tl-poke-card {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    cursor: grab;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.15s;
    flex-shrink: 0;
}
.tl-poke-card:hover {
    border-color: #e94560;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(233,69,96,0.3);
}
.tl-poke-card:active {
    cursor: grabbing;
}
.tl-poke-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tl-poke-card--placed {
    height: 64px;
    width: unset;
    aspect-ratio: 1;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 4px;
    flex-shrink: 0;
}
.tl-poke-card--placed img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}
.tl-poke-card--placed:hover {
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
}
.tl-poke-card--placed img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tl-poke-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e94560;
    color: white;
    font-size: 0.45rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    border: 1px solid rgba(0,0,0,0.3);
}
.tl-poke-card--placed:hover .tl-poke-remove {
    display: flex;
}

.tl-zoom-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 4px 12px;
}
.tl-zoom-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.tl-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    cursor: pointer;
    border: none;
}
.tl-zoom-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    cursor: pointer;
    border: none;
}
.tl-zoom-reset {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    transition: all 0.15s;
}
.tl-zoom-reset:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}

/* Edit modal */
.tl-edit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Minecraft', monospace;
}
.tl-edit-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    min-width: 320px;
    max-width: 90vw;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
    color: white;
    text-align: center;
}
.tl-edit-modal h3 {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    margin: 0 0 16px 0;
    text-align: center;
}
.tl-edit-field {
    margin-bottom: 14px;
}
.tl-edit-field label {
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    display: block;
    margin-bottom: 6px;
}
.tl-edit-input {
    width: 100%;
    background: rgba(10,10,26,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    box-sizing: border-box;
}
.tl-edit-input:focus {
    border-color: #e94560;
}
.tl-edit-colors {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.tl-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}
.tl-color-swatch:hover {
    transform: scale(1.15);
}
.tl-color-active {
    border-color: white;
    box-shadow: 0 0 8px rgba(255,255,255,0.4);
}
.tl-color-picker {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: none;
    padding: 0;
}
.tl-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}
.tl-export-modal {
    background: #0a0a1a;
    border: 2px solid #e94560;
    border-radius: 16px;
    padding: 24px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

/* Pool settings */
.tl-pool-settings-btn {
    background: rgba(233,69,96,0.1);
    border: 1px solid rgba(233,69,96,0.3);
    color: rgba(233,69,96,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.tl-pool-settings-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}

/* Pool modal */
.tl-pool-modal {
    background: linear-gradient(135deg, #0d1b30, #0a1628);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 16px;
    padding: 0;
    width: 560px;
    max-width: 94vw;
    max-height: 88vh;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 40px rgba(233,69,96,0.08);
    display: flex;
    flex-direction: column;
}
.tl-pool-modal-header {
    padding: 20px 24px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tl-pool-modal-header h3 {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    margin: 0 0 14px 0;
}
.tl-pool-mode-toggle {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.tl-pool-mode-btn {
    background: rgba(15,52,96,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 7px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tl-pool-mode-btn:hover {
    background: rgba(233,69,96,0.1);
    border-color: rgba(233,69,96,0.3);
    color: white;
}
.tl-pool-mode-btn.active {
    background: rgba(233,69,96,0.15);
    border-color: #e94560;
    color: #e94560;
}

/* Tag sections */
#tlPoolTagSection {
    padding: 14px 24px;
    overflow-y: auto;
    flex: 1;
}
.tl-pool-hint {
    text-align: center;
    color: rgba(255,255,255,0.35);
    font-size: 0.5rem;
    font-family: 'Minecraft', monospace;
    margin-bottom: 14px;
}
.tl-hint-include {
    color: #4caf50;
}
.tl-hint-exclude {
    color: #f44336;
}
.tl-pool-section {
    margin-bottom: 14px;
}
.tl-pool-section-title {
    color: rgba(255,255,255,0.45);
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tl-pool-section-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.tl-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(15,25,50,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.5);
    user-select: none;
}
.tl-tag-pill:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
}
.tl-tag-none {
    color: rgba(255,255,255,0.45);
    border-color: rgba(255,255,255,0.08);
    background: rgba(15,25,50,0.4);
}
.tl-tag-include {
    color: #66bb6a;
    border-color: rgba(76,175,80,0.35);
    background: rgba(76,175,80,0.1);
}
.tl-tag-include:hover {
    background: rgba(76,175,80,0.18);
}
.tl-tag-exclude {
    color: #ef5350;
    border-color: rgba(244,67,54,0.35);
    background: rgba(244,67,54,0.1);
}
.tl-tag-exclude:hover {
    background: rgba(244,67,54,0.18);
}
.tl-tag-state {
    width: 13px;
    text-align: center;
    font-size: 0.5rem;
    flex-shrink: 0;
}
.tl-tag-label {
    white-space: nowrap;
}

/* Footer */
.tl-pool-modal-footer {
    padding: 14px 24px;
    display: flex;
    gap: 8px;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.tl-pool-action-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 7px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tl-pool-action-btn.save {
    background: rgba(76,175,80,0.15);
    border-color: rgba(76,175,80,0.4);
    color: #66bb6a;
}
.tl-pool-action-btn.save:hover {
    background: rgba(76,175,80,0.25);
}
.tl-pool-action-btn.reset {
    background: rgba(255,152,0,0.1);
    border-color: rgba(255,152,0,0.3);
    color: #ffa726;
}
.tl-pool-action-btn.reset:hover {
    background: rgba(255,152,0,0.2);
}
.tl-pool-action-btn.cancel {
    background: rgba(244,67,54,0.08);
    border-color: rgba(244,67,54,0.25);
    color: rgba(255,255,255,0.4);
}
.tl-pool-action-btn.cancel:hover {
    background: rgba(244,67,54,0.15);
    color: rgba(255,255,255,0.7);
}

/* ===== TAP-TO-SELECT (mobile drag alternative) ===== */
.tl-poke-selected {
    outline: 3px solid #ffeb3b !important;
    box-shadow: 0 0 14px rgba(255,235,59,0.5) !important;
    transform: scale(1.15) !important;
    z-index: 50;
}
.tl-board-selecting .tl-tier-drop {
    outline: 2px dashed rgba(255,235,59,0.35);
    outline-offset: -2px;
    min-height: 80px;
}
.tl-board-selecting .tl-tier-row {
    cursor: pointer;
}
.tl-board-selecting .tl-tier-row:hover .tl-tier-drop {
    background: rgba(255,235,59,0.1);
}
.tl-pool-selecting {
    outline: 2px dashed rgba(255,235,59,0.35);
    outline-offset: -2px;
    cursor: pointer;
}

/* ===== MOBILE TIER LIST ===== */
@media (max-width: 768px) {
    #tabTierlist {
        padding: 12px !important;
    }
    .tl-header h2 {
        font-size: 0.75rem !important;
    }
    .tl-header p {
        font-size: 0.55rem !important;
        margin-bottom: 10px !important;
    }
    .tl-actions {
        gap: 6px !important;
        justify-content: center !important;
    }
    .tl-btn {
        font-size: 0.5rem !important;
        padding: 5px 8px !important;
    }
    .tl-btn i {
        display: none;
    }
    .tl-zoom-wrap {
        padding: 3px 8px !important;
        gap: 4px !important;
    }
    .tl-zoom-slider {
        width: 55px !important;
    }
    .tl-zoom-reset {
        padding: 2px 6px !important;
        font-size: 0.5rem !important;
    }

    /* Tier rows: stack vertically */
    .tl-tier-row {
        flex-direction: column !important;
        min-height: auto !important;
        border-radius: 8px !important;
        overflow: visible !important;
    }
    .tl-tier-label {
        width: 100% !important;
        min-height: 32px !important;
        height: 32px !important;
        font-size: 0.7rem !important;
        border-radius: 8px 8px 0 0 !important;
        flex-direction: row !important;
    }
    .tl-tier-drop {
        min-height: 48px !important;
        padding: 6px !important;
        gap: 4px !important;
        border-top: none !important;
        border-radius: 0 0 8px 8px !important;
    }
    .tl-poke-card--placed {
        height: 48px !important;
        width: 48px !important;
        aspect-ratio: 1 !important;
    }

    /* Controls always visible on mobile */
    .tl-tier-controls {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        opacity: 1 !important;
        flex-direction: row !important;
        gap: 4px !important;
        z-index: 5;
    }
    .tl-tier-row {
        position: relative !important;
    }
    .tl-tier-arrows {
        opacity: 1 !important;
        position: absolute !important;
        bottom: 4px !important;
        right: 4px !important;
        flex-direction: row !important;
        gap: 3px !important;
    }
    .tl-arrow-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.5rem !important;
    }
    .tl-ctrl-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.5rem !important;
    }

    /* Pool */
    .tl-pool-header {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    .tl-pool-header > div {
        width: 100% !important;
        justify-content: space-between !important;
    }
    .tl-search {
        width: 100% !important;
        font-size: 0.55rem !important;
    }
    .tl-pool {
        max-height: 300px !important;
        gap: 4px !important;
        padding: 6px !important;
    }
    .tl-pool .tl-poke-card {
        width: 42px !important;
        height: 42px !important;
    }
    .tl-pool-settings-btn {
        font-size: 0.5rem !important;
        padding: 4px 8px !important;
    }

    /* Pool return bar when selecting */
    .tl-pool-selecting::before {
        content: 'Нажмите сюда чтобы вернуть в пул';
        display: block;
        width: 100%;
        text-align: center;
        font-family: 'Minecraft', monospace;
        font-size: 0.5rem;
        color: #ffeb3b;
        padding: 6px;
        margin-bottom: 4px;
        border-radius: 6px;
        background: rgba(255,235,59,0.08);
    }
}

@media (max-width: 480px) {
    .tl-actions .tl-btn span,
    .tl-actions .tl-btn:not(.tl-zoom-wrap) {
        font-size: 0.45rem !important;
        padding: 4px 6px !important;
    }
    .tl-pool .tl-poke-card {
        width: 36px !important;
        height: 36px !important;
    }
    .tl-poke-card--placed {
        height: 42px !important;
        width: 42px !important;
    }
}

/* DexID Game */
.dexid-mode-btn {
    padding: 10px 24px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.dexid-mode-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.dexid-mode-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
.dexid-num-input {
    width: 100%;
    padding: 20px 24px;
    border-radius: 14px;
    border: 2px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.4);
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.dexid-num-input::-webkit-inner-spin-button,
.dexid-num-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.dexid-rounds-btn {
    padding: 12px 28px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.dexid-rounds-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.dexid-rounds-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
.better-mode-btn {
    padding: 10px 24px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.better-mode-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.better-mode-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
.better-rounds-btn {
    padding: 12px 28px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.better-rounds-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.better-rounds-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
#dexidSuggestions .dexid-sugg-item {
    padding: 14px 20px;
    color: rgba(255,255,255,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.15s;
}
#dexidSuggestions .dexid-sugg-item:hover,
#dexidSuggestions .dexid-sugg-item.active {
    background: rgba(233,69,96,0.2);
}
#dexidSuggestions .dexid-sugg-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
}
.dexid-result-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}
.dexid-result-row img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}
/* ============================================
   РАЗДЕЛЕНИЕ ВКЛАДОК: ИГРЫ / ОСТАЛЬНОЕ
   ============================================ */

/* 1. Контейнер табов — без подложки, просто флекс-колонка */
.tabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

/* 2. Строки — флекс с переносом */
.tabs-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* 3. Разделитель между строками */
.tabs-row--other {
    border-top: 1px solid rgba(233, 69, 96, 0.15);
    padding-top: 12px;
}

/* 4. Игровые вкладки — выделенные, крупные */
.tab-btn.game-tab {
    font-size: 0.9rem !important;
    padding: 14px 32px !important;
    background: linear-gradient(145deg, rgba(15, 52, 96, 0.4), rgba(26, 26, 46, 0.6)) !important;
    border: 2px solid rgba(233, 69, 96, 0.25) !important;
    border-radius: 16px !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

    /* 5. Неоновое свечение при наведении */
    .tab-btn.game-tab:hover {
        transform: translateY(-3px) scale(1.03) !important;
        border-color: #e94560 !important;
        box-shadow: 0 8px 30px rgba(233, 69, 96, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }

    /* 6. Активная игровая вкладка */
    .tab-btn.game-tab.active {
        background: linear-gradient(135deg, rgba(233, 69, 96, 0.3), rgba(198, 42, 71, 0.5)) !important;
        border-color: #e94560 !important;
        box-shadow: 0 0 35px rgba(233, 69, 96, 0.4), 0 0 70px rgba(233, 69, 96, 0.15) !important;
        color: #fff !important;
        text-shadow: 0 0 15px rgba(233, 69, 96, 0.8);
    }

        /* 7. Неоновая линия под активной вкладкой */
        .tab-btn.game-tab.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 20%;
            width: 60%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #e94560, transparent);
            border-radius: 2px;
            box-shadow: 0 0 15px #e94560, 0 0 30px rgba(233, 69, 96, 0.3);
            animation: gameTabGlow 1.8s ease-in-out infinite;
        }

@keyframes gameTabGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scaleX(0.8);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* 8. Анимация иконок игровых вкладок */
.tab-btn.game-tab i {
    font-size: 1.1rem !important;
    margin-right: 10px !important;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 0 4px rgba(233, 69, 96, 0.2));
}

.tab-btn.game-tab:hover i {
    transform: scale(1.3) rotate(-8deg) !important;
    filter: drop-shadow(0 0 15px rgba(233, 69, 96, 0.8));
}

.tab-btn.game-tab.active i {
    filter: drop-shadow(0 0 20px rgba(233, 69, 96, 0.9));
}

/* 9. ТИР-ЛИСТ — ЗОЛОТАЯ ТЕМА */
.tab-btn.game-tab[data-tab="tierlist"] {
    border-color: rgba(255, 215, 0, 0.3) !important;
    background: linear-gradient(145deg, rgba(40, 30, 10, 0.5), rgba(60, 40, 10, 0.4)) !important;
}

    .tab-btn.game-tab[data-tab="tierlist"]:hover {
        border-color: #ffd700 !important;
        box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 215, 0, 0.1) !important;
    }

    .tab-btn.game-tab[data-tab="tierlist"].active {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(200, 150, 0, 0.4)) !important;
        border-color: #ffd700 !important;
        box-shadow: 0 0 35px rgba(255, 215, 0, 0.4), 0 0 70px rgba(255, 215, 0, 0.15) !important;
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
    }

        .tab-btn.game-tab[data-tab="tierlist"].active::after {
            background: linear-gradient(90deg, transparent, #ffd700, transparent);
            box-shadow: 0 0 15px #ffd700, 0 0 30px rgba(255, 215, 0, 0.3);
        }

    .tab-btn.game-tab[data-tab="tierlist"]:hover i {
        color: #ffd700 !important;
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
    }

    .tab-btn.game-tab[data-tab="tierlist"].active i {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.9));
    }

/* 10. Обычные вкладки (вторая строка) — скромные, чистые */
.tabs-row--other .tab-btn {
    background: rgba(20, 20, 40, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 30px !important;
    padding: 10px 22px !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.2s ease !important;
}

    .tabs-row--other .tab-btn:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        transform: translateY(-2px) !important;
    }

    .tabs-row--other .tab-btn.active {
        background: rgba(233, 69, 96, 0.15) !important;
        border-color: rgba(233, 69, 96, 0.4) !important;
        color: #e94560 !important;
    }
/* ============================================
   АНИМАЦИЯ ДЛЯ DEXID
   ============================================ */

/* Анимация входа */
@keyframes dexidModalIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }

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

/* Анимация выхода */
@keyframes dexidModalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
}

/* Анимация фона */
@keyframes dexidOverlayIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

@keyframes dexidOverlayOut {
    from {
        opacity: 1;
        backdrop-filter: blur(8px);
    }

    to {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

/* Контейнер оверлея */
#dexidOverlay {
    animation: dexidOverlayIn 0.3s ease forwards;
}

    /* Контент модалки */
    #dexidOverlay > div {
        animation: dexidModalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* ===== КЛАССЫ ДЛЯ АНИМАЦИИ ВЫХОДА ===== */

    /* Оверлей исчезает */
    #dexidOverlay.overlay-out {
        animation: dexidOverlayOut 0.3s ease forwards !important;
    }

        /* Контент вылетает */
        #dexidOverlay.overlay-out > div {
            animation: dexidModalOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        }
/* Кнопка закрытия в DexID */
#dexidOverlay button[onclick*="dexidClose"] {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

#dexidOverlay button[onclick*="dexidClose"]:hover {
    transform: rotate(25deg) scale(1.1) !important;
    background: rgba(233, 69, 96, 0.3) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
}

#dexidOverlay button[onclick*="dexidClose"]:active {
    transform: rotate(25deg) scale(0.9) !important;
}
/* ============================================
   АНИМАЦИЯ ДЛЯ НАСТРОЙКИ ПУЛА ПОКЕМОНОВ
   ============================================ */

/* Анимация входа */
@keyframes tlPoolModalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

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

/* Анимация выхода */
@keyframes tlPoolModalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

/* Анимация фона */
@keyframes tlPoolOverlayIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

@keyframes tlPoolOverlayOut {
    from {
        opacity: 1;
        backdrop-filter: blur(4px);
    }

    to {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

/* Оверлей */
.tl-edit-overlay {
    animation: tlPoolOverlayIn 0.25s ease forwards;
}

    /* Модалка */
    .tl-edit-overlay .tl-pool-modal {
        animation: tlPoolModalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* ===== КЛАССЫ ДЛЯ АНИМАЦИИ ВЫХОДА ===== */

    /* Оверлей исчезает */
    .tl-edit-overlay.overlay-out {
        animation: tlPoolOverlayOut 0.25s ease forwards !important;
    }

        /* Модалка вылетает */
        .tl-edit-overlay.overlay-out .tl-pool-modal {
            animation: tlPoolModalOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        }

/* ============================================
   ГЕНЕРАТОР КАРТОЧЕК АТАК (НОВЫЙ СТИЛЬ)
   ============================================ */

.move-generator-modal {
    max-width: 560px !important;
    padding: 28px !important;
}

.move-gen-field {
    margin-bottom: 14px;
}

    .move-gen-field label {
        display: block;
        color: rgba(255,255,255,0.5);
        font-family: 'Minecraft', monospace;
        font-size: 0.6rem;
        margin-bottom: 5px;
        letter-spacing: 0.5px;
    }

.move-cat-btn-gen {
    padding: 6px 14px;
    border-radius: 20px;
    border: 2px solid rgba(255,255,255,0.15);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.25s;
}

    .move-cat-btn-gen:hover {
        border-color: rgba(255,255,255,0.3);
        color: rgba(255,255,255,0.8);
    }

    .move-cat-btn-gen.active {
        border-color: #e94560;
        background: rgba(233,69,96,0.2);
        color: #e94560;
    }

.move-type-btn {
    padding: 4px 10px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.6;
}

    .move-type-btn:hover {
        transform: scale(1.05);
        opacity: 0.9;
    }

    .move-type-btn.active {
        border-color: white !important;
        opacity: 1;
        transform: scale(1.05);
        box-shadow: 0 0 12px rgba(255,255,255,0.2);
    }

    .lang-switch {
        display: inline-flex;
        border: 2px solid rgba(233,69,96,0.5);
        border-radius: 30px;
        overflow: hidden;
        margin-right: 10px;
        background: rgba(15,52,96,0.7);
    }
    .lang-btn {
        font-family: 'Minecraft', monospace;
        font-size: 0.55rem;
        color: #fff;
        background: transparent;
        border: none;
        padding: 9px 14px;
        cursor: pointer;
        transition: all 0.15s;
    }
    .lang-btn:hover { color: #e94560; }
    .lang-btn.active {
        background: #e94560;
        color: #fff;
        box-shadow: 0 0 14px rgba(233,69,96,0.5);
    }
    .user-bar .lang-switch { align-self: center; }

/* ============================================
   ИГРА «У КОГО ЛУЧШЕ» — оформлена как DexID
   ============================================ */

#betterOverlay { animation: dexidOverlayIn 0.3s ease forwards; }
#betterOverlay > div { animation: dexidModalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
#betterOverlay.overlay-out { animation: dexidOverlayOut 0.3s ease forwards !important; }
#betterOverlay.overlay-out > div { animation: dexidModalOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; }
#betterOverlay button[onclick*="betterClose"] {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}
#betterOverlay button[onclick*="betterClose"]:hover {
    transform: rotate(25deg) scale(1.1) !important;
    background: rgba(233, 69, 96, 0.3) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
}
#betterOverlay button[onclick*="betterClose"]:active {
    transform: rotate(25deg) scale(0.9) !important;
}

.better-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.better-card {
    background: rgba(15,52,96,0.3); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 14px; text-align: center; cursor: pointer; color: #fff;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; position: relative;
}
.better-card:hover:not(.answered) { transform: translateY(-4px); border-color: #e94560; box-shadow: 0 6px 20px rgba(233,69,96,0.3); }
.better-card.answered { cursor: default; }
.better-card.correct { border-color: #2ecc71; box-shadow: 0 0 22px rgba(46,204,113,0.5); }
.better-card.wrong { border-color: #e74c3c; box-shadow: 0 0 22px rgba(231,76,60,0.4); }
.better-card img { width: 100%; max-width: 120px; height: 110px; object-fit: contain; image-rendering: pixelated; }
.better-card-name { font-size: 0.55rem; line-height: 1.5; margin: 8px 0 6px; min-height: 2.2em; display: flex; align-items: center; justify-content: center; }
.better-stat-reveal { display: none; margin-top: 8px; }
.better-card.answered .better-stat-reveal { display: block; }
.better-stat-line { font-size: 0.5rem; color: rgba(255,255,255,0.8); margin-bottom: 5px; }
.better-stat-bar-wrap { height: 7px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.better-stat-bar { height: 100%; background: #4ecdc4; border-radius: 4px; }
.better-card.correct .better-stat-bar { background: #2ecc71; }
.better-verdict { position: absolute; top: 8px; right: 8px; font-size: 0.8rem; display: none; }
.better-card.answered .better-verdict { display: block; }
.better-card.correct .better-verdict { color: #2ecc71; }
.better-card.wrong .better-verdict { color: #e74c3c; }
.better-prompt { text-align: center; font-size: 0.9rem; line-height: 1.8; padding: 24px; background: rgba(15,52,96,0.3); border: 1px solid rgba(233,69,96,0.2); border-radius: 16px; margin-bottom: 20px; color: #fff; }
.better-prompt b { color: #e94560; }
.better-prompt .mode { color: #4ecdc4; }
.better-timerbar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin-bottom: 20px; }
.better-timerbar > div { height: 100%; width: 100%; background: linear-gradient(90deg, #2ecc71, #e94560); transition: width 1s linear; }
.better-feedback { text-align: center; font-size: 0.7rem; line-height: 1.8; min-height: 2.2em; margin-bottom: 20px; }
.better-feedback.ok { color: #2ecc71; }
.better-feedback.bad { color: #e74c3c; }

/* Кнопка открытия детальной карточки */
.db-card-open-btn {
    margin-top: 12px;
    width: 100%;
    background: rgba(233, 69, 96, 0.14);
    border: 1px solid rgba(233, 69, 96, 0.45);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 8px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-shadow: 1px 1px 0 #000;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
.db-card-open-btn:hover {
    background: linear-gradient(135deg, #e94560, #c23152);
    border-color: #e94560;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.5);
    transform: translateY(-2px);
    color: #ffffff;
}
.db-card-open-btn:active {
    transform: translateY(0);
}
.db-mcard-open-btn {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.db-mcard-open-btn:hover {
    background: #ffffff;
    color: #111122;
    text-shadow: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Иконка открытия рядом с заголовком */
.db-title-open-icon {
    font-size: 0.65em;
    opacity: 0.45;
    margin-left: 5px;
    vertical-align: middle;
    transition: all 0.2s ease;
}
.db-card-name:hover .db-title-open-icon,
.db-abil-names:hover .db-title-open-icon,
.db-move-names:hover .db-title-open-icon,
.db-mcard-title:hover .db-title-open-icon {
    opacity: 1;
    color: #e94560;
    transform: translate(1px, -1px);
}

.db-table-abil-item, .db-abil-mini {
    cursor: pointer;
    transition: color 0.2s ease, text-decoration 0.2s ease;
    user-select: text;
    display: inline-block;
}
.db-table-abil-item:hover, .db-abil-mini:hover {
    color: #e94560;
    text-decoration: underline;
}

/* Двойная категория Z-приёмов (Физ + Спец) */
.db-move-tc-dual {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.db-move-cat-slash {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    font-weight: bold;
    margin: 0 1px;
}
.db-mcard-cat-badge.dual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 105px;
    height: 52px;
}
.db-mcard-cat-badge.dual .db-mcard-cat-img {
    width: 48px;
    height: 32px;
    object-fit: contain;
}

/* Градиентные рамки для всех рамок (карточка, инфо-бокс, плашка типа) */
.db-move-card.db-move-card-poster.db-card-grad-gmax {
    border-color: transparent;
    background: 
        radial-gradient(circle at 50% 30%, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.15) 100%) padding-box,
        linear-gradient(180deg, var(--card-accent, #777) 0%, #FF0045 100%) border-box,
        var(--card-accent, #777);
    box-shadow: 0 10px 28px rgba(255, 0, 69, 0.25), inset 0 2px 6px rgba(255,255,255,0.75);
}
.db-move-card.db-move-card-poster.db-card-grad-gmax .db-mcard-info-box {
    border-color: transparent;
    background: 
        linear-gradient(180deg, #44264e 0%, #2b1433 100%) padding-box,
        linear-gradient(180deg, var(--card-accent, #777) 0%, #FF0045 100%) border-box;
}
.db-move-card.db-move-card-poster.db-card-grad-gmax .db-mcard-type-pill {
    border-radius: 999px;
    border: 3.5px solid #ffffff;
    padding: 6px 12px;
    background: var(--card-accent, #777);
    box-shadow: 0 4px 10px rgba(0,0,0,0.22), inset 0 2px 4px rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-mcard-type-txt {
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow:
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px 1.5px 0 #000,
        1.5px 1.5px 0 #000,
        0 1.5px 0 #000,
        0 -1.5px 0 #000,
        1.5px 0 0 #000,
        -1.5px 0 0 #000,
        0 2px 4px rgba(0,0,0,0.85);
    white-space: nowrap;
    display: block;
    letter-spacing: 0.02em;
    line-height: 1;
}

.db-move-card.db-move-card-poster.db-card-grad-zmove .db-mcard-type-pill {
    border-radius: 999px;
    border: 3.5px solid #ffffff;
    padding: 6px 12px;
    background: var(--card-accent, #777);
    box-shadow: 0 4px 10px rgba(0,0,0,0.22), inset 0 2px 4px rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-mcard-type-txt {
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow:
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px 1.5px 0 #000,
        1.5px 1.5px 0 #000,
        0 1.5px 0 #000,
        0 -1.5px 0 #000,
        1.5px 0 0 #000,
        -1.5px 0 0 #000,
        0 2px 4px rgba(0,0,0,0.85);
    white-space: nowrap;
    display: block;
    letter-spacing: 0.02em;
    line-height: 1;
}

.db-mcard-extra-pill.tag {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    padding: 2.5px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.7);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 18%, rgba(15, 23, 42, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 55%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--pill-color, #FF0045) 20%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    transition: all 0.2s ease;
}
.db-mcard-extra-pill.tag i {
    font-size: 0.6rem;
    color: var(--pill-color, #ffffff);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--pill-color, #ffffff) 80%, transparent));
}
.db-mcard-extra-pill.tag:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 28%, rgba(15, 23, 42, 0.85));
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 80%, transparent);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--pill-color, #FF0045) 40%, transparent);
}

.db-move-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.db-move-cats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.db-move-cats-row .db-move-cat-img {
    width: 22px;
    height: 14px;
    object-fit: contain;
}

.db-move-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
/* Sleek Glassmorphic Move Tags & Gen Pill */
.db-move-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.db-move-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2.5px 8px;
    border-radius: 999px;
    font-size: 0.63rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    font-family: 'Minecraft', monospace;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.7);
    background: color-mix(in srgb, var(--tag-bg, #FF0045) 18%, rgba(15, 23, 42, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-color: color-mix(in srgb, var(--tag-bg, #FF0045) 55%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--tag-bg, #FF0045) 20%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}
.db-move-meta-tag i {
    font-size: 0.62rem;
    color: var(--tag-bg, #ffffff);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tag-bg, #ffffff) 80%, transparent));
    display: inline-block;
    vertical-align: middle;
}
.db-move-meta-tag:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--tag-bg, #FF0045) 30%, rgba(15, 23, 42, 0.85));
    border-color: color-mix(in srgb, var(--tag-bg, #FF0045) 80%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tag-bg, #FF0045) 45%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.db-move-gen {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    padding: 2.5px 7px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.db-move-pp-max {
    font-size: 0.52rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.65);
    margin-left: 2px;
}

/* Таблицы для Способностей и Движений */
.db-table-abilities .th-id { width: 45px; text-align: center; }
.db-table-abilities .th-name { width: 170px; text-align: left; }
.db-table-abilities .th-desc { min-width: 260px; text-align: left; }
.db-table-abilities .th-holders { min-width: 200px; text-align: left; }
.db-table-abilities .th-count { width: 65px; text-align: center; }

.db-table-desc-full {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.35;
    word-break: break-word;
    max-width: 420px;
}
.db-table-holders-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    max-width: 520px;
}
.db-table-mini-holder {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.db-table-mini-holder:hover {
    transform: scale(1.25);
    background: rgba(233, 69, 96, 0.3);
    z-index: 2;
}
.db-table-holders-more {
    font-size: 0.55rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.5);
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
}
.db-table-subname {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: normal;
    display: block;
    margin-top: 1px;
}

.db-table-moves .th-id { width: 55px; text-align: center; }
.db-table-moves .th-name { min-width: 150px; text-align: left; }
.db-table-moves .th-type { width: 110px; text-align: left; }
.db-table-moves .th-cat { width: 120px; text-align: left; }
.db-table-moves .th-gen { width: 55px; text-align: center; }
.db-table-moves .th-tags { min-width: 100px; text-align: center; }

.db-table-type-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: bold;
}
.db-table-cats-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.db-table-cat-icon {
    width: 20px;
    height: 14px;
    object-fit: contain;
}
.db-table-cat-lbl {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
}

/* Move Numeric & Range Filter Controls */
.db-filter-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.db-num-input {
    width: 76px;
    height: 32px;
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    text-align: center;
    padding: 0 6px;
    outline: none;
    transition: all 0.2s ease;
}
.db-num-input:focus {
    border-color: #e94560;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
    background: rgba(15, 52, 96, 0.7);
}
.db-num-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
}
.db-range-sep {
    color: rgba(255, 255, 255, 0.4);
    font-weight: bold;
    font-size: 0.8rem;
}
.db-reset-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.18), rgba(233, 69, 96, 0.08));
    border: 1px solid rgba(233, 69, 96, 0.45);
    color: #ff6b81;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}
.db-reset-filters-btn i {
    font-size: 0.65rem;
    transition: transform 0.35s ease;
}
.db-reset-filters-btn:hover {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4);
}
.db-reset-filters-btn:hover i {
    transform: rotate(-180deg);
}
.db-reset-filters-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(233, 69, 96, 0.25);
}



/* ===== Режим «Страница / Профиль Покемона» (Dossier View) ===== */
.db-pokemon-profile-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0 40px;
    animation: fadeIn 0.3s ease;
}

/* Навигационная панель профиля */
.db-profile-nav-bar {
    position: relative;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 16px;
    backdrop-filter: blur(12px);
}
.db-profile-nav-left, .db-profile-nav-right, .db-profile-nav-center {
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-profile-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.db-profile-btn:hover {
    background: rgba(233, 69, 96, 0.35);
    border-color: #e94560;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233, 69, 96, 0.3);
}
.db-profile-btn.primary {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.4), rgba(194, 49, 82, 0.5));
    border-color: #e94560;
    color: #ffffff;
    font-weight: bold;
}
.db-profile-btn.primary:hover {
    background: linear-gradient(135deg, #e94560, #c62a47);
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.45);
}

/* Главная сетка профиля */

/* Переключатель форм покемона с одинаковым DexID */
.db-profile-forms-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-profile-forms-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-profile-forms-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.db-profile-form-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-profile-form-pill:hover {
    background: rgba(233, 69, 96, 0.25);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.5);
    transform: translateY(-1px);
}
.db-profile-form-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(233, 69, 96, 0.4);
}

.db-profile-hero-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
}
@media (max-width: 900px) {
    
/* Переключатель форм покемона с одинаковым DexID */
.db-profile-forms-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-profile-forms-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-profile-forms-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.db-profile-form-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-profile-form-pill:hover {
    background: rgba(233, 69, 96, 0.25);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.5);
    transform: translateY(-1px);
}
.db-profile-form-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(233, 69, 96, 0.4);
}

.db-profile-hero-grid {
        grid-template-columns: 1fr;
    }
}

/* Левая колонка: Арт, Типы, Описание */
.db-profile-card-left {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
}
.db-profile-card-left::before {
    content: '';
    position: absolute;
    top: -50px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: var(--poke-glow, rgba(233, 69, 96, 0.25));
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}
.db-profile-img-wrap {
    position: relative;
    z-index: 1;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-profile-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.65));
    transform: scale(var(--sprite-scale, 1));
    transform-origin: center center;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.db-profile-img:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.07));
}
.db-profile-img.is-pixel-sprite {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: auto;
    height: auto;
    max-width: 96px;
    max-height: 96px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.db-profile-img.is-pixel-sprite:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.08));
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.85));
}
.db-profile-img.is-gif {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.db-profile-img.is-gif:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.08));
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.85));
}
.db-profile-media-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.db-profile-toggle-group {
    display: inline-flex;
    gap: 2px;
    background: rgba(0, 0, 0, 0.45);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
}
.db-view-mode-btn,
.db-shiny-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    padding: 4px 8px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.db-view-mode-btn:hover,
.db-shiny-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}
.db-view-mode-btn.active,
.db-shiny-btn.active {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.db-profile-shiny-toggle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.db-profile-identity {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.db-profile-dex {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #e94560;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.db-profile-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    word-break: break-word;
}
.db-profile-name-en {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}
.db-profile-types {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.db-profile-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    min-width: 110px;
    max-width: 135px;
    box-sizing: border-box;
    white-space: nowrap;
    letter-spacing: 0.4px;
    backdrop-filter: blur(8px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.db-profile-type-badge:hover {
    transform: translateY(-2px);
}
.db-profile-type-badge img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}
.db-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}
.db-profile-desc-box {
    position: relative;
    z-index: 1;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}

/* Правая колонка: Характеристики, Способности, Защита типов */
.db-profile-card-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.db-profile-section {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 18px 22px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.db-profile-sec-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #e94560;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

/* Характеристики */
.db-profile-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-profile-stat-row {
    display: grid;
    grid-template-columns: 80px 120px 1fr;
    align-items: center;
    gap: 12px;
}
.db-profile-stat-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-profile-stat-num {
    white-space: nowrap;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    font-weight: bold;
    color: #ffffff;
    text-align: right;
}
.db-profile-bar-bg {
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.db-profile-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-profile-stat-total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #ffffff;
}

/* Способности */
.db-profile-abilities-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-profile-ability-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.db-profile-ability-item:hover {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    transform: translateX(3px);
}
.db-profile-ability-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffffff;
}
.db-profile-ability-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Эффективность типов */
.db-profile-efx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 6px;
}
.db-profile-efx-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 4px;
}
.db-profile-efx-type {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.db-profile-efx-val {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
}
.db-efx-super { color: #ff4757; }
.db-efx-resist { color: #2ed573; }
.db-efx-immune { color: #a4b0be; }
.db-efx-norm { color: rgba(255, 255, 255, 0.6); }

/* Нижний блок: Изучаемые приёмы (Movepool) */
.db-profile-learnsets-section {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.db-learnset-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}
.db-learnset-tab-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-learnset-tab-btn:hover {
    background: rgba(233, 69, 96, 0.2);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.4);
}
.db-learnset-tab-btn.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4);
    font-weight: bold;
}
.db-learnset-tab-count {
    background: rgba(0, 0, 0, 0.35);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.55rem;
}

/* Фильтры и поиск внутри таблицы приёмов */
.db-learnset-filter-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.db-learnset-search {
    flex: 1;
    min-width: 200px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.2s;
}
.db-learnset-search:focus {
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.25);
}
.db-learnset-select {
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    outline: none;
}

/* Таблица приёмов */
.db-learnset-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}
.db-learnset-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: left;
}

/* Стили интерактивной 3-позиционной сортировки таблицы приёмов */
.db-learnset-table th.db-sortable-th {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}
.db-learnset-table th.db-sortable-th:hover {
    background: rgba(233, 69, 96, 0.25) !important;
    color: #ffffff !important;
}
.db-learnset-table th.db-sortable-th.active {
    background: rgba(233, 69, 96, 0.35) !important;
    color: #ff6b81 !important;
    border-bottom: 2px solid #ff4757 !important;
}
.db-sort-arrows {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.25);
    vertical-align: middle;
    transition: all 0.2s ease;
}
.db-learnset-table th.db-sortable-th:hover .db-sort-arrows {
    color: rgba(255, 255, 255, 0.85);
}
.db-sort-arrows.active {
    color: #ff4757 !important;
    font-size: 0.8rem;
    filter: drop-shadow(0 0 6px rgba(255, 71, 87, 0.8));
}

.db-learnset-table th {
    background: rgba(15, 23, 42, 0.95);
    padding: 10px 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    user-select: none;
}
.db-learnset-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #ffffff;
    vertical-align: middle;
}
.db-learnset-row {
    cursor: pointer;
    transition: background 0.15s ease;
}
.db-learnset-row:hover {
    background: rgba(233, 69, 96, 0.12);
}
.db-learnset-lvl-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    display: inline-block;
    min-width: 44px;
    text-align: center;
}
.db-learnset-move-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.db-learnset-move-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-learnset-move-name-en {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
}
.db-learnset-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    width: auto;
    min-width: 92px;
    max-width: 130px;
    box-sizing: border-box;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.db-learnset-type-badge img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}

.db-learnset-table th.th-desc,
.db-learnset-table td.td-desc {
    min-width: 240px;
    max-width: 380px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    white-space: normal;
}
.db-learnset-table td.td-prio {
    text-align: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-learnset-table td.td-contact {
    text-align: center;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
}

.db-learnset-cat-img {
    width: 32px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}


/* Стили эффективности типов с учётом способностей */
.efx-ability-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.efx-ability-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 4px;
}
.efx-ability-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.efx-ability-pill:hover {
    background: rgba(233, 69, 96, 0.2);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.4);
}
.efx-ability-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.35);
}
.efx-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
}
.efx-type-chip.has-ability-mod {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.6) !important;
}
.efx-ability-note-badge {
    font-size: 0.52rem;
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    padding: 1px 4px;
    border-radius: 4px;
    margin-left: 2px;
}


/* Стили интерактивного уровня Динамакса / Гигантамакса */


.db-dmax-pill-candy {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 2px;
    filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.8));
    display: inline-block;
}

.db-dmax-candy-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(0 0 6px rgba(255, 0, 127, 0.8));
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.db-dmax-level-switcher:hover 
.db-dmax-pill-candy {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 2px;
    filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.8));
    display: inline-block;
}

.db-dmax-candy-icon {
    transform: scale(1.15) rotate(10deg);
}

.db-dmax-level-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(255, 0, 127, 0.15), rgba(233, 69, 96, 0.1));
    border: 1px solid rgba(255, 0, 127, 0.35);
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(255, 0, 127, 0.2);
}
.db-dmax-level-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #ff007f;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
}
.db-dmax-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.db-dmax-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-dmax-pill:hover {
    background: rgba(255, 0, 127, 0.3);
    color: #ffffff;
    border-color: #ff007f;
    transform: translateY(-1px);
}
.db-dmax-pill.active {
    background: linear-gradient(135deg, #ff007f, #e94560);
    color: #ffffff;
    border-color: #ff007f;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(255, 0, 127, 0.6);
}
.db-profile-bar-fill.dmax-hp-glow {
    background: linear-gradient(90deg, #ff007f, #e94560, #ff4757) !important;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.db-dmax-badge-hp {
    white-space: nowrap;
    font-size: 0.58rem;
    color: #ff007f;
    font-weight: bold;
    margin-left: 4px;
    text-shadow: 0 0 6px rgba(255, 0, 127, 0.5);
}


/* ===== Модальное окно предпросмотра и настройки карточки покемона ===== */
.db-card-customizer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    animation: fadeIn 0.25s ease;
}
.db-card-customizer-modal {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    width: 100%;
    max-width: 960px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.db-card-customizer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.95);
}
.db-card-customizer-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-card-customizer-body {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
@media (max-width: 850px) {
    .db-card-customizer-body {
        grid-template-columns: 1fr;
    }
}
.db-card-preview-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px;
    overflow: auto;
    max-height: 68vh;
}
.db-card-preview-canvas {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
.db-card-settings-pane {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.db-card-setting-group {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-card-setting-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-card-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    user-select: none;
}
.db-card-customizer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.95);
}


.db-profile-nav-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}


/* ==========================================================================
   ITEMS DATABASE STYLES
   ========================================================================== */
.db-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    width: 100%;
}
.db-item-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 165px;
}
.db-item-card:hover {
    border-color: #ff4757;
    background: rgba(233, 69, 96, 0.12);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255, 71, 87, 0.2);
}
.db-item-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.db-item-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.db-item-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.db-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.db-item-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-item-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-item-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: fit-content;
}
.db-item-cat-badge.competitive { background: rgba(233, 69, 96, 0.2); color: #ff6b81; border: 1px solid rgba(233, 69, 96, 0.4); }
.db-item-cat-badge.type_boost { background: rgba(52, 152, 219, 0.2); color: #74b9ff; border: 1px solid rgba(52, 152, 219, 0.4); }
.db-item-cat-badge.plates_memories { background: rgba(0, 206, 201, 0.2); color: #00cec9; border: 1px solid rgba(0, 206, 201, 0.4); }
.db-item-cat-badge.signature { background: rgba(241, 196, 15, 0.2); color: #f1c40f; border: 1px solid rgba(241, 196, 15, 0.4); }
.db-item-cat-badge.berry { background: rgba(46, 204, 113, 0.2); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.4); }
.db-item-cat-badge.mega { background: rgba(155, 89, 182, 0.2); color: #a29bfe; border: 1px solid rgba(155, 89, 182, 0.4); }
.db-item-cat-badge.z_crystal { background: rgba(255, 159, 26, 0.2); color: #ff9f1a; border: 1px solid rgba(255, 159, 26, 0.4); }
.db-item-cat-badge.evolution { background: rgba(255, 107, 129, 0.2); color: #ff6b81; border: 1px solid rgba(255, 107, 129, 0.4); }
.db-item-cat-badge.pokeball { background: rgba(235, 77, 75, 0.2); color: #eb4d4b; border: 1px solid rgba(235, 77, 75, 0.4); }
.db-item-cat-badge.medicine { background: rgba(112, 161, 255, 0.2); color: #70a1ff; border: 1px solid rgba(112, 161, 255, 0.4); }
.db-item-cat-badge.training { background: rgba(30, 144, 255, 0.2); color: #1e90ff; border: 1px solid rgba(30, 144, 255, 0.4); }
.db-item-cat-badge.tera_shard { background: rgba(0, 210, 211, 0.2); color: #00d2d3; border: 1px solid rgba(0, 210, 211, 0.4); }
.db-item-cat-badge.utility { background: rgba(164, 176, 190, 0.2); color: #a4b0be; border: 1px solid rgba(164, 176, 190, 0.4); }

.db-item-desc-preview {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
    margin-top: auto;
    min-height: 64px;
}
.db-item-table-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
}
.db-table-items th.th-desc,
.db-table-items td.td-desc {
    text-align: left;
    min-width: 280px;
    font-size: 0.74rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
}


/* ==========================================================================
   BATTLE MECHANICS: FIELD EFFECTS, STATUSES, GIMMICKS STYLES
   ========================================================================== */

/* --- 1. Field Effects Grid & Cards --- */
.db-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    width: 100%;
}
.db-field-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 220px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-field-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--field-accent, #ff9f43);
    opacity: 0.8;
}
.db-field-card:hover {
    border-color: var(--field-accent, #ff9f43);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 159, 67, 0.2);
}
.db-field-card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.db-field-card-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.db-field-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.db-field-cat-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    margin-left: auto;
}
.db-field-title-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}
.db-field-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.25;
    word-break: break-word;
}
.db-field-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    font-weight: normal;
}
.db-field-duration {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #feca57;
    background: rgba(254, 202, 87, 0.12);
    border: 1px solid rgba(254, 202, 87, 0.25);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    line-height: 1.3;
}
.db-field-desc-preview {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
    margin-top: auto;
}
.db-field-triggers-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.db-field-triggers-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.db-field-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.db-field-pill-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}
.db-field-pill-chip.move {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    color: #ff7675;
}
.db-field-pill-chip.move:hover {
    background: rgba(233, 69, 96, 0.35);
    border-color: #ff4757;
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}
.db-field-pill-chip.ability {
    background: rgba(241, 196, 15, 0.15);
    border-color: rgba(241, 196, 15, 0.4);
    color: #f1c40f;
}
.db-field-pill-chip.ability:hover {
    background: rgba(241, 196, 15, 0.35);
    border-color: #f39c12;
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(241, 196, 15, 0.3);
}
.db-field-pill-chip .en {
    font-size: 0.55rem;
    opacity: 0.65;
    font-style: italic;
}

/* Modal interactive items */
.db-field-interactive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.db-field-interactive-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-field-interactive-item:hover {
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.db-field-interactive-item.move:hover {
    border-color: #ff4757;
}
.db-field-interactive-item.ability:hover {
    border-color: #f1c40f;
}
.db-item-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
}
.db-field-interactive-item.move .db-item-icon-box {
    color: #ff7675;
    background: rgba(233, 69, 96, 0.2);
}
.db-field-interactive-item.ability .db-item-icon-box {
    color: #f1c40f;
    background: rgba(241, 196, 15, 0.2);
}
.db-item-text-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.db-item-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    color: #ffffff;
}
.db-item-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    font-weight: normal;
}
.db-item-type-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
}
.db-item-effect-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.3;
}
.db-item-arrow {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.25);
    transition: transform 0.2s ease, color 0.2s ease;
}
.db-field-interactive-item:hover .db-item-arrow {
    transform: translateX(3px);
    color: #ffffff;
}

/* --- 2. Statuses Grid & Cards --- */
.db-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    width: 100%;
}
.db-status-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 220px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-status-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--status-color, #e84118);
    opacity: 0.8;
}
.db-status-card:hover {
    border-color: var(--status-color, #e84118);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 20px var(--status-glow, var(--status-color, rgba(232, 65, 24, 0.25)));
}
.db-status-card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.db-status-card-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.db-status-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 8px;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
}
.db-status-type-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    margin-left: auto;
}
.db-status-type-badge.non_volatile {
    background: rgba(235, 77, 75, 0.25);
    color: #ff7675;
    border: 1px solid rgba(235, 77, 75, 0.5);
}
.db-status-type-badge.volatile {
    background: rgba(162, 155, 254, 0.25);
    color: #a29bfe;
    border: 1px solid rgba(162, 155, 254, 0.5);
}
.db-status-title-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}
.db-status-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.25;
    word-break: break-word;
}
.db-status-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    font-weight: normal;
}
.db-status-desc-preview {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
    margin-top: auto;
}
.db-status-imm-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.db-status-imm-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.db-status-imm-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

/* --- 3. Gimmicks Grid & Cards --- */
.db-gimmick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    width: 100%;
}
.db-gimmick-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.db-gimmick-card:hover {
    transform: translateY(-4px);
    border-color: var(--gimmick-color, #e056fd);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(224, 86, 253, 0.25);
}
.db-gimmick-banner {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}
.db-gimmick-banner-icon {
    font-size: 1.8rem;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}
.db-gimmick-banner-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.db-gimmick-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.db-gimmick-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}
.db-gimmick-gen-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}
.db-gimmick-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.db-gimmick-short-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}
.db-gimmick-features-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #ff9f43;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.db-gimmick-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.db-gimmick-features-list li {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.35;
}
.db-gimmick-features-list li i {
    font-size: 0.7rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Common detail badges */
.db-detail-trigger-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Mechanic & Detail Modal Header */

/* Status Detail Modal Banner & Download Button */
.db-status-banner {
    border-radius: 14px;
    padding: 14px 18px;
    margin-top: 10px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.db-status-banner-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
}

.db-status-banner-dl-btn:hover {
    background: var(--modal-accent, rgba(255, 255, 255, 0.22));
    border-color: var(--modal-accent, rgba(255, 255, 255, 0.45));
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 10px var(--modal-glow, rgba(255, 255, 255, 0.2));
}

.db-status-banner-dl-btn i {
    font-size: 0.72rem;
}

@media (max-width: 600px) {
    .db-status-banner {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .db-status-banner-right {
        width: 100%;
        justify-content: space-between;
    }
}

.db-mechanic-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    padding-right: 40px;
}
.db-mechanic-modal-icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}
.db-mechanic-modal-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
.db-mechanic-modal-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.db-mechanic-title-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.3rem;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    word-break: break-word;
}
.db-mechanic-title-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    margin-top: -2px;
}
.db-mechanic-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.db-mechanic-cat-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 12px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Interactive Chips for Cures & Immunities */
.db-interactive-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 7px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-interactive-chip.static {
    cursor: default;
}
.db-interactive-chip:not(.static):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.db-interactive-chip.move {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    color: #ff7675;
}
.db-interactive-chip.move:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #ff4757;
    box-shadow: 0 2px 10px rgba(255, 71, 87, 0.35);
}
.db-interactive-chip.ability {
    background: rgba(241, 196, 15, 0.15);
    border-color: rgba(241, 196, 15, 0.4);
    color: #f1c40f;
}
.db-interactive-chip.ability:hover {
    background: rgba(241, 196, 15, 0.3);
    border-color: #f39c12;
    box-shadow: 0 2px 10px rgba(241, 196, 15, 0.35);
}
.db-interactive-chip.item {
    background: rgba(46, 204, 113, 0.15);
    border-color: rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}
.db-interactive-chip.item:hover {
    background: rgba(46, 204, 113, 0.3);
    border-color: #27ae60;
    box-shadow: 0 2px 10px rgba(46, 204, 113, 0.35);
}
.db-interactive-chip.field {
    background: rgba(0, 210, 211, 0.15);
    border-color: rgba(0, 210, 211, 0.4);
    color: #00d2d3;
}
.db-interactive-chip.field:hover {
    background: rgba(0, 210, 211, 0.3);
    border-color: #01a3a4;
    box-shadow: 0 2px 10px rgba(0, 210, 211, 0.35);
}
.db-interactive-chip.poketype {
    background: rgba(162, 155, 254, 0.15);
    border-color: rgba(162, 155, 254, 0.4);
    color: #a29bfe;
}
.db-interactive-chip.switch {
    background: rgba(116, 185, 255, 0.15);
    border-color: rgba(116, 185, 255, 0.4);
    color: #74b9ff;
}
.chip-arrow {
    font-size: 0.65rem;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.db-interactive-chip:hover .chip-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* ==========================================================================
   EXPANDED DATABASE: GIMMICKS, TYPES, NATURES, ADVANCED MECHANICS
   ========================================================================== */

/* 1. Gimmicks Cards & Grid */
.db-gimmick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    width: 100%;
}
.db-gimmick-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
    display: flex;
    flex-direction: column;
}
.db-gimmick-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--gimmick-color, #e056fd)30;
    border-color: var(--gimmick-color, #e056fd);
}
.db-gimmick-banner {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}
.db-gimmick-banner-icon {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #ffffff;
    flex-shrink: 0;
}
.db-gimmick-banner-title {
    flex: 1;
}
.db-gimmick-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.db-gimmick-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}
.db-gimmick-gen-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px 10px;
    border-radius: 20px;
    color: #ffffff;
    white-space: nowrap;
}
.db-gimmick-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
}
.db-gimmick-short-desc {
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}
.db-gimmick-features-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #f1c40f;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-gimmick-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.db-gimmick-features-list li {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.db-gimmick-footer-btn {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: var(--gimmick-color, #e056fd);
}

/* 2. Types Grid & Calculator */
.db-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    width: 100%;
}
.db-type-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.db-type-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px var(--type-color, #ff7675)30;
    border-color: var(--type-color, #ff7675);
}
.db-type-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
}
.db-type-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.db-type-title-box {
    flex: 1;
}
.db-type-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #ffffff;
    font-weight: bold;
}
.db-type-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}
.db-type-badge-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.db-type-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.45;
}
.db-type-matchups-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
    border-radius: 8px;
}
.db-type-matchup-col {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
}
.db-type-matchup-col .label {
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.7);
    min-width: 90px;
}
.db-type-matchup-col .badges-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.db-type-mini-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Type Calculator */
/* Type Calculator (Уязвимости и сопротивления) */
.db-type-calc-container {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(20, 27, 48, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.db-type-calc-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.db-type-calc-title-box h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #00cec9;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.db-type-calc-title-box p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.5;
}

.db-type-calc-selectors-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(0, 0, 0, 0.3);
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.db-calc-row-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-calc-row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.db-calc-type-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Individual Type Button */
.db-calc-type-btn {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--t-color, #64748b);
    color: #e2e8f0;
    border-radius: 10px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    outline: none;
}
.db-calc-type-btn:hover {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--t-color, rgba(255, 255, 255, 0.3));
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.db-calc-type-btn.active {
    background: var(--t-color, #00cec9) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px var(--t-color, #00cec9)88, 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    transform: translateY(-1px) scale(1.04);
    font-weight: 800;
}
.db-calc-type-btn.disabled {
    opacity: 0.35;
    filter: grayscale(0.85);
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}
.db-calc-type-btn-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    flex-shrink: 0;
}

/* "None (1 type)" Button */
.db-calc-none-btn {
    border-left-color: #94a3b8;
    background: rgba(30, 41, 59, 0.5);
}
.db-calc-none-btn i {
    font-size: 0.85rem;
    color: #94a3b8;
}
.db-calc-none-btn.active {
    background: #475569 !important;
    border-color: #94a3b8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(148, 163, 184, 0.4) !important;
}
.db-calc-none-btn.active i {
    color: #ffffff;
}

/* Selected Preview */
.db-type-calc-selected-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(15, 23, 42, 0.8);
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/* Results Section */
.db-type-calc-results {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.db-calc-group {
    background: rgba(15, 23, 42, 0.65);
    border-radius: 12px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 5px solid #888;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}
.db-calc-group.danger-heavy {
    border-left-color: #ff3838;
    background: linear-gradient(90deg, rgba(255, 56, 56, 0.12) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.danger {
    border-left-color: #ff7675;
    background: linear-gradient(90deg, rgba(255, 118, 117, 0.1) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.resist {
    border-left-color: #55efc4;
    background: linear-gradient(90deg, rgba(85, 239, 196, 0.1) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.resist-heavy {
    border-left-color: #00b894;
    background: linear-gradient(90deg, rgba(0, 184, 148, 0.12) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.immune {
    border-left-color: #fdcb6e;
    background: linear-gradient(90deg, rgba(253, 203, 110, 0.1) 0%, rgba(15, 23, 42, 0.65) 100%);
}

.db-calc-group-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-calc-badges-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 768px) {
    .db-type-calc-container {
        padding: 16px;
        gap: 16px;
    }
    .db-type-calc-selectors-block {
        padding: 12px;
    }
    .db-calc-type-btn {
        padding: 5px 9px;
        font-size: 0.72rem;
        gap: 6px;
    }
    .db-calc-type-btn-icon {
        width: 18px;
        height: 18px;
    }
}


/* 3. Natures Grid & Cards */
.db-nature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    width: 100%;
}
.db-nature-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-nature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    border-color: #2ecc71;
}
.db-nature-card.neutral {
    border-color: rgba(255, 255, 255, 0.08);
}
.db-nature-card.neutral:hover {
    border-color: #74b9ff;
}
.db-nature-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.db-nature-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.db-nature-info {
    flex: 1;
}
.db-nature-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: bold;
}
.db-nature-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
}
.db-nature-stats-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.db-nature-stat-plus {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(46, 204, 113, 0.3);
}
.db-nature-stat-minus {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ff7675;
    background: rgba(255, 118, 117, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 118, 117, 0.3);
}
.db-nature-neutral-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #74b9ff;
    background: rgba(116, 185, 255, 0.12);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-nature-meta-row {
    margin-top: auto;
}
.db-nature-mint-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-nature-mint-btn:hover {
    background: rgba(46, 204, 113, 0.2);
    border-color: #2ecc71;
    color: #2ecc71;
}

/* 4. Advanced Mechanics Grid & Cards */
.db-advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 18px;
    width: 100%;
}
/* ===== ADVANCED MECHANICS CARDS ===== */
.db-advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
}
.db-advanced-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
}
.db-advanced-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 18px var(--adv-color, #ff7675)30;
    border-color: var(--adv-color, #ff7675);
}
.db-advanced-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}
.db-advanced-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.db-advanced-title-box {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.db-advanced-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: bold;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
}
.db-advanced-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
    word-break: break-word;
    overflow-wrap: break-word;
}
.db-advanced-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    align-self: flex-start;
}
.db-advanced-desc-preview {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.5;
}
.db-advanced-footer-btn {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: var(--adv-color, #ff7675);
}
.db-math-formula-box {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #00cec9;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 206, 201, 0.3);
    padding: 12px 16px;
    border-radius: 8px;
    margin: 10px 0;
    overflow-x: auto;
}

/* Typography & Highlight Enhancements for Database Modals */
.db-section-subtitle {
    font-family: 'Minecraft', monospace;
    font-size: 0.94rem;
    color: #00cec9;
    margin: 16px 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}
.db-hl-bold {
    color: #ffffff;
    font-weight: 700;
}
.db-hl-italic {
    color: #f1c40f;
    font-style: italic;
}
.db-text-list-item {
    margin-bottom: 9px;
    line-height: 1.65;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.92);
}
.db-text-paragraph {
    margin-bottom: 10px;
    line-height: 1.65;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.88);
}
.db-modal-styled-list {
    margin: 0;
    padding-left: 20px;
    list-style: square;
}
.db-matchup-panel {
    background: rgba(255, 255, 255, 0.03);
    padding: 14px 18px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
}
.db-type-mini-badge.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    filter: brightness(1.15);
}
.stat-boost-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.stat-boost-tag.plus {
    background: rgba(46, 204, 113, 0.18);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
}
.stat-boost-tag.minus {
    background: rgba(255, 118, 117, 0.18);
    color: #ff7675;
    border: 1px solid rgba(255, 118, 117, 0.4);
}
.db-interactive-chip.status {
    background: rgba(162, 155, 254, 0.15);
    border-color: rgba(162, 155, 254, 0.4);
    color: #a29bfe;
}
.db-interactive-chip.status:hover {
    background: rgba(162, 155, 254, 0.3);
    border-color: #6c5ce7;
    box-shadow: 0 2px 10px rgba(108, 92, 231, 0.35);
}
.db-interactive-chip.gimmick {
    background: rgba(224, 86, 253, 0.15);
    border-color: rgba(224, 86, 253, 0.4);
    color: #e056fd;
}
.db-interactive-chip.gimmick:hover {
    background: rgba(224, 86, 253, 0.3);
    border-color: #be2edd;
    box-shadow: 0 2px 10px rgba(224, 86, 253, 0.35);
}

/* ==========================================================================
   OFFICIAL TYPE PILLS, IMAGE ICONS, CARDS & MODAL HERO
   ========================================================================== */

/* Universal Type Pill Badge with Image */
.db-type-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, var(--badge-color, #888) 18%, transparent);
    color: var(--badge-color, #fff);
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    text-shadow: none;
    box-shadow: 0 0 8px color-mix(in srgb, var(--badge-color, #888) 18%, transparent);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
    border: 1px solid color-mix(in srgb, var(--badge-color, #888) 50%, transparent);
    letter-spacing: 0.2px;
    backdrop-filter: blur(6px);
    box-sizing: border-box;
    white-space: nowrap;
}
.db-type-pill-badge.size-sm {
    padding: 3px 10px;
    font-size: 0.64rem;
    min-width: 90px;
    max-width: 125px;
    width: auto;
}
.db-type-pill-badge.size-md {
    padding: 4px 11px;
    font-size: 0.72rem;
    min-width: 94px;
}
.db-type-pill-badge.size-lg {
    padding: 6px 16px;
    font-size: 0.82rem;
    min-width: 114px;
}
.db-type-pill-badge.clickable {
    cursor: pointer;
}
.db-type-pill-badge.clickable:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--badge-color, #888) 32%, transparent);
    border-color: var(--badge-color, #888);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 14px color-mix(in srgb, var(--badge-color, #888) 45%, transparent);
    filter: brightness(1.2);
}
.db-type-pill-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}
.db-type-pill-badge.size-md .db-type-pill-icon {
    width: 16px;
    height: 16px;
}
.db-type-pill-badge.size-lg .db-type-pill-icon {
    width: 18px;
    height: 18px;
}

.db-move-type-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
/* Duplicate pill block removed */

/* Types Grid & Cards */
.db-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    width: 100%;
}
.db-type-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 18px 20px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.db-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45), 0 0 20px var(--type-color, #ff7675)35;
    border-color: var(--type-color, #ff7675);
}
.db-type-card-top-bar {
    display: flex;
    align-items: center;
    gap: 14px;
}
.db-type-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.db-type-card-main-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.db-type-title-area {
    flex: 1;
}
.db-type-title-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    color: #ffffff;
    font-weight: bold;
}
.db-type-title-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}
.db-type-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
}
.db-type-card-matchups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 14px;
    border-radius: 10px;
    margin-top: auto;
}
.db-type-matchup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.74rem;
}
.db-type-matchup-row .matchup-lbl {
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.7);
    min-width: 95px;
    flex-shrink: 0;
    margin-top: 0;
}
.db-type-matchup-row .matchup-badges-flow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}
.db-type-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: var(--type-color, #ff7675);
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Type Modal Hero Banner */
.db-type-modal-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid;
}
.db-type-modal-img-wrap {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.db-type-modal-big-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.db-type-modal-title-box {
    flex: 1;
}
.db-type-modal-top-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.db-type-modal-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.4rem;
    color: #ffffff;
    margin: 0;
}
.db-type-modal-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    margin-top: 2px;
}

/* Matchup Structured Panel */
.db-type-detail-modal {
    max-width: 860px !important;
}
.db-matchup-structured-panel {
    background: rgba(255, 255, 255, 0.03);
    padding: 16px 20px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.db-matchup-stat-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-matchup-stat-row .row-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
}
.db-matchup-stat-row.super .row-title { color: #55efc4; }
.db-matchup-stat-row.not-very .row-title { color: #fdcb6e; }
.db-matchup-stat-row.weak .row-title { color: #ff7675; }
.db-matchup-stat-row.resist .row-title { color: #00cec9; }
.db-matchup-stat-row.immune .row-title { color: #f1c40f; }

.db-matchup-stat-row .badges-wrap {
    display: flex;
    column-gap: 10px;
    row-gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.empty-val {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Minecraft', monospace;
}
.db-type-calc-selected-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.25);
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Round Type Icon Circles for Card Preview */
.db-type-icon-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    outline: none;
}
.db-type-icon-circle:hover {
    transform: translateY(-2px) scale(1.18);
    box-shadow: none;
    border-color: transparent;
    filter: brightness(1.2) drop-shadow(0 2px 8px var(--badge-color, rgba(255, 255, 255, 0.5)));
}
.db-type-circle-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
    pointer-events: none;
}

/* Modal Description Text Fix */
.db-detail-desc-full {
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    border-left: 4px solid var(--badge-color, #ff7675) !important;
}
.db-type-detail-text {
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

/* Gimmicks Tables: Z-Moves & Max-Moves */
.db-gimmick-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.db-gimmick-table th {
    background: rgba(255, 255, 255, 0.08);
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: #00cec9;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.db-gimmick-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}
.db-gimmick-move-row:hover td {
    background: rgba(255, 255, 255, 0.04);
}
.db-z-move-name-ru, .db-max-move-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: bold;
}
.db-z-move-name-en, .db-max-move-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
}

/* Max Guard Golden Shield Banner */
.db-max-guard-banner {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.2) 0%, rgba(211, 84, 0, 0.12) 100%);
    border: 2px solid #f1c40f;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 16px 0;
    box-shadow: 0 6px 20px rgba(241, 196, 15, 0.25);
}
.db-max-guard-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(241, 196, 15, 0.25);
    border: 2px solid #f1c40f;
    color: #f1c40f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(241, 196, 15, 0.4);
}
.db-max-guard-info {
    flex: 1;
}
.db-max-guard-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #f1c40f;
    font-weight: bold;
    margin-bottom: 6px;
}
.db-max-guard-desc {
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

/* Move Modal Actions Row */
.db-move-actions-row {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}
.db-move-learners-btn {
    flex: 1;
    background: linear-gradient(135deg, #0984e3 0%, #00cec9 100%);
    border: none;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 12px 18px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(9, 132, 227, 0.4);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.db-move-learners-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 206, 201, 0.5);
    filter: brightness(1.1);
}

/* Move Learners Modal & Grid */
.db-learners-modal {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.db-learners-header {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 14px;
}
.db-learners-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
}
.db-learners-subtitle {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #00cec9;
    margin-top: 4px;
}
.db-learners-body {
    overflow-y: auto;
    max-height: 65vh;
    padding-right: 6px;
}
.db-learners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.db-learner-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-learner-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 206, 201, 0.25);
}
.db-learner-img-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.db-learner-img-wrap img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
}
.db-learner-info {
    flex: 1;
    min-width: 0;
}
.db-learner-dex {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
}
.db-learner-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-learner-types {
    display: flex;
    gap: 4px;
    margin: 4px 0;
}
.db-learner-method {
    font-size: 0.7rem;
    color: #fdcb6e;
    font-family: 'Minecraft', monospace;
}
.db-no-learners-msg {
    text-align: center;
    padding: 30px 20px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
}

/* Type Matrix 18x18 Table */
.db-type-matrix-container {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px 20px;
    width: 100%;
}
.db-type-matrix-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
}
.db-type-matrix-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.legend-box {
    width: 26px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.72rem;
}
.db-matrix-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.db-type-matrix-table {
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
    min-width: 780px;
}
.db-matrix-corner {
    background: rgba(0, 0, 0, 0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #00cec9;
    padding: 6px;
    text-align: center;
    border-radius: 6px;
    min-width: 120px;
}
.corner-atk { color: #55efc4; }
.corner-def { color: #74b9ff; }
.db-matrix-th-col {
    padding: 4px;
    text-align: center;
}
.db-matrix-header-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.db-matrix-hdr-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.db-matrix-th-row {
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffffff;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.db-matrix-th-row:hover {
    transform: scale(1.04);
    filter: brightness(1.15);
}
.db-matrix-row-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.db-matrix-cell {
    text-align: center;
    vertical-align: middle;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.75rem;
    border-radius: 6px;
    height: 34px;
    min-width: 34px;
    transition: transform 0.15s ease;
}
.db-matrix-cell:hover {
    transform: scale(1.2);
    z-index: 2;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.mult-2 {
    background: #2ed573 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.mult-half {
    background: #ff4757 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.mult-0 {
    background: #2f3542 !important;
    color: #a4b0be !important;
    border: 1px solid rgba(255,255,255,0.1);
}
.mult-1 {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.2);
}

/* 5x5 Nature Matrix Table */
.db-nature-matrix-container {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 18px 22px;
    width: 100%;
}
.db-nature-matrix-header {
    margin-bottom: 16px;
}
.db-nature-matrix-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    color: #ffffff;
    margin: 0;
}
.db-nature-matrix-header p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 6px 0 0 0;
}
.db-nature-matrix-table {
    border-collapse: separate;
    border-spacing: 6px;
    width: 100%;
    min-width: 720px;
}
.db-nature-corner {
    background: rgba(0, 0, 0, 0.35);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    min-width: 130px;
}
.corner-up { color: #55efc4; font-weight: bold; }
.corner-down { color: #ff7675; font-weight: bold; }
.db-nature-matrix-th-top {
    background: rgba(255, 255, 255, 0.04);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #55efc4;
}
.db-nature-matrix-th-left {
    background: rgba(255, 255, 255, 0.04);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #ff7675;
}
.db-nature-matrix-cell {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-nature-matrix-cell:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 206, 201, 0.25);
}
.db-nature-matrix-cell.neutral-cell {
    background: rgba(241, 196, 15, 0.1);
    border-color: rgba(241, 196, 15, 0.3);
}
.cell-nature-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: bold;
}
.cell-nature-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
}
.cell-mint {
    font-size: 0.65rem;
    color: #55efc4;
    font-family: 'Minecraft', monospace;
    margin-top: 4px;
}

/* Gimmick Standalone Table Views & Quick Buttons */
.db-gimmick-standalone-container {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 20px 24px;
    width: 100%;
}
.db-gimmick-standalone-header {
    margin-bottom: 20px;
}
.db-gimmick-standalone-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
}
.db-gimmick-standalone-header p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 6px 0 0 0;
}
.db-gimmick-quick-actions {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-gimmick-quick-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    font-weight: bold;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.db-gimmick-quick-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 206, 201, 0.25);
}
.db-gimmick-quick-btn.gold {
    background: rgba(241, 196, 15, 0.12);
    border-color: rgba(241, 196, 15, 0.4);
    color: #f1c40f;
}
.db-gimmick-quick-btn.gold:hover {
    background: rgba(241, 196, 15, 0.25);
    border-color: #f1c40f;
    box-shadow: 0 4px 12px rgba(241, 196, 15, 0.35);
}

/* Muted Eye-Friendly Type Matrix Colors */
.db-matrix-cell.mult-2, .legend-box.mult-2 {
    background: rgba(46, 204, 113, 0.22) !important;
    color: #86efac !important;
    border: 1px solid rgba(46, 204, 113, 0.45) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.db-matrix-cell.mult-half, .legend-box.mult-half {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.38) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.db-matrix-cell.mult-0, .legend-box.mult-0 {
    background: rgba(30, 41, 59, 0.85) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    text-shadow: none;
}
.db-matrix-cell.mult-1, .legend-box.mult-1 {
    background: rgba(255, 255, 255, 0.02) !important;
    color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.035) !important;
}
.db-matrix-cell {
    text-align: center;
    vertical-align: middle;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    border-radius: 6px;
    height: 32px;
    min-width: 32px;
    transition: all 0.15s ease;
}
.db-matrix-cell:hover {
    transform: scale(1.15);
    z-index: 2;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.4);
    filter: brightness(1.2);
}

/* Muted Soft Type Matrix Headers */
.db-matrix-header-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: color-mix(in srgb, var(--hdr-color, #888) 32%, rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid color-mix(in srgb, var(--hdr-color, #888) 55%, transparent) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: all 0.2s ease;
}
.db-matrix-header-badge:hover {
    background: color-mix(in srgb, var(--hdr-color, #888) 50%, rgba(15, 23, 42, 0.95)) !important;
    border-color: var(--hdr-color, #888) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 8px var(--hdr-color, #888);
}

.db-matrix-th-row {
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    color: #ffffff;
    white-space: nowrap;
    background: color-mix(in srgb, var(--row-color, #888) 32%, rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid color-mix(in srgb, var(--row-color, #888) 55%, transparent) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    transition: all 0.2s ease;
}
.db-matrix-th-row:hover {
    background: color-mix(in srgb, var(--row-color, #888) 50%, rgba(15, 23, 42, 0.95)) !important;
    border-color: var(--row-color, #888) !important;
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 10px color-mix(in srgb, var(--row-color, #888) 40%, transparent);
}

/* BP Conversion Micro-Calculators */
.db-bp-calc-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(26, 38, 70, 0.8) 100%);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 14px;
    padding: 18px 22px;
    margin: 18px 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.db-bp-calc-header h3 {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #00cec9;
    margin: 0;
}
.db-bp-calc-header p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 4px 0 14px 0;
}
.db-bp-calc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.db-bp-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
    align-items: flex-start;
    width: fit-content;
}
.db-bp-input-wrap label {
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.db-bp-calc-box .num-input-group {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: fit-content !important;
    align-self: flex-start !important;
    border: 1px solid rgba(0, 206, 201, 0.5) !important;
    background: #0f172a !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
}
.db-bp-calc-box .num-input-group .num-btn {
    width: 34px !important;
    height: 36px !important;
    background: rgba(0, 206, 201, 0.2) !important;
    color: #00cec9 !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s, transform 0.1s !important;
    flex-shrink: 0 !important;
}
.db-bp-calc-box .num-input-group .num-btn:hover {
    background: rgba(0, 206, 201, 0.4) !important;
    color: #ffffff !important;
}
.db-bp-calc-box .num-input-group input[type="number"],
.db-bp-clean-input {
    width: 56px !important;
    height: 36px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.95rem !important;
    font-weight: bold !important;
    text-align: center !important;
    border: none !important;
    outline: none !important;
    padding: 0 2px !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
}
.db-bp-input-wrap select {
    background: #0f172a;
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #ffffff;
    padding: 8px 14px;
    height: 38px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    outline: none;
    transition: all 0.2s ease;
}
.db-bp-input-wrap select:focus {
    border-color: #00cec9;
    box-shadow: 0 0 0 3px rgba(0, 206, 201, 0.2);
}
.db-bp-quick-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 220px;
}
.db-bp-quick-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    margin-right: 2px;
}
.db-bp-quick-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 5px 9px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.db-bp-quick-btn:hover {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #ffffff;
}
.db-bp-quick-btn.active {
    background: #00cec9;
    border-color: #00cec9;
    color: #0f172a;
    font-weight: bold;
}
.db-bp-result-wrap {
    background: rgba(0, 206, 201, 0.12);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    padding: 8px 18px;
    text-align: center;
    min-width: 170px;
    margin-left: auto;
}
.db-bp-result-wrap .res-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-bp-result-wrap .res-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    font-weight: bold;
    color: #ffffff;
    margin-top: 2px;
}

/* Clean & Compact Learners Modal */
.db-learners-modal {
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.db-learners-header {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
}
.db-learners-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    color: #ffffff;
    margin: 0;
}
.db-learners-subtitle {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: #00cec9;
    margin-top: 4px;
}
.db-learners-body {
    overflow-y: auto;
    max-height: 68vh;
    padding: 4px 6px 10px 2px;
}
.db-learners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}
.db-learner-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.18s ease;
}
.db-learner-card:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.25);
}
.db-learner-img-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}
.db-learner-img-wrap img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
}
.db-learner-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.db-learner-top-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.db-learner-dex {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}
.db-learner-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-learner-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}
.db-learner-types {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.db-learner-types .db-type-icon-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}
.db-learner-types .db-type-icon-circle img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.db-learner-method {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #f1c40f;
    background: rgba(241, 196, 15, 0.12);
    border: 1px solid rgba(241, 196, 15, 0.3);
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

/* Move Modal Action Buttons Equal 50% Width */
.db-move-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 18px !important;
}

.db-move-actions-row > button,
.db-move-actions-row .db-move-learners-btn,
.db-move-actions-row .db-detail-download {
    flex: 1 1 0 !important;
    width: 50% !important;
    min-width: 0 !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.8rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.db-move-actions-row .db-move-learners-btn {
    background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%) !important;
    border: 1px solid rgba(0, 206, 201, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 180, 219, 0.3) !important;
}

.db-move-actions-row .db-move-learners-btn:hover {
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 180, 219, 0.45) !important;
}

.db-move-actions-row .db-detail-download {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.db-move-actions-row .db-detail-download:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

/* Metamorphosis Section Styles */
.db-meta-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 30px;
}
.db-meta-explain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 18px;
}
.db-meta-explain-card {
    background: rgba(15, 23, 42, 0.85);
    border-radius: 14px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.db-meta-explain-card.z-card {
    border: 1px solid rgba(241, 196, 15, 0.4);
    border-top: 4px solid #f1c40f;
}
.db-meta-explain-card.max-card {
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-top: 4px solid #00cec9;
}
.db-meta-explain-card .card-icon {
    font-size: 1.6rem;
    margin-bottom: 8px;
}
.db-meta-explain-card.z-card .card-icon { color: #f1c40f; }
.db-meta-explain-card.max-card .card-icon { color: #00cec9; }

.db-meta-explain-card h3 {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff;
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.db-meta-explain-card .card-text p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
    margin: 0 0 8px 0;
}

.db-meta-compare-results {
    display: flex;
    gap: 12px;
    flex: 2;
    min-width: 320px;
    flex-wrap: wrap;
}
.meta-sim-card {
    flex: 1;
    min-width: 150px;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.meta-sim-card.z-sim {
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.35);
}
.meta-sim-card.max-sim {
    background: rgba(0, 206, 201, 0.1);
    border: 1px solid rgba(0, 206, 201, 0.35);
}
.meta-sim-card .sim-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.meta-sim-card.z-sim .sim-tag { color: #f1c40f; }
.meta-sim-card.max-sim .sim-tag { color: #00cec9; }

.meta-sim-card .sim-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: #ffffff;
}
.meta-sim-card .sim-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    font-weight: bold;
    color: #ffffff;
}
.meta-sim-card.z-sim .sim-val { color: #f1c40f; }
.meta-sim-card.max-sim .sim-val { color: #00cec9; }
.meta-sim-card .sim-val span { font-size: 0.75rem; opacity: 0.8; }

.meta-sim-card .sim-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.35;
    margin-top: 2px;
}

/* Gimmick Moves Calculation Modal Styles */
.db-gimmick-calc-action-btn {
    width: 100% !important;
    height: 50px !important;
    border-radius: 12px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.92rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
}

.db-gimmick-calc-action-btn.z-btn {
    background: linear-gradient(135deg, #f1c40f 0%, #e67e22 100%) !important;
    color: #1a1a2e !important;
    box-shadow: 0 4px 18px rgba(241, 196, 15, 0.35) !important;
}
.db-gimmick-calc-action-btn.z-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(241, 196, 15, 0.55) !important;
}

.db-gimmick-calc-action-btn.max-btn {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(0, 206, 201, 0.35) !important;
}
.db-gimmick-calc-action-btn.max-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 206, 201, 0.55) !important;
}

/* Modal Popup Window */
.db-calc-moves-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 15, 30, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.db-calc-moves-modal {
    width: 95vw;
    max-width: 1300px;
    height: 90vh;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    padding: 24px 28px;
}

.db-calc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 14px;
    margin-bottom: 14px;
}
.db-calc-header-title h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0 0 4px 0;
}
.db-calc-header-title p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.db-calc-modal-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.db-calc-mode-switch {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.calc-mode-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 18px;
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.calc-mode-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}
.calc-mode-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(233, 69, 96, 0.4);
}

.db-calc-filters-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.db-calc-search-wrap {
    flex: 2;
    min-width: 240px;
    position: relative;
}
.db-calc-search-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}
.db-calc-search-wrap input {
    width: 100%;
    height: 40px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 0 14px 0 38px;
    color: #ffffff;
    font-size: 0.8rem;
    font-family: 'Minecraft', monospace;
    outline: none;
    box-sizing: border-box;
}
.db-calc-search-wrap input:focus {
    border-color: #00cec9;
}

.db-calc-select-wrap select {
    height: 40px;
    background: #151a30;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 0 12px;
    color: #ffffff;
    font-size: 0.78rem;
    font-family: 'Minecraft', monospace;
    outline: none;
    cursor: pointer;
}

.db-calc-counter {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #00cec9;
    padding: 6px 14px;
    background: rgba(0, 206, 201, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(0, 206, 201, 0.25);
    white-space: nowrap;
}

.db-calc-table-scroll {
    flex: 1;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(10, 15, 30, 0.5);
}

.db-calc-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.db-calc-table th {
    position: sticky;
    top: 0;
    background: #0f172a;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 12px 14px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
    z-index: 2;
}

.db-calc-move-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
    cursor: pointer;
}
.db-calc-move-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}
.db-calc-move-row:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}
.db-calc-move-row td {
    padding: 10px 12px;
    vertical-align: middle;
    font-size: 0.78rem;
}

.db-move-title-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.db-move-names .name-ru {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.82rem;
    color: #ffffff;
}
.db-move-names .name-en {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.db-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 8px;
}
.db-meta-cell.z-cell {
    background: rgba(241, 196, 15, 0.06);
    border: 1px solid rgba(241, 196, 15, 0.2);
}
.db-meta-cell.max-cell {
    background: rgba(0, 206, 201, 0.06);
    border: 1px solid rgba(0, 206, 201, 0.2);
}

.meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.meta-bp-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
}
.meta-bp-badge.z-badge {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
    border: 1px solid rgba(241, 196, 15, 0.4);
}
.meta-bp-badge.max-badge {
    background: rgba(0, 206, 201, 0.2);
    color: #00cec9;
    border: 1px solid rgba(0, 206, 201, 0.4);
}
.meta-bp-badge.guard-badge {
    background: rgba(85, 239, 196, 0.2);
    color: #55efc4;
    border: 1px solid rgba(85, 239, 196, 0.4);
}

.meta-name {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.78rem;
}
.meta-sub, .meta-effect {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.3;
}

/* Card Customizer Radius & Shadow Presets */
.db-card-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.db-card-custom-slider {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    accent-color: #e94560;
}
.db-setting-num-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #00cec9;
    background: rgba(0, 206, 201, 0.12);
    border: 1px solid rgba(0, 206, 201, 0.3);
    padding: 3px 8px;
    border-radius: 6px;
    min-width: 38px;
    text-align: center;
}
.db-preset-pills-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.db-preset-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.db-preset-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}
.db-preset-pill.active {
    background: #e94560;
    border-color: #e94560;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
}


/* ==========================================================================
   2-MODE SITE SWITCHER (МИНИ-ИГРЫ / БАЗА ДАННЫХ)
   ========================================================================== */
.mode-switcher-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(26, 38, 70, 0.75) 100%) !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(233, 69, 96, 0.05) !important;
    backdrop-filter: blur(14px) !important;
}

.menu-header-brand {
    flex: 1;
    text-align: center;
}

.menu-header-brand h1 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    color: #e94560;
    text-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
    letter-spacing: 0.5px;
}

.menu-header-brand p {
    margin: 4px 0 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
}

.site-mode-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: rgba(26, 26, 46, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.92rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
}

.site-mode-btn i {
    font-size: 1.05rem;
    transition: transform 0.2s ease;
}

.site-mode-btn:hover {
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.5);
    background: rgba(233, 69, 96, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.25);
}

.site-mode-btn:hover i {
    transform: scale(1.15);
}

.site-mode-btn.active {
    background: linear-gradient(135deg, #e94560 0%, #c62a47 100%) !important;
    border-color: #ff6b81 !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(233, 69, 96, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.02);
}

#modeBtnDatabase.site-mode-btn:hover {
    border-color: rgba(0, 206, 201, 0.5);
    background: rgba(0, 206, 201, 0.15);
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.25);
}

#modeBtnDatabase.site-mode-btn.active {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%) !important;
    border-color: #81ecec !important;
    box-shadow: 0 0 22px rgba(0, 206, 201, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

@media (max-width: 960px) {
    .mode-switcher-header {
        flex-direction: column;
        gap: 14px;
    }
    .site-mode-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   DATABASE TABS (STYLING MATCHING MINI-GAMES)
   ========================================================================== */
.db-subtabs-container {
    margin-bottom: 26px !important;
    margin-top: 6px !important;
}

.db-subtabs-container .tab-btn.game-tab {
    position: relative;
    overflow: hidden;
}

/* Pokemon - Rose Neon */
.db-subtabs-container #dbSubTabPokemon.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.3), rgba(198, 42, 71, 0.5)) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 35px rgba(233, 69, 96, 0.4), 0 0 70px rgba(233, 69, 96, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.8) !important;
}
.db-subtabs-container #dbSubTabPokemon.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #e94560, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #e94560, 0 0 30px rgba(233, 69, 96, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}

/* Abilities - Gold Neon */
.db-subtabs-container #dbSubTabAbilities {
    border-color: rgba(255, 215, 0, 0.3) !important;
    background: linear-gradient(145deg, rgba(40, 30, 10, 0.5), rgba(60, 40, 10, 0.4)) !important;
}
.db-subtabs-container #dbSubTabAbilities:hover {
    border-color: #ffd700 !important;
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 215, 0, 0.1) !important;
}
.db-subtabs-container #dbSubTabAbilities.active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(200, 150, 0, 0.4)) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.4), 0 0 70px rgba(255, 215, 0, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
}
.db-subtabs-container #dbSubTabAbilities.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #ffd700, 0 0 30px rgba(255, 215, 0, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}
.db-subtabs-container #dbSubTabAbilities:hover i,
.db-subtabs-container #dbSubTabAbilities.active i {
    color: #ffd700 !important;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
}

/* Moves - Cyan Neon */
.db-subtabs-container #dbSubTabMoves {
    border-color: rgba(0, 206, 201, 0.3) !important;
    background: linear-gradient(145deg, rgba(10, 35, 45, 0.5), rgba(15, 45, 60, 0.4)) !important;
}
.db-subtabs-container #dbSubTabMoves:hover {
    border-color: #00cec9 !important;
    box-shadow: 0 8px 30px rgba(0, 206, 201, 0.3), inset 0 1px 0 rgba(0, 206, 201, 0.1) !important;
}
.db-subtabs-container #dbSubTabMoves.active {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.25), rgba(9, 132, 227, 0.4)) !important;
    border-color: #00cec9 !important;
    box-shadow: 0 0 35px rgba(0, 206, 201, 0.4), 0 0 70px rgba(0, 206, 201, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(0, 206, 201, 0.8) !important;
}
.db-subtabs-container #dbSubTabMoves.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00cec9, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #00cec9, 0 0 30px rgba(0, 206, 201, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}
.db-subtabs-container #dbSubTabMoves:hover i,
.db-subtabs-container #dbSubTabMoves.active i {
    color: #00cec9 !important;
    filter: drop-shadow(0 0 15px rgba(0, 206, 201, 0.9));
}

/* Items - Purple Neon */
.db-subtabs-container #dbSubTabItems {
    border-color: rgba(108, 92, 231, 0.3) !important;
    background: linear-gradient(145deg, rgba(30, 20, 50, 0.5), rgba(45, 30, 70, 0.4)) !important;
}
.db-subtabs-container #dbSubTabItems:hover {
    border-color: #a29bfe !important;
    box-shadow: 0 8px 30px rgba(108, 92, 231, 0.3), inset 0 1px 0 rgba(108, 92, 231, 0.1) !important;
}
.db-subtabs-container #dbSubTabItems.active {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.25), rgba(162, 155, 254, 0.4)) !important;
    border-color: #a29bfe !important;
    box-shadow: 0 0 35px rgba(108, 92, 231, 0.4), 0 0 70px rgba(108, 92, 231, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(162, 155, 254, 0.8) !important;
}
.db-subtabs-container #dbSubTabItems.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #a29bfe, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #a29bfe, 0 0 30px rgba(108, 92, 231, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}
.db-subtabs-container #dbSubTabItems:hover i,
.db-subtabs-container #dbSubTabItems.active i {
    color: #a29bfe !important;
    filter: drop-shadow(0 0 15px rgba(162, 155, 254, 0.9));
}


/* ==========================================================================
   GAMES MODE WRAP (UNIFIED BLUE CARD WITH EMBEDDED TABS)
   ========================================================================== */
.games-mode-wrap {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    padding: 24px 30px 30px !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(233, 69, 96, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 30px !important;
}

.games-mode-wrap > .tabs {
    margin-bottom: 24px !important;
}

.games-mode-wrap > .tab-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
}

@media (max-width: 768px) {
    .games-mode-wrap {
        padding: 16px 14px 20px !important;
        border-radius: 16px !important;
    }
}


/* ==========================================================================
   WIDTH CONSTRAINT FIX FOR 2-MODE CONTAINERS
   ========================================================================== */
.main-menu {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#tabDatabase {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.games-mode-wrap {
    max-width: 1200px !important;
    margin: 0 auto 30px auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   TOP BAR BRAND & CENTERED MODE SWITCHER
   ========================================================================== */
.top-bar-brand {
    text-align: center;
    flex: 1;
    margin: 0 15px;
    pointer-events: none;
}

.top-bar-brand h1 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 1.12rem;
    color: #e94560;
    text-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.top-bar-brand p {
    margin: 2px 0 0;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.2;
}

.mode-switcher-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 10px 20px !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(26, 38, 70, 0.75) 100%) !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(233, 69, 96, 0.05) !important;
    backdrop-filter: blur(14px) !important;
}

.mode-switcher-header .site-mode-btn {
    min-width: 200px;
    justify-content: center;
}

@media (max-width: 768px) {
    .user-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 20px;
    }
    .top-bar-brand {
        order: 2;
        width: 100%;
        margin: 4px 0 0 0;
    }
    .top-bar-brand h1 {
        font-size: 0.95rem;
    }
    .top-bar-brand p {
        font-size: 0.58rem;
    }
    .mode-switcher-header {
        gap: 10px !important;
        padding: 8px 12px !important;
    }
    .mode-switcher-header .site-mode-btn {
        min-width: 0;
        flex: 1;
        padding: 10px 12px;
        font-size: 0.75rem;
    }
}


/* ==========================================================================
   TEAM BUILDER (РЕЖИМ СОЗДАТЬ КОМАНДУ)
   ========================================================================== */
#modeBtnTeambuilder.site-mode-btn:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.15);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
}

#modeBtnTeambuilder.site-mode-btn.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(16, 185, 129, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.teambuilder-mode-wrap {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    padding: 24px 30px 30px !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tb-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.tb-team-name-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 280px;
}

.tb-team-name-group .tb-icon {
    font-size: 1.6rem;
    color: #10b981;
}

.tb-team-name-input {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 12px;
    padding: 10px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    outline: none;
    flex: 1;
}

.tb-team-name-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.tb-team-select {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    outline: none;
    cursor: pointer;
}

.tb-actions-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tb-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(26, 26, 46, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 8px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.tb-btn.primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #34d399;
}

.tb-btn.primary:hover {
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
}

.tb-btn.danger {
    color: #ff6b81;
    border-color: rgba(233, 69, 96, 0.4);
}

.tb-btn.danger:hover {
    background: rgba(233, 69, 96, 0.2);
}

.tb-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

.tb-slot-card {
    background: rgba(26, 26, 46, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}

.tb-slot-card:hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.tb-empty-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 20px;
}

.tb-empty-slot:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.tb-empty-slot-icon {
    font-size: 2.2rem;
    color: #10b981;
    margin-bottom: 10px;
}

.tb-empty-slot-title {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 4px;
}

.tb-empty-slot-sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}

.tb-slot-header {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-slot-avatar {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}

.tb-slot-avatar img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.tb-slot-info {
    flex: 1;
    min-width: 0;
}

.tb-slot-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.tb-slot-name {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-slot-eng {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-slot-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: #ff6b81;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px;
}

.tb-type-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.tb-slot-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tb-field-row label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    width: 100px;
    flex-shrink: 0;
}

.tb-input, .tb-select {
    flex: 1;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 10px;
    color: #fff;
    font-size: 0.75rem;
    outline: none;
}

.tb-input:focus, .tb-select:focus {
    border-color: #10b981;
}

.tb-moves-block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-moves-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
}

.tb-moves-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tb-move-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-move-item:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.tb-move-num {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #10b981;
}

.tb-move-name {
    font-size: 0.72rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-move-empty {
    color: rgba(255, 255, 255, 0.35);
}

/* Synergy Section */
.tb-synergy-section {
    background: rgba(26, 26, 46, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 20px;
}

.tb-synergy-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #10b981;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-no-synergy {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    padding: 20px;
}

.tb-synergy-table-wrap {
    overflow-x: auto;
}

.tb-synergy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.tb-synergy-table th, .tb-synergy-table td {
    padding: 8px 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-synergy-table th {
    background: rgba(15, 23, 42, 0.8);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
}

.tb-syn-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.tb-syn-pname {
    font-size: 0.65rem;
    margin-top: 2px;
}

.tb-eff-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    font-size: 0.72rem !important;
    font-family: 'Minecraft', monospace !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.85) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.eff-weak4 { background: #b71540 !important; color: #ffffff !important; }
.eff-weak { background: #e55039 !important; color: #ffffff !important; }
.eff-neutral { color: rgba(255, 255, 255, 0.45) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; border: none !important; box-shadow: none !important; }
.eff-resist { background: #00b894 !important; color: #ffffff !important; }
.eff-resist4 { background: #0984e3 !important; color: #ffffff !important; }
.eff-immune { background: #6c5ce7 !important; color: #ffffff !important; }

.tb-weak-count { color: #e55039; font-weight: bold; }
.tb-resist-count { color: #38ada9; font-weight: bold; }

/* Modals */
.tb-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tb-modal-content {
    background: #1a1a2e;
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 20px;
    width: 100%;
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.tb-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.tb-modal-header h3 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    font-size: 1.1rem;
}

.tb-modal-close {
    background: none;
    border: none;
    color: #ff6b81;
    font-size: 1.2rem;
    cursor: pointer;
}

.tb-modal-search {
    position: relative;
    margin-bottom: 14px;
}

.tb-modal-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
}

.tb-modal-search input {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 14px 10px 36px;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
    box-sizing: border-box;
}

.tb-modal-list {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    padding-right: 6px;
}

.tb-poke-pick-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-poke-pick-card:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    transform: translateY(-2px);
}

.tb-poke-pick-card img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 4px;
}

.tb-poke-pick-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-poke-pick-eng {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

.tb-move-pick-item {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-move-pick-item:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.tb-move-pick-left {
    display: flex;
    align-items: center;
}

.tb-move-pick-right {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    gap: 12px;
}

.tb-showdown-textarea {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    outline: none;
    box-sizing: border-box;
    resize: vertical;
}



/* ==========================================================================
   TEAMBUILDER NATIVE DATABASE MODAL STYLES
   ========================================================================== */
.tb-db-modal-content {
    max-width: 1200px !important;
    width: 95vw !important;
    height: 92vh !important;
    max-height: 92vh !important;
    background: #0f172a !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 28px !important;
    box-sizing: border-box !important;
    border-radius: 24px !important;
}

.tb-modal-count-badge {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: #34d399;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    white-space: nowrap;
}

.tb-modal-cards-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 10px 4px 20px;
    margin-top: 4px;
}

.tb-modal-cards-wrap .db-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 16px !important;
}

.tb-selectable-card {
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none;
}

.tb-selectable-card:hover {
    border-color: #10b981 !important;
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 24px rgba(16, 185, 129, 0.3) !important;
}

.tb-selectable-card:hover::before {
    background: linear-gradient(90deg, transparent, #10b981, transparent) !important;
    opacity: 1 !important;
}




/* ==========================================================================
   ADVANCED TEAM BUILDER STYLES (IV/EV, STATS, ITEMS, TERA) - 100% MINECRAFT FONT
   ========================================================================== */
.teambuilder-mode-wrap,
.teambuilder-mode-wrap *,
.tb-modal-content,
.tb-modal-content *,
.tb-slot-card,
.tb-slot-card *,
.tb-stat-editor-row,
.tb-stat-editor-row *,
.tb-ev-presets,
.tb-ev-presets *,
.tb-ev-counter,
.tb-stat-table-header span,
.tb-stat-chip,
.tb-stat-chip *,
.tb-stat-ed-name *,
.tb-stat-ed-final *,
.tb-stat-ed-ev *,
.tb-stat-ed-iv *,
.tb-preset-btn,
.tb-btn,
.tb-btn *,
.tb-tera-toggle-label,
.tb-tera-toggle-label *,
.tb-iv-max-btn {
    font-family: 'Minecraft', monospace !important;
}

/* Ensure Font Awesome icons are NEVER overridden by Minecraft font anywhere in teambuilder or modals */
.teambuilder-mode-wrap i,
.teambuilder-mode-wrap [class*="fa-"],
.tb-modal-content i,
.tb-modal-content [class*="fa-"],
.tb-top-bar i,
.tb-top-bar [class*="fa-"],
.tb-btn i,
.tb-btn [class*="fa-"],
.tb-slot-card i,
.tb-slot-card [class*="fa-"],
.tb-gen-modal-content i,
.tb-gen-modal-content [class*="fa-"],
.tb-gen-poke-card i,
.tb-gen-poke-card [class*="fa-"],
i.fas, i.far, i.fab, i.fa, [class*="fa-"], [class^="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-style: normal !important;
    font-weight: 900 !important;
}



/* Hide default browser spinners for cleaner UI */
.tb-ev-input-box::-webkit-outer-spin-button,
.tb-ev-input-box::-webkit-inner-spin-button,
.tb-iv-input-box::-webkit-outer-spin-button,
.tb-iv-input-box::-webkit-inner-spin-button,
.tb-lvl-input::-webkit-outer-spin-button,
.tb-lvl-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tb-ev-input-box, .tb-iv-input-box, .tb-lvl-input {
    -moz-appearance: textfield;
}

.tb-tera-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 10px;
    padding: 7px 14px;
    color: #81ecec;
    font-size: 0.76rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.tb-tera-toggle-label:hover {
    border-color: #00cec9;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

.tb-tera-toggle-label input {
    accent-color: #00cec9;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.tb-slot-subname {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.tb-slot-lvl {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 4px;
}

.tb-lvl-input {
    width: 44px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 2px 4px;
    color: #fff;
    font-size: 0.7rem;
    text-align: center;
    outline: none;
}

.tb-shiny-btn {
    background: none;
    border: none;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 4px;
}

.tb-shiny-btn.active, .tb-shiny-btn:hover {
    color: #ffd32a;
    transform: scale(1.2);
    filter: drop-shadow(0 0 6px rgba(255, 211, 42, 0.6));
}

.tb-item-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-item-btn:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.tb-item-name {
    font-size: 0.76rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-muted {
    color: rgba(255, 255, 255, 0.35);
}

/* Stats Summary Card in Slot */
.tb-stats-summary-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 8px 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-stats-summary-card:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.tb-stats-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}

.tb-stats-edit-link {
    color: #34d399;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tb-stats-mini-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.tb-stat-chip {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 4px 2px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tb-stat-chip span {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-stat-chip b {
    font-size: 0.75rem;
    color: #fff;
}

.tb-stat-plus {
    color: #2ed573;
    font-size: 0.52rem;
    font-weight: bold;
    margin-left: 2px;
}

.tb-stat-minus {
    color: #ff4757;
    font-size: 0.52rem;
    font-weight: bold;
    margin-left: 2px;
}

/* ==========================================================================
   STATS EDITOR MODAL - PIXEL-PERFECT ALIGNMENT
   ========================================================================== */
.tb-stats-summary-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.tb-ev-counter {
    font-size: 0.82rem;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
    color: #34d399;
}

.tb-ev-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tb-preset-btn {
    background: rgba(26, 38, 70, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    font-size: 0.68rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.tb-preset-btn:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.2);
}

.tb-preset-btn.danger:hover {
    border-color: #ff6b81;
    background: rgba(233, 69, 96, 0.2);
}

.tb-stat-table-header {
    display: grid;
    grid-template-columns: 120px 90px 1fr 110px;
    gap: 16px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tb-stat-editor-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.tb-stat-editor-row {
    display: grid;
    grid-template-columns: 120px 90px 1fr 110px;
    gap: 16px;
    align-items: center;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
}

.tb-stat-ed-name {
    display: flex;
    flex-direction: column;
}

.tb-stat-ed-name b {
    font-size: 0.85rem;
    color: #fff;
}

.tb-stat-ed-name small {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.tb-stat-ed-final {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-stat-val {
    font-size: 1.15rem;
    color: #10b981;
    font-weight: bold;
}

.tb-stat-ed-ev {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tb-ev-slider {
    flex: 1;
    accent-color: #10b981;
    cursor: pointer;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    outline: none;
}

.tb-ev-input-box {
    width: 58px;
    background: rgba(26, 38, 70, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 4px;
    color: #fff;
    font-size: 0.82rem;
    text-align: center;
    outline: none;
    transition: all 0.2s ease;
}

.tb-ev-input-box:focus {
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.tb-stat-ed-iv {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-iv-input-box {
    width: 48px;
    background: rgba(26, 38, 70, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 4px;
    color: #fff;
    font-size: 0.82rem;
    text-align: center;
    outline: none;
    transition: all 0.2s ease;
}

.tb-iv-input-box:focus {
    border-color: #34d399;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.35);
}

.tb-iv-max-btn {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.tb-iv-max-btn.max-31 {
    background: #10b981;
    border-color: #34d399;
    color: #fff;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.tb-iv-max-btn.min-0 {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
    color: #ff6b81;
}

.tb-iv-max-btn.custom-val {
    background: rgba(26, 38, 70, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffd32a;
}

/* Item Picker Row */
.tb-item-pick-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-item-pick-row:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    transform: translateY(-1px);
}

.tb-item-pick-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.tb-item-pick-info {
    flex: 1;
    min-width: 0;
}

.tb-item-pick-name {
    font-size: 0.82rem;
    color: #fff;
    margin-bottom: 2px;
}

.tb-item-pick-eng {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 6px;
}

.tb-item-pick-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
}

.tb-badge-bp {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    color: #ff6b81;
}

.tb-badge-acc {
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    color: #81ecec;
}




/* ==========================================================================
   ITEM PICKER & MOVE PICKER GRID STYLES
   ========================================================================== */
.tb-item-modal-list {
    flex: 1;
    overflow-y: auto;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 12px !important;
    padding: 6px 4px 16px !important;
}

.tb-move-modal-list {
    flex: 1;
    overflow-y: auto;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 10px !important;
    padding: 6px 4px 16px !important;
}

.tb-item-pick-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.tb-item-pick-row:hover {
    border-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.12) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25) !important;
}

.tb-item-pick-icon {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 4px !important;
}

.tb-item-pick-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.tb-item-pick-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.88rem !important;
    color: #fff !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.tb-item-pick-eng {
    font-size: 0.7rem !important;
    color: #f59e0b !important;
    font-weight: normal !important;
}

.tb-item-pick-desc {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.4 !important;
}

.tb-move-pick-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.tb-move-pick-item:hover {
    border-color: #e94560 !important;
    background: rgba(233, 69, 96, 0.12) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.25) !important;
}



/* Nature Button in Slot Card - Compact Auto-Fitting */
.tb-nature-btn {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.tb-nature-btn:hover {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.12) !important;
}

.tb-nature-btn-name {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 0.72rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

.tb-nature-btn-icon {
    color: #00cec9 !important;
    font-size: 0.82rem !important;
    flex-shrink: 0 !important;
}


.db-nature-matrix-cell.active-selected-nature {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.25) !important;
    box-shadow: 0 0 16px rgba(0, 206, 201, 0.5) !important;
    position: relative;
}

.tb-nat-sel-check {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #00cec9;
    font-size: 0.7rem;
}

.tb-item-slot-icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }


/* ==========================================================================
   CUSTOM TERA & ABILITY SELECT BUTTONS & MODALS
   ========================================================================== */
.tb-custom-select-btn {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

.tb-custom-select-btn:hover {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

.tb-custom-select-val {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 0.76rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tb-select-chevron {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
}

.tb-tera-tag-base {
    color: #00cec9 !important;
    font-size: 0.76rem !important;
}

.tb-tera-tag-stellar {
    color: #ffd32a !important;
    font-size: 0.76rem !important;
}

/* Tera Modal Grid */
.tb-tera-special-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.tb-tera-special-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.tb-tera-special-card b {
    font-size: 0.85rem !important;
    color: #fff !important;
    display: block !important;
}

.tb-tera-special-card small {
    font-size: 0.65rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.tb-tera-special-card:hover {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.12) !important;
    transform: translateY(-2px) !important;
}

.tb-tera-special-card.active-tera {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.22) !important;
    box-shadow: 0 0 16px rgba(0, 206, 201, 0.4) !important;
}

.tb-tera-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 8px !important;
}

.tb-tera-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.tb-tera-card-badge {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.tb-type-icon-mini {
    width: 14px !important;
    height: 14px !important;
    object-fit: contain !important;
}

.tb-tera-card-name {
    font-size: 0.75rem !important;
    color: #fff !important;
}

.tb-tera-card:hover {
    border-color: var(--tera-color, #10b981) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.tb-tera-card.active-tera {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.2) !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

.tb-tera-check {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    color: #10b981 !important;
    font-size: 0.65rem !important;
}

/* Ability Modal List */
.tb-ability-list-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.tb-ability-pick-card {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.tb-ability-pick-card:hover {
    border-color: #ffd32a !important;
    background: rgba(255, 211, 42, 0.08) !important;
    transform: translateY(-2px) !important;
}

.tb-ability-pick-card.active-ability {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.18) !important;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.35) !important;
}

.tb-ability-pick-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
    gap: 10px !important;
}

.tb-ability-names b {
    font-size: 0.88rem !important;
    color: #fff !important;
}

.tb-ability-eng {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-left: 6px !important;
}

.tb-ab-pill {
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
}

.tb-ab-pill.regular {
    background: rgba(52, 152, 219, 0.2) !important;
    border: 1px solid rgba(52, 152, 219, 0.4) !important;
    color: #74b9ff !important;
}

.tb-ab-pill.hidden {
    background: rgba(255, 211, 42, 0.2) !important;
    border: 1px solid rgba(255, 211, 42, 0.4) !important;
    color: #ffd32a !important;
}

.tb-ability-desc {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.35 !important;
}

.tb-ab-check {
    color: #10b981 !important;
    font-size: 0.85rem !important;
    margin-left: 6px !important;
}


/* ==========================================================================
   SLEEK LEVEL CONTROL PILL
   ========================================================================== */
.tb-level-control {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(0, 206, 201, 0.35) !important;
    border-radius: 8px !important;
    padding: 3px 8px !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.tb-level-control:hover, .tb-level-control:focus-within {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.1) !important;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3) !important;
}

.tb-lvl-tag {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    color: #00cec9 !important;
    font-weight: bold !important;
    user-select: none !important;
}

.tb-lvl-input {
    width: 36px !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem !important;
    font-weight: bold !important;
    text-align: center !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
}

.tb-lvl-input::-webkit-outer-spin-button,
.tb-lvl-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}


/* ==========================================================================
   DYNAMAX LEVEL SETTING (GIGANTAMAX POKEMON)
   ========================================================================== */
.tb-dmax-field-row {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.tb-dmax-control {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 71, 87, 0.08) !important;
    border: 1px solid rgba(255, 71, 87, 0.3) !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.tb-dmax-control:hover {
    border-color: #ff4757 !important;
    background: rgba(255, 71, 87, 0.14) !important;
    box-shadow: 0 0 12px rgba(255, 71, 87, 0.25) !important;
}

.tb-dmax-badge {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #ff4757 !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
}

.tb-dmax-slider {
    flex: 1 !important;
    min-width: 50px !important;
    height: 6px !important;
    accent-color: #ff4757 !important;
    cursor: pointer !important;
}

.tb-dmax-val {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.tb-dmax-val small {
    color: #ff6b81 !important;
    font-size: 0.65rem !important;
    margin-left: 2px !important;
}


/* ==========================================================================
   CLEAN TERA MODAL & PILL STYLES
   ========================================================================== */
.tb-type-icon-clean {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}

.tb-type-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.74rem !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.tb-tera-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 10px !important;
    padding: 4px 2px !important;
}

.tb-tera-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.tb-tera-card:hover {
    border-color: var(--tera-color, #00cec9) !important;
    background: rgba(0, 206, 201, 0.1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

.tb-tera-card.active-tera {
    border-color: var(--tera-color, #00cec9) !important;
    background: rgba(0, 206, 201, 0.2) !important;
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.4) !important;
}

.tb-tera-card-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tb-tera-check {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    color: #00cec9 !important;
    font-size: 0.7rem !important;
}


/* Clean Tera Display Item inside button (No colored pill) */
.tb-tera-display-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.76rem !important;
}

.tb-type-icon-clean {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}


/* ==========================================================================
   TOP BAR TOGGLES & G-MAX BUTTON
   ========================================================================== */
.tb-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    margin-bottom: 18px !important;
}

.tb-toggles-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.tb-mechanic-toggle {
    cursor: pointer !important;
    user-select: none !important;
    margin: 0 !important;
}

.tb-mechanic-toggle input {
    display: none !important;
}

.tb-toggle-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem !important;
    transition: all 0.2s ease !important;
}

.tb-mechanic-toggle input:checked + .tb-toggle-pill {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.18) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
}

.tb-slot-badges {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.tb-gmax-btn {
    background: rgba(255, 71, 87, 0.12) !important;
    border: 1px solid rgba(255, 71, 87, 0.35) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.tb-gmax-btn:hover {
    border-color: #ff4757 !important;
    color: #fff !important;
    background: rgba(255, 71, 87, 0.25) !important;
}

.tb-gmax-btn.active {
    background: #ff4757 !important;
    border-color: #ff4757 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.6) !important;
}


/* Mega Evolution Toggle Button */
.tb-mega-btn {
    background: rgba(233, 69, 96, 0.12) !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.tb-mega-btn:hover {
    border-color: #e94560 !important;
    color: #fff !important;
    background: rgba(233, 69, 96, 0.25) !important;
}

.tb-mega-btn.active {
    background: linear-gradient(135deg, #e94560, #ff007f) !important;
    border-color: #ff007f !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.6) !important;
}


/* ==========================================================================
   TEAMBUILDER MOVE PICKER MODAL GRID & CARDS
   ========================================================================== */
.tb-move-grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 14px !important;
    align-content: start !important;
}

.tb-move-grid-container .db-move-card {
    min-height: 140px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}


/* Dynamax In-Battle HP Badge in Slot Stat Chip */
.tb-stat-dmax-hp {
    color: #ff007f !important;
    font-size: 0.52rem !important;
    font-weight: bold !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
    text-shadow: 0 0 6px rgba(255, 0, 127, 0.6) !important;
    margin-top: 1px !important;
}


/* Dedicated Transformation Buttons Row (Above Item) */
.tb-transform-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important;
    flex-wrap: wrap !important;
}

.tb-transform-row .tb-mega-btn,
.tb-transform-row .tb-gmax-btn {
    padding: 5px 12px !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
}


/* Description block inside Move Picker Cards */
.db-move-card-desc {
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.12) !important;
    font-size: 0.74rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.4 !important;
    font-family: 'Minecraft', monospace !important;
    word-break: break-word !important;
}


/* Synergy Table Type Icon */
.tb-syn-type-icon {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
    vertical-align: middle !important;
}


/* ==========================================================================
   TRAINER ACADEMY / BEGINNER GUIDE MODAL STYLING
   ========================================================================== */
.db-header-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex-shrink: 0;
    margin-right: 4px;
}

.db-header-actions-row {
    display: flex;
    gap: 8px;
}

.db-beginner-guide-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 12px;
    border: 1px solid rgba(241, 196, 15, 0.5);
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.2), rgba(233, 69, 96, 0.25));
    color: #f1c40f;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(241, 196, 15, 0.15);
}

.db-beginner-guide-btn i {
    color: #f1c40f;
    font-size: 0.85rem;
}

.db-beginner-guide-btn:hover {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.35), rgba(233, 69, 96, 0.4));
    border-color: #f1c40f;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(241, 196, 15, 0.35);
    transform: translateY(-2px);
}

/* Academy Modal */
.db-guide-modal-content {
    background: #0f1424;
    border: 1px solid rgba(241, 196, 15, 0.4);
    border-radius: 20px;
    width: 100%;
    max-width: 860px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(241, 196, 15, 0.2);
    overflow: hidden;
    animation: modalPop 0.25s ease;
}

.db-guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: rgba(241, 196, 15, 0.08);
    border-bottom: 1px solid rgba(241, 196, 15, 0.2);
}

.db-guide-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.db-guide-header-title h3 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    color: #f1c40f;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}


/* Guide Ranks Bar & Pills */
.db-guide-ranks-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: thin;
}

.db-guide-rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.db-guide-rank-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-1px);
}

.db-guide-rank-pill.active {
    font-weight: bold;
}

.db-guide-stepper-wrap {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    display: flex;
    gap: 8px;
    scrollbar-width: thin;
}

.db-guide-step-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.db-guide-step-chip:hover {
    background: rgba(241, 196, 15, 0.15);
    color: #ffffff;
    border-color: rgba(241, 196, 15, 0.4);
}

.db-guide-step-chip.active {
    background: linear-gradient(135deg, #f1c40f, #e67e22);
    color: #0f1424;
    border-color: #f1c40f;
    box-shadow: 0 2px 10px rgba(241, 196, 15, 0.4);
}

.db-guide-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    color: #dfe6e9;
    font-size: 0.88rem;
    line-height: 1.6;
}

.db-guide-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.db-guide-card-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #55efc4;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-guide-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.db-guide-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00b894, #00cec9);
    border: none;
    color: #0f1424;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 206, 201, 0.3);
}

.db-guide-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.45);
}

.db-guide-prev-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-guide-prev-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}


/* Z-Move Teambuilder Styles */
.tb-move-item.is-z-boosted {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.12), rgba(15, 23, 42, 0.8));
    border-color: rgba(0, 206, 201, 0.45);
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.15);
}

.tb-move-item.is-z-boosted:hover {
    border-color: #00cec9;
    box-shadow: 0 0 15px rgba(0, 206, 201, 0.35);
}

.tb-move-z-tag {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.25), rgba(108, 92, 231, 0.25));
    border: 1px solid rgba(0, 206, 201, 0.6);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    color: #00cec9;
    white-space: nowrap;
}

.tb-move-z-tag.signature {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.3), rgba(233, 69, 96, 0.3));
    border-color: #f1c40f;
    color: #f1c40f;
}

.db-move-z-box {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.15), rgba(108, 92, 231, 0.15));
    border: 1px solid rgba(0, 206, 201, 0.45);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 6px;
    font-size: 0.72rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: inset 0 0 12px rgba(0, 206, 201, 0.1);
}

.db-move-z-box.signature {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.2), rgba(233, 69, 96, 0.2));
    border-color: rgba(241, 196, 15, 0.6);
    box-shadow: inset 0 0 12px rgba(241, 196, 15, 0.15);
}


/* Rich Competitive Breakdown Panel */
.tb-stats-insight-section {
    margin-top: 16px;
    background: linear-gradient(145deg, rgba(10, 15, 30, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.tb-stats-insight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.tb-stats-insight-header h4 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.tb-insight-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-insight-tab-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-insight-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.tb-insight-tab-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    font-weight: bold;
}

.tb-insight-tab-content {
    display: none;
    animation: fadeInTab 0.25s ease-out;
}

.tb-insight-tab-content.active {
    display: block;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Overview Banner */
.tb-insight-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.tb-insight-stat-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-insight-stat-card-title {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tb-insight-stat-card-val {
    font-size: 1.1rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    color: #fff;
}

.tb-insight-stat-card-desc {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Speed Ladder */
.tb-speed-ladder-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-speed-tier-row {
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid #f39c12;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-speed-tier-row.faster {
    border-left-color: #2ecc71;
}

.tb-speed-tier-row.tied {
    border-left-color: #ffd32a;
}

.tb-speed-tier-row.slower {
    border-left-color: #e74c3c;
}

.tb-speed-tier-row.tr-first {
    border-left-color: #9b59b6;
    background: rgba(155, 89, 182, 0.1);
}

/* Health / Survival Bar */
.tb-survival-bar-wrap {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.tb-survival-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.tb-survival-bar-fill.safe {
    background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.tb-survival-bar-fill.danger {
    background: linear-gradient(90deg, #f39c12, #e67e22);
}

.tb-survival-bar-fill.ohko {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.tb-threat-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s ease;
}

.tb-threat-card:hover {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.2);
}

.tb-threat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #fff;
}

.tb-threat-attacker {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-threat-move {
    color: #74b9ff;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.tb-threat-dmg-badge {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
}

.tb-threat-dmg-badge.safe { color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.4); }
.tb-threat-dmg-badge.danger { color: #f39c12; border: 1px solid rgba(243, 156, 18, 0.4); }
.tb-threat-dmg-badge.ohko { color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.4); }

.tb-threat-sub {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
}


/* Z-Move Button in Transform Row */
.tb-zmove-btn {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    border-radius: 6px;
    padding: 4px 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-zmove-btn:hover {
    background: rgba(0, 206, 201, 0.3);
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.4);
    transform: translateY(-1px);
}

.tb-zmove-btn.active {
    background: linear-gradient(135deg, #00cec9, #0984e3);
    border-color: #00cec9;
    color: #fff;
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.6);
}

.tb-move-item.z-transformed {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.22), rgba(108, 92, 231, 0.25)) !important;
    border-color: #00cec9 !important;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.35);
    animation: zPulse 2s infinite alternate;
}

.tb-move-item.z-transformed.signature {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.28), rgba(233, 69, 96, 0.28)) !important;
    border-color: #f1c40f !important;
    box-shadow: 0 0 14px rgba(241, 196, 15, 0.45);
}

@keyframes zPulse {
    0% { box-shadow: 0 0 8px rgba(0, 206, 201, 0.25); }
    100% { box-shadow: 0 0 16px rgba(0, 206, 201, 0.55); }
}

.tb-z-power-pill {
    background: linear-gradient(135deg, #ffd32a, #f39c12);
    color: #000;
    font-weight: bold;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    margin-left: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}


/* Format Selector Row */
.tb-insight-format-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-insight-format-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #10b981;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tb-format-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

.tb-format-pill {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-format-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.tb-format-pill.active {
    background: linear-gradient(135deg, #10b981, #0984e3);
    border-color: #10b981;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* Speed Badges Grid & Chips */
.tb-speed-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.tb-speed-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid var(--tier-color, #2ecc71);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 0.72rem;
    color: #fff;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.tb-speed-badge-pill:hover {
    transform: translateY(-2px);
    border-color: var(--tier-color, #2ecc71);
    background: rgba(25, 35, 60, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.tb-speed-badge-name {
    font-weight: 500;
}

.tb-speed-badge-spec {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.tb-speed-badge-val {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.68rem;
    color: var(--tier-color, #2ecc71);
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}


/* Top Bar Clean 2-Row Styling */
.tb-top-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    padding: 14px 18px !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}

.tb-top-row-main {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.tb-top-row-gimmicks {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 10px !important;
}

.tb-gimmicks-header-label {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.tb-team-name-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-width: 260px !important;
    max-width: 520px !important;
}

.tb-team-select {
    background: rgba(26, 26, 46, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    color: #fff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.82rem !important;
    outline: none !important;
    cursor: pointer !important;
    max-width: 200px !important;
}


/* Full Database Comparison Styles */
.tb-db-compare-box {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tb-db-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.tb-db-search-input {
    flex: 1;
    min-width: 240px;
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 8px;
    padding: 8px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    outline: none;
}

.tb-db-search-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.tb-db-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tb-db-filter-chip {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-db-filter-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tb-db-filter-chip.active {
    background: #10b981;
    border-color: #10b981;
    color: #000;
    font-weight: bold;
}

.tb-db-rank-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(52, 152, 219, 0.12));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
}

.tb-db-rank-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb-db-rank-title {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
}

.tb-db-rank-value {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: bold;
    color: #10b981;
}

.tb-db-compare-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
    gap: 10px;
    transition: all 0.2s ease;
}

.tb-db-compare-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(20, 30, 55, 0.95);
}

.tb-db-compare-card-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-db-compare-card-avatar {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.tb-db-compare-card-names {
    display: flex;
    flex-direction: column;
}

.tb-db-compare-card-ru {
    font-weight: 500;
    font-size: 0.78rem;
    color: #fff;
}

.tb-db-compare-card-en {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-db-compare-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    white-space: nowrap;
}

.tb-db-compare-badge.faster {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.tb-db-compare-badge.slower {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}

.tb-db-compare-badge.tied {
    background: rgba(241, 196, 15, 0.15);
    border: 1px solid rgba(241, 196, 15, 0.4);
    color: #ffd32a;
}


/* Team Generator Modal & Button Styles */
.tb-btn.generator-highlight-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25)) !important;
    border: 1px solid #10b981 !important;
    color: #10b981 !important;
    font-weight: bold !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.25s ease !important;
}

.tb-btn.generator-highlight-btn:hover {
    background: linear-gradient(135deg, #10b981, #0984e3) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.6) !important;
    transform: translateY(-1px) !important;
}

.tb-gen-modal-content {
    max-width: 950px;
    width: 95vw;
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(145deg, #0d1322, #151f32);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.tb-gen-section-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #10b981;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.tb-gen-format-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-gen-format-card:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(20, 30, 55, 0.9);
    transform: translateY(-2px);
}

.tb-gen-format-card.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
}

.tb-gen-format-card-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-format-card-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.35;
}

.tb-gen-archetype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.tb-gen-arch-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-gen-arch-card:hover {
    background: rgba(25, 35, 60, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
}

.tb-gen-arch-card.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.tb-gen-arch-card.active span {
    color: #fff !important;
}

.tb-gen-preview-box {
    background: rgba(10, 15, 30, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
}

.tb-gen-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.tb-gen-preview-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.tb-gen-preview-avatar {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.tb-gen-preview-name {
    font-size: 0.72rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.tb-gen-preview-item {
    font-size: 0.62rem;
    color: #f59e0b;
    font-family: 'Minecraft', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.tb-gen-preview-role {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-auto-build-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(52, 152, 219, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 6px;
    color: #10b981;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 5px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.tb-auto-build-btn:hover {
    background: linear-gradient(135deg, #10b981, #0984e3);
    color: #fff;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}


/* Offense & Defense Full DB Card Styles */
.tb-ko-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    white-space: nowrap;
}

.tb-ko-badge.ohko {
    background: rgba(241, 196, 15, 0.18);
    border: 1px solid rgba(241, 196, 15, 0.5);
    color: #ffd32a;
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.2);
}

.tb-ko-badge.twohko {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.tb-ko-badge.survives {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}


/* Flexible Team Generator Layout */
.tb-gen-options-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.tb-gen-options-col {
    flex: 1;
    min-width: 280px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
}

.tb-gen-gimmick-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.tb-gen-gimmick-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 7px 12px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.tb-gen-gimmick-chip:hover {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.tb-gen-gimmick-chip.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.tb-gen-quick-presets {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.tb-gen-preset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tb-gen-preset-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}


/* Individual Pokemon Build Generator Styles */
.tb-single-gen-modal-content {
    max-width: 780px;
    width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(145deg, #0d1322, #151f32);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
}

.tb-role-pills-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 16px;
}

.tb-role-pill {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-role-pill:hover {
    border-color: rgba(16, 185, 129, 0.5);
    color: #fff;
    background: rgba(20, 30, 55, 0.9);
}

.tb-role-pill.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.tb-build-details-card {
    background: rgba(10, 15, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tb-build-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.tb-build-field-box {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-build-field-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.tb-build-field-val {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: #fff;
}

.tb-build-moves-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.tb-build-move-chip {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #74b9ff;
    display: flex;
    align-items: center;
    gap: 6px;
}



/* Database Stat Filters Enhanced Styles */
.db-stat-filters-container {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.db-stat-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.db-stat-subhint {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Minecraft', monospace;
}

.db-stat-reset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 4px 10px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-stat-reset-btn:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
    color: #ff6b81;
}

.db-stat-sliders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.db-stat-filter-item {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.db-stat-filter-item:hover {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(20, 30, 55, 0.9);
}

.db-stat-filter-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
}

.db-stat-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.db-stat-name.hp { color: #ff5e57; }
.db-stat-name.atk { color: #ff9f43; }
.db-stat-name.def { color: #feca57; }
.db-stat-name.spa { color: #54a0ff; }
.db-stat-name.spd { color: #a29bfe; }
.db-stat-name.spe { color: #1dd1a1; }
.db-stat-name.bst { color: #ffd32a; }

.db-stat-range-val {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.35);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.db-stat-inputs-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-stat-num-input {
    flex: 1;
    min-width: 45px;
    background: rgba(10, 15, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 5px 6px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
    text-align: center;
    transition: all 0.2s ease;
}

.db-stat-num-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
    background: rgba(15, 25, 45, 1);
}

.db-stat-dash {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.db-stat-sort-toggles {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.db-stat-sort-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    width: 26px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-stat-sort-btn:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    color: #fff;
}

.db-stat-sort-btn.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: #fff;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* ==========================================================================
   COMMUNITY WALL (ОБЩАЯ СТЕНА КОМАНД) STYLES
   ========================================================================== */
.tb-wall-modal-content {
    max-width: 960px;
    width: 96vw;
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(155deg, #090e1a 0%, #121b2d 100%);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 206, 201, 0.15);
}

.tb-wall-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tb-wall-filters-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
}

.tb-wall-search-input {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    min-width: 240px;
    outline: none;
    transition: all 0.2s ease;
}

.tb-wall-search-input:focus {
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.tb-wall-feed-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.tb-wall-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.tb-wall-card:hover {
    border-color: rgba(0, 206, 201, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.tb-wall-card-author-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-wall-author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-wall-author-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0, 206, 201, 0.5);
    background: #0a0a1a;
}

.tb-wall-author-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.88rem;
    font-weight: bold;
    color: #fff;
}

.tb-wall-date {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
}

.tb-wall-team-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tb-wall-team-name {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #00cec9;
    font-weight: bold;
}

.tb-wall-format-badge {
    background: linear-gradient(135deg, #0984e3, #6c5ce7);
    border-radius: 6px;
    padding: 3px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #fff;
    font-weight: bold;
}

.tb-wall-team-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
    background: rgba(10, 15, 30, 0.6);
    border-radius: 8px;
    padding: 8px 12px;
    border-left: 3px solid #00cec9;
}

.tb-wall-pokemon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.tb-wall-pokemon-chip {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.tb-wall-pokemon-chip img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

.tb-wall-pokemon-chip-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tb-wall-pokemon-chip-item {
    font-size: 0.62rem;
    color: #f59e0b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tb-wall-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-wall-like-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 14px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-wall-like-btn:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
    color: #ff6b81;
}

.tb-wall-like-btn.liked {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-color: #e74c3c;
    color: #fff;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.4);
}

.tb-wall-import-btn {
    background: linear-gradient(135deg, #10b981, #0984e3);
    border: none;
    border-radius: 8px;
    padding: 7px 18px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.tb-wall-import-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
}

/* Publish Modal Styling */
.tb-publish-modal-content {
    max-width: 580px;
    width: 95vw;
    background: linear-gradient(145deg, #0d1322, #151f32);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
}


/* Move Slot Type Icon */
.tb-move-type-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
    margin-right: 2px;
}



/* Pills & Selection Controls */
.tb-gen-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.tb-gen-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-pill.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

/* Archetypes Grid */
.tb-gen-arch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
}

.tb-gen-arch-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-arch-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.tb-gen-arch-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(0, 206, 201, 0.2));
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(9, 132, 227, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 6 Pokemon Cards Grid */
.tb-gen-squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
}

.tb-gen-poke-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tb-gen-poke-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.tb-gen-poke-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.tb-gen-poke-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.tb-gen-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.92rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-poke-role {
    display: inline-block;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 3px;
}

.tb-gen-poke-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tb-gen-poke-moves-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-gen-move-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 4px 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* Pills & Selection Controls */
.tb-gen-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tb-gen-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-pill.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

/* Archetypes Flexible Row (No Truncation) */
.tb-gen-arch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-gen-arch-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tb-gen-arch-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.tb-gen-arch-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(0, 206, 201, 0.2));
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(9, 132, 227, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 6 Pokemon Cards Grid */
.tb-gen-squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
}

.tb-gen-poke-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tb-gen-poke-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.tb-gen-poke-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.tb-gen-poke-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.tb-gen-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-poke-role {
    display: inline-block;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 3px;
}

.tb-gen-poke-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-gen-detail-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-poke-moves-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-gen-move-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 5px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================================
   PROCEDURAL COMPETITIVE TEAM GENERATOR STYLES (CLEAN, NO EMOJIS, SCROLLABLE)
   ========================================================================== */
.tb-gen-modal-content {
    max-width: 1080px;
    width: 95vw;
    height: 90vh;
    max-height: 90vh;
    background: linear-gradient(155deg, #090e1a 0%, #111a2e 50%, #0d1527 100%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9), 0 0 50px rgba(16, 185, 129, 0.12);
    overflow: hidden;
    color: #fff;
    box-sizing: border-box;
}

.tb-gen-modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(9, 14, 26, 0.85);
    flex-shrink: 0;
}

#tbTeamGenModalBody, .tb-gen-modal-body {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

#tbTeamGenModalBody::-webkit-scrollbar {
    width: 7px;
}
#tbTeamGenModalBody::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}
#tbTeamGenModalBody::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.45);
    border-radius: 4px;
}
#tbTeamGenModalBody::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7);
}

.tb-gen-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(9, 14, 26, 0.95);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 10px;
}

/* Pills & Selection Controls */
.tb-gen-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tb-gen-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-pill.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.tb-gen-preset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-gen-preset-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #fff;
}

/* Archetypes Flexible Row (No Truncation) */
.tb-gen-arch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-gen-arch-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tb-gen-arch-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.tb-gen-arch-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(0, 206, 201, 0.2));
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(9, 132, 227, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 6 Pokemon Cards Grid */
.tb-gen-squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
    padding-bottom: 8px;
}

.tb-gen-poke-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tb-gen-poke-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.tb-gen-poke-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.tb-gen-poke-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.tb-gen-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-poke-role {
    display: inline-block;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 3px;
}

.tb-gen-poke-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-gen-detail-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-poke-moves-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-gen-move-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 5px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================================
   SITE MODE SWITCHER FULL WIDTH DISTRIBUTION
   ========================================================================== */
.mode-switcher-header {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 8px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
}

.mode-switcher-header .site-mode-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

.mode-switcher-header .site-mode-btn span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 768px) {
    .mode-switcher-header {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    .mode-switcher-header .site-mode-btn {
        width: 100% !important;
        flex: none !important;
        padding: 10px 12px !important;
    }
}


/* Gimmick Toggles in Procedural Generator */
.tb-gen-gimmick-toggle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-gimmick-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-gimmick-toggle.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}


/* ==========================================================================
   DATABASE STAT FILTERS STYLING (MINIMALIST, UNDER TYPE FILTERS, MINECRAFT FONT)
   ========================================================================== */
.db-stat-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.db-stat-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 22px;
}

.db-stat-sliders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: 4px;
}

.db-stat-filter-item {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 2px 5px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    height: 26px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: all 0.15s ease;
}

.db-stat-filter-item:hover {
    background: rgba(26, 38, 70, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.db-stat-filter-item.has-filter {
    border-color: rgba(16, 185, 129, 0.6) !important;
    background: rgba(16, 185, 129, 0.12) !important;
}

.db-stat-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 0;
}

.db-stat-name i {
    font-size: 0.58rem;
}

.db-stat-name.hp { color: #ef4444; }
.db-stat-name.atk { color: #f97316; }
.db-stat-name.def { color: #eab308; }
.db-stat-name.spa { color: #38bdf8; }
.db-stat-name.spd { color: #a78bfa; }
.db-stat-name.spe { color: #10b981; }
.db-stat-name.bst { color: #fbbf24; }

.db-stat-inputs-row {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.db-stat-num-input {
    width: 32px !important;
    min-width: 0 !important;
    height: 20px !important;
    background: rgba(10, 15, 30, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 1px 2px !important;
    text-align: center !important;
    outline: none !important;
    transition: all 0.15s ease;
    box-sizing: border-box !important;
}

.db-stat-num-input:focus {
    border-color: #10b981 !important;
    background: rgba(15, 23, 42, 1) !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4) !important;
}

.db-stat-num-input::-webkit-outer-spin-button,
.db-stat-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.db-stat-num-input {
    -moz-appearance: textfield;
}

.db-stat-dash {
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.65rem;
    line-height: 1;
}

.db-stat-sort-toggles {
    display: flex;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.db-stat-sort-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 0 4px !important;
    height: 20px !important;
    line-height: 18px !important;
    cursor: pointer;
    transition: all 0.15s ease;
}

.db-stat-sort-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.db-stat-sort-btn.active {
    background: #10b981 !important;
    border-color: #34d399 !important;
    color: #fff !important;
    font-weight: bold;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.db-stat-reset-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 2px 8px;
    height: 22px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.db-stat-reset-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fff;
}

/* Category Filter Compact & 'More...' Drawer Styles */
.db-cat-more-btn {
    background: rgba(15, 52, 96, 0.25);
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    padding: 5px 10px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    white-space: nowrap;
    vertical-align: middle;
}

.db-cat-more-btn i {
    font-size: 0.52rem;
    opacity: 0.75;
    transition: transform 0.2s ease;
}

.db-cat-more-btn:hover {
    background: rgba(15, 52, 96, 0.45);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.db-cat-more-btn.is-open {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #34d399;
}

.db-cat-more-btn.has-active-child {
    background: rgba(16, 185, 129, 0.22);
    border: 1px solid #10b981;
    color: #34d399;
}

.db-cat-more-badge {
    background: #10b981;
    color: #052e16;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.52rem;
    border-radius: 8px;
    padding: 1px 4px;
    line-height: 1;
}

.db-cat-extra-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    padding: 6px 8px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    animation: fadeInCatExtra 0.18s ease-out;
}

@keyframes fadeInCatExtra {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Button in dbShowDetail to open full profile */
.db-detail-open-profile-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(9, 132, 227, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10b981;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.db-detail-open-profile-btn:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(9, 132, 227, 0.35));
    border-color: #34d399;
    color: #fff;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}


/* Move Slot Icons & Dual Name Styling */
.tb-slot-move-type-icon {
    width: 15px;
    height: 15px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 4px;
    vertical-align: middle;
}

.tb-move-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-move-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
}

.tb-move-en-sub {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.65rem;
    font-weight: normal;
    margin-left: 2px;
}


/* ==========================================================================
   BUILD ANALYSIS & SURVIVAL BENCHMARKS MODAL STYLES
   ========================================================================== */
.tb-build-analysis-container {
    margin-top: 18px;
    padding: 14px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.tb-build-analysis-header h4 {
    margin: 0 0 12px 0;
    color: #10b981;
    font-size: 0.95rem;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

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

.tb-analysis-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
}

.tb-analysis-card-title {
    font-weight: bold;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tb-bulk-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    margin-bottom: 6px;
}

.tb-bulk-label {
    color: rgba(255, 255, 255, 0.7);
}

.tb-bulk-val {
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.75rem;
}

.tb-bulk-val.badge-high {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.tb-bulk-val.badge-good {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.tb-bulk-val.badge-mid {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.tb-bulk-val.badge-low {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.tb-surv-meta-header {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 10px 0 6px 0;
    text-transform: uppercase;
}

.tb-surv-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.8);
}

.tb-surv-tag {
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tb-surv-tag.pass {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.tb-surv-tag.mid {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.tb-surv-tag.fail {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.tb-speed-tier-badge {
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.3);
    color: #38bdf8;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.tb-speed-benchmark-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
}

.tb-pros-cons-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tb-pros-list, .tb-cons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-pro-item {
    font-size: 0.72rem;
    color: #34d399;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-con-item {
    font-size: 0.72rem;
    color: #fb7185;
    display: flex;
    align-items: center;
    gap: 6px;
}


/* Slot Card Quick Bulk Summary */
.tb-slot-bulk-quick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    flex-wrap: wrap;
}

.tb-bulk-quick-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tb-bulk-quick-tag b {
    color: #10b981;
}

.tb-stats-modal-expanded {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(16, 185, 129, 0.3);
}


/* Z-Move Slot Badge Styles */
.tb-slot-zmove-badge {
    margin: 6px 0;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 211, 42, 0.1);
    border: 1px solid rgba(255, 211, 42, 0.3);
    color: #ffd32a;
    transition: all 0.2s ease;
}

.tb-slot-zmove-badge.ready {
    background: linear-gradient(135deg, rgba(255, 211, 42, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    border: 1px solid rgba(255, 211, 42, 0.45);
    box-shadow: 0 0 10px rgba(255, 211, 42, 0.15);
}

.tb-slot-zmove-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px dashed rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    font-size: 0.68rem;
}

.tb-zmove-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-zmove-title small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
    margin-left: 2px;
}


/* Profile Card Top Bar & Photo Button */
.db-profile-card-top-bar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    margin-bottom: 2px;
}
.db-profile-photo-btn {
    position: static;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
.db-profile-photo-btn:hover {
    background: #6366f1;
    border-color: #818cf8;
    color: #fff;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
}

.db-profile-search-wrap {
    position: relative;
    z-index: 550;
    min-width: 250px;
    max-width: 360px;
}
.db-profile-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    pointer-events: none;
}
.db-profile-search-input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    color: #fff;
    font-size: 0.82rem;
    transition: all 0.2s;
    font-family: inherit;
}
.db-profile-search-input:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
    background: #0f172a;
}
.db-profile-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 440px;
    max-width: min(460px, calc(100vw - 32px));
    background: #141b2d;
    border: 1px solid rgba(16, 185, 129, 0.55);
    border-radius: 12px;
    max-height: 380px;
    overflow-y: auto;
    z-index: 99999 !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 16px rgba(16, 185, 129, 0.25);
}
.db-profile-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
    text-decoration: none;
}
.db-profile-search-item:last-child {
    border-bottom: none;
}
.db-profile-search-item:hover {
    background: rgba(16, 185, 129, 0.22);
}
.db-profile-search-thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}
.db-profile-search-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    gap: 2px;
}
.db-profile-search-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-profile-search-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-profile-search-dex {
    font-size: 0.72rem;
    color: #10b981;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    flex-shrink: 0;
}
.db-profile-search-types {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}
.db-profile-search-type-pill {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.db-profile-search-empty {
    padding: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
}


/* ==========================================================================
   Z-MOVE BUTTON, MODAL & PER-MOVE EFFECTS
   ========================================================================== */
.tb-zmove-btn {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.16), rgba(255, 159, 26, 0.24));
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: #ffd700;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    font-family: inherit;
}
.tb-zmove-btn:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(255, 159, 26, 0.45));
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    transform: translateY(-1px);
}
.tb-zmove-btn.active {
    background: linear-gradient(135deg, #ffd700, #ff9f1a);
    color: #121829;
    border-color: #fff;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.65);
}

.tb-move-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tb-move-main-line {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.tb-move-z-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    padding: 3px 10px;
    margin-left: 20px;
    border-radius: 6px;
    margin-top: 3px;
    transition: all 0.2s;
    cursor: default;
}
.tb-move-z-sub.damage {
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: #ffd700;
}
.tb-move-z-sub.damage:hover {
    background: rgba(255, 215, 0, 0.16);
    border-color: #ffd700;
}
.tb-move-z-sub.status {
    background: rgba(255, 211, 42, 0.08);
    border: 1px solid rgba(255, 211, 42, 0.45);
    color: #ffd32a;
}
.tb-move-z-sub.status:hover {
    background: rgba(255, 211, 42, 0.18);
    border-color: #ffd32a;
}
.tb-move-z-title {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}
.tb-move-z-bp {
    color: #ffd32a;
    font-weight: 700;
    font-family: 'Minecraft', monospace, sans-serif;
    font-size: 0.72rem;
    flex-shrink: 0;
    margin-left: auto;
}
.tb-move-z-bp.status-boost {
    color: #ffd32a;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Z-Crystal Selection Modal */
.tb-zcrystal-modal-content {
    max-width: 800px !important;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.tb-zcrystal-modal-body {
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tb-zcrystal-actions {
    display: flex;
    justify-content: flex-end;
}
.tb-zcrystal-remove-btn {
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all 0.2s;
}
.tb-zcrystal-remove-btn:hover {
    background: rgba(239, 68, 68, 0.35);
    border-color: #ef4444;
    color: #fff;
}
.tb-zcrystal-section-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tb-zcrystal-section-title.signature {
    color: #ffd700;
}
.tb-zcrystal-signature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
.tb-zcrystal-sig-card {
    background: rgba(15, 23, 42, 0.85);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tb-zcrystal-sig-card:hover {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25);
}
.tb-zcrystal-sig-card.active {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 159, 26, 0.25));
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
}
.tb-zcrystal-sig-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tb-zcrystal-sig-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffd700;
    flex: 1;
}
.tb-zcrystal-sig-details {
    font-size: 0.78rem;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.35;
}
.tb-zcrystal-req-move {
    color: #38bdf8;
    font-weight: 600;
}
.tb-zcrystal-zmove-name {
    color: #f59e0b;
    font-weight: 700;
}
.tb-zcrystal-sig-desc {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 2px;
}

.tb-zcrystal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}
.tb-zcrystal-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tb-zcrystal-card:hover {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    transform: translateY(-2px);
}
.tb-zcrystal-card.compatible {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.08);
}
.tb-zcrystal-card.active {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.2);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}
.tb-zcrystal-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tb-zcrystal-type-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.tb-zcrystal-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
}
.tb-zcrystal-card-zmove {
    font-size: 0.72rem;
    color: #ffd700;
    font-weight: 600;
}
.tb-zcrystal-compat-badge {
    position: absolute;
    right: 8px;
    top: 8px;
    font-size: 0.62rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.25);
    color: #10b981;
    font-weight: 700;
}


/* ==========================================================================
   SYNERGY ANALYSIS TOGGLE & COVERAGE STYLES
   ========================================================================== */
.tb-synergy-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.tb-synergy-header-row .tb-synergy-title {
    margin-bottom: 0;
}
.tb-synergy-mode-tabs {
    display: flex;
    gap: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 4px;
}
.tb-syn-mode-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.tb-syn-mode-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.tb-syn-mode-btn.active {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35);
}
.tb-coverage-good {
    color: #10b981;
    font-weight: 700;
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tb-coverage-none {
    color: #f59e0b;
    font-weight: 700;
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tb-eff-badge.eff-super {
    background: #10b981 !important;
    color: #fff !important;
}


.tb-syn-tera-btn {
    margin-top: 5px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}
.tb-syn-tera-btn:hover {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.18);
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.35);
}
.tb-syn-tera-btn.active {
    background: linear-gradient(135deg, #00cec9, #0984e3);
    color: #fff;
    border-color: #fff;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.7);
}

/* ========================================================================== */
/* SYNERGY & WEAKNESS ANALYSIS ENHANCED DASHBOARD */
/* ========================================================================== */
.tb-syn-dash {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tb-syn-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}
.tb-syn-dash-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    font-family: 'Minecraft', monospace;
}
.tb-syn-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.tb-syn-status-badge.status-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.4));
    border: 1px solid #10b981;
    color: #a7f3d0;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}
.tb-syn-status-badge.status-yellow {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.4));
    border: 1px solid #f59e0b;
    color: #fde68a;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}
.tb-syn-status-badge.status-red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(185, 28, 28, 0.5));
    border: 1px solid #ef4444;
    color: #fecaca;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
    animation: synPulseRed 2s infinite ease-in-out;
}
@keyframes synPulseRed {
    0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.7); }
}

.tb-syn-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}
.tb-syn-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.2s, border-color 0.2s;
}
.tb-syn-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}
.tb-syn-card-label {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tb-syn-card-val {
    font-size: 1.15rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.tb-syn-card-sub {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
}

.tb-syn-tip-box {
    background: rgba(0, 206, 201, 0.08);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.73rem;
    color: #e2e8f0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.tb-syn-tip-box i {
    color: #00cec9;
    font-size: 0.95rem;
    margin-top: 2px;
}

.tb-balance-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
    gap: 4px;
    min-width: 60px;
}
.tb-bal-great {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #34d399;
}
.tb-bal-good {
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid #00cec9;
    color: #55efc4;
}
.tb-bal-neutral {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid #64748b;
    color: #cbd5e1;
}
.tb-bal-warn {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #fbbf24;
}
.tb-bal-danger {
    background: rgba(239, 68, 68, 0.25);
    border: 1px solid #ef4444;
    color: #f87171;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.tb-coverage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    gap: 5px;
    min-width: 68px;
}
.tb-cov-opt {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #34d399;
}
.tb-cov-single {
    background: rgba(9, 132, 227, 0.2);
    border: 1px solid #0984e3;
    color: #74b9ff;
}
.tb-cov-zero {
    background: rgba(244, 63, 94, 0.25);
    border: 1px solid #f43f5e;
    color: #fb7185;
}
.tb-cov-meta-alert {
    background: rgba(239, 68, 68, 0.3);
    border: 1px solid #ef4444;
    color: #fff;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
    animation: synPulseRed 2s infinite ease-in-out;
}



.tb-move-z-sub.status {
    background: rgba(255, 211, 42, 0.12);
    border-color: rgba(255, 211, 42, 0.5);
}
.tb-move-z-eff-badge {
    background: rgba(255, 211, 42, 0.25);
    color: #ffd32a;
    border: 1px solid rgba(255, 211, 42, 0.4);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.62rem;
    font-weight: 700;
    margin-left: auto;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.tb-move-z-sub:hover .tb-move-z-eff-badge {
    background: rgba(255, 211, 42, 0.4);
    box-shadow: 0 0 8px rgba(255, 211, 42, 0.6);
}


/* ==========================================================================
   TEAMBUILDER MOVE & Z-MOVE CONTAINED LAYOUT FIX
   ========================================================================== */
.tb-move-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
.tb-move-main-line {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
}
.tb-move-z-sub {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s !important;
    cursor: default !important;
    min-width: 0 !important;
}
.tb-move-z-sub.damage {
    background: rgba(255, 215, 0, 0.08) !important;
    border: 1px solid rgba(255, 215, 0, 0.4) !important;
    color: #ffd700 !important;
}
.tb-move-z-sub.damage:hover {
    background: rgba(255, 215, 0, 0.18) !important;
    border-color: #ffd700 !important;
}
.tb-move-z-sub.status {
    background: rgba(255, 211, 42, 0.08) !important;
    border: 1px solid rgba(255, 211, 42, 0.45) !important;
    color: #ffd32a !important;
}
.tb-move-z-sub.status:hover {
    background: rgba(255, 211, 42, 0.18) !important;
    border-color: #ffd32a !important;
}
.tb-move-z-title {
    color: #fff !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-right: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.tb-move-z-bp {
    color: #ffd32a !important;
    font-weight: 700 !important;
    font-family: 'Minecraft', monospace, sans-serif !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    white-space: nowrap !important;
}
.tb-move-z-bp.status-boost {
    color: #ffd32a !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
}

/* ===== MECHANICS JUMP BUTTONS & BANNERS ===== */
.db-mechanic-jump-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    margin-top: 14px;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.25) 0%, rgba(0, 206, 201, 0.15) 100%);
    border: 1px solid rgba(0, 206, 201, 0.45);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(0, 206, 201, 0.1);
}
.db-mechanic-jump-banner:hover {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.45) 0%, rgba(0, 206, 201, 0.3) 100%);
    border-color: #55efc4;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(85, 239, 196, 0.25);
}
.jump-banner-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.jump-banner-left i {
    font-size: 1.4rem;
    color: #55efc4;
}
.jump-banner-title {
    font-size: 0.92rem;
    font-weight: bold;
    color: #ffffff;
}
.jump-banner-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}
.jump-arrow {
    color: #55efc4;
    font-size: 1rem;
    transition: transform 0.2s ease;
}
.db-mechanic-jump-banner:hover .jump-arrow {
    transform: translateX(4px);
}
.db-mechanic-jump-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.4) 0%, rgba(0, 206, 201, 0.3) 100%);
    border: 1px solid #00cec9;
    border-radius: 10px;
    color: #55efc4;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(0, 206, 201, 0.2);
}
.db-mechanic-jump-btn:hover {
    background: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(85, 239, 196, 0.4);
}
.db-adv-tab-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid rgba(0, 206, 201, 0.5);
    color: #55efc4;
    font-size: 0.72rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-adv-tab-pill:hover {
    background: rgba(0, 206, 201, 0.45);
    border-color: #55efc4;
    color: #ffffff;
    transform: scale(1.05);
}

.db-math-formula-box {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: #55efc4;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(0, 206, 201, 0.5);
    box-shadow: 0 4px 20px rgba(0, 206, 201, 0.15), inset 0 0 15px rgba(0, 206, 201, 0.05);
    padding: 14px 18px;
    border-radius: 10px;
    margin: 12px 0;
    overflow-x: auto;
    line-height: 1.6;
    letter-spacing: 0.3px;
}
.db-section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 206, 201, 0.4), transparent);
    margin: 18px 0;
}

/* ===== TERA RULE CARD & EXCEPTIONS GRID ===== */
.db-tera-rule-card {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.15) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 10px;
}
.db-tera-rule-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: #55efc4;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 206, 201, 0.2);
}
.db-tera-rule-header i {
    font-size: 1.5rem;
    color: #00cec9;
}
.db-tera-exceptions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.db-tera-exception-item {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 10px 14px;
    border-left: 3px solid #ff7675;
}
.db-tera-exception-item.tech {
    border-left-color: #fdcb6e;
}
.db-tera-exception-item .exception-title {
    font-size: 0.82rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-tera-exception-item.bad .exception-title i {
    color: #ff7675;
}
.db-tera-exception-item.tech .exception-title i {
    color: #fdcb6e;
}
.db-tera-exception-item .exception-desc {
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}


.db-card-dl-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    font-size: 0.72rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.db-card-dl-action-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.db-status-cat-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
}

/* --- Status Card Avatar & Meta Chips Fixes --- */
.db-status-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.db-status-meta-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.db-status-chips-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.db-status-chip-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.85) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
}

.db-status-chips-row:has(.fa-shield-alt) .db-status-chip-label i {
    color: #2ecc71;
}

.db-status-chips-row:has(.fa-meteor) .db-status-chip-label i {
    color: #ff7675;
}

.db-status-chips-row:has(.fa-bolt) .db-status-chip-label i {
    color: #f1c40f;
}

.db-status-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.db-field-interactive-item.terrain .db-item-icon-box,
.db-field-interactive-item.field .db-item-icon-box {
    color: #a29bfe;
    background: rgba(162, 155, 254, 0.2);
}
.db-field-interactive-item.type .db-item-icon-box {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.2);
}
.db-field-interactive-item.item .db-item-icon-box {
    color: #0984e3;
    background: rgba(9, 132, 227, 0.2);
}


/* ==========================================================================
   TEAM GENERATOR 2.0 ENHANCED STYLES
   ========================================================================== */
.tb-gen-section-box {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s;
}
.tb-gen-section-box:hover {
    border-color: rgba(255, 255, 255, 0.16);
}
.tb-gen-input-wrap {
    width: 100%;
}
.tb-gen-text-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(10, 15, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
}
.tb-gen-text-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
    background: rgba(10, 18, 36, 0.95);
}
.tb-gen-chip-btn {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #e2e8f0;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    padding: 5px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    transition: all 0.18s ease;
}
.tb-gen-chip-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}
.tb-gen-chip-btn.active {
    background: rgba(245, 158, 11, 0.3) !important;
    border-color: #f59e0b !important;
    color: #fef08a !important;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}
.tb-gen-bring-badge {
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace !important;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
}
.tb-gen-pin-btn {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem;
    padding: 3px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
    transition: all 0.15s ease;
}
.tb-gen-pin-btn:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #fff;
}
.tb-gen-pin-btn.pinned {
    background: rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
    color: #f59e0b;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}
.tb-gen-reroll-btn {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem;
    padding: 3px 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
    transition: all 0.18s ease;
}
.tb-gen-reroll-btn:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    color: #10b981;
}
.tb-gen-bring-badge.core {
    background: rgba(16, 185, 129, 0.22);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #10b981;
}
.tb-gen-bring-badge.bench {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
}
.tb-gen-poke-card.is-core-card {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}


/* ==========================================================================
   ADMIN TRANSLATION & NAME CUSTOMIZATION SYSTEM STYLES
   ========================================================================== */
.admin-inline-pencil-btn {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #e94560;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.admin-inline-pencil-btn:hover {
    background: #e94560;
    color: #fff;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
    transform: scale(1.05);
}

.admin-inline-tag-btn {
    background: rgba(0, 206, 201, 0.15) !important;
    border: 1px dashed rgba(0, 206, 201, 0.6) !important;
    color: #00cec9 !important;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.admin-inline-tag-btn:hover {
    background: #00cec9 !important;
    color: #000 !important;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.6) !important;
    transform: translateY(-1px);
}

.admin-modal-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    background: rgba(0, 206, 201, 0.18);
    border: 1px solid rgba(0, 206, 201, 0.45);
    border-radius: 12px;
    color: #55efc4;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
}
.admin-modal-tag-chip i {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.15s;
}
.admin-modal-tag-chip i:hover {
    color: #ff4757;
}

.admin-modal-preset-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.admin-modal-preset-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
.admin-modal-preset-chip.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.admin-trans-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 7, 15, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999 !important;
}

.admin-trans-modal-content {
    background: #0f1123;
    border: 1px solid rgba(233, 69, 96, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(233, 69, 96, 0.2);
    border-radius: 14px;
    width: 95%;
    max-width: 520px;
    padding: 20px 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: adminTransFadeIn 0.2s ease;
}

@keyframes adminTransFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.admin-trans-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
}

.admin-trans-type-badge {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.5);
    color: #ff6b81;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
}

.admin-trans-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-trans-field-group label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: space-between;
}

.admin-trans-input {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 9px 12px;
    color: #fff;
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
}

.admin-trans-input:focus {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
    background: rgba(15, 23, 42, 0.8);
}

.admin-trans-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
    margin-top: 4px;
}

/* Admin Panel Translations Table */
.admin-trans-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    overflow: hidden;
}

.admin-trans-table th {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.admin-trans-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
}

.admin-trans-table tr:hover td {
    background: rgba(233, 69, 96, 0.05);
}

/* Modal Tabs & Stats Styling */
.admin-trans-tabs-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}

.admin-trans-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-trans-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.admin-trans-tab-btn.active {
    background: rgba(233, 69, 96, 0.2);
    border-color: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

.admin-trans-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-trans-textarea {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 70px;
    line-height: 1.4;
    transition: all 0.2s;
}

.admin-trans-textarea:focus {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
    background: rgba(15, 23, 42, 0.8);
}

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

.admin-trans-stat-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-trans-stat-label {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-weight: bold;
}

.admin-trans-stat-input {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 8px;
    color: #55efc4;
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: bold;
    text-align: center;
    outline: none;
    transition: all 0.2s;
}

.admin-trans-stat-input:focus {
    border-color: #55efc4;
    box-shadow: 0 0 8px rgba(85, 239, 196, 0.35);
}

.admin-trans-total-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(233, 69, 96, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 8px;
    padding: 8px 14px;
    margin-top: 4px;
}

.admin-trans-select {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    font-size: 0.82rem;
    outline: none;
}

/* ========================================================================== */
/* NEWS & UPDATES (CHANGELOG) MODE STYLES */
/* ========================================================================== */
.news-mode-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 14px 40px;
}

.news-header-banner {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.news-header-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 206, 201, 0.12), transparent 70%);
    pointer-events: none;
}

.news-header-main {
    flex: 1;
    min-width: 280px;
}

.news-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.news-header-title {
    font-size: 1.45rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-header-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    line-height: 1.45;
}

.news-header-stats-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.news-stat-pill {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.news-stat-pill i {
    font-size: 1.15rem;
}

.news-stat-val {
    font-size: 0.95rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    color: #fff;
}

.news-stat-lbl {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

/* Controls Bar */
.news-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.news-category-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.news-cat-btn {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.news-cat-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.news-cat-btn.active {
    background: linear-gradient(135deg, #e94560, #c0392b);
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 2px 10px rgba(233, 69, 96, 0.4);
}

.news-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
    flex: 0 1 320px;
}

.news-search-box i.fa-search {
    position: absolute;
    left: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    pointer-events: none;
}

.news-search-box input {
    width: 100%;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 32px 8px 34px;
    color: #fff;
    font-size: 0.78rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.news-search-box input:focus {
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.news-search-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 4px;
}

.news-search-clear:hover {
    color: #fff;
}

/* News Cards */
.news-posts-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.news-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.news-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.news-card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.news-card-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.news-version-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
}

.news-tag-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
}

.news-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
}

.news-date-text {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.news-card-title {
    font-size: 1.12rem;
    color: #fff;
    margin: 0 0 8px 0;
    font-family: 'Minecraft', monospace;
    line-height: 1.4;
}

.news-card-summary {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

.news-card-body.collapsed {
    display: none;
}

.news-highlights-wrap {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 14px;
}

.news-hl-header {
    font-size: 0.75rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.news-highlight-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.news-highlight-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-hl-badge-col {
    flex: 0 0 64px;
}

.news-hl-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    text-align: center;
    width: 100%;
}

.news-hl-content-col {
    flex: 1;
}

.news-hl-title {
    font-size: 0.82rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.news-hl-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.45;
}

.news-card-footer {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

.news-expand-toggle-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 5px 12px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.news-expand-toggle-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.news-empty-state {
    text-align: center;
    padding: 40px 20px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
}

.news-reset-btn {
    margin-top: 14px;
    background: linear-gradient(135deg, #0984e3, #00cec9);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
}

.news-reset-btn:hover {
    opacity: 0.9;
}

/* ==========================================================================
   POKE DIV COMMUNITY HUB (ACTIONS, TYPES, SUGGESTIONS & POLLS)
   ========================================================================== */

.comm-actions-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* Quick Suggest Translation Pencil Button for RU users */
.suggest-trans-pencil-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 206, 201, 0.14);
    border: 1px solid rgba(0, 206, 201, 0.38);
    color: #00cec9;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    font-size: 0.65rem;
    cursor: pointer;
    margin-left: 6px;
    padding: 0;
    vertical-align: middle;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.suggest-trans-pencil-btn:hover {
    background: #00cec9;
    color: #0f172a;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.6);
}

.comm-account-display {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 206, 201, 0.08);
    border: 1px solid rgba(0, 206, 201, 0.28);
    border-radius: 8px;
    padding: 10px 14px;
    user-select: none;
}

.comm-idea-card-title {
    margin: 12px 0 8px 0;
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.4;
}

.comm-idea-content-box {
    background: rgba(255, 255, 255, 0.035);
    border-left: 3px solid #00cec9;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 10px;
    white-space: pre-wrap;
    word-break: break-word;
}

.comm-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.comm-btn-suggest {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%);
    color: #fff;
    border: 1px solid rgba(0, 206, 201, 0.5);
}

.comm-btn-suggest:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.45);
    filter: brightness(1.1);
}

.comm-btn-poll {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: 1px solid rgba(245, 158, 11, 0.5);
}

.comm-btn-poll:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
    filter: brightness(1.1);
}

.comm-types-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.45);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.comm-types-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.comm-type-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.76rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.comm-type-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.comm-type-btn.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(233, 69, 96, 0.15));
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

.comm-sort-group {
    display: flex;
    gap: 4px;
}

.comm-sort-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 5px 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.comm-sort-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.comm-sort-btn.active {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    color: #00cec9;
}

/* Community Cards */
.comm-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.92) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.comm-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.comm-card.comm-card-suggestion {
    border-left: 4px solid #00cec9;
}

.comm-card.comm-card-suggestion.status-approved {
    border-left: 4px solid #10b981;
}

.comm-card.comm-card-poll {
    border-left: 4px solid #f59e0b;
}

.comm-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.comm-author-col {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comm-author-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(0, 206, 201, 0.15);
    color: #00cec9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    border: 1px solid rgba(0, 206, 201, 0.3);
}

.comm-author-avatar.admin {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
}

.comm-author-avatar.custom {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(0, 206, 201, 0.45) !important;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.25);
}

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

.comm-author-badge-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    vertical-align: middle;
    margin-left: 6px;
    border-radius: 4px;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.comm-author-badge-img:hover {
    transform: scale(1.25);
}

.comm-author-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comm-author-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.comm-admin-pill {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
    border: 1px solid rgba(233, 69, 96, 0.4);
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
}

.comm-post-date {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
}

.comm-badge-col {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.comm-cat-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.comm-cat-pill.poll {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
}

.comm-status-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-status-pill.approved {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.comm-status-pill.voting {
    background: rgba(9, 132, 227, 0.18);
    color: #0984e3;
    border: 1px solid rgba(9, 132, 227, 0.35);
}

.comm-admin-card-actions {
    display: inline-flex;
    gap: 6px;
    margin-left: 6px;
}

.comm-admin-btn {
    border: none;
    border-radius: 5px;
    padding: 4px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-admin-btn.approve {
    background: #10b981;
    color: #fff;
}

.comm-admin-btn.delete {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.comm-admin-btn:hover {
    filter: brightness(1.2);
}

/* Translation comparison bar */
.comm-trans-compare-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
}

.comm-trans-box {
    flex: 1;
}

.comm-trans-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.comm-trans-value {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    font-weight: bold;
}

.comm-trans-box.eng .comm-trans-value {
    color: #e2e8f0;
}

.comm-trans-box.rus .comm-trans-value {
    color: #00cec9;
}

.comm-trans-arrow {
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.1rem;
}

.comm-reasoning-box {
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid rgba(0, 206, 201, 0.5);
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 12px;
    line-height: 1.45;
}

.comm-admin-comment-box {
    display: flex;
    gap: 8px;
    font-size: 0.78rem;
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    border: 1px dashed rgba(16, 185, 129, 0.3);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.comm-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 10px;
}

.comm-vote-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comm-vote-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 5px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.comm-vote-btn.like:hover, .comm-vote-btn.like.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #10b981;
}

.comm-vote-btn.dislike:hover, .comm-vote-btn.dislike.active {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

.comm-rating-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
}

.comm-rating-pill.pos {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.comm-rating-pill.neg {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.comm-rating-pill.zero {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}

/* Poll styling */
.comm-poll-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #fff;
    margin: 8px 0 6px 0;
    line-height: 1.4;
}

.comm-poll-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
    line-height: 1.45;
}

.comm-poll-options-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.comm-poll-opt-row {
    position: relative;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
}

.comm-poll-opt-row:hover {
    border-color: rgba(245, 158, 11, 0.5);
    transform: translateX(2px);
}

.comm-poll-opt-row.selected {
    border-color: #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.comm-poll-opt-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.45) 100%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.comm-poll-opt-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
}

.comm-poll-opt-radio {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
}

.comm-poll-opt-row.selected .comm-poll-opt-radio {
    color: #f59e0b;
}

.comm-poll-opt-text {
    flex: 1;
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    color: #fff;
}

.comm-poll-opt-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
}

.comm-poll-opt-stat .votes-num {
    color: rgba(255, 255, 255, 0.5);
}

.comm-poll-opt-stat .votes-pct {
    font-weight: bold;
    color: #f59e0b;
    min-width: 35px;
    text-align: right;
}

.comm-poll-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 10px;
}

.comm-poll-total b {
    color: #fff;
}

/* Modals */
.comm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.comm-modal-card {
    background: #1a1a2e;
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 14px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    animation: modalIn 0.2s ease-out;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.comm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.5);
}

.comm-modal-header h1,
.comm-modal-header h2,
.comm-modal-header h3,
.comm-modal-header h4,
.comm-modal-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.comm-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.comm-modal-close:hover {
    color: #fff;
}

.comm-modal-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.comm-form-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
}

.comm-form-input, .comm-form-textarea {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 9px 12px;
    color: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s;
}

.comm-form-input:focus, .comm-form-textarea:focus {
    border-color: #00cec9;
}

.comm-btn-add-opt {
    background: rgba(245, 158, 11, 0.15);
    border: 1px dashed rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    border-radius: 6px;
    padding: 6px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    margin-top: 6px;
}

.comm-btn-add-opt:hover {
    background: rgba(245, 158, 11, 0.25);
}

.comm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.5);
}

.comm-btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 7px 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
}

.comm-btn-submit {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%);
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.comm-btn-submit:hover {
    filter: brightness(1.1);
}

/* ==========================================================================
   TERA GENERATOR & TACTICAL RECOMMENDATIONS
   ========================================================================== */
.tb-gen-tera-detail {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 6px;
    padding: 3px 8px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    transition: all 0.2s ease;
}

.tb-gen-tera-detail:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.5);
}

.tb-tera-rec-box {
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.tb-tera-rec-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-tera-rec-chip:hover {
    background: rgba(168, 85, 247, 0.18);
    border-color: rgba(168, 85, 247, 0.5);
    transform: translateY(-1px);
}

.tb-tera-rec-chip.active {
    background: rgba(168, 85, 247, 0.28);
    border-color: #a855f7;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}






/* ==========================================================================
   COMMUNITY BUILDS & TEAMS ON NEWS WALL
   ========================================================================== */
.comm-card.comm-card-team {
    border-left: 4px solid #00cec9 !important;
}

.comm-card.comm-card-build {
    border-left: 4px solid #a855f7 !important;
}

.comm-type-pill.team {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid #00cec9;
    color: #00cec9;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-type-pill.build {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid #a855f7;
    color: #c084fc;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-format-badge {
    padding: 3px 9px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.comm-team-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.08rem;
    color: #fff;
    margin: 6px 0 8px 0;
}

.comm-team-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
    margin-bottom: 12px;
}

.comm-team-pokes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.comm-team-poke-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.2s, transform 0.2s;
}

.comm-team-poke-card:hover {
    border-color: #00cec9;
    transform: translateY(-2px);
}

.comm-team-poke-art-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 6px;
}

.comm-team-poke-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

.comm-tera-badge {
    position: absolute;
    bottom: -4px;
    right: -6px;
    padding: 2px 6px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.comm-team-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.comm-team-poke-sub {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Minecraft', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.comm-team-poke-props {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    margin-top: 6px;
}

.comm-team-prop-chip {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comm-team-prop-chip i {
    font-size: 0.55rem;
    opacity: 0.7;
}

.comm-team-details-wrap {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.comm-details-header {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #00cec9;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.comm-poke-detail-row {
    background: rgba(10, 15, 30, 0.6);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.comm-poke-detail-head {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
}

.comm-poke-detail-title {
    color: #fff;
}

.comm-nature-tag {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid #10b981;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.62rem;
}

.comm-evs-tag {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.65rem;
}

.comm-poke-moves-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
}

.comm-detail-move-chip {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #e2e8f0;
    font-family: 'Minecraft', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comm-build-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.comm-build-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid;
    outline: none;
}

.comm-build-action-btn.details {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

.comm-build-action-btn.details:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.comm-build-action-btn.import {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    color: #00cec9;
}

.comm-build-action-btn.import:hover {
    background: rgba(0, 206, 201, 0.3);
    color: #fff;
    transform: translateY(-1px);
}

.comm-build-action-btn.copy {
    background: rgba(9, 132, 227, 0.15);
    border-color: #0984e3;
    color: #74b9ff;
}

.comm-build-action-btn.copy:hover {
    background: rgba(9, 132, 227, 0.3);
    color: #fff;
    transform: translateY(-1px);
}

/* Single Pokemon Hero Card */
.comm-single-build-box {
    display: flex;
    gap: 16px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 12px;
    padding: 16px;
    align-items: center;
    margin: 12px 0;
    flex-wrap: wrap;
}

.comm-single-art-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 90px;
}

.comm-single-art {
    width: 84px;
    height: 84px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
}

.comm-role-badge {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid #a855f7;
    color: #c084fc;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.58rem;
    font-family: 'Minecraft', monospace;
}

.comm-single-info-col {
    flex: 1;
    min-width: 220px;
}

.comm-single-head {
    margin-bottom: 8px;
}

.comm-single-name {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #fff;
    font-weight: bold;
}

.comm-single-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.comm-single-chips-wrap {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.comm-chip-pill {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.comm-chip-pill.item i { color: #f59e0b; }
.comm-chip-pill.ability i { color: #00cec9; }
.comm-chip-pill.nature i { color: #10b981; }
.comm-chip-pill.evs i { color: #818cf8; }

.comm-single-moves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
}

.comm-single-move-chip {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    color: #fff;
    font-family: 'Minecraft', monospace;
}

/* Modal Publish Build */
.modal-publish-build {
    max-width: 620px !important;
    width: 95% !important;
    max-height: 88vh;
    overflow-y: auto;
}

.publish-build-tabs-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    flex-wrap: wrap;
}

.pub-tab-btn {
    background: none;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.pub-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.pub-tab-btn.active {
    background: rgba(0, 206, 201, 0.18);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.pub-field-row {
    margin-bottom: 12px;
}

.pub-label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 5px;
}

.pub-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

.pub-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.2s;
}

.pub-input:focus {
    border-color: #00cec9;
}

.pub-team-chips-preview {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    min-height: 48px;
    align-items: center;
}

.pub-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    color: #fff;
    font-family: 'Minecraft', monospace;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pub-preview-chip img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.pub-search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid #00cec9;
    border-radius: 8px;
    padding: 8px;
    margin-top: 6px;
}

.pub-search-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.15s;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #fff;
}

.pub-search-item:hover {
    background: rgba(0, 206, 201, 0.25);
}

.pub-search-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.pub-selected-poke-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 206, 201, 0.1);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Minecraft', monospace;
}

.comm-btn-publish-build {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.2), rgba(9, 132, 227, 0.2)) !important;
    border: 1px solid #00cec9 !important;
    color: #00cec9 !important;
}

.comm-btn-publish-build:hover {
    background: linear-gradient(135deg, #00cec9, #0984e3) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.4);
}



/* ===== СХЕМА ЗОН ПОРАЖЕНИЯ ПРИЁМА (Move Target Diagram) ===== */
.db-move-target-box {
    background: rgba(18, 22, 36, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 20px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.db-target-diagram {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 380px;
}

.db-target-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    padding: 4px;
    border-radius: 14px;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

.db-target-row.side-active {
    outline: 3px solid #2ecc71;
    box-shadow: 0 0 16px rgba(46, 204, 113, 0.5);
    background: rgba(46, 204, 113, 0.1);
}

.db-target-pill {
    padding: 10px 4px;
    border-radius: 14px;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 700;
    color: #ffffff;
    border: 3.5px solid transparent;
    transition: all 0.2s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Enemy pills (orange like photo) */
.db-target-enemy {
    background: #de8326;
    opacity: 0.85;
}

/* Ally pills (cyan/blue like photo) */
.db-target-ally {
    background: #16c0eb;
    opacity: 0.85;
}

/* User pill (matches cyan from photo, sized to fit Пользователь) */
.db-target-user {
    background: #16c0eb;
    opacity: 0.85;
    font-size: 0.72rem;
    letter-spacing: -0.25px;
    white-space: nowrap;
}

/* Highlighted target pills (vibrant green border like photo) */
.db-target-pill.active {
    opacity: 1 !important;
    border: 3.5px solid #27ae60 !important;
    box-shadow: 0 0 12px rgba(39, 174, 96, 0.75), inset 0 0 6px rgba(39, 174, 96, 0.35);
}

.db-target-desc {
    margin-top: 14px;
    text-align: center;
    font-style: italic;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.45;
    max-width: 400px;
}

.db-detail-target-section {
    margin-top: 14px;
}

.db-detail-target-pill-badge {
    margin-left: 8px;
    font-size: 0.74rem;
    font-weight: normal;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(39, 174, 96, 0.2);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
    vertical-align: middle;
}

.db-move-target-badge, .db-move-meta-tag.db-move-target-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.35);
    white-space: nowrap;
}

.db-mcard-extra-pill.target {
    border-color: rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}


/* ==========================================================================
   ADMIN TAG & CATEGORY EDITOR STYLES (MINECRAFT FONT)
   ========================================================================== */
.comm-admin-btn.tags {
    background: rgba(0, 206, 201, 0.18) !important;
    border: 1px solid rgba(0, 206, 201, 0.4) !important;
    color: #00cec9 !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.15s ease !important;
}

.comm-admin-btn.tags:hover {
    background: rgba(0, 206, 201, 0.35) !important;
    color: #fff !important;
    border-color: #00cec9 !important;
}

.news-admin-tag-btn {
    background: rgba(0, 206, 201, 0.15) !important;
    border: 1px solid rgba(0, 206, 201, 0.35) !important;
    color: #00cec9 !important;
    border-radius: 6px !important;
    padding: 3px 9px !important;
    cursor: pointer !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.74rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.15s ease !important;
}

.news-admin-tag-btn:hover {
    background: rgba(0, 206, 201, 0.3) !important;
    border-color: #00cec9 !important;
    color: #fff !important;
}

.admin-editable {
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.admin-editable:hover {
    filter: brightness(1.25) !important;
    outline: 1px dashed rgba(0, 206, 201, 0.7) !important;
}

.news-tag-presets-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.news-tag-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    padding: 2px 8px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.news-tag-chip:hover {
    background: rgba(0, 206, 201, 0.2) !important;
    border-color: #00cec9 !important;
    color: #fff !important;
}

#modalAdminEditTags,
#modalAdminEditTags input,
#modalAdminEditTags select,
#modalAdminEditTags textarea,
#modalAdminEditTags button,
#modalAdminEditTags label,
#modalAdminEditTags span,
#modalAdminEditTags div {
    font-family: 'Minecraft', monospace !important;
}

#modalAdminEditTags i,
#modalAdminEditTags [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}

/* ==========================================================================
   PROFILE CRY CONTROLS - ULTRA-COMPACT SINGLE-ROW TOOLBAR
   ========================================================================== */
.db-profile-cry-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 2px;
    padding: 3px 8px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    max-width: 100%;
    flex-wrap: nowrap;
    position: relative;
    z-index: 5;
}

.db-profile-cry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.db-profile-cry-btn span {
    display: inline-block;
    line-height: 1;
}

.db-profile-cry-btn.play i,
.db-profile-cry-btn.retro i {
    display: inline-block;
    line-height: 1;
    transform: translateY(1.5px);
}

.db-profile-cry-btn.play {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(233, 69, 96, 0.18));
    border-color: rgba(233, 69, 96, 0.5);
    color: #fff;
}
.db-profile-cry-btn.play:hover {
    background: rgba(233, 69, 96, 0.6);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}
.db-profile-cry-btn.play.playing {
    background: linear-gradient(135deg, #e94560, #ff6b8b) !important;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out;
}

.db-profile-cry-btn.retro {
    background: rgba(108, 92, 231, 0.2);
    border-color: rgba(108, 92, 231, 0.4);
    color: #a29bfe;
    padding: 4px 8px;
}
.db-profile-cry-btn.retro:hover {
    background: rgba(108, 92, 231, 0.45);
    color: #fff;
    box-shadow: 0 0 8px rgba(108, 92, 231, 0.5);
}
.db-profile-cry-btn.retro.playing {
    background: #6c5ce7 !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(108, 92, 231, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out;
}

.db-profile-cry-btn.download {
    background: rgba(0, 184, 148, 0.15);
    border-color: rgba(0, 184, 148, 0.35);
    color: #55efc4;
    padding: 4px 7px;
    width: 26px;
    height: 26px;
}
.db-profile-cry-btn.download:hover {
    background: rgba(0, 184, 148, 0.4);
    color: #fff;
    box-shadow: 0 0 8px rgba(0, 184, 148, 0.5);
}

.db-profile-cry-vol-expandable {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.db-profile-cry-vol-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-profile-cry-vol-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.db-profile-cry-vol-pop {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 6px 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    align-items: center;
    gap: 8px;
    z-index: 100;
    white-space: nowrap;
}

.db-profile-cry-vol-expandable:hover .db-profile-cry-vol-pop,
.db-profile-cry-vol-expandable.active .db-profile-cry-vol-pop {
    display: flex;
}

.db-profile-cry-vol-pop::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #0f172a transparent transparent transparent;
}

.db-cry-compact-range {
    width: 65px;
    height: 4px;
    accent-color: #e94560;
    cursor: pointer;
}

#dbProfileCryVolVal {
    font-size: 0.68rem;
    color: #e94560;
    font-weight: 700;
    min-width: 28px;
    text-align: right;
    font-family: 'Minecraft', monospace;
}


/* ==========================================================================
   POKÉMON SOUNDS & CRIES DATABASE (SOUNDBOARD & CAPCUT TOOLS)
   ========================================================================== */

.db-cries-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 15px !important;
    box-sizing: border-box !important;
}

.db-cry-card {
    background: rgba(22, 27, 46, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    backdrop-filter: blur(10px) !important;
    font-family: 'Minecraft', monospace !important;
    box-sizing: border-box !important;
}

.db-cry-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(233, 69, 96, 0.5) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(233, 69, 96, 0.2) !important;
}

.db-cry-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

.db-cry-card-dex {
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    color: #e94560 !important;
    background: rgba(233, 69, 96, 0.15) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 0.5px !important;
    font-family: 'Minecraft', monospace !important;
}

.db-cry-card-types {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
}

.db-cry-card-type-dot {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.db-cry-card-type-dot img {
    width: 13px !important;
    height: 13px !important;
    object-fit: contain !important;
    display: block !important;
}

.db-cry-card-sprite-wrap {
    width: 90px !important;
    height: 90px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 6px auto !important;
    position: relative !important;
    cursor: pointer !important;
}

.db-cry-card-sprite {
    max-width: 85px !important;
    max-height: 85px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)) !important;
    transition: transform 0.25s ease !important;
}

.db-cry-card:hover .db-cry-card-sprite {
    transform: scale(1.08) !important;
}

.db-cry-card-name-ru {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    font-family: 'Minecraft', monospace !important;
    margin-top: 4px !important;
}

.db-cry-card-name-en {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    font-family: 'Minecraft', monospace !important;
}

.db-cry-card-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
}

.db-cry-play-row {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
}

.db-cry-play-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 10px !important;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(233, 69, 96, 0.1)) !important;
    border: 1px solid rgba(233, 69, 96, 0.4) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
}

.db-cry-play-btn:hover {
    background: rgba(233, 69, 96, 0.45) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.5) !important;
}

.db-cry-play-btn.playing {
    background: linear-gradient(135deg, #e94560, #ff6b8b) !important;
    border-color: #fff !important;
    box-shadow: 0 0 18px rgba(233, 69, 96, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out !important;
}

.db-cry-retro-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 7px 8px !important;
    background: rgba(108, 92, 231, 0.2) !important;
    border: 1px solid rgba(108, 92, 231, 0.4) !important;
    border-radius: 8px !important;
    color: #a29bfe !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
}

.db-cry-retro-btn:hover {
    background: rgba(108, 92, 231, 0.4) !important;
    color: #fff !important;
    border-color: #a29bfe !important;
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.4) !important;
}

.db-cry-retro-btn.playing {
    background: #6c5ce7 !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: 0 0 16px rgba(108, 92, 231, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out !important;
}

.db-cry-download-row {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
}

.db-cry-dl-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 5px 8px !important;
    background: rgba(0, 184, 148, 0.15) !important;
    border: 1px solid rgba(0, 184, 148, 0.3) !important;
    border-radius: 7px !important;
    color: #55efc4 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
}

.db-cry-dl-btn:hover {
    background: rgba(0, 184, 148, 0.35) !important;
    color: #fff !important;
    border-color: #00b894 !important;
    box-shadow: 0 0 10px rgba(0, 184, 148, 0.4) !important;
}

.db-cry-volume-slider {
    accent-color: #e94560 !important;
    height: 6px !important;
    border-radius: 3px !important;
}


/* ==========================================================================
   SOUND DATABASE STYLES (SFX, JINGLES, MOVES, OST)
   ========================================================================== */
.db-sound-card {
    background: rgba(22, 27, 46, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    backdrop-filter: blur(10px) !important;
    font-family: 'Minecraft', monospace !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.db-sound-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(233, 69, 96, 0.5) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(233, 69, 96, 0.2) !important;
}

.db-sound-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.db-sound-badge {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 0.4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-transform: uppercase !important;
}

.db-sound-format {
    font-size: 0.65rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}

.db-sound-icon-wrap {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    margin: 4px 0 10px 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease !important;
}

.db-sound-card:hover .db-sound-icon-wrap {
    transform: scale(1.08) !important;
}

.db-sound-name-ru {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 2px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.db-sound-name-en {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-style: italic !important;
    margin-bottom: 8px !important;
}

.db-sound-desc {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.db-sound-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
}

.db-sound-tag {
    font-size: 0.6rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
}

.db-sound-card-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
}

.db-sound-play-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(233, 69, 96, 0.5) !important;
    background: rgba(233, 69, 96, 0.2) !important;
    color: #fff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.db-sound-play-btn:hover {
    background: rgba(233, 69, 96, 0.4) !important;
    border-color: #e94560 !important;
    transform: scale(1.02) !important;
}

.db-sound-play-btn.playing {
    background: #e94560 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.6) !important;
    animation: soundPulse 1.2s infinite ease-in-out !important;
}

@keyframes soundPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(233, 69, 96, 0.5); }
    50% { box-shadow: 0 0 18px rgba(233, 69, 96, 0.9); }
}

.db-sound-dl-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.7rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.db-sound-dl-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.db-sound-progress-container {
    width: 100% !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
}

.db-sound-progress-bar {
    width: 100% !important;
    height: 5px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.db-sound-progress-fill {
    height: 100% !important;
    transition: width 0.2s linear !important;
}


/* ==========================================================================
   BACKDROP & VIDEO BACKGROUND GENERATOR (ADMIN PANEL)
   ========================================================================== */

.bd-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.bd-header-info {
    flex: 1;
    min-width: 260px;
}

.bd-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bd-main-grid {
    display: grid;
    grid-template-columns: minmax(360px, 460px) 1fr;
    gap: 24px;
    align-items: flex-start;
}

@media (max-width: 960px) {
    .bd-main-grid {
        grid-template-columns: 1fr;
    }
}

.bd-controls-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bd-panel-box {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s ease;
}

.bd-panel-box:hover {
    border-color: rgba(233, 69, 96, 0.25);
}

.bd-panel-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}

.bd-preset-chips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bd-preset-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.64rem;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-preset-chip:hover {
    background: rgba(233, 69, 96, 0.18);
    border-color: rgba(233, 69, 96, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.bd-preset-chip.active {
    background: rgba(233, 69, 96, 0.28);
    border-color: #e94560;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.35);
}

.bd-res-btns-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.bd-res-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bd-res-btn:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.4);
    color: #ffffff;
}

.bd-res-btn.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.bd-custom-res-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.bd-input-num {
    width: 80px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 5px 8px;
}

.bd-input-num:focus {
    border-color: #00cec9;
    outline: none;
}

.bd-colors-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.bd-color-chips-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bd-color-chip {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.bd-color-chip:hover {
    transform: scale(1.15);
    border-color: #ffffff;
}

.bd-color-chip.active {
    border-color: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.bd-color-input {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.bd-select {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 6px 10px;
    cursor: pointer;
    width: 100%;
}

.bd-select:focus {
    border-color: #e94560;
    outline: none;
}

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

.bd-slider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.bd-slider-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.bd-range {
    flex: 1;
    height: 4px;
    accent-color: #e94560;
    cursor: pointer;
}

.bd-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
}

.bd-checkbox-label input[type="checkbox"] {
    accent-color: #e94560;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.bd-input-text {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 7px 10px;
    width: 100%;
    box-sizing: border-box;
}

.bd-input-text:focus {
    border-color: #00cec9;
    outline: none;
}

/* Right Column: Preview */
.bd-preview-col {
    position: relative;
}

.bd-preview-sticky {
    position: sticky;
    top: 20px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.bd-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bd-res-badge {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.35);
    color: #00cec9;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 3px 8px;
    border-radius: 4px;
}

.bd-preview-fs-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.72rem;
    transition: all 0.2s ease;
}

.bd-preview-fs-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.bd-canvas-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #060911;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    min-height: 320px;
    overflow: hidden;
}

#backdropPreviewCanvas {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
    display: block;
}

.bd-preview-tips {
    margin-top: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.63rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
}

/* Fullscreen Modal */
.bd-fullscreen-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.bd-fullscreen-overlay {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bdFullscreenCanvas {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

.bd-fullscreen-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
}

.bd-fullscreen-close:hover {
    transform: rotate(90deg) scale(1.1);
}

.bd-fullscreen-tip {
    position: absolute;
    bottom: -32px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    text-align: center;
    width: 100%;
}


/* ==========================================================================
   TYPE BADGE & OVERLAY GENERATOR (ADMIN PANEL)
   ========================================================================== */

.tb-types-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 6px;
}

.tb-type-select-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-type-select-chip img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.tb-type-select-chip:hover {
    border-color: var(--t-color, #00cec9);
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.tb-type-select-chip.active {
    background: var(--t-color, #00cec9);
    border-color: #ffffff;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 12px var(--t-color, rgba(0, 206, 201, 0.5));
    font-weight: bold;
}

.tb-quick-combo-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 5px 9px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-quick-combo-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #ffffff;
}

.tb-canvas-checker-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(45deg, #1c2438 25%, transparent 25%),
                      linear-gradient(-45deg, #1c2438 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #1c2438 75%),
                      linear-gradient(-45deg, transparent 75%, #1c2438 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 24px 16px;
    min-height: 220px;
    overflow: auto;
}

#typeBadgePreviewCanvas {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px;
    display: block;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   HD SPRITE & ART DOWNLOAD DROPDOWN (DATABASE & STUDIO)
   ========================================================================== */
.db-hd-dl-dropdown {
    position: fixed;
    z-index: 999999 !important;
    width: 360px;
    background: #0f172a;
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 206, 201, 0.2);
    padding: 12px;
    font-family: 'Minecraft', monospace;
    animation: dbHdFadeIn 0.15s ease-out;
}

@keyframes dbHdFadeIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.db-hd-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: #ffffff;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.db-hd-menu-close {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.db-hd-menu-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.db-hd-menu-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 380px;
    overflow-y: auto;
}

.db-hd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.15s ease;
}

.db-hd-item:hover {
    background: rgba(0, 206, 201, 0.08);
    border-color: rgba(0, 206, 201, 0.3);
}

.db-hd-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.db-hd-item-title {
    font-size: 0.68rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-hd-item-sub {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.45);
}

.db-hd-item-btns {
    display: flex;
    gap: 5px;
}

.db-hd-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.db-hd-btn:hover {
    background: #00cec9;
    color: #000;
    border-color: #00cec9;
}

.db-hd-btn.copy:hover {
    background: #e94560;
    color: #fff;
    border-color: #e94560;
}

.db-hd-menu-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}


.hd-studio-type-btn.active {
    background: rgba(0, 206, 201, 0.25) !important;
    border-color: #00cec9 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3) !important;
}

#hdStudioShinyToggle.active {
    background: rgba(241, 196, 15, 0.25) !important;
    border-color: #f1c40f !important;
    color: #f1c40f !important;
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.4) !important;
}


/* ==========================================================================
   POKÉMON EVOLUTION CHAIN COMPONENT
   ========================================================================== */
.db-profile-evo-section {
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(10, 15, 28, 0.96) 100%);
    border: 1px solid rgba(0, 206, 201, 0.28);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.db-profile-evo-section:hover {
    border-color: rgba(0, 206, 201, 0.5);
    box-shadow: 0 12px 36px rgba(0, 206, 201, 0.15), 0 10px 30px rgba(0, 0, 0, 0.4);
}

.db-evo-collapse-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    margin: 0 !important;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(90deg, rgba(0, 206, 201, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    transition: all 0.25s ease;
}

.db-evo-collapse-title:hover {
    background: linear-gradient(90deg, rgba(0, 206, 201, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.db-evo-collapse-title.is-expanded {
    border-bottom: 1px solid rgba(0, 206, 201, 0.22);
}

.db-evo-collapse-title.is-expanded .db-evo-arrow {
    transform: rotate(180deg);
}

.db-evo-count-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 20px;
    color: #00cec9;
    text-shadow: 0 0 8px rgba(0, 206, 201, 0.3);
}

.db-evo-toggle-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    transition: color 0.2s ease;
}

.db-evo-collapse-title:hover .db-evo-toggle-hint {
    color: #00cec9;
}

.db-evo-arrow {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: #00cec9;
    font-size: 0.85rem;
}

.db-profile-evo-body {
    padding: 26px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    background: radial-gradient(ellipse at center, rgba(30, 41, 59, 0.35) 0%, rgba(8, 12, 22, 0.7) 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 206, 201, 0.4) transparent;
}

.db-profile-evo-body::-webkit-scrollbar {
    height: 6px;
}

.db-profile-evo-body::-webkit-scrollbar-thumb {
    background: rgba(0, 206, 201, 0.4);
    border-radius: 4px;
}

/* Linear & Branching Layouts */
.db-evo-linear-wrap,
.db-evo-branching-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: 100%;
}

.db-evo-branching-wrap {
    align-items: center;
}

.db-evo-branch-base {
    display: flex;
    align-items: center;
    position: relative;
}

.db-evo-branch-base::after {
    content: '';
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 6px rgba(0, 206, 201, 0.4);
    flex-shrink: 0;
}

.db-evo-branch-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    padding-left: 28px;
    border-left: none;
}

.db-evo-branch-row {
    display: flex;
    align-items: center;
    position: relative;
}

.db-evo-branch-row::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-branch-row::after {
    content: '';
    position: absolute;
    left: -28px;
    top: -7px;
    bottom: -7px;
    width: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-branch-row:first-child::after {
    top: 50%;
}

.db-evo-branch-row:last-child::after {
    bottom: 50%;
}

.db-evo-branch-row:only-child::after {
    display: none;
}

.db-evo-sub-branch {
    display: flex;
    align-items: center;
    position: relative;
}

.db-evo-sub-branch::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-sub-branch::after {
    content: '';
    position: absolute;
    left: -28px;
    top: -7px;
    bottom: -7px;
    width: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-sub-branch:first-child::after {
    top: 50%;
}

.db-evo-sub-branch:last-child::after {
    bottom: 50%;
}

.db-evo-sub-branch:only-child::after {
    display: none;
}

.db-evo-branches-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    padding-left: 28px;
    border-left: none;
}

.db-evo-card + .db-evo-branches-col::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

/* Card */
.db-evo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 126px;
    padding: 12px 8px 14px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
    user-select: none;
}

.db-evo-card:hover {
    transform: translateY(-4px);
    background: linear-gradient(180deg, rgba(40, 53, 76, 0.95) 0%, rgba(18, 28, 51, 0.98) 100%);
    border-color: rgba(0, 206, 201, 0.65);
    box-shadow: 0 10px 24px rgba(0, 206, 201, 0.25);
}

.db-evo-card:hover .db-evo-sprite {
    transform: scale(1.1);
}

.db-evo-card.is-current {
    background: linear-gradient(180deg, rgba(0, 206, 201, 0.18) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid #00cec9;
    box-shadow: 0 0 20px rgba(0, 206, 201, 0.4), inset 0 0 12px rgba(0, 206, 201, 0.12);
}

.db-evo-current-badge {
    position: absolute;
    top: -10px;
    background: linear-gradient(135deg, #00cec9, #0984e3);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 206, 201, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 5;
}

.db-evo-sprite-box {
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
}

.db-evo-sprite {
    max-width: 74px;
    max-height: 74px;
    object-fit: contain;
    image-rendering: auto !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.db-evo-name {
    font-size: 0.74rem;
    font-weight: 700;
    color: #f8fafc;
    text-align: center;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.15;
    height: 1.8rem;
    width: 100%;
    max-width: 120px;
    padding: 0 2px;
    box-sizing: border-box;
    margin-top: 3px;
    letter-spacing: 0.2px;
}

.db-evo-dex {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 1px;
    letter-spacing: 0.5px;
}

.db-evo-types {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.db-evo-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 6px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.2px;
}

.db-evo-type-chip img {
    width: 12px;
    height: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Step Arrow & Method Badge */
/* Step Arrow Container */
.db-evo-step-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 8px;
    min-width: 85px;
    max-width: 175px;
    width: auto;
    text-align: center;
    flex-shrink: 0;
    margin: 0 2px;
}

/* Method Badge (wrapping, multi-line, glow) */
.db-evo-method-badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.62rem;
    font-weight: 600;
    color: #fcd34d;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(252, 211, 77, 0.45);
    border-radius: 12px;
    padding: 4px 9px;
    line-height: 1.25;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 8px rgba(252, 211, 77, 0.15);
    margin-bottom: 7px;
    max-width: 155px;
    width: max-content;
    white-space: normal;
    text-align: center;
    word-break: normal;
    overflow-wrap: break-word;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.db-evo-method-badge:hover {
    border-color: rgba(252, 211, 77, 0.85);
    box-shadow: 0 4px 14px rgba(252, 211, 77, 0.35);
    transform: translateY(-1px);
    color: #fff;
}

.db-evo-method-badge i {
    flex-shrink: 0;
    font-size: 0.68rem;
    color: #fcd34d;
}

/* Elegant Directional Flow Track */
.db-evo-flow-track {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 55px;
    height: 18px;
}

.db-evo-flow-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 206, 201, 0.25) 0%, rgba(0, 206, 201, 0.85) 75%, #00cec9 100%);
    box-shadow: 0 0 6px rgba(0, 206, 201, 0.45);
    border-radius: 2px;
    position: relative;
}

.db-evo-flow-line::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 206, 201, 0.7);
    box-shadow: 0 0 6px rgba(0, 206, 201, 0.8);
}

.db-evo-flow-arrowhead {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -1px;
    color: #00cec9;
    font-size: 0.92rem;
    filter: drop-shadow(0 0 6px rgba(0, 206, 201, 0.85));
    transition: transform 0.2s ease;
    animation: evoArrowPulse 2.2s infinite ease-in-out;
}

.db-evo-arrow-icon {
    font-size: 0.9rem;
    color: #00cec9;
    filter: drop-shadow(0 0 4px rgba(0, 206, 201, 0.8));
}

@keyframes evoArrowPulse {
    0%, 100% {
        transform: translateX(0);
        filter: drop-shadow(0 0 5px rgba(0, 206, 201, 0.7));
    }
    50% {
        transform: translateX(4px);
        filter: drop-shadow(0 0 10px rgba(0, 206, 201, 1));
    }
}


/* ==========================================================================
   POKEMON SEARCH SPELL SUGGESTION & DROPDOWN STYLES
   ========================================================================== */
.hd-studio-search-wrap {
    position: relative;
    width: 100%;
}

.bd-panel-box:has(#hdStudioPokeSearchInp) {
    position: relative;
    z-index: 900 !important;
}

.hd-studio-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 999999 !important;
    background: #0b1329 !important;
    border: 1.5px solid #00cec9;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 206, 201, 0.3);
    max-height: 280px;
    overflow-y: auto;
    font-family: 'Minecraft', monospace;
    backdrop-filter: none !important;
}

.hd-drop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
}

.hd-drop-item:last-child {
    border-bottom: none;
}

.hd-drop-item:hover {
    background: rgba(0, 206, 201, 0.15);
}

.hd-drop-thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.hd-drop-text {
    flex: 1;
    overflow: hidden;
}

.hd-drop-name {
    font-size: 0.7rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-drop-sub {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.5);
}

.hd-drop-fuzzy-badge {
    color: #f1c40f;
    font-size: 0.6rem;
}

.db-search-suggest-box {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.3);
    border-radius: 8px;
    padding: 10px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffffff;
    margin-bottom: 16px;
}

.db-search-suggest-btn {
    background: rgba(241, 196, 15, 0.2);
    border: 1px solid #f1c40f;
    color: #f1c40f;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    transition: all 0.2s ease;
}

.db-search-suggest-btn:hover {
    background: #f1c40f;
    color: #000;
}


/* ==========================================================================
   VIDEO OVERLAY ELEMENTS GENERATOR STYLES
   ========================================================================== */
#adminSectionVideoElements {
    animation: fadeIn 0.3s ease;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.ve-recent-color-chip {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    cursor: pointer;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    display: inline-block;
    flex-shrink: 0;
}

.ve-recent-color-chip:hover {
    transform: scale(1.18);
    border-color: #00cec9;
    box-shadow: 0 4px 10px rgba(0, 206, 201, 0.4);
    z-index: 2;
}

.ve-recent-color-chip.active-c1 {
    border-color: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
}

.ve-recent-color-chip.active-c2 {
    border-color: #ffa502 !important;
    box-shadow: 0 0 8px rgba(255, 165, 2, 0.8) !important;
}

.ve-shape-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.ve-shape-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.18s ease;
    font-family: 'Minecraft', monospace;
}

.ve-shape-card:hover {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.12);
    transform: translateY(-2px);
}

.ve-shape-card.active {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.22);
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.4);
    color: #00cec9;
}

.ve-shape-name {
    font-size: 0.68rem;
    font-weight: bold;
    margin-top: 4px;
}

.ve-shape-desc {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
    line-height: 1.2;
}

.ve-color-preset-pill {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.ve-color-preset-pill:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.ve-preset-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ve-rot-quick-btn {
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ve-rot-quick-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #fff;
}

.ve-canvas-checker {
    background-color: #111827;
    background-image:
        linear-gradient(45deg, #1f293d 25%, transparent 25%),
        linear-gradient(-45deg, #1f293d 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1f293d 75%),
        linear-gradient(-45deg, transparent 75%, #1f293d 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
    border: 1.5px solid rgba(0, 206, 201, 0.3);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
}

#vePreviewCanvas {
    max-width: 100%;
    max-height: 520px;
    width: auto;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.6));
}

/* Download pills and matrix download buttons */
.db-chart-dl-pill {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.22), rgba(0, 206, 201, 0.22)) !important;
    border: 1px solid rgba(0, 206, 201, 0.45) !important;
    color: #00cec9 !important;
    font-weight: bold !important;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-chart-dl-pill:hover {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.38), rgba(0, 206, 201, 0.38)) !important;
    border-color: #00cec9 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.35) !important;
}

.db-matrix-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid rgba(0, 206, 201, 0.5);
    background: rgba(0, 206, 201, 0.12);
    color: #00cec9;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-matrix-dl-btn:hover {
    background: rgba(0, 206, 201, 0.28);
    border-color: #00cec9;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(0, 206, 201, 0.4);
    transform: translateY(-1px);
}



.db-table-name-cell {
    cursor: pointer;
    user-select: text;
    transition: color 0.15s ease;
}

.db-table-name-cell:hover .db-table-name-txt {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #00cec9;
}

.db-table-name-cell .db-title-copy-icon {
    font-size: 0.75em;
    opacity: 0.45;
    margin-left: 6px;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.db-table-name-cell:hover .db-title-copy-icon {
    opacity: 1;
    color: #00cec9;
    transform: scale(1.15);
}

.db-table-name-cell.copied {
    color: #2ed573 !important;
}

.db-table-name-cell.copied .db-table-name-txt {
    color: #2ed573 !important;
}


/* ==========================================================================
   TOP BAR DONATE & FRIENDS CHAT ENHANCEMENTS
   ========================================================================== */


/* Top Bar Actions Group */
.user-bar-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.top-bar-donate-btn {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(255, 107, 129, 0.25));
    border: 1px solid rgba(255, 107, 129, 0.5);
    border-radius: 20px;
    color: #ff6b81;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(255, 107, 129, 0.15);
}

.top-bar-donate-btn:hover {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.45), rgba(255, 107, 129, 0.45));
    border-color: #ff6b81;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 107, 129, 0.35);
}

.hosting-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 26, 0.85);
    backdrop-filter: blur(8px);
    z-index: 999999 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.hosting-modal-card {
    max-width: 480px;
    width: 100%;
    margin: 0;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(245, 200, 66, 0.2);
}

.hosting-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.hosting-modal-close:hover {
    color: #f5c842;
    transform: scale(1.1);
}

.friends-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 360px;
    max-height: 520px;
    overflow-y: auto;
    background: #16213e;
    border: 2px solid #e94560;
    border-radius: 14px;
    padding: 12px;
    z-index: 9999;
    box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 15px rgba(233,69,96,0.2);
    box-sizing: border-box;
}

.friends-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(233,69,96,0.25);
}

.friends-tabs-bar {
    display: flex;
    gap: 6px;
}

.friends-tab-btn {
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.friends-tab-btn:hover {
    color: #fff;
    border-color: rgba(233, 69, 96, 0.5);
}

.friends-tab-btn.active {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #fff;
}

.friends-dropdown-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.friends-dropdown-close:hover {
    color: #e94560;
}

.friends-item-actions button.chat-btn:hover {
    border-color: #4ecdc4;
    color: #4ecdc4;
}

#friendsChatsPanel {
    flex: 1;
    min-height: 0;
}


/* ========================================================================== */
/* NEW CLEAN NEWS & HUB SUBTABS (ОБНОВЛЕНИЯ, ПОМОЩЬ ПРОЕКТУ, СБОРКИ) */
/* ========================================================================== */
.news-subtabs-wrapper {
    margin-bottom: 22px;
}

.news-subtabs-nav {
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.news-subtabs-nav::-webkit-scrollbar {
    display: none;
}

.news-subtab-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
}

.news-subtab-btn:hover {
    background: rgba(30, 41, 59, 0.85);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.news-subtab-btn.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(198, 42, 71, 0.55));
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 0 24px rgba(233, 69, 96, 0.4), 0 4px 16px rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

.news-subtab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 15%;
    width: 70%;
    height: 3px;
    background: #e94560;
    border-radius: 3px;
    box-shadow: 0 0 10px #e94560;
}

.news-subtab-badge {
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid rgba(0, 206, 201, 0.5);
    color: #00cec9;
    font-size: 0.6rem;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 2px;
}

.news-support-pill-btn {
    background: linear-gradient(135deg, rgba(255, 107, 129, 0.15), rgba(233, 69, 96, 0.25));
    border: 1px solid rgba(255, 107, 129, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(255, 71, 87, 0.2);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-align: left;
}

.news-support-pill-btn:hover {
    background: linear-gradient(135deg, rgba(255, 107, 129, 0.25), rgba(233, 69, 96, 0.4));
    border-color: #ff6b81;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 71, 87, 0.35);
}

/* HELP SECTION HERO CARDS */
.news-help-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.news-help-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

.news-help-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.news-help-card.help-card-bug { border-color: rgba(233, 69, 96, 0.35); }
.news-help-card.help-card-bug:hover { border-color: #e94560; box-shadow: 0 8px 25px rgba(233, 69, 96, 0.25); }

.news-help-card.help-card-idea { border-color: rgba(245, 158, 11, 0.35); }
.news-help-card.help-card-idea:hover { border-color: #f59e0b; box-shadow: 0 8px 25px rgba(245, 158, 11, 0.25); }

.news-help-card.help-card-trans { border-color: rgba(0, 206, 201, 0.35); }
.news-help-card.help-card-trans:hover { border-color: #00cec9; box-shadow: 0 8px 25px rgba(0, 206, 201, 0.25); }

.news-help-card.help-card-donate { border-color: rgba(255, 107, 129, 0.35); }
.news-help-card.help-card-donate:hover { border-color: #ff6b81; box-shadow: 0 8px 25px rgba(255, 107, 129, 0.25); }

.news-help-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.help-card-bug .news-help-icon { background: rgba(233, 69, 96, 0.15); color: #e94560; }
.help-card-idea .news-help-icon { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.help-card-trans .news-help-icon { background: rgba(0, 206, 201, 0.15); color: #00cec9; }
.help-card-donate .news-help-icon { background: rgba(255, 107, 129, 0.15); color: #ff6b81; }

.news-help-title {
    font-size: 0.95rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.35;
}

.news-help-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin: 0 0 16px 0;
    font-family: 'Minecraft', monospace;
}

.news-help-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    width: 100%;
    transition: all 0.2s;
}

.btn-bug { background: linear-gradient(135deg, #e94560, #c0392b); box-shadow: 0 4px 14px rgba(233, 69, 96, 0.35); }
.btn-idea { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35); }
.btn-trans { background: linear-gradient(135deg, #00cec9, #0984e3); box-shadow: 0 4px 14px rgba(0, 206, 201, 0.35); }
.btn-donate { background: linear-gradient(135deg, #ff4757, #e84118); box-shadow: 0 4px 14px rgba(255, 71, 87, 0.35); }

.news-help-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

/* ROADMAP STYLES */
.news-roadmap-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.news-roadmap-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.news-roadmap-badge {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    padding: 3px 10px;
    border-radius: 12px;
}

.news-roadmap-title {
    font-size: 1.05rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0;
}

.news-roadmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.news-roadmap-item {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.news-roadmap-item .roadmap-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.news-roadmap-item.done .roadmap-dot { background: #10b981; box-shadow: 0 0 10px #10b981; }
.news-roadmap-item.in-progress .roadmap-dot { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; animation: pulse 1.5s infinite; }
.news-roadmap-item.planned .roadmap-dot { background: #00cec9; box-shadow: 0 0 10px #00cec9; }

.roadmap-status {
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}

.news-roadmap-item.done .roadmap-status { color: #10b981; }
.news-roadmap-item.in-progress .roadmap-status { color: #f59e0b; }
.news-roadmap-item.planned .roadmap-status { color: #00cec9; }

.roadmap-info h4 {
    margin: 0 0 4px 0;
    font-size: 0.82rem;
    color: #fff;
    font-family: 'Minecraft', monospace;
    line-height: 1.35;
}

.roadmap-info p {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
    font-family: 'Minecraft', monospace;
}

.news-section-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.news-section-heading {
    font-size: 1rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.news-empty-section-hint {
    background: rgba(15, 23, 42, 0.6);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}



/* Dedicated Modal Button Variants */
.comm-btn-submit-bug {
    background: linear-gradient(135deg, #e94560, #c0392b) !important;
    border-color: #e94560 !important;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4) !important;
}
.comm-btn-submit-bug:hover {
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.6) !important;
    filter: brightness(1.1) !important;
}
.comm-btn-submit-idea {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border-color: #f59e0b !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
}
.comm-btn-submit-idea:hover {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6) !important;
    filter: brightness(1.1) !important;
}
.comm-btn-submit-trans {
    background: linear-gradient(135deg, #00cec9, #0984e3) !important;
    border-color: #00cec9 !important;
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.4) !important;
}
.comm-btn-submit-trans:hover {
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.6) !important;
    filter: brightness(1.1) !important;
}



/* ==========================================================================
   GLOBAL FONT UNIFICATION - ALL UI ELEMENTS USE MINECRAFT FONT
   ========================================================================== */
button,
input,
select,
textarea,
optgroup,
option,
dialog {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace !important;
}

input::placeholder,
textarea::placeholder {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace !important;
}

/* Ensure Font Awesome icon glyphs are NEVER overridden by the font unification */
i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands,
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}


/* ==========================================================================
   MINI-GAMES SUITE STYLES (Poke DIV Game)
   ========================================================================== */

.mg-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 16px;
    font-family: 'Minecraft', monospace;
}

.mg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mg-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.4);
}

.mg-stats-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mg-stat-item {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mg-stat-label {
    color: rgba(255, 255, 255, 0.55);
}

.mg-stat-val {
    color: #fff;
    font-weight: bold;
}

.mg-stat-val.highlight {
    color: #ff6b81;
}

.mg-filters-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mg-filter-lbl {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 4px;
}

.mg-filter-btn {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s;
}

.mg-filter-btn:hover {
    border-color: #00cec9;
    color: #fff;
}

.mg-filter-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
}

/* TIMER */
.mg-timer-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.mg-timer-fill {
    height: 100%;
    background: #00cec9;
    transition: width 1s linear, background-color 0.3s;
}

/* ARENA / STAGE */
.mg-sil-arena, .mg-match-arena, .mg-evo-arena, .mg-cry-player-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.mg-sil-stage {
    position: relative;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 12px;
    background: radial-gradient(circle at center, rgba(0, 206, 201, 0.15) 0%, rgba(15, 23, 42, 0.4) 70%);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.mg-sil-spotlight {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 69, 96, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.mg-sil-img {
    max-height: 260px;
    max-width: 220px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: filter 0.4s ease, transform 0.4s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}

.mg-sil-img.silhouette {
    filter: brightness(0) drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));
    pointer-events: none;
}

.mg-sil-img.revealed {
    filter: drop-shadow(0 0 20px rgba(0, 206, 201, 0.6));
    animation: silFlash 0.5s ease-out;
    pointer-events: none;
}

@keyframes silFlash {
    0% { filter: brightness(4) drop-shadow(0 0 40px #fff); transform: scale(1.08); }
    100% { filter: drop-shadow(0 0 20px rgba(0, 206, 201, 0.6)); transform: scale(1); }
}

.mg-cry-replay-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 206, 201, 0.25);
    border: 1px solid #00cec9;
    color: #00cec9;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.2s;
}

.mg-cry-replay-btn:hover {
    background: #00cec9;
    color: #000;
    transform: scale(1.1);
}

/* 4 OPTIONS GRID */
.mg-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .mg-options-grid { grid-template-columns: 1fr; }
}

.mg-opt-btn {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
}

.mg-opt-btn:hover:not(:disabled) {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.15);
    transform: translateY(-2px);
}

.mg-opt-key {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.mg-opt-btn.correct {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}

.mg-opt-btn.wrong {
    background: rgba(233, 69, 96, 0.25) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
    opacity: 0.7;
}

/* RESULT BANNER */
.mg-sil-result-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-sil-result-banner.correct {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-sil-result-banner.wrong {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-result-icon {
    font-size: 2rem;
}

.mg-sil-result-banner.correct .mg-result-icon { color: #10b981; }
.mg-sil-result-banner.wrong .mg-result-icon { color: #e94560; }

.mg-result-status {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.mg-sil-result-banner.correct .mg-result-status { color: #10b981; }
.mg-sil-result-banner.wrong .mg-result-status { color: #e94560; }

.mg-result-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 6px;
}

.mg-result-types {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mg-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.65rem;
    border: 1px solid;
}

.mg-type-pill img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.mg-gen-badge {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
}

/* ACTIONS BAR */
.mg-actions-bar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.mg-btn-next {
    background: linear-gradient(135deg, #e94560 0%, #c0392b 100%);
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
}

.mg-btn-next:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

/* GAME 2: CRY QUIZ */
.mg-cry-player-box {
    text-align: center;
    padding: 30px;
    margin-bottom: 24px;
}

.mg-cry-big-btn {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%);
    border: none;
    border-radius: 50px;
    padding: 16px 36px;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.4);
    transition: all 0.25s;
    margin-bottom: 14px;
}

.mg-cry-big-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 206, 201, 0.6);
}

.mg-cry-hint {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.mg-audio-equalizer {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
}

.mg-audio-equalizer span {
    width: 3px;
    background: #fff;
    border-radius: 3px;
    height: 6px;
}

.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(1) { animation: eq 0.6s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(2) { animation: eq 0.4s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(3) { animation: eq 0.7s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(4) { animation: eq 0.5s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(5) { animation: eq 0.8s infinite ease-in-out; }

@keyframes eq {
    0%, 100% { height: 4px; }
    50% { height: 18px; }
}

.mg-cry-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

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

.mg-cry-card {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
}

.mg-cry-card:hover {
    border-color: #00cec9;
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 206, 201, 0.2);
}

.mg-cry-card-img-wrap {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.mg-cry-card-img {
    max-height: 100px;
    max-width: 100px;
    object-fit: contain;
}

.mg-cry-card-name {
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    min-height: 1.4em;
}

.mg-cry-card.correct {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.2) !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4) !important;
}

.mg-cry-card.wrong {
    border-color: #e94560 !important;
    background: rgba(233, 69, 96, 0.2) !important;
    opacity: 0.6;
}

/* GAME 3: POKÉDLE */
.mg-pokedle-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
}

.mg-pokedle-guide {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
}

.mg-pokedle-input-wrap {
    position: relative;
    max-width: 480px;
    margin: 0 auto 16px auto;
}

.mg-pokedle-input {
    width: 100%;
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 0.95rem;
    color: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.mg-pokedle-input:focus {
    border-color: #10b981;
}

.mg-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
}

.mg-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s;
}

.mg-ac-item:hover {
    background: rgba(16, 185, 129, 0.15);
}

.mg-ac-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.mg-ac-name {
    flex: 1;
    color: #fff;
    font-size: 0.85rem;
}

.mg-ac-num {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.mg-pokedle-status {
    text-align: center;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 18px;
}

.mg-pokedle-status span {
    color: #10b981;
    font-weight: bold;
}

.mg-pokedle-table-header {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: 8px;
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 8px;
    padding: 0 4px;
}

.mg-pokedle-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.mg-pokedle-row {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: 8px;
    animation: slideIn 0.3s ease;
}

.mg-pokedle-cell {
    border-radius: 8px;
    padding: 10px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: bold;
    text-align: center;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

.mg-pokedle-cell.poke-cell {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    justify-content: flex-start;
    padding-left: 10px;
    gap: 8px;
}

.mg-cell-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.mg-cell-name {
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mg-pokedle-cell.correct {
    background: #10b981;
    color: #fff;
}

.mg-pokedle-cell.partial {
    background: #f59e0b;
    color: #fff;
}

.mg-pokedle-cell.wrong {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

.mg-pokedle-result-modal {
    text-align: center;
    padding: 24px;
    border-radius: 14px;
    animation: fadeIn 0.4s ease;
}

.mg-pokedle-result-modal.won {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-pokedle-result-modal.lost {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-res-badge {
    font-size: 1.15rem;
    font-weight: bold;
    margin-bottom: 14px;
    letter-spacing: 1px;
}

.mg-pokedle-result-modal.won .mg-res-badge { color: #10b981; }
.mg-pokedle-result-modal.lost .mg-res-badge { color: #e94560; }

.mg-res-target-wrap {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: rgba(15, 23, 42, 0.8);
    padding: 12px 24px;
    border-radius: 12px;
    margin-bottom: 18px;
}

.mg-res-target-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.mg-res-target-name {
    font-size: 1.1rem;
    color: #fff;
    font-weight: bold;
}

.mg-res-target-dex {
    font-size: 0.75rem;
    color: #00cec9;
}

.mg-res-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.mg-btn-share {
    background: #10b981;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.mg-btn-share:hover {
    filter: brightness(1.1);
}

/* GAME 4: TYPE MATCHUP CLASH */
.mg-match-clash-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.mg-match-card {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    flex: 1;
    min-width: 220px;
}

.mg-match-lbl {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.mg-type-big-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 30px;
    border: 2px solid;
    font-size: 1.1rem;
    font-weight: bold;
}

.mg-type-big-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.mg-clash-vs {
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffbe26;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: pulse 1.5s infinite;
}

.mg-match-poke-img {
    height: 110px;
    object-fit: contain;
    margin-bottom: 8px;
}

.mg-match-poke-name {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 6px;
}

.mg-match-question {
    text-align: center;
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 18px;
}

.mg-mult-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

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

.mg-mult-btn {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 14px 8px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.mg-mult-sub {
    font-size: 0.55rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.5);
}

.mg-mult-btn:hover:not(:disabled) {
    border-color: #00cec9;
    transform: translateY(-2px);
}

.mg-mult-btn.correct {
    background: rgba(16, 185, 129, 0.3) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
}

.mg-mult-btn.wrong {
    background: rgba(233, 69, 96, 0.3) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
    opacity: 0.7;
}

.mg-match-expl {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-match-expl.correct {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-match-expl.wrong {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-expl-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.mg-match-expl.correct .mg-expl-head { color: #10b981; }
.mg-match-expl.wrong .mg-expl-head { color: #e94560; }

.mg-expl-ans {
    margin-left: auto;
    font-size: 0.9rem;
    color: #fff;
}

.mg-expl-calc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

/* GAME 5: EVOLUTION METHOD QUIZ */
.mg-evo-flow-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.mg-evo-card {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 18px 24px;
    text-align: center;
    min-width: 140px;
}

.mg-evo-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 8px;
}

.mg-evo-pname {
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
}

.mg-evo-arrow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.mg-evo-arrow-icon {
    font-size: 1.6rem;
    color: #a855f7;
    animation: bounceRight 1.5s infinite;
}

@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

.mg-evo-badge {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid #a855f7;
    color: #a855f7;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
}

.mg-evo-question {
    text-align: center;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 22px;
}

.mg-evo-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .mg-evo-options-grid { grid-template-columns: 1fr; }
}

.mg-evo-opt-btn {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
    text-align: left;
}

.mg-evo-opt-btn:hover:not(:disabled) {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.15);
    transform: translateY(-2px);
}

.mg-evo-opt-btn.correct {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}

.mg-evo-opt-btn.wrong {
    background: rgba(233, 69, 96, 0.25) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
    opacity: 0.7;
}

.mg-evo-expl {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-evo-expl.correct {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-evo-expl.wrong {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-evo-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #fff;
    margin-top: 6px;
}


/* ==========================================================================
   MINI-GAMES SUITE ENHANCEMENTS (Sound Controller, Silhouette Search, Font Awesome)
   ========================================================================== */

.mg-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Sound Controller Widget */
.mg-sound-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 5px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.mg-sound-toggle-btn {
    background: transparent;
    border: none;
    color: #00cec9;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, color 0.2s;
}

.mg-sound-toggle-btn:hover {
    transform: scale(1.15);
    color: #55efc4;
}

.mg-sound-toggle-btn.muted {
    color: #ff7675;
}

.mg-sound-slider-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mg-sound-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 68px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
}

.mg-sound-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00cec9;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.6);
    cursor: pointer;
    transition: transform 0.1s;
}

.mg-sound-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.mg-sound-val-lbl {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    min-width: 32px;
    text-align: right;
    font-family: 'Minecraft', monospace;
}

/* Fire and icons */
.mg-stat-fire {
    color: #ff6b81;
    margin-left: 2px;
    animation: flamePulse 1.8s infinite;
}

@keyframes flamePulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #ff6b81); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 6px #ff4757); }
}

/* Silhouette Search & Two-Phase UI */
.mg-sil-phase-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.82rem;
    padding: 8px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    flex-wrap: wrap;
    transition: all 0.3s ease;
}

.mg-sil-phase-hint.phase-1 {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.08);
}

.mg-sil-phase-hint.phase-2 {
    border-color: rgba(0, 206, 201, 0.4);
    background: rgba(0, 206, 201, 0.08);
}

.mg-sil-phase-hint b {
    color: #f59e0b;
    font-size: 0.95rem;
}

.mg-sil-bonus-tag {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #f59e0b;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mg-res-bonus-callout {
    margin-top: 8px;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #f59e0b;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: bounce 0.6s ease;
}

.mg-sil-search-wrap {
    position: relative;
    max-width: 520px;
    margin: 0 auto 20px auto;
    width: 100%;
}

.mg-sil-search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, 0.85);
    border: 2px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    padding: 0 16px;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.mg-sil-search-box:focus-within {
    border-color: #00cec9;
    box-shadow: 0 0 18px rgba(0, 206, 201, 0.35);
}

.mg-sil-search-box.shake {
    animation: shakeBox 0.4s ease;
    border-color: #e94560 !important;
    box-shadow: 0 0 18px rgba(233, 69, 96, 0.4) !important;
}

@keyframes shakeBox {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.mg-sil-search-icon {
    color: #00cec9;
    font-size: 1.05rem;
}

.mg-sil-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    padding: 13px 0;
}

.mg-sil-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Minecraft', monospace;
}

/* Animations */
.fadeInUp {
    animation: fadeInUp 0.35s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Poke-wordle arrows */
.mg-poke-arrow {
    font-size: 0.75rem;
    margin-left: 3px;
}

.mg-poke-arrow.up {
    color: #00cec9;
}

.mg-poke-arrow.down {
    color: #ff7675;
}

/* Matchup Clash calculation elements */
.mg-calc-part {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 4px 8px;
}

.mg-calc-times {
    opacity: 0.6;
    font-size: 0.7rem;
    margin: 0 4px;
}

.mg-calc-equals {
    opacity: 0.8;
    font-weight: bold;
    font-size: 1rem;
    margin: 0 6px;
}

.mg-calc-total {
    color: #00cec9;
    font-weight: bold;
    font-size: 1.1rem;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid #00cec9;
    border-radius: 6px;
    padding: 3px 8px;
}


/* ==========================================================================
   SILHOUETTE SEARCH MAXIMUM OVERLAY (z-index & floating layer)
   ========================================================================== */

.mg-sil-search-wrap {
    position: relative !important;
    max-width: 520px !important;
    margin: 0 auto 20px auto !important;
    width: 100% !important;
    z-index: 999999 !important;
}

.mg-sil-search-box {
    position: relative !important;
    z-index: 1000000 !important;
    background: rgba(15, 23, 42, 0.98) !important;
    border: 2px solid rgba(0, 206, 201, 0.6) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.75), 0 0 15px rgba(0, 206, 201, 0.2) !important;
}

.mg-sil-search-box:focus-within {
    border-color: #00cec9 !important;
    box-shadow: 0 0 25px rgba(0, 206, 201, 0.6), 0 10px 35px rgba(0, 0, 0, 0.9) !important;
}

.mg-sil-search-wrap .mg-autocomplete-dropdown,
#silDropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #0b132b !important;
    border: 2px solid #00cec9 !important;
    border-radius: 12px !important;
    max-height: 290px !important;
    overflow-y: auto !important;
    z-index: 9999999 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.98), 0 0 35px rgba(0, 206, 201, 0.45) !important;
}

.mg-options-grid {
    position: relative !important;
    z-index: 1 !important;
}

.mg-sil-result-banner {
    position: relative !important;
    z-index: 5 !important;
}

.mg-sil-stage {
    position: relative !important;
    z-index: 2 !important;
}

.mg-pokedle-input-wrap {
    position: relative !important;
    z-index: 999999 !important;
}

#pokedleDropdown {
    position: absolute !important;
    z-index: 9999999 !important;
    background: #0b132b !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.98), 0 0 35px rgba(16, 185, 129, 0.45) !important;
}


/* ==========================================================================
   GAME 6: SHINY HUNT STYLES
   ========================================================================== */
.mg-shiny-settings-card {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px 22px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.mg-shiny-setting-col {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mg-shiny-setting-col.actions-col {
    flex: 0 1 auto;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
}

.mg-shiny-setting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
}

.mg-shiny-setting-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mg-shiny-setting-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    color: #00cec9;
}

.mg-shiny-setting-val.highlight {
    color: #f59e0b;
}

/* Sliders */
.mg-shiny-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
}

.mg-shiny-range:hover {
    background: rgba(255, 255, 255, 0.25);
}

.mg-shiny-range.total::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.8);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mg-shiny-range.total::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px rgba(0, 206, 201, 1);
}

.mg-shiny-range.shiny::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mg-shiny-range.shiny::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px rgba(245, 158, 11, 1);
}

/* Preset Buttons */
.mg-shiny-presets {
    display: flex;
    gap: 6px;
}

.mg-shiny-preset-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.mg-shiny-preset-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.mg-shiny-preset-btn.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.mg-shiny-setting-col:nth-child(2) .mg-shiny-preset-btn.active {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

/* Mode toggle */
.mg-shiny-mode-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 4px;
}

.mg-shiny-mode-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}

.mg-shiny-mode-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.mg-shiny-mode-btn.active {
    background: #00cec9;
    color: #0b132b;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.5);
}

/* Start Button */
.mg-btn-start-hunt {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 9px 18px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.mg-btn-start-hunt:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
    background: linear-gradient(135deg, #34d399, #10b981);
}

.mg-btn-start-hunt:active {
    transform: translateY(1px);
}

/* Arena & HUD */
.mg-shiny-arena {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mg-shiny-hud {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: 'Minecraft', monospace;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.mg-hud-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.mg-hud-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    font-weight: bold;
    color: #00cec9;
}

.mg-hud-item.shiny-counter .mg-hud-val {
    color: #f59e0b;
}

.mg-hud-item.mistakes .mg-hud-val {
    color: #ff7675;
}

.mg-btn-reshuffle {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mg-btn-reshuffle:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
    transform: rotate(90deg);
}

/* Grid */
.mg-shiny-grid {
    --shiny-card-size: 90px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--shiny-card-size, 90px), 100%), 1fr));
    gap: 12px;
    padding: 18px;
    background: rgba(11, 19, 43, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    min-height: 250px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {
    .mg-shiny-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(var(--shiny-card-size, 72px), 100%), 1fr));
        gap: 8px;
        padding: 12px;
    }
}

/* Card */
.mg-shiny-card {
    position: relative;
    aspect-ratio: 1 / 1;
    background: rgba(26, 38, 57, 0.65);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    padding: 8px;
    overflow: hidden;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.mg-shiny-card:hover {
    transform: translateY(-4px) scale(1.05);
    background: rgba(36, 52, 78, 0.85);
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 14px rgba(245, 158, 11, 0.2);
}

.mg-shiny-card:active {
    transform: scale(0.95);
}

.mg-shiny-card-img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
    transition: transform 0.2s;
    pointer-events: none;
}

.mg-shiny-card:hover .mg-shiny-card-img {
    transform: scale(1.08);
}

/* Found Shiny Card State */
.mg-shiny-card.found-shiny {
    border-color: #f59e0b !important;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, rgba(20, 25, 42, 0.95) 100%) !important;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.65), inset 0 0 16px rgba(245, 158, 11, 0.35) !important;
    cursor: default !important;
    pointer-events: none !important;
    animation: shinyFoundGlow 2s infinite alternate ease-in-out;
}

@keyframes shinyFoundGlow {
    from { box-shadow: 0 0 20px rgba(245, 158, 11, 0.6), inset 0 0 12px rgba(245, 158, 11, 0.3); }
    to { box-shadow: 0 0 32px rgba(255, 215, 0, 0.85), inset 0 0 20px rgba(255, 215, 0, 0.5); }
}

.mg-shiny-sparkle-tag {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    color: #0b132b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.9);
    animation: shinyStarPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes shinyStarPop {
    0% { transform: scale(0) rotate(-60deg); }
    70% { transform: scale(1.3) rotate(20deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Shake Red Animation for mistakes */
.mg-shiny-card.shake-red {
    animation: shakeRed 0.45s cubic-bezier(.36,.07,.19,.97) both;
    border-color: #ff4757 !important;
    box-shadow: 0 0 18px rgba(255, 71, 87, 0.75) !important;
    background: rgba(255, 71, 87, 0.15) !important;
}

@keyframes shakeRed {
    10%, 90% { transform: translate3d(-3px, 0, 0); }
    20%, 80% { transform: translate3d(5px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* Victory Overlay Modal */
.mg-shiny-victory-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-victory-content {
    position: relative;
    background: #0f172a;
    border: 2px solid #f59e0b;
    border-radius: 20px;
    padding: 34px 38px;
    text-align: center;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 0 45px rgba(245, 158, 11, 0.45), 0 20px 40px rgba(0,0,0,0.8);
    animation: modalPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'Minecraft', monospace;
}

.mg-vic-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s;
}

.mg-vic-close:hover {
    background: rgba(255, 71, 87, 0.3);
    color: #ff7675;
}

.mg-victory-badge {
    font-size: 1.45rem;
    color: #ffd700;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.mg-victory-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}

.mg-vic-stat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mg-vic-stat .lbl {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.mg-vic-stat .val {
    font-size: 1.15rem;
    color: #fff;
    font-weight: bold;
}

.mg-record-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eab308;
    color: #0b132b;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
}

.mg-victory-actions {
    display: flex;
    justify-content: center;
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* Account badge and reset button in minigames */
.mg-stats-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mg-account-badge-wrap {
    display: inline-flex;
    align-items: center;
}

.mg-account-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
    user-select: none;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mg-account-badge.logged-in {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.mg-account-badge.guest {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.65);
}

.mg-stat-reset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 4px 6px;
    border-radius: 6px;
    margin-left: 2px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mg-stat-reset-btn:hover {
    background: rgba(255, 118, 117, 0.2);
    border-color: #ff7675;
    color: #ff7675;
    transform: rotate(-45deg);
}


/* ==========================================================================
   SHINY HUNT: MISTAKE LIMIT & FAIL STYLES
   ========================================================================== */
.mg-shiny-range.mistakes-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mg-shiny-range.mistakes-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px rgba(239, 68, 68, 1);
}

.mg-shiny-range.mistakes-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
    cursor: pointer;
    border: none;
}

.mg-shiny-setting-val.highlight-red {
    color: #ef4444;
}

.mg-shiny-mistake-presets .mg-shiny-preset-btn.active {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3) !important;
}

.mg-victory-content.fail {
    border-color: #ef4444 !important;
    box-shadow: 0 0 45px rgba(239, 68, 68, 0.45), 0 20px 40px rgba(0, 0, 0, 0.8) !important;
}

.mg-shiny-card.missed-shiny {
    border-color: #ef4444 !important;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, rgba(20, 25, 42, 0.95) 100%) !important;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.65), inset 0 0 16px rgba(239, 68, 68, 0.35) !important;
    cursor: default !important;
    pointer-events: none !important;
    animation: shinyMissedGlow 2s infinite alternate ease-in-out;
}

@keyframes shinyMissedGlow {
    from { box-shadow: 0 0 20px rgba(239, 68, 68, 0.6), inset 0 0 12px rgba(239, 68, 68, 0.3); }
    to { box-shadow: 0 0 32px rgba(248, 113, 113, 0.85), inset 0 0 20px rgba(248, 113, 113, 0.5); }
}

.mg-shiny-setting-col.actions-col {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mg-shiny-setting-col.actions-col .mg-btn-start-hunt {
    height: 48px !important;
    padding: 0 24px !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
}


/* ==========================================================================
   SILHOUETTE SEARCH MAXIMUM OVERLAY & BOUNDARY ESCAPE
   ========================================================================== */
#tabSilhouette,
.tab-content#tabSilhouette,
.games-mode-wrap,
.games-mode-wrap > .tab-content#tabSilhouette,
.mg-sil-arena,
.mg-container {
    overflow: visible !important;
}

.mg-sil-stage {
    height: 200px !important;
    margin-bottom: 12px !important;
}

.mg-sil-img {
    max-height: 175px !important;
    max-width: 195px !important;
}

.mg-sil-phase-hint {
    margin-bottom: 10px !important;
}

.mg-sil-search-wrap {
    position: relative !important;
    z-index: 9999999 !important;
}

.mg-sil-search-wrap .mg-autocomplete-dropdown,
#silDropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    background: #0b132b !important;
    border: 2px solid #00cec9 !important;
    border-radius: 12px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    z-index: 99999999 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.98), 0 0 40px rgba(0, 206, 201, 0.5) !important;
}

/* Avatar pokemon search sprite / shiny toggles */
.avatar-style-btn:hover {
    filter: brightness(1.25);
}


/* Avatar action buttons & icons alignment */
#avatarCropBtn,
#avatarSaveBtn,
.avatar-action-btn {
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
}

#avatarCropBtn i,
#avatarSaveBtn i,
.avatar-action-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.85em;
    position: relative;
    top: 1px;
}


/* Community Poll Voters & Friends display */
.comm-admin-btn.voters {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.comm-admin-btn.voters:hover {
    background: rgba(245, 158, 11, 0.28);
    border-color: #f59e0b;
}

.comm-poll-voters-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
}

.poll-voter-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    color: rgba(245, 158, 11, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
    cursor: default;
}

.poll-voter-label.friend {
    color: #00cec9;
}

.poll-voters-chips {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.poll-voter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 2px 7px 2px 3px;
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.15s ease;
}

.poll-voter-chip.admin-chip {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #f59e0b;
    cursor: pointer;
}

.poll-voter-chip.admin-chip:hover {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
}

.poll-voter-chip.friend-chip {
    background: rgba(0, 206, 201, 0.12);
    border-color: rgba(0, 206, 201, 0.35);
    color: #00cec9;
}

.poll-voter-chip.friend-chip:hover {
    background: rgba(0, 206, 201, 0.22);
    border-color: #00cec9;
}

.poll-voter-chip.more {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.55rem;
}

.poll-voter-avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.poll-voter-avatar.placeholder {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.5rem;
}

.poll-voter-name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   ADMIN NAME IMAGE SELECTOR MODAL
   ============================================ */
.admin-ni-tab-btn {
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s ease;
    line-height: 1;
}
.admin-ni-tab-btn:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.4);
    color: #fff;
}
.admin-ni-tab-btn.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.admin-ni-style-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}
.admin-ni-style-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.admin-ni-style-btn.active {
    background: rgba(0, 206, 201, 0.3);
    color: #00cec9;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.3);
}

.admin-ni-card {
    background: rgba(15, 52, 96, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
    position: relative;
    user-select: none;
    min-height: 64px;
    box-sizing: border-box;
}
.admin-ni-card:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.45);
    transform: translateY(-2px);
}
.admin-ni-card.selected {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.45);
}
.admin-ni-card img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    margin-bottom: 4px;
    pointer-events: none;
}
.admin-ni-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0 2px;
}
.admin-ni-card-sub {
    font-family: 'Minecraft', monospace;
    font-size: 0.46rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1px;
}

/* ============================================
   ADMIN BRAND ONLINE COUNTER
   ============================================ */
.admin-header-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    margin-left: 10px;
    padding: 3px 9px 3px 7px;
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.45);
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: normal;
    color: #2ecc71;
    text-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
    letter-spacing: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1;
}

.admin-header-online-badge:hover {
    background: rgba(46, 204, 113, 0.22);
    border-color: #2ecc71;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.4);
    transform: translateY(-1px);
}

.admin-online-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 6px #2ecc71;
    display: inline-block;
    animation: adminOnlinePulse 2s infinite ease-in-out;
    flex-shrink: 0;
}

@keyframes adminOnlinePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.35);
        opacity: 0.65;
    }
}

.admin-online-text {
    font-size: 0.55rem;
    opacity: 0.85;
}


/* ============================================
   ADMIN ACCOUNTS: MASKED FIELDS & CONTROLS
   ============================================ */
.admin-masked-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s ease;
    user-select: none;
    vertical-align: middle;
}

.admin-masked-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(233, 69, 96, 0.45);
    color: #ffffff;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.2);
}

.admin-masked-pill .admin-mask-text {
    letter-spacing: 1.5px;
    transition: color 0.2s;
}

.admin-masked-pill.is-revealed .admin-mask-text {
    letter-spacing: normal;
    color: #00cec9;
}

.admin-masked-pill-pass.is-revealed .admin-mask-text {
    color: #e94560;
}

.admin-masked-pill .admin-mask-eye {
    font-size: 0.5rem;
    margin-left: 2px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.admin-masked-pill:hover .admin-mask-eye {
    opacity: 1;
}

.admin-key-btn {
    background: rgba(233, 69, 96, 0.1);
    border: 1px solid rgba(233, 69, 96, 0.3);
    color: #e94560;
    font-size: 0.5rem;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.admin-key-btn:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
}


.db-profile-img.is-gen5 {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.db-profile-img.is-gen5:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.08));
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.85));
}

.db-scale-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}
.db-scale-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.4);
}


/* EN Toggle Button for Community Posts */
.comm-admin-btn.en-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1.2;
}
.comm-admin-btn.en-toggle.active {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
}
.comm-admin-btn.en-toggle.active:hover {
    background: rgba(16, 185, 129, 0.35);
    border-color: #34d399;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}
.comm-admin-btn.en-toggle.inactive {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.45);
}
.comm-admin-btn.en-toggle.inactive:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    transform: translateY(-1px);
}

.news-admin-preview-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
    margin-bottom: 12px;
    user-select: none;
}
.news-admin-preview-pill:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #ffffff;
}
.news-admin-preview-pill.active {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}


/* ==========================================================================
   Admin News & Changelog Publisher Studio (Redesigned 2-Column Suite)
   ========================================================================== */

.news-publisher-card {
    max-width: 1220px !important;
    width: 95vw !important;
    height: 90vh !important;
    max-height: 920px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0d1322 !important;
    border: 1px solid rgba(0, 206, 201, 0.45) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 206, 201, 0.12) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

.news-publisher-header {
    padding: 12px 20px !important;
    background: rgba(15, 23, 42, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.news-publisher-body {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 18px !important;
    padding: 16px 20px !important;
    overflow: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
}

@media (max-width: 980px) {
    .news-publisher-card {
        height: auto !important;
        max-height: 94vh !important;
    }
    .news-publisher-body {
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
    }
}

.news-publisher-form-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding-right: 12px;
    min-width: 0;
}

.news-publisher-form-col::-webkit-scrollbar {
    width: 6px;
}
.news-publisher-form-col::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
.news-publisher-form-col::-webkit-scrollbar-thumb {
    background: rgba(0, 206, 201, 0.3);
    border-radius: 3px;
}
.news-publisher-form-col::-webkit-scrollbar-thumb:hover {
    background: #00cec9;
}

.news-publisher-preview-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.news-form-section-box {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-section-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    font-weight: 700;
    color: #00cec9;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.news-form-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
}
@media (max-width: 768px) {
    .news-form-grid-4 {
        grid-template-columns: 1fr 1fr !important;
    }
}

.news-form-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
@media (max-width: 600px) {
    .news-form-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

.news-tag-presets-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.news-tag-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.news-tag-chip:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #ffffff;
    transform: translateY(-1px);
}

.news-color-row-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-color-swatches {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.news-swatch-btn {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.news-swatch-btn:hover {
    transform: scale(1.2);
}
.news-swatch-btn.active {
    border-color: #ffffff;
    box-shadow: 0 0 8px currentColor;
    transform: scale(1.15);
}

.news-toggle-box {
    background: rgba(0, 206, 201, 0.04);
    border: 1px solid rgba(0, 206, 201, 0.15);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
}

.news-switch-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    user-select: none !important;
    margin: 0 !important;
    width: 100%;
}
.news-switch-label input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none;
}
.news-switch-slider {
    position: relative;
    width: 38px;
    height: 22px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    transition: all 0.25s ease;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.news-switch-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.news-switch-label input:checked + .news-switch-slider {
    background: #10b981;
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}
.news-switch-label input:checked + .news-switch-slider::before {
    transform: translateX(16px);
}

.news-en-inputs-box {
    background: rgba(0, 206, 201, 0.03);
    border: 1px solid rgba(0, 206, 201, 0.2);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-highlights-builder-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-hl-builder-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s ease;
}
.news-hl-builder-card:hover {
    border-color: rgba(0, 206, 201, 0.35);
}

.news-hl-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.72rem;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.15s ease;
}
.news-hl-icon-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #00cec9;
}

.news-hl-del-btn {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.news-hl-del-btn:hover {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* EN disabled states inside builder */
.news-publisher-card.en-disabled .news-hl-en-col {
    display: none !important;
}
.news-publisher-card.en-disabled .news-hl-grid-responsive {
    grid-template-columns: 1fr !important;
}

.news-preview-wrapper {
    background: rgba(10, 15, 30, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.news-preview-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.news-preview-mode-switch {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    padding: 2px;
    gap: 2px;
}

.news-preview-mode-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.news-preview-mode-btn.active {
    background: #00cec9;
    color: #000;
    font-weight: bold;
}

.news-live-preview-card-wrap {
    overflow-y: auto;
    flex: 1;
    padding-right: 4px;
}

.news-live-preview-card-wrap::-webkit-scrollbar {
    width: 5px;
}
.news-live-preview-card-wrap::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
.news-live-preview-card-wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}


/* ==========================================================================
   PROCEDURAL TEAM GENERATOR STUDIO REDESIGN (2-COLUMN RESPONSIVE SUITE)
   ========================================================================== */

.tb-gen-modal-content {
    max-width: 1420px !important;
    width: 96vw !important;
    height: 92vh !important;
    max-height: 94vh !important;
    background: linear-gradient(155deg, #090e1a 0%, #111a2e 50%, #0d1527 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(16, 185, 129, 0.15) !important;
    overflow: hidden !important;
    color: #fff !important;
    box-sizing: border-box !important;
}

#tbTeamGenModalBody.tb-gen-studio-body,
#tbTeamGenModalBody,
.tb-gen-studio-body {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: 440px 1fr !important;
    gap: 18px !important;
    padding: 16px 20px !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 1100px) {
    .tb-gen-studio-body {
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Left Column: Control Panel */
.tb-gen-control-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    padding-right: 10px !important;
    min-height: 0 !important;
}

.tb-gen-control-panel::-webkit-scrollbar {
    width: 6px !important;
}
.tb-gen-control-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 4px !important;
}
.tb-gen-control-panel::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.4) !important;
    border-radius: 4px !important;
}
.tb-gen-control-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7) !important;
}

/* Right Column: Live Team Panel */
.tb-gen-team-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
    min-height: 0 !important;
}

.tb-gen-team-panel::-webkit-scrollbar {
    width: 6px !important;
}
.tb-gen-team-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 4px !important;
}
.tb-gen-team-panel::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.4) !important;
    border-radius: 4px !important;
}
.tb-gen-team-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7) !important;
}

/* Accordion for Advanced Settings */
.tb-gen-accordion-toggle {
    background: rgba(0, 206, 201, 0.08) !important;
    border: 1px solid rgba(0, 206, 201, 0.35) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    color: #00cec9 !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.82rem !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
}

.tb-gen-accordion-toggle:hover {
    background: rgba(0, 206, 201, 0.16) !important;
    border-color: #00cec9 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

.tb-gen-acc-icon {
    font-size: 0.8rem !important;
    color: #00cec9 !important;
    transition: transform 0.2s ease !important;
}

.tb-gen-accordion-content {
    display: none;
    flex-direction: column !important;
    gap: 12px !important;
    animation: tbFadeIn 0.2s ease !important;
}

/* Compact 2x2 Format Grid */
.tb-gen-format-grid-compact {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

/* 6 Pokemon Cards Grid in Right Column */
.tb-gen-squad-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 12px !important;
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(9, 132, 227, 0.12) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}


/* Pokemon Card Header & Action Buttons Fix (No Overflow) */
.tb-gen-poke-card {
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.tb-gen-poke-header {
    overflow: hidden !important;
    min-width: 0 !important;
}

.tb-gen-pin-btn {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
}

.tb-gen-pin-btn:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}

.tb-gen-pin-btn.pinned {
    background: rgba(245, 158, 11, 0.3) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.35) !important;
}

.tb-gen-reroll-btn {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
}

.tb-gen-reroll-btn:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    transform: rotate(90deg) !important;
}

.tb-gen-bring-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.62rem !important;
    font-family: 'Minecraft', monospace !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
}


/* Section Box Flex-Shrink & Sizing Fix (Never Collapse or Squish Blocks) */
.tb-gen-control-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.tb-gen-control-panel > * {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.tb-gen-section-box {
    flex-shrink: 0 !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.tb-gen-accordion-box {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tb-gen-accordion-content {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    display: none;
    flex-direction: column !important;
    gap: 12px !important;
}

.tb-gen-accordion-content > * {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tb-gen-section-title {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.tb-gen-section-title > span {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.tb-gen-preset-btn,
.tb-gen-chip-btn {
    box-sizing: border-box !important;
    max-width: 100% !important;
    white-space: nowrap !important;
}

.tb-gen-gimmick-toggle,
.tb-gen-arch-btn {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.tb-gen-format-grid,
.tb-gen-format-grid-compact,
.tb-gen-arch-grid {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tb-gen-format-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.tb-gen-format-card-title,
.tb-gen-format-card-desc {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    min-width: 0 !important;
}


/* ==========================================================================
   UNIVERSAL ZERO-OVERFLOW SHIELD & SAFE MOBILE RESPONSIVE SUITE
   Guarantees zero horizontal blowout, safe modals, and responsive layout
   without interfering with pointer events or click handling.
   ========================================================================== */

/* 1. Global Viewport & Box-Sizing Hard Defense */
html {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    -webkit-text-size-adjust: 100% !important;
}

body {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    position: relative !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

/* Universal Media Containment */
img, video, canvas, svg, iframe {
    max-width: 100% !important;
    height: auto;
}

/* Universal Word-Break & Overflow Wrap for all text nodes */
p, span, h1, h2, h3, h4, h5, h6, label, a, button, div, td, th {
    overflow-wrap: break-word;
}

/* Ensure empty mount containers never block pointer events */
#dbDetailModalContainer {
    pointer-events: none !important;
}
#dbDetailModalContainer > * {
    pointer-events: auto !important;
}

/* 2. Universal Table & Data Grid Safe Container */
.db-table-wrapper,
.db-table-container,
.table-responsive,
.table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.db-table,
.db-type-matrix-table,
.db-nature-matrix-table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 3. Safe Modal Content Responsive Sizing (Only scale cards, NEVER touch overlays) */
@media (max-width: 768px) {
    body {
        padding: 8px 6px !important;
    }

    .modal-content,
    .modal-large,
    .tb-modal-content,
    .tb-gen-modal-content,
    .calc-modal-content,
    .news-publisher-modal,
    .news-viewer-modal-card,
    .hosting-donate-card,
    .confirm-modal-content,
    .completion-modal-content {
        max-width: 96vw !important;
        box-sizing: border-box !important;
    }

    .modal-two-columns,
    .news-publisher-body,
    .news-hl-grid-responsive {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    .modal-filters,
    .modal-results {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* 4. Team Generator Studio Mobile Optimizations */
@media (max-width: 1100px) {
    .tb-gen-studio-body {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
    }
    .tb-gen-control-panel {
        max-width: 100% !important;
        width: 100% !important;
    }
    .tb-gen-team-panel {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .tb-gen-modal-content {
        height: 96vh !important;
        max-height: 96vh !important;
        width: 98vw !important;
        padding: 8px 10px !important;
    }
    .tb-gen-modal-header {
        padding: 8px 10px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .tb-gen-modal-title {
        font-size: 0.92rem !important;
    }
    .tb-gen-modal-subtitle {
        display: none !important;
    }
    .tb-gen-modal-footer {
        padding: 8px 10px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .tb-gen-modal-footer .tb-btn {
        font-size: 0.72rem !important;
        padding: 6px 12px !important;
    }
    .tb-gen-studio-body {
        padding: 6px 2px !important;
        gap: 12px !important;
    }
    .tb-gen-squad-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .tb-gen-active-squad-box {
        padding: 10px 12px !important;
    }
    .tb-gen-format-grid-compact {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .tb-gen-format-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .tb-gen-poke-card {
        padding: 10px !important;
    }
}

/* 5. Teambuilder Studio Mobile Optimizations */
@media (max-width: 768px) {
    .tb-slots-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .tb-slot-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .tb-hero-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .tb-hero-title-wrap {
        width: 100% !important;
    }
    .tb-hero-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .tb-hero-actions .tb-btn {
        flex: 1 1 auto !important;
        text-align: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        padding: 6px 10px !important;
    }
}

/* 6. Floating UI Shield (Notifications, Social, Lang) */
@media (max-width: 768px) {
    #notificationContainer {
        pointer-events: none !important;
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        max-width: calc(100vw - 20px) !important;
        box-sizing: border-box !important;
    }
    .notification {
        pointer-events: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .social-block {
        top: 10px !important;
        right: 10px !important;
    }
    .social-toggle {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    .lang-switch-floating {
        top: 10px !important;
        right: 52px !important;
    }
    .lang-switch-floating .lang-btn {
        font-size: 0.58rem !important;
        padding: 7px 9px !important;
    }
}

/* 7. Extra Small Phones (iPhone SE, Galaxy Fold, screens <= 400px) */
@media (max-width: 400px) {
    body {
        padding: 4px 2px !important;
    }
    .tb-gen-format-grid-compact {
        grid-template-columns: 1fr !important;
    }
    .tb-gen-arch-btn {
        font-size: 0.65rem !important;
        padding: 5px 8px !important;
    }
}


/* ==========================================================================
   TEAMBUILDER GENERATOR: MONOTYPE, ROLL HISTORY & POSTER ENHANCEMENTS
   ========================================================================== */

/* Monotype Grid & Chips */
.tb-gen-monotype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 6px;
    margin-top: 6px;
    box-sizing: border-box;
    max-width: 100%;
}

.tb-gen-monotype-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-monotype-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.tb-gen-monotype-chip.active {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.25) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

/* Roll History Controls */
.tb-gen-history-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.35);
    padding: 3px 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
    max-width: 100%;
}

.tb-gen-history-btn {
    background: transparent;
    border: none;
    color: #fff;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tb-gen-history-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    color: #10b981;
}

.tb-gen-history-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.tb-gen-history-counter {
    font-family: 'Minecraft', monospace, sans-serif;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    padding: 0 4px;
    user-select: none;
    white-space: nowrap;
}

/* Poster Modal & Preview */
.tb-poster-modal-content {
    max-width: 860px;
    width: 95%;
    background: #0d1322;
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(168, 85, 247, 0.2);
    border-radius: 16px;
    padding: 20px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    position: relative;
    animation: tbFadeIn 0.25s ease;
    box-sizing: border-box;
    max-height: 92vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tb-poster-preview-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #070a12;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    min-height: 220px;
    overflow: hidden;
}

.tb-poster-preview-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
    display: block;
}

.tb-poster-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 100%;
}

@media (max-width: 768px) {
    .tb-gen-monotype-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 4px;
    }
    .tb-gen-monotype-chip {
        font-size: 0.65rem;
        padding: 5px 6px;
    }
    .tb-poster-modal-content {
        padding: 14px;
        width: 98%;
        max-height: 96vh;
    }
    .tb-poster-actions {
        justify-content: stretch;
    }
    .tb-poster-actions .tb-btn {
        flex: 1 1 100%;
        text-align: center;
        justify-content: center;
    }
}


/* ==========================================================================
   Pokemon Species Biology, Physical Traits & Breeding Styles
   ========================================================================== */

/* Род / Категория покемона в заголовке профиля */
.db-profile-genus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffd166;
    background: rgba(255, 209, 102, 0.12);
    border: 1px solid rgba(255, 209, 102, 0.32);
    padding: 3px 10px;
    border-radius: 12px;
    margin: 4px 0 2px;
    box-shadow: 0 2px 8px rgba(255, 209, 102, 0.15);
    letter-spacing: 0.5px;
    width: fit-content;
}
.db-profile-genus i {
    font-size: 0.68rem;
    opacity: 0.85;
}

/* Физические параметры (Рост, Вес, Пол) в левой карточке */
.db-profile-physical-card {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.db-profile-physical-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.db-profile-physical-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: left;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.db-profile-physical-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}
.db-phys-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.db-phys-label i {
    color: #e94560;
    font-size: 0.7rem;
}
.db-phys-val {
    font-size: 0.88rem;
    color: #ffffff;
    font-weight: 500;
}
.db-phys-val b {
    color: #ffffff;
    font-weight: 700;
}
.db-phys-unit {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-phys-sub {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 2px;
}

/* Пол покемона (интерактивная шкала) */
.db-profile-gender-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.db-gender-genderless {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.74rem;
    font-family: 'Minecraft', monospace;
    padding: 6px 12px;
    border-radius: 8px;
    width: fit-content;
}
.db-gender-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.db-gender-bar {
    height: 8px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.db-gender-bar-m {
    background: linear-gradient(90deg, #38bdf8, #2563eb);
    height: 100%;
    transition: width 0.3s ease;
}
.db-gender-bar-f {
    background: linear-gradient(90deg, #f472b6, #e11d48);
    height: 100%;
    transition: width 0.3s ease;
}
.db-gender-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    padding: 0 2px;
}
.db-gender-label.male {
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 4px;
}
.db-gender-label.female {
    color: #f472b6;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Детальная секция биологии и разведения (Правая карточка) */
.db-bio-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.db-bio-detail-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-bio-detail-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.db-bio-detail-head {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-bio-detail-head i {
    color: #e94560;
    font-size: 0.72rem;
}
.db-bio-detail-value {
    font-size: 0.85rem;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}
.db-bio-detail-value b {
    color: #ffffff;
    font-weight: 700;
}
.db-bio-unit {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
}
.db-bio-sub-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    display: inline-flex;
    align-items: center;
}
.db-bio-egg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.db-bio-egg-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.35);
    color: #d8b4fe;
    padding: 3px 8px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 6px rgba(168, 85, 247, 0.15);
    transition: all 0.2s;
}
.db-bio-egg-chip:hover {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}
.db-bio-egg-chip i {
    font-size: 0.55rem;
    opacity: 0.8;
}
.db-bio-ev-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    background: rgba(233, 69, 96, 0.16);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #ff6b81;
    padding: 3px 9px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.2);
}
.db-bio-ev-badge i {
    font-size: 0.65rem;
}
.db-bio-exp-note {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 3px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
}
.db-bio-exp-note b {
    color: #f59e0b;
}
.db-bio-exp-note i {
    color: #f59e0b;
    font-size: 0.65rem;
}
.db-bio-dash {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .db-bio-details-grid {
        grid-template-columns: 1fr;
    }
    .db-profile-physical-row {
        grid-template-columns: 1fr 1fr;
    }
}


/* ========================================================================== */
/* NEWS & COMMUNITY: MUTED PLAYERS SYSTEM */
/* ========================================================================== */

.news-subtabs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.news-subtabs-nav {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.news-subtabs-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-manage-muted-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    padding: 9px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.news-manage-muted-btn:hover {
    background: rgba(233, 69, 96, 0.18);
    border-color: rgba(233, 69, 96, 0.5);
    color: #fff;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.25);
    transform: translateY(-1px);
}

.news-manage-muted-btn.has-muted {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.45);
    color: #fff;
}

.news-muted-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e94560;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 18px;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

/* Card Author Mute Button */
.comm-user-mute-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 8px;
    vertical-align: middle;
}

.comm-user-mute-btn:hover {
    background: rgba(233, 69, 96, 0.22);
    border-color: rgba(233, 69, 96, 0.6);
    color: #ff6b81;
    transform: translateY(-1px);
}

.comm-user-mute-btn.muted {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #ff6b81;
}

.comm-user-mute-btn i {
    font-size: 0.68rem;
}

/* Feed Banner for Hidden Muted Posts */
.news-muted-feed-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(233, 69, 96, 0.08);
    border: 1px dashed rgba(233, 69, 96, 0.35);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    animation: fadeIn 0.25s ease-out;
}

.news-muted-feed-banner i.fa-volume-xmark {
    color: #e94560;
    font-size: 0.9rem;
}

.news-muted-feed-banner button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.5);
    color: #ff8599;
    border-radius: 8px;
    padding: 4px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-muted-feed-banner button:hover {
    background: #e94560;
    color: #fff;
}

/* Modal for Muted Users */
.news-muted-modal-card {
    background: #121829 !important;
    border: 1px solid rgba(233, 69, 96, 0.3) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 24px rgba(233, 69, 96, 0.15) !important;
}

.news-muted-modal-desc {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

.news-muted-add-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.news-muted-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.news-muted-input-wrap i {
    position: absolute;
    left: 14px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.news-muted-input-wrap input {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 14px 10px 38px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    outline: none;
    transition: all 0.2s ease;
}

.news-muted-input-wrap input:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
}

.news-muted-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #e94560;
    border: none;
    color: #fff;
    border-radius: 10px;
    padding: 0 18px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease;
}

.news-muted-add-btn:hover {
    background: #ff5270;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4);
    transform: translateY(-1px);
}

.news-muted-list-wrap {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.news-muted-user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    transition: all 0.2s ease;
}

.news-muted-user-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(233, 69, 96, 0.3);
}

.news-muted-user-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.news-muted-avatar-box {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6b81;
    font-size: 0.85rem;
}

.news-muted-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.news-muted-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 700;
}

.news-muted-status-tag {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Minecraft', monospace;
}

.news-user-unmute-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #10b981;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-user-unmute-btn:hover {
    background: #10b981;
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.news-muted-empty-state {
    text-align: center;
    padding: 30px 16px;
    color: rgba(255, 255, 255, 0.4);
}

.news-muted-empty-icon {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 10px;
}

.news-muted-empty-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
}

.news-muted-empty-sub {
    font-size: 0.75rem;
    line-height: 1.4;
    max-width: 360px;
    margin: 0 auto;
}

.news-unmute-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(233, 69, 96, 0.12);
    border: 1px solid rgba(233, 69, 96, 0.35);
    color: #ff6b81;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-unmute-all-btn:hover {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #fff;
}

@media (max-width: 650px) {
    .news-subtabs-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    .news-subtabs-nav {
        width: 100%;
    }
    .news-manage-muted-btn {
        justify-content: center;
        width: 100%;
    }
}


/* ============================================
   ФИОЛЕТОВАЯ ПОДСВЕТКА УВЕДОМЛЕНИЙ АДМИНА
   ============================================ */

/* 1. Колокольчик в шапке (User Bar Bell) */
.notif-badge.has-admin-unread i {
    color: #c084fc !important;
    filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.95)) drop-shadow(0 0 14px rgba(168, 85, 247, 0.7)) !important;
    animation: adminBellPulse 1.8s infinite ease-in-out !important;
}

.notif-badge.has-admin-unread:hover i {
    color: #e9d5ff !important;
    filter: drop-shadow(0 0 8px rgba(233, 213, 255, 1)) drop-shadow(0 0 18px rgba(168, 85, 247, 0.9)) !important;
}

.notif-badge.has-admin-unread .notif-badge-count {
    background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.95), 0 0 14px rgba(147, 51, 234, 0.6) !important;
    border: 1px solid #d8b4fe !important;
    color: #ffffff !important;
}

@keyframes adminBellPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    15% {
        transform: scale(1.2) rotate(-14deg);
    }
    30% {
        transform: scale(1.2) rotate(14deg);
    }
    45% {
        transform: scale(1.1) rotate(-8deg);
    }
    60% {
        transform: scale(1.05) rotate(5deg);
    }
    75% {
        transform: scale(1) rotate(0deg);
    }
}

/* 2. Карточка прямого уведомления в дропдауне */
.notif-item.notif-item-admin {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(126, 34, 206, 0.28) 100%) !important;
    border: 1.5px solid rgba(192, 132, 252, 0.65) !important;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.35), inset 0 0 10px rgba(168, 85, 247, 0.15) !important;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    position: relative;
}

.notif-item.notif-item-admin.unread {
    border-color: #c084fc !important;
    box-shadow: 0 0 18px rgba(192, 132, 252, 0.55), inset 0 0 12px rgba(168, 85, 247, 0.25) !important;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.28) 0%, rgba(126, 34, 206, 0.45) 100%) !important;
}

.notif-item.notif-item-admin .notif-admin-title {
    color: #e9d5ff !important;
    font-weight: bold;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
}

.notif-item.notif-item-admin .notif-admin-title i {
    color: #c084fc;
    font-size: 0.75rem;
}

.notif-admin-tag {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.7);
    letter-spacing: 0.5px;
}

.notif-admin-body {
    color: #ffffff !important;
    font-size: 0.65rem;
    line-height: 1.5;
    margin-top: 6px;
    word-break: break-word;
    white-space: pre-wrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-family: 'Minecraft', monospace;
}

.notif-admin-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(192, 132, 252, 0.2);
}

.notif-admin-time {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(233, 213, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 4px;
}

.notif-admin-del-btn {
    background: transparent;
    border: none;
    color: rgba(233, 213, 255, 0.5);
    cursor: pointer;
    font-size: 0.6rem;
    padding: 2px 5px;
    border-radius: 4px;
    transition: all 0.2s;
}

.notif-admin-del-btn:hover {
    color: #ff6b81;
    background: rgba(255, 107, 129, 0.15);
}

/* 3. Кнопка отправки уведомления в строке пользователя */
.admin-send-user-notif-btn {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: #c084fc;
    font-size: 0.55rem;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 6px;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
}

.admin-send-user-notif-btn:hover {
    background: #a855f7;
    color: #fff;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.8);
}

/* 4. Модальное окно отправки */
.admin-notif-modal-content {
    max-width: 540px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    background: #151528;
    border: 2px solid #a855f7;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 20px rgba(168, 85, 247, 0.3);
}

.admin-notif-input,
.admin-notif-select,
.admin-notif-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: #0d0d1a;
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.2s;
}

.admin-notif-input:focus,
.admin-notif-select:focus,
.admin-notif-textarea:focus {
    border-color: #c084fc;
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.4);
}

/* ============================================
   СИНИЕ УВЕДОМЛЕНИЯ: ОТВЕТЫ ИГРОКОВ
   ============================================ */

.notif-item.notif-item-player-reply {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(37, 99, 235, 0.28) 100%) !important;
    border: 1.5px solid rgba(96, 165, 250, 0.65) !important;
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.35), inset 0 0 10px rgba(59, 130, 246, 0.1) !important;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    position: relative;
}

.notif-item.notif-item-player-reply.unread {
    border-color: #60a5fa !important;
    box-shadow: 0 0 18px rgba(96, 165, 250, 0.55), inset 0 0 12px rgba(59, 130, 246, 0.2) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.28) 0%, rgba(37, 99, 235, 0.42) 100%) !important;
}

.notif-player-reply-title {
    color: #bfdbfe !important;
    font-weight: bold;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
}

.notif-player-reply-title i {
    color: #60a5fa;
    font-size: 0.75rem;
}

.notif-player-reply-tag {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.7);
    letter-spacing: 0.5px;
}

.notif-player-reply-body {
    color: #93c5fd !important;
    font-size: 0.58rem;
    font-family: 'Minecraft', monospace;
    margin-top: 4px;
    opacity: 0.85;
}

.notif-player-reply-text {
    color: #ffffff !important;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    margin-top: 5px;
    padding: 5px 8px;
    background: rgba(59, 130, 246, 0.15);
    border-left: 2px solid #60a5fa;
    border-radius: 0 6px 6px 0;
    word-break: break-word;
    white-space: pre-wrap;
}


/* Approve & Apply Admin Button */
.comm-admin-btn.approve-apply {
    background: linear-gradient(135deg, #059669 0%, #00cec9 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 206, 201, 0.6) !important;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.35);
    font-weight: bold;
}
.comm-admin-btn.approve-apply:hover {
    filter: brightness(1.25);
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.6);
}


/* Translation comparison 3-box additions */
.comm-trans-box.cur .comm-trans-label {
    color: rgba(245, 158, 11, 0.8) !important;
}

.comm-trans-box.cur .comm-trans-value {
    color: #f59e0b !important;
}

.comm-trans-none {
    color: rgba(255, 255, 255, 0.35) !important;
    font-style: italic !important;
    font-weight: normal !important;
    font-size: 0.85rem !important;
}

.comm-trans-match-icon {
    font-size: 0.82rem !important;
    color: #10b981 !important;
    margin-left: 4px !important;
}

/* Real-time live highlight animation for new arrivals */
@keyframes commLivePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.85);
        transform: translateY(-4px) scale(1.01);
        border-color: rgba(16, 185, 129, 0.9) !important;
    }
    50% {
        box-shadow: 0 0 28px 6px rgba(16, 185, 129, 0.5);
        border-color: rgba(16, 185, 129, 0.75) !important;
    }
    100% {
        box-shadow: none;
        transform: translateY(0) scale(1);
    }
}

.comm-live-highlight {
    animation: commLivePulse 3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    position: relative;
    z-index: 5;
}

/* Unread live dot on modeBtnNews */
#modeBtnNews {
    position: relative;
}

.news-live-unread-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    animation: unreadPulse 1.8s infinite;
    pointer-events: none;
}

@keyframes unreadPulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 6px #10b981; }
    50% { transform: scale(1.35); opacity: 0.8; box-shadow: 0 0 14px #10b981; }
}

/* Translation Pokemon Sprite Card */
.comm-trans-poke-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(20, 24, 45, 0.75), rgba(10, 15, 30, 0.85));
    border: 1px solid rgba(0, 206, 201, 0.25);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.comm-trans-poke-card:hover {
    border-color: rgba(0, 206, 201, 0.45);
    transform: translateY(-1px);
}

.comm-trans-poke-avatar-box {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 10px;
    background: radial-gradient(circle, rgba(0, 206, 201, 0.15) 0%, rgba(10, 15, 30, 0.6) 80%);
    border: 1px solid rgba(0, 206, 201, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.comm-trans-poke-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
    transition: transform 0.25s ease;
}

.comm-trans-poke-card:hover .comm-trans-poke-img {
    transform: scale(1.1);
}

.comm-trans-poke-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.comm-trans-poke-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.comm-trans-poke-dex-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    color: #00cec9;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 6px;
    padding: 2px 7px;
    letter-spacing: 0.5px;
}

.comm-trans-poke-eng-name {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
}

.comm-trans-poke-cur-tag {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.comm-trans-poke-types-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.comm-trans-type-pill {
    font-size: 0.68rem;
    font-weight: bold;
    color: #fff;
    padding: 1px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}


/* Move Target Diagram (pokemondb style) */
.db-move-target-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 14px 14px;
    background: rgba(15, 52, 96, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    margin: 8px 0 6px;
}
.move-target {
    margin: 0 auto 12px;
    position: relative;
    width: 294px;
    height: 116px;
    box-sizing: border-box;
}
.move-target > .mt-pkmn {
    position: relative;
    z-index: 5;
    float: left;
    margin: 4px;
    width: 90px;
    height: 50px;
    border-radius: 20px / 44px;
    line-height: 44px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    box-sizing: border-box;
    transition: all 0.25s ease;
    user-select: none;
    letter-spacing: 0.3px;
    font-family: inherit;
}
.move-target > .mt-user {
    background-color: #13c2eb;
    border: 3px solid #13c2eb;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.move-target > .mt-foe {
    background-color: #e68929;
    border: 3px solid #e68929;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.move-target > .mt-selected {
    border-color: #2ecc71 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.55), inset 0 0 8px rgba(46, 204, 113, 0.25);
}
.move-target > .mt-unselected {
    opacity: 0.5;
}
.move-target > .mt-hspace,
.move-target > .mt-vspace {
    position: absolute;
    background: #2ecc71;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.9), 0 0 24px rgba(46, 204, 113, 0.5);
    z-index: 4;
    border-radius: 5px;
    pointer-events: none;
}

.move-target > .mt-hspace {
    width: 20px;
    height: 22px;
}
.move-target > .mt-hspace.tl { left: 88px; top: 18px; }
.move-target > .mt-hspace.tr { left: 186px; top: 18px; }
.move-target > .mt-hspace.bl { left: 88px; top: 76px; }
.move-target > .mt-hspace.br { left: 186px; top: 76px; }

.move-target > .mt-vspace {
    width: 22px;
    height: 20px;
}
.move-target > .mt-vspace.lt { left: 38px; top: 48px; }
.move-target > .mt-vspace.md { left: 136px; top: 48px; }
.move-target > .mt-vspace.rt { left: 234px; top: 48px; }

.mt-descr {
    color: #e2e8f0;
    font-style: italic;
    text-align: center;
    font-size: 0.92rem;
    margin: 4px 0 0;
    line-height: 1.45;
    max-width: 480px;
}


/* ==========================================================================
   MINI-GAMES SYNCHRONIZED DUEL HUD
   ========================================================================== */
.mg-duel-hud {
    position: sticky;
    top: 10px;
    z-index: 1500;
    width: calc(100% - 24px);
    max-width: 860px;
    margin: 10px auto 16px auto;
    animation: fadeInDown 0.3s ease;
}

.mg-duel-hud-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(22, 33, 62, 0.9));
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(233, 69, 96, 0.25);
    color: #fff;
    font-family: 'Rubik', sans-serif;
}

.mg-duel-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #e94560, #ff6b81);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
}

.mg-duel-opponent {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.mg-duel-label {
    color: #a0aec0;
    font-size: 0.78rem;
}

.mg-duel-name {
    color: #4ecdc4;
    font-weight: 700;
}

.mg-duel-progress,
.mg-duel-score {
    font-size: 0.82rem;
    color: #e2e8f0;
}

.mg-duel-progress strong,
.mg-duel-score strong {
    color: #ffd700;
    font-weight: 800;
    margin-left: 4px;
}

.mg-duel-surrender-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #ff6b81;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mg-duel-surrender-btn:hover {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .mg-duel-hud-inner {
        flex-wrap: wrap;
        padding: 8px 12px;
        gap: 8px;
        font-size: 0.75rem;
    }
    .mg-duel-surrender-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
}


/* ==========================================================================
   MINI-GAMES START SCREEN OVERLAY
   ========================================================================== */
.mg-start-overlay {
    position: relative;
    width: 100%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeInDown 0.3s ease;
    z-index: 10;
}

.mg-start-card {
    width: 100%;
    max-width: 540px;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.95), rgba(15, 23, 42, 0.98));
    border: 2px solid rgba(233, 69, 96, 0.4);
    border-radius: 20px;
    padding: 34px 26px;
    text-align: center;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.65), 0 0 25px rgba(233, 69, 96, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mg-start-icon-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px auto;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 70%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.mg-start-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
}

.mg-start-desc {
    color: #cbd5e1;
    font-size: 0.85rem;
    line-height: 1.65;
    margin: 0 0 22px 0;
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace !important;
    letter-spacing: 0.3px;
}

.mg-start-duel-badge {
    font-family: 'Minecraft', monospace !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(78, 205, 196, 0.25));
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 20px;
    padding: 8px 18px;
    margin-bottom: 22px;
    font-size: 0.9rem;
    color: #ffd700;
    font-weight: 700;
}

.mg-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 15px 42px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mg-start-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    background: linear-gradient(135deg, #34d399, #059669);
}

.mg-start-btn:active {
    transform: translateY(1px) scale(0.98);
}

.mg-start-btn.duel {
    background: linear-gradient(135deg, #e94560, #ff6b81);
    box-shadow: 0 6px 22px rgba(233, 69, 96, 0.45);
}

.mg-start-btn.duel:hover {
    background: linear-gradient(135deg, #ff4772, #e94560);
    box-shadow: 0 12px 30px rgba(233, 69, 96, 0.65);
}/* Silhouette Dropdown base & positioning */
.mg-sil-search-wrap .mg-autocomplete-dropdown,
#silDropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    background: #0b132b !important;
    border: 2px solid #00cec9 !important;
    border-radius: 12px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    z-index: 99999999 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.98), 0 0 40px rgba(0, 206, 201, 0.5) !important;
}

#silDropdown:not(.drop-up) {
    top: calc(100% + 8px) !important;
    bottom: auto !important;
}

#silDropdown.drop-up {
    bottom: calc(100% + 8px) !important;
    top: auto !important;
}/* ============================================
   Poke DIV Game - Основные стили
   ============================================ */

/* ------------------- Шрифты ------------------- */
@font-face {
    font-family: 'Minecraft';
    src: url('Minecraft.woff2?v=glyphfix_1788792907') format('woff2'),
         url('Minecraft.otf?v=glyphfix_1788792907') format('opentype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ------------------- Базовые стили ------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
}

button, input, select, textarea, optgroup, option, dialog {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
}

input::placeholder, textarea::placeholder {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
}

body {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    color: #ffffff;
    min-height: 100vh;
    padding: 20px;
    font-size: 14px;
    position: relative;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
}

/* Анимированный фон */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(233, 69, 96, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ------------------- Анимации ------------------- */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes typesReveal {
    from { opacity: 0; transform: scale(0.9) translateY(-30px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cardReveal {
    from { opacity: 0; transform: translateY(30px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes presentationEnter {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes presentationExit {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes modalPop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes modalPopCenter {
    from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes slideEnter {
    from { opacity: 0; transform: translateX(100px) rotateY(10deg); }
    to { opacity: 1; transform: translateX(0) rotateY(0); }
}

@keyframes slideExit {
    from { opacity: 1; transform: translateX(0) rotateY(0); }
    to { opacity: 0; transform: translateX(-100px) rotateY(-10deg); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; visibility: hidden; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 20px rgba(233,69,96,0.2); }
    50% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(233,69,96,0.5); }
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes imageGlow {
    0%, 100% { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6)) brightness(1.05); }
    50% { filter: drop-shadow(0 20px 50px rgba(233, 69, 96, 0.4)) brightness(1.1); }
}

@keyframes completionPop {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}


/* ===== Плавающий переключатель языка (следует за скроллом) ===== */
.lang-switch-floating {
    position: fixed;
    top: 20px;
    right: 74px;
    z-index: 1000;
    display: inline-flex;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}
.lang-switch-floating:hover {
    border-color: rgba(233, 69, 96, 0.8);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.3);
}
.lang-switch-floating .lang-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: none;
    padding: 9px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.lang-switch-floating .lang-btn:hover {
    color: #fff;
    background: rgba(233, 69, 96, 0.2);
}
.lang-switch-floating .lang-btn.active {
    background: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.7);
}
@media (max-width: 768px) {
    .lang-switch-floating {
        top: 12px;
        right: 56px;
    }
    .lang-switch-floating .lang-btn {
        font-size: 0.55rem;
        padding: 7px 10px;
    }
}

/* ------------------- Социальный блок ------------------- */
.social-block {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.social-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(233,69,96,0.5);
    backdrop-filter: blur(10px);
    color: #e94560;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-toggle:hover {
    background: rgba(233,69,96,0.2);
    transform: scale(1.1);
}

.social-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.25s ease;
    background: rgba(0,0,0,0.7);
    padding: 12px 18px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233,69,96,0.4);
    text-align: center;
    margin-bottom: 8px;
    pointer-events: none;
}

.social-block.open .social-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 10px;
}

.social-link {
    font-size: 28px;
    transition: transform 0.3s;
}

.social-link.telegram { color: #26A5E4; }
.social-link.youtube { color: #FF0000; }
.social-link.twitch { color: #9146FF; }

.social-link:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px currentColor);
}

.social-credit {
    color: #aaa;
    font-size: 10px;
    letter-spacing: 1px;
    border-top: 1px solid rgba(233,69,96,0.3);
    padding-top: 8px;
    margin-top: 4px;
}

.social-credit i {
    color: #e94560;
    font-size: 8px;
}

.creator-name {
    color: #e94560;
    font-size: 11px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .social-block {
        top: 12px;
        right: 12px;
    }
    .social-toggle {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .social-panel {
        padding: 10px 14px;
    }
    .social-link {
        font-size: 22px;
    }
}

/* ------------------- Табы и контент ------------------- */
.tab-content {
    animation: pageFadeIn 0.4s ease-out;
}

.types-reveal-panel {
    display: none;
    gap: 60px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 45px;
    padding-top: 45px;
}

.types-reveal-panel.show {
    display: flex;
    animation: typesReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-type-card {
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    animation: cardReveal 0.4s ease-out backwards;
}

.reveal-type-card:nth-child(1) { animation-delay: 0.1s; }
.reveal-type-card:nth-child(2) { animation-delay: 0.2s; }

.reveal-type-card:hover {
    transform: scale(1.15);
}

.reveal-type-card img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
}

.reveal-type-card span {
    display: block;
    margin-top: 15px;
    font-size: 1rem;
    font-weight: bold;
    color: #e94560;
}

/* ------------------- Модальные окна ------------------- */
.modal {
    display: none;
    position: fixed;
    z-index: 20000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 700px;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    color: white;
    box-shadow: 0 0 40px rgba(233,69,96,0.3);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.modal-large {
    max-width: 1200px;
    width: 95%;
}

.modal-content h3 {
    color: #e94560;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-align: center;
}

.modal-content input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    background: #1a1a2e;
    border: 1px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.modal-content input:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233,69,96,0.3);
}

.modal-two-columns {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    margin-bottom: 20px;
}

.modal-filters {
    flex: 1;
    min-width: 250px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 20px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
    overflow-y: auto;
}

.modal-results {
    flex: 2;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-buttons {
    margin-top: auto;
    text-align: center;
    flex-shrink: 0;
}

/* Подтверждение удаления */
.confirm-modal {
    display: none;
    position: fixed;
    z-index: 20001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.confirm-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 400px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 50px rgba(233,69,96,0.4);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-modal-content h3 {
    color: #e94560;
    margin-bottom: 15px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.confirm-modal-content p {
    font-size: 0.7rem;
    line-height: 1.5;
    color: #ddd;
    margin-bottom: 5px;
}

.confirm-modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.confirm-modal-buttons button {
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.confirm-modal-buttons button:first-child {
    background: #e74c3c;
    color: white;
}

.confirm-modal-buttons button:first-child:hover {
    background: #c0392b;
    transform: scale(1.05);
}

.confirm-modal-buttons button:last-child {
    background: #2c3e50;
    color: white;
}

.confirm-modal-buttons button:last-child:hover {
    background: #1a252f;
    transform: scale(1.05);
}

/* Модальное окно завершения */
.completion-modal {
    display: none;
    position: fixed;
    z-index: 20002;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(233,69,96,0.3), rgba(0,0,0,0.95));
    backdrop-filter: blur(10px);
    font-family: 'Minecraft', monospace;
}

.completion-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 35px 50px;
    border: 2px solid #e94560;
    border-radius: 40px;
    width: 500px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 70px rgba(233,69,96,0.5);
    animation: completionPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.completion-modal-content i.fa-trophy {
    font-size: 2rem;
    color: #f39c12;
    margin-bottom: 15px;
}

.completion-modal-content h2 {
    color: #e94560;
    font-size: 1.2rem;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.completion-modal-content p {
    font-size: 0.7rem;
    color: #ddd;
}

.completion-modal-content button {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.completion-modal-content button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(233,69,96,0.5);
}

/* ------------------- Фильтры ------------------- */
.filter-section {
    margin-bottom: 20px;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(233, 69, 96, 0.2);
}

.filter-title {
    font-size: 0.7rem;
    color: #e94560;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.filter-buttons {
    display: flex;
    gap: 12px;
}

.filter-toggle {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px 16px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-toggle.active {
    background: #e94560;
    border-color: white;
    box-shadow: 0 0 8px rgba(233,69,96,0.5);
}

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

.filter-tag {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 5px 12px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-tag:hover {
    transform: scale(1.03);
    background: #e94560;
}

.filter-tag.active {
    background: #e94560;
    border-color: white;
}

.filter-gen-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.filter-gen {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    text-align: center;
    transition: all 0.2s;
}

.filter-gen.active {
    background: #e94560;
    border-color: white;
}

.filter-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.filter-stats {
    font-size: 0.6rem;
    color: #aaa;
    text-align: center;
    margin-top: 10px;
    padding: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
}

/* ------------------- Список покемонов ------------------- */
.pokemon-list-grid {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 15px;
    padding-right: 5px;
}

.template-pokemon-card {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 15px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.template-pokemon-card:hover {
    transform: scale(1.02);
    border-color: #fff;
    box-shadow: 0 5px 20px rgba(233,69,96,0.3);
}

.template-pokemon-card img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.template-pokemon-card .pokemon-name {
    font-weight: bold;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------- Уведомления (Poke DIV Toasts) ------------------- */
#notificationContainer {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999999 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 440px;
    width: calc(100vw - 48px);
}

.custom-notification {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.96) 0%, rgba(15, 23, 42, 0.96) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 5px solid #38bdf8;
    border-radius: 12px;
    padding: 14px 16px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    line-height: 1.4;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 206, 201, 0.15);
    animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: auto;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
}

.custom-notification:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 255, 255, 0.1);
}

.custom-notification.toast-fade-out {
    opacity: 0 !important;
    transform: translateX(40px) scale(0.95) !important;
}

.custom-notification.success {
    border-left-color: #00cec9;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 206, 201, 0.25);
}

.custom-notification.error {
    border-left-color: #e94560;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(233, 69, 96, 0.3);
}

.custom-notification.warning {
    border-left-color: #f59e0b;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.25);
}

.custom-notification.info {
    border-left-color: #38bdf8;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.25);
}

.toast-icon-wrap {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: rgba(255, 255, 255, 0.08);
}

.custom-notification.success .toast-icon-wrap {
    background: rgba(0, 206, 201, 0.15);
    color: #00cec9;
}

.custom-notification.error .toast-icon-wrap {
    background: rgba(233, 69, 96, 0.18);
    color: #e94560;
}

.custom-notification.warning .toast-icon-wrap {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}

.custom-notification.info .toast-icon-wrap {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
}

.toast-body {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    color: #ffffff;
}

.toast-title {
    font-weight: bold;
    font-size: 0.82rem;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.custom-notification.success .toast-title { color: #00cec9; }
.custom-notification.error .toast-title { color: #e94560; }
.custom-notification.warning .toast-title { color: #f59e0b; }
.custom-notification.info .toast-title { color: #38bdf8; }

.toast-message {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    line-height: 1.35;
}

.toast-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.toast-close-btn:hover {
    color: #ffffff;
    transform: scale(1.15);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
}

.toast-progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: left;
    transition: width linear;
}

.custom-notification.success .toast-progress-bar { background: #00cec9; }
.custom-notification.error .toast-progress-bar { background: #e94560; }
.custom-notification.warning .toast-progress-bar { background: #f59e0b; }
.custom-notification.info .toast-progress-bar { background: #38bdf8; }

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ------------------- Главное меню ------------------- */
.main-menu {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.6s ease;
}

.menu-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 40px;
    background: rgba(22, 33, 62, 0.6);
    border-radius: 60px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(233, 69, 96, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(233, 69, 96, 0.2);
    animation: glowPulse 3s infinite;
}

.menu-header h1 {
    color: #e94560;
    font-size: 2.2rem;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
    letter-spacing: 2px;
}

.menu-header p {
    color: #aaa;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

/* ------------------- Табы ------------------- */
.tabs {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.tab-btn {
    background: rgba(15, 52, 96, 0.7);
    border: 2px solid rgba(233, 69, 96, 0.5);
    padding: 15px 40px;
    font-size: 1rem;
    font-family: 'Minecraft', monospace;
    color: white;
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.tab-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(233, 69, 96, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.tab-btn:hover::before {
    width: 300px;
    height: 300px;
}

.tab-btn:hover {
    border-color: #e94560;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(233, 69, 96, 0.3);
}

.tab-btn.active {
    background: #e94560;
    border-color: #fff;
    box-shadow: 0 0 30px rgba(233, 69, 96, 0.6);
}

.tab-content {
    display: none;
    background: rgba(15, 52, 96, 0.5);
    border-radius: 40px;
    padding: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    height: auto !important;
    min-height: auto !important;
    overflow: hidden;
}

.tab-content.active {
    display: block;
}

/* ------------------- Игровые карточки ------------------- */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.game-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
    border-radius: 25px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(233, 69, 96, 0.3);
    position: relative;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(233,69,96,0.1), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.game-card:hover::before {
    opacity: 1;
}

.game-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #e94560;
    box-shadow: 0 20px 40px rgba(233, 69, 96, 0.3);
}

.game-card h3 {
    color: #e94560;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.game-card p {
    color: #aaa;
    font-size: 0.6rem;
}

.delete-collection-btn {
    background: rgba(231, 76, 60, 0.8);
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    margin-top: 15px;
    transition: all 0.3s;
    z-index: 10;
    position: relative;
}

.delete-collection-btn:hover {
    background: #e74c3c;
    transform: scale(1.05);
}

/* ============================================
   Poke DIV Game - Основные стили
   ============================================ */

/* ------------------- Шрифты ------------------- */
/* Duplicate Minecraft @font-face removed */

/* ------------------- Базовые стили ------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    min-height: 100vh;
    padding: 20px;
    font-size: 14px;
    position: relative;
    overflow-x: hidden;
}

/* Анимированный фон */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(233, 69, 96, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ------------------- Анимации ------------------- */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes typesReveal {
    from { opacity: 0; transform: scale(0.9) translateY(-30px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cardReveal {
    from { opacity: 0; transform: translateY(30px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes presentationEnter {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes presentationExit {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes modalPop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes modalPopCenter {
    from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes slideEnter {
    from { opacity: 0; transform: translateX(100px) rotateY(10deg); }
    to { opacity: 1; transform: translateX(0) rotateY(0); }
}

@keyframes slideExit {
    from { opacity: 1; transform: translateX(0) rotateY(0); }
    to { opacity: 0; transform: translateX(-100px) rotateY(-10deg); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; visibility: hidden; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 20px rgba(233,69,96,0.2); }
    50% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(233,69,96,0.5); }
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes imageGlow {
    0%, 100% { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6)) brightness(1.05); }
    50% { filter: drop-shadow(0 20px 50px rgba(233, 69, 96, 0.4)) brightness(1.1); }
}

@keyframes completionPop {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}


/* ===== Плавающий переключатель языка (следует за скроллом) ===== */
.lang-switch-floating {
    position: fixed;
    top: 20px;
    right: 74px;
    z-index: 1000;
    display: inline-flex;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}
.lang-switch-floating:hover {
    border-color: rgba(233, 69, 96, 0.8);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.3);
}
.lang-switch-floating .lang-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: none;
    padding: 9px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.lang-switch-floating .lang-btn:hover {
    color: #fff;
    background: rgba(233, 69, 96, 0.2);
}
.lang-switch-floating .lang-btn.active {
    background: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.7);
}
@media (max-width: 768px) {
    .lang-switch-floating {
        top: 12px;
        right: 56px;
    }
    .lang-switch-floating .lang-btn {
        font-size: 0.55rem;
        padding: 7px 10px;
    }
}

/* ------------------- Социальный блок ------------------- */
.social-block {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.social-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(233,69,96,0.5);
    backdrop-filter: blur(10px);
    color: #e94560;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-toggle:hover {
    background: rgba(233,69,96,0.2);
    transform: scale(1.1);
}

.social-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.25s ease;
    background: rgba(0,0,0,0.7);
    padding: 12px 18px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233,69,96,0.4);
    text-align: center;
    margin-bottom: 8px;
    pointer-events: none;
}

.social-block.open .social-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 10px;
}

.social-link {
    font-size: 28px;
    transition: transform 0.3s;
}

.social-link.telegram { color: #26A5E4; }
.social-link.youtube { color: #FF0000; }
.social-link.twitch { color: #9146FF; }

.social-link:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px currentColor);
}

.social-credit {
    color: #aaa;
    font-size: 10px;
    letter-spacing: 1px;
    border-top: 1px solid rgba(233,69,96,0.3);
    padding-top: 8px;
    margin-top: 4px;
}

.social-credit i {
    color: #e94560;
    font-size: 8px;
}

.creator-name {
    color: #e94560;
    font-size: 11px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .social-block {
        top: 12px;
        right: 12px;
    }
    .social-toggle {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .social-panel {
        padding: 10px 14px;
    }
    .social-link {
        font-size: 22px;
    }
}

/* ------------------- Табы и контент ------------------- */
.tab-content {
    animation: pageFadeIn 0.4s ease-out;
}

/* ------------------- Модальные окна ------------------- */
.modal {
    display: none;
    position: fixed;
    z-index: 20000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 700px;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    color: white;
    box-shadow: 0 0 40px rgba(233,69,96,0.3);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.modal-large {
    max-width: 1200px;
    width: 95%;
}

.modal-content h3 {
    color: #e94560;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-align: center;
}

.modal-content input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    background: #1a1a2e;
    border: 1px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.modal-content input:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233,69,96,0.3);
}

.modal-two-columns {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    margin-bottom: 20px;
}

.modal-filters {
    flex: 1;
    min-width: 250px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 20px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
    overflow-y: auto;
}

.modal-results {
    flex: 2;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-buttons {
    margin-top: auto;
    text-align: center;
    flex-shrink: 0;
}

/* Подтверждение удаления */
.confirm-modal {
    display: none;
    position: fixed;
    z-index: 20001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.confirm-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 400px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 50px rgba(233,69,96,0.4);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-modal-content h3 {
    color: #e94560;
    margin-bottom: 15px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.confirm-modal-content p {
    font-size: 0.7rem;
    line-height: 1.5;
    color: #ddd;
    margin-bottom: 5px;
}

.confirm-modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.confirm-modal-buttons button {
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.confirm-modal-buttons button:first-child {
    background: #e74c3c;
    color: white;
}

.confirm-modal-buttons button:first-child:hover {
    background: #c0392b;
    transform: scale(1.05);
}

.confirm-modal-buttons button:last-child {
    background: #2c3e50;
    color: white;
}

.confirm-modal-buttons button:last-child:hover {
    background: #1a252f;
    transform: scale(1.05);
}

/* Модальное окно завершения */
.completion-modal {
    display: none;
    position: fixed;
    z-index: 20002;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(233,69,96,0.3), rgba(0,0,0,0.95));
    backdrop-filter: blur(10px);
    font-family: 'Minecraft', monospace;
}

.completion-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 35px 50px;
    border: 2px solid #e94560;
    border-radius: 40px;
    width: 500px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 70px rgba(233,69,96,0.5);
    animation: completionPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.completion-modal-content i.fa-trophy {
    font-size: 2rem;
    color: #f39c12;
    margin-bottom: 15px;
}

.completion-modal-content h2 {
    color: #e94560;
    font-size: 1.2rem;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.completion-modal-content p {
    font-size: 0.7rem;
    color: #ddd;
}

.completion-modal-content button {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.completion-modal-content button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(233,69,96,0.5);
}

/* ------------------- Фильтры ------------------- */
.filter-section {
    margin-bottom: 20px;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(233, 69, 96, 0.2);
}

.filter-title {
    font-size: 0.7rem;
    color: #e94560;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.filter-buttons {
    display: flex;
    gap: 12px;
}

.filter-toggle {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px 16px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-toggle.active {
    background: #e94560;
    border-color: white;
    box-shadow: 0 0 8px rgba(233,69,96,0.5);
}

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

.filter-tag {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 5px 12px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-tag:hover {
    transform: scale(1.03);
    background: #e94560;
}

.filter-tag.active {
    background: #e94560;
    border-color: white;
}

.filter-gen-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.filter-gen {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    text-align: center;
    transition: all 0.2s;
}

.filter-gen.active {
    background: #e94560;
    border-color: white;
}

.filter-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.filter-stats {
    font-size: 0.6rem;
    color: #aaa;
    text-align: center;
    margin-top: 10px;
    padding: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
}

/* ------------------- Список покемонов ------------------- */
.pokemon-list-grid {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 15px;
    padding-right: 5px;
}

.template-pokemon-card {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 15px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.template-pokemon-card:hover {
    transform: scale(1.02);
    border-color: #fff;
    box-shadow: 0 5px 20px rgba(233,69,96,0.3);
}

.template-pokemon-card img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.template-pokemon-card .pokemon-name {
    font-weight: bold;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ------------------- Главное меню ------------------- */
.main-menu {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.6s ease;
}

.menu-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 40px;
    background: rgba(22, 33, 62, 0.6);
    border-radius: 60px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(233, 69, 96, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(233, 69, 96, 0.2);
    animation: glowPulse 3s infinite;
}

.menu-header h1 {
    color: #e94560;
    font-size: 2.2rem;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
    letter-spacing: 2px;
}

.menu-header p {
    color: #aaa;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.tab-btn {
    background: rgba(20, 20, 40, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 32px;
    font-size: 0.85rem;
    font-family: 'Minecraft', monospace;
    color: #ccc;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn i {
    margin-right: 8px;
    opacity: 0.7;
}

.tab-btn:hover {
    border-color: rgba(233, 69, 96, 0.4);
    color: white;
    background: rgba(233, 69, 96, 0.1);
}

.tab-btn[data-tab="hosting"] {
    border-color: rgba(245, 200, 66, 0.4);
    color: #f5c842;
}

.tab-btn[data-tab="hosting"]:hover {
    border-color: rgba(245, 200, 66, 0.7);
    color: #f5c842;
    background: rgba(245, 200, 66, 0.15);
}

.tab-btn.active {
    border-color: #e94560;
    color: #e94560;
    background: rgba(233, 69, 96, 0.15);
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.2);
}

.tab-btn.active[data-tab="hosting"] {
    border-color: #f5c842;
    color: #f5c842;
    background: rgba(245, 200, 66, 0.15);
    box-shadow: 0 0 20px rgba(245, 200, 66, 0.2);
}
/* ------------------- Игровые карточки ------------------- */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.game-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
    border-radius: 25px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(233, 69, 96, 0.3);
    position: relative;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(233,69,96,0.1), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.game-card:hover::before {
    opacity: 1;
}

.game-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #e94560;
    box-shadow: 0 20px 40px rgba(233, 69, 96, 0.3);
}

.game-card h3 {
    color: #e94560;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.game-card p {
    color: #aaa;
    font-size: 0.6rem;
}

.delete-collection-btn {
    background: rgba(231, 76, 60, 0.8);
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    margin-top: 15px;
    transition: all 0.3s;
    z-index: 10;
    position: relative;
}

.delete-collection-btn:hover {
    background: #e74c3c;
    transform: scale(1.05);
}

/* ------------------- Режим презентации ------------------- */
.fullscreen-presentation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('background/Fon.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 99999 !important;
    display: none;
    flex-direction: column;
    animation: presentationEnter 0.5s ease-out;
    overflow-y: auto;
}

.fullscreen-presentation.active {
    display: flex;
}

.main-menu:has(.fullscreen-presentation.active) {
    z-index: 99999 !important;
}

/* Hide floating language and social widgets during presentation */
body.in-presentation .lang-switch-floating,
body.in-presentation .social-block,
body.in-presentation #floatingLangSwitch,
body.in-presentation #socialBlock,
body:has(.fullscreen-presentation.active) .lang-switch-floating,
body:has(.fullscreen-presentation.active) .social-block,
body:has(.fullscreen-presentation.active) #floatingLangSwitch,
body:has(.fullscreen-presentation.active) #socialBlock,
.fullscreen-presentation.active ~ .lang-switch-floating,
.fullscreen-presentation.active ~ .social-block {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    z-index: -1 !important;
}

.fullscreen-presentation.exit {
    animation: presentationExit 0.4s ease-in forwards;
}

.pres-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(233,69,96,0.3), rgba(0,0,0,0.8));
    z-index: 999999 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.pres-transition-overlay.active {
    opacity: 1;
}

.pres-header {
    background: rgba(0, 0, 0, 0.7);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(20px);
    border-bottom: 2px solid rgba(233, 69, 96, 0.5);
    z-index: 100002;
    position: sticky;
    top: 0;
    pointer-events: auto;
}

.pres-header h3 {
    color: #e94560;
    font-size: 1rem;
    text-shadow: 0 0 15px rgba(233,69,96,0.8);
}

.close-pres-btn, #closePresBtn {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 10px 28px !important;
    border-radius: 50px !important;
    color: white !important;
    cursor: pointer !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.8rem !important;
    position: relative !important;
    z-index: 100005 !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    user-select: none !important;
}

.close-pres-btn:hover, #closePresBtn:hover {
    background: linear-gradient(135deg, #ff5252, #d63031) !important;
    transform: scale(1.06) !important;
    box-shadow: 0 6px 25px rgba(231, 76, 60, 0.7) !important;
}

.close-pres-btn:active, #closePresBtn:active {
    transform: scale(0.96) !important;
}

.pres-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    position: relative;
    z-index: 5;
}

.pres-card-container {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    perspective: 1200px;
    transition: all 0.3s ease;
}

.pres-card {
    background: rgba(10, 20, 40, 0.75);
    backdrop-filter: blur(25px);
    border-radius: 60px;
    width: 95vw;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 60px;
    padding: 60px 60px;
    border: 2px solid rgba(233, 69, 96, 0.5);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 0 0 80px rgba(233, 69, 96, 0.2);
    animation: cardFloat 3s ease-in-out infinite;
}

.pres-card.slide-enter {
    animation: slideEnter 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

.pres-card.slide-exit {
    animation: slideExit 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

.pres-image-area {
    flex: 1;
    min-width: 400px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.pres-image-area img {
    width: 100%;
    max-height: 55vh;
    object-fit: contain;
    border-radius: 40px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
    animation: imageGlow 2s ease-in-out infinite;
}

.pres-info-area {
    flex: 1.5;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
}

.pres-pokemon-name {
    font-size: 3.6rem;
    margin-bottom: 30px;
    color: #e94560;
    text-shadow: 0 0 25px rgba(233, 69, 96, 0.7);
    letter-spacing: 4px;
}

/* Описание — нормальное состояние */
.pres-description {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 45px;
    color: #f0f0f0;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 30px;
    transition: all 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
    overflow: hidden;
}

/* Описание сжатое — когда карточка раскрыта */
.pres-card.types-expanded .pres-description {
    margin-bottom: 15px;
    padding: 10px 20px;
    font-size: 0.9rem;
    line-height: 1.3;
    max-height: 80px;
    overflow-y: auto;
}

.reveal-btn {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 20px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    border-radius: 60px;
    cursor: pointer;
    width: 100%;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s;
}

.reveal-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(233, 69, 96, 0.6);
}

.pres-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 45px;
}

.pres-nav-btn,
.pres-counter-wrapper {
    display: inline-flex;
    align-items: center;
    height: 52px;
}

.pres-nav-btn {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.9), rgba(198, 42, 71, 0.9));
    border: none;
    padding: 0 30px;
    border-radius: 60px;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    will-change: transform;
    line-height: 1;
}

.pres-counter-wrapper {
    margin: 0;
}

.pres-counter {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    padding: 0 30px;
    border-radius: 60px;
    color: #e94560;
    font-size: 1rem;
    border: 1px solid rgba(233, 69, 96, 0.5);
    line-height: 52px;
    white-space: nowrap;
    height: 52px;
    display: inline-block;
    box-sizing: border-box;
}
.pres-nav-btn:hover {
    background: #e94560;
}

.pres-nav-btn:active {
    transform: scale(0.96);
}

.pres-nav-btn:first-child:hover {
    transform: translateX(-5px);
}

.pres-nav-btn:last-child:hover {
    transform: translateX(5px);
}

/* ------------------- Режим разработчика ------------------- */
.back-to-play-btn {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    transition: all 0.3s;
    border: none;
    padding: 12px 25px;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    margin-bottom: 20px;
}

.back-to-play-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(243, 156, 18, 0.4);
}

.editor-panel, .slides-list-panel {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    transition: all 0.3s;
    border-radius: 16px;
    padding: 20px;
    color: white;
}

.editor-panel:hover, .slides-list-panel:hover {
    border-color: rgba(233, 69, 96, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.image-upload-area {
    border: 2px dashed #e94560;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: #1a1a2e;
    transition: all 0.3s;
}

.image-upload-area:hover {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.1);
}

.type-icons-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 15px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    padding: 5px !important;
}

.type-icon-item {
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    text-align: center;
    width: 85px;
    transition: all 0.2s;
}

.type-icon-item.selected {
    background: #e94560;
}

.type-icon-item:hover {
    transform: scale(1.05);
    border-color: white;
}

.type-icon-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.type-icon-item span {
    font-size: 9px;
    display: block;
    margin-top: 5px;
    color: white;
}

.save-btn {
    background: #2ecc71;
    border: none;
    padding: 12px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    flex: 1;
}

.delete-btn {
    background: #e74c3c;
    border: none;
    padding: 12px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    flex: 1;
}

.btn-confirm {
    background: #2ecc71;
    border: none;
    padding: 10px 30px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.btn-cancel {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border: none;
    padding: 10px 30px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.btn-confirm:hover, .btn-cancel:hover {
    transform: translateY(-2px);
}

/* ------------------- Игра "Угадай тип" ------------------- */
.types-game-container {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.95));
    border-radius: 25px;
    padding: 20px;
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.types-game-layout {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.types-game-main {
    flex: 1;
    min-width: 300px;
}

.types-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: rgba(233, 69, 96, 0.1);
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.types-game-header span:first-child {
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: #e94560;
}

.types-game-score {
    font-size: 1.5rem;
    font-weight: bold;
    color: #f39c12;
    background: #1a1a2e;
    padding: 4px 18px;
    border-radius: 15px;
    border: 1px solid #e94560;
    font-family: 'Minecraft', monospace;
}

.types-game-section {
    background: rgba(15, 52, 96, 0.5);
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    overflow: hidden;
}

.types-game-section-header {
    background: rgba(233, 69, 96, 0.15);
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.types-game-section-header:hover {
    background: rgba(233, 69, 96, 0.25);
}

.types-game-section-title {
    font-size: 0.65rem;
    color: #e94560;
    letter-spacing: 1.5px;
}

.types-game-section-title i {
    margin-right: 6px;
}

.types-game-types-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 15px;
}

.types-game-type-btn {
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 10px 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
}

.types-game-type-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: white;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.3);
}

.types-game-type-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.types-game-type-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.types-game-type-btn img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.types-game-type-btn span {
    font-size: 0.55rem;
    font-weight: bold;
    color: white;
    text-transform: capitalize;
    text-align: center;
    word-break: break-word;
}

.types-game-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 15px;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(233,69,96,0.2);
    min-height: 50px;
}

.types-game-chip {
    background: linear-gradient(135deg, #e94560, #c62a47);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-family: 'Minecraft', monospace;
    border: 1px solid rgba(255,255,255,0.2);
}

.types-game-remove {
    background: rgba(0,0,0,0.4);
    border: none;
    color: white;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.types-game-remove:hover {
    background: rgba(0,0,0,0.6);
    transform: scale(1.05);
}

.types-game-note {
    font-size: 0.5rem;
    padding: 8px 15px;
    color: #aaa;
    border-top: 1px solid rgba(233,69,96,0.2);
}

.types-game-commit {
    width: 100%;
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    margin-bottom: 20px;
    transition: 0.2s;
    font-family: 'Minecraft', monospace;
    letter-spacing: 2px;
}

.types-game-commit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(233,69,96,0.4);
}

.types-game-panel {
    background: rgba(233, 69, 96, 0.1);
    border-radius: 20px;
    padding: 15px;
    margin-bottom: 20px;
    display: none;
    border: 1px solid rgba(233,69,96,0.3);
}

.types-game-panel.visible {
    display: block;
}

.types-game-panel-title {
    text-align: center;
    font-size: 0.65rem;
    color: #e94560;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.types-game-real-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.types-game-real-btn {
    background: #1a1a2e;
    border: 2px solid #3498db;
    border-radius: 12px;
    padding: 10px 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
}

.types-game-real-btn:hover {
    transform: translateY(-3px);
    border-color: white;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
}

.types-game-real-btn:active {
    transform: scale(0.97);
}

.types-game-real-btn img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.types-game-real-btn span {
    font-size: 0.55rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    text-align: center;
    word-break: break-word;
}

.types-game-status {
    text-align: center;
    font-size: 0.6rem;
    color: #f39c12;
    font-family: 'Minecraft', monospace;
}

.types-game-reset-area {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.types-game-reset-btn {
    background: rgba(15, 52, 96, 0.8);
    border: 1px solid #e94560;
    padding: 8px 20px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
}

.types-game-reset-btn:hover {
    background: rgba(233, 69, 96, 0.3);
    transform: translateY(-2px);
}

.types-game-history-panel {
    background: rgba(15, 52, 96, 0.5);
    border-radius: 20px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
    flex: 0 0 280px;
}

.types-game-history-title {
    font-size: 0.6rem;
    color: #e94560;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(233,69,96,0.3);
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.types-game-history-item {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 0.55rem;
    color: #ccc;
    line-height: 1.5;
}

.types-game-history-item strong {
    color: #e94560;
}

/* ------------------- Менеджер фона и музыки ------------------- */
.bg-music-manager {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    min-height: 300px;
}

.bg-panel,
.music-panel {
    flex: 1;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-title {
    font-size: 0.8rem;
    color: #e94560;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e94560;
    flex-shrink: 0;
}

/* Сетка фонов */
.bg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    overflow-y: auto;
    flex: 1;
}

.bg-card {
    background: #1a1a2e;
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    position: relative;
}

.bg-card:hover {
    transform: translateY(-3px);
    border-color: #e94560;
    box-shadow: 0 5px 15px rgba(233, 69, 96, 0.3);
}

.bg-card.active {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.2);
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

.bg-card img {
    width: 100%;
    height: 123px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
}

.bg-card span {
    font-size: 0.55rem;
    color: white;
    display: block;
}

.bg-card .delete-bg-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #e74c3c;
    border: none;
    border-radius: 6px;
    color: white;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.bg-card .delete-bg-btn:nth-child(3) {
    right: 26px;
    background: #e94560;
}

.bg-card:hover .delete-bg-btn {
    opacity: 1;
}

.music-rename-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.music-rename-btn:hover {
    color: #e94560;
    border-color: #e94560;
}

/* Карточка текущего фона */
.bg-card--preview {
    cursor: default;
}
.bg-card--preview:hover {
    transform: none;
    border-color: rgba(233, 69, 96, 0.3);
    box-shadow: none;
}
.bg-preview-thumb {
    width: 100%;
    height: 123px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px;
    background: #111;
}
.bg-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0;
}

/* Карточка загрузки */
.bg-card--upload {
    border-style: dashed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

/* Список треков */
.music-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
}

.music-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(26, 26, 46, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.music-item:hover {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.1);
}

.music-item:has(.fa-plus) {
    border-style: dashed;
    border-color: rgba(233, 69, 96, 0.3);
}

.music-item.active {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.2);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

.music-item-info {
    flex: 1 1 auto;
    min-width: 0;
}

.music-item-name {
    font-size: 0.65rem;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-item-file {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-item-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(233, 69, 96, 0.4);
    background: rgba(26, 26, 46, 0.8);
    color: #e94560;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.music-item-btn:hover {
    background: rgba(233, 69, 96, 0.2);
    transform: scale(1.1);
}

.music-delete-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(231, 76, 60, 0.4);
    background: rgba(26, 26, 46, 0.8);
    color: #e74c3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    transition: all 0.2s;
    flex-shrink: 0;
    opacity: 1;
}

.music-delete-btn:hover {
    background: #e74c3c;
    color: white;
    transform: scale(1.1);
}

.music-volume-slider {
    flex: 0 1 120px;
    min-width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(233, 69, 96, 0.25);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.music-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

.music-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

.music-vol-val {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.5);
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.music-controls-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(233, 69, 96, 0.2);
    flex-shrink: 0;
}

.music-master-btn {
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid rgba(233, 69, 96, 0.4);
    background: rgba(26, 26, 46, 0.8);
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.music-master-btn:hover {
    background: rgba(233, 69, 96, 0.2);
}

.music-master-btn.active {
    background: #e94560;
    border-color: #e94560;
}

@media (max-width: 768px) {
    .bg-music-manager {
        flex-direction: column;
    }
}

/* ------------------- Селектор музыки в панели режимов ------------------- */
#gameMusicSelect {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e94560'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px !important;
    min-width: 130px;
}

#gameMusicSelect:hover {
    border-color: #ff6b81;
}

#gameMusicSelect option {
    background: #1a1a2e;
    color: white;
}

/* ------------------- Стилизация скроллбаров ------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff6b81;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #e94560 rgba(26, 26, 46, 0.5);
}
/* ============================================
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ ИСПРАВЛЕНИЙ
   ============================================ */

/* Стили для заголовков вкладок и текста */
.tab-content h2 {
    color: #e94560 !important;
    text-shadow: 0 0 5px rgba(233, 69, 96, 0.3);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* Стили для полей ввода в режиме разработчика */
#devMode input,
#devMode textarea,
#devMode select {
    background: #1a1a2e;
    border: 2px solid #e94560;
    color: white;
    padding: 12px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    width: 100%;
    transition: all 0.3s;
}

#devMode input:focus,
#devMode textarea:focus,
#devMode select:focus {
    outline: none;
    border-color: #ff6b81;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

#devMode input::placeholder,
#devMode textarea::placeholder {
    color: #666;
    font-size: 0.6rem;
}

#devMode textarea {
    resize: vertical;
    min-height: 80px;
}

/* Стили для меток в режиме разработчика */
#devMode label {
    color: #e94560;
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

/* Стили для заголовков панелей в режиме разработчика */
#devMode .editor-title {
    font-size: 0.8rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e94560;
    color: white;
}

#devMode .admin-header .logo {
    font-size: 0.9rem;
}

/* Стили для селектора коллекции */
#devMode .game-selector span {
    color: white !important;
}

/* Стили для списка покемонов в редакторе */
#devMode .pokemon-list {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Стилизация скроллбара для списка покемонов */
#devMode .pokemon-list::-webkit-scrollbar {
    width: 6px;
}

#devMode .pokemon-list::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
}

#devMode .pokemon-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

/* Улучшенные стили для карточек покемонов в редакторе */
#devMode .pokemon-card {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    gap: 12px;
    align-items: center;
}

#devMode .pokemon-card:hover {
    transform: translateX(5px);
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.2);
}

#devMode .pokemon-card.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border-color: white;
}

#devMode .pokemon-card .pokemon-name {
    font-weight: bold;
    color: white;
    font-size: 0.75rem;
}

/* Стили для кнопок в режиме разработчика */
#devMode .save-btn,
#devMode .delete-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    letter-spacing: 1px;
    transition: all 0.3s;
}

#devMode .save-btn:hover,
#devMode .delete-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* Стили для области загрузки изображения */
#devMode .image-upload-area {
    border: 2px dashed #e94560;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: #1a1a2e;
    transition: all 0.3s;
}

#devMode .image-upload-area:hover {
    border-color: #ff6b81;
    background: rgba(233, 69, 96, 0.1);
}

#devMode .image-upload-area p {
    color: #aaa;
    font-size: 0.6rem;
    margin-top: 10px;
}

#devMode .image-upload-area i {
    color: #e94560;
    font-size: 2rem;
}

/* Стили для превью изображения */
#devMode .image-preview {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    margin-top: 10px;
    border-radius: 12px;
    border: 2px solid #e94560;
    background: #1a1a2e;
}
.image-preview {
    max-height: 260px;
    width: auto;
    object-fit: contain;
}
/* ЗАГОЛОВКИ НЕ СЖИМАЮТСЯ */
.editor-panel .editor-title,
.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e94560 !important;
}

/* Стили для сетки типов */
#devMode .type-icons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
    max-height: 300px;
    overflow-y: auto;
    padding: 5px;
}

#devMode .type-icon-item {
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    text-align: center;
    width: 85px;
    transition: all 0.2s;
}

#devMode .type-icon-item.selected {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border-color: white;
    transform: scale(1.05);
}

#devMode .type-icon-item:hover {
    transform: scale(1.05);
    border-color: white;
}

#devMode .type-icon-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

#devMode .type-icon-item span {
    font-size: 9px;
    display: block;
    margin-top: 5px;
    color: white;
}

/* Стили для главной сетки игр */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

/* Стили для информационных сообщений */
#tabPlay h2 {
    color: #e94560 !important;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

/* Улучшенные стили для модального окна */
.modal-content input,
.modal-content textarea {
    background: #1a1a2e;
    border: 2px solid #e94560;
    color: white;
    padding: 12px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    width: 100%;
}

.modal-content input:focus,
.modal-content textarea:focus {
    outline: none;
    border-color: #ff6b81;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

.modal-content input::placeholder {
    color: #666;
}

/* Стили для статистики фильтров */
.filter-stats {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(233, 69, 96, 0.3);
}
/* Стили для селектора коллекции - фикс расположения элементов */
.game-selector {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    position: relative !important;
    z-index: 1001 !important;
}

.game-selector i,
.game-selector span,
.game-selector select,
.game-selector button {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.game-selector span {
    margin: 0 !important;
    padding: 0 !important;
}

/* Убираем лишние отступы */
.admin-header {
    gap: 15px !important;
}

.admin-header > div {
    margin: 0 !important;
}
/* ------------------- Адаптивность ------------------- */
@media (max-width: 768px) {
    body {
        padding: 8px;
    }
    
    .menu-header h1 {
        font-size: 1.2rem;
    }
    
    .tab-btn {
        padding: 6px 15px;
        font-size: 0.7rem;
    }
    
    .filter-gen-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .filter-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .modal-two-columns {
        flex-direction: column;
    }
    
    .modal-filters {
        max-height: 250px;
        overflow-y: auto;
    }
    
    .pokemon-list-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .pres-card {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    
    .pres-image-area {
        min-width: auto;
    }
    
    .pres-pokemon-name {
        font-size: 1.5rem;
    }
    
    .pres-description {
        font-size: 0.8rem;
    }
    
    .reveal-btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
    
    .pres-nav-btn {
        padding: 8px 20px;
        font-size: 0.7rem;
    }
    
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    #devMode .type-icons-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    #devMode .type-icon-item {
        width: 70px;
    }
    
    #devMode .type-icon-item img {
        width: 40px;
        height: 40px;
    }
    
    .games-grid {
        grid-template-columns: 1fr;
    }
/* Дополнительные стили для заголовков и текста */
#tabPlay h2,
#tabDev h2,
#tabTypes h2 {
    color: #e94560 !important;
    text-shadow: 0 0 5px rgba(233, 69, 96, 0.3);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* Стили для текста в селекторах */
.game-selector span {
    color: white !important;
}

/* Улучшенные стили для полей ввода в редакторе */
#pokemonNameDev,
#pokemonDescriptionDev {
    resize: vertical;
    min-height: 80px;
}

#pokemonNameDev:focus,
#pokemonDescriptionDev:focus {
    outline: none !important;
    border-color: #ff6b81 !important;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5) !important;
}

#pokemonNameDev::placeholder,
#pokemonDescriptionDev::placeholder {
    color: #666 !important;
    font-size: 0.6rem !important;
}

/* Стили для меток в редакторе */
#devMode label {
    color: #e94560 !important;
    font-size: 0.75rem !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
    display: block !important;
}
    .game-selector {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
/* Исправление для панели списка покемонов в режиме разработчика */
.slides-list-panel {
    flex: 1 !important;
    min-width: 280px !important;
}

.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
}

.pokemon-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-right: 5px !important;
    min-height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Для главной сетки в режиме разработчика */
.main-grid {
    align-items: stretch !important;
    min-height: 600px !important;
    flex: 1 !important;
}

.editor-panel,
.slides-list-panel {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 550px !important;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .slides-list-panel {
        min-height: 400px !important;
    }
    
    .pokemon-list {
        min-height: 300px !important;
    }
}

/* ЗАГОЛОВОК ПАНЕЛИ - НЕ СЖИМАЕТСЯ */
.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e94560 !important;
}

.pokemon-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-right: 5px !important;
    min-height: 400px !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

/* ЛЕВАЯ ПАНЕЛЬ */
.editor-panel {
    flex: 2 !important;
    min-width: 350px !important;
}

/* КОНТЕНТ ЛЕВОЙ ПАНЕЛИ */
.editor-panel .form-group {
    flex-shrink: 0;
}

.editor-panel .action-buttons {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

//* ОСНОВНОЙ КОНТЕЙНЕР РАЗРАБОТЧИКА - УБИРАЕМ ОГРАНИЧЕНИЯ */
#devMode {
    height: auto !important;
    min-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ГЛАВНАЯ СЕТКА - РОДИТЕЛЬСКИЙ КОНТЕЙНЕР */
.main-grid {
    display: flex !important;
    gap: 25px !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;  /* ← ЗАСТАВЛЯЕТ ДОЧЕРНИЕ ЭЛЕМЕНТЫ РАСТЯГИВАТЬСЯ */
    min-height: 500px !important;
}

/* ОБЕ ПАНЕЛИ - ОДИНАКОВАЯ ВЫСОТА */
.editor-panel, 
.slides-list-panel {
    display: flex !important;
    flex-direction: column !important;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    transition: all 0.3s;
    border-radius: 16px;
    padding: 20px;
    color: white;
    height: auto !important;  /* ← АВТОМАТИЧЕСКАЯ ВЫСОТА */
    min-height: 100% !important;  /* ← ЗАНИМАЮТ ВСЮ ВЫСОТУ РОДИТЕЛЯ */
}
/* Адаптив для мобильных */
@media (max-width: 768px) {
    .slides-list-panel {
        min-height: 350px !important;
    }
    
    .pokemon-list {
        min-height: 300px !important;
    }
}
/* ФИНАЛЬНЫЙ ФИКС - ЗАСТАВЛЯЕМ СПИСОК РАСТЯНУТЬСЯ */
body {
    min-height: 100vh;
}

#mainMenu {
    min-height: auto;
    display: flex;
    flex-direction: column;
}

#tabDev.active {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 500px !important;
}

#devMode {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

#tabDevNew {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 500px !important;
}

#devModeNew {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
}

.main-grid {
    flex: 1 !important;
    display: flex !important;
}

/* Карточки покемонов на всю ширину */
#pokemonListDev > div {
    width: 100% !important;
    box-sizing: border-box !important;
}
.action-buttons {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* АДАПТИВ */
@media (max-width: 768px) {
    .main-grid {
        min-height: 400px !important;
    }
    
    .pokemon-list {
        min-height: 150px !important;
    }
}
/* ФИКС ДЛЯ РОДИТЕЛЬСКИХ КОНТЕЙНЕРОВ */
#tabDev.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

#devMode {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

.main-grid {
    flex: 1 !important;
}
/* Замените существующий стиль для .pokemon-list на этот */

#devMode .pokemon-list {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Добавьте эти стили для лучшей работы скролла */

.slides-list-panel {
    flex: 1;
    min-width: 280px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: 80vh;
}

.slides-list-panel .editor-title {
    flex-shrink: 0;
}

#devMode .pokemon-list {
    flex: 1;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Стилизация скроллбара */
#devMode .pokemon-list::-webkit-scrollbar {
    width: 6px;
}

#devMode .pokemon-list::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
}

#devMode .pokemon-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

#devMode .pokemon-list::-webkit-scrollbar-thumb:hover {
    background: #ff6b81;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .slides-list-panel {
        max-height: 400px;
    }
    
    #devMode .pokemon-list {
        max-height: 300px;
    }
}
/* Дополнительный фикс для списка покемонов */
.main-grid {
    align-items: stretch !important;
}

.slides-list-panel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
    margin-bottom: 20px !important;
}

#devMode .pokemon-list {
    flex: 1 1 auto !important;
    min-height: 200px !important;
    max-height: calc(80vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
@media (max-width: 768px) {
    .pres-content {
        flex-direction: column !important;
    }
    .pres-card {
        padding: 20px !important;
    }
    .pres-pokemon-name {
        font-size: 1.5rem !important;
    }
}
}
/* ============================================
   ОБЫЧНАЯ ПРЕЗЕНТАЦИЯ (БЕЗ САЙДБАРА)
   ============================================ */

/* Обычная презентация: карточка по центру, колонка */
.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-card-container {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-card {
    width: 95vw !important;
    max-width: 1400px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 60px !important;
    padding: 60px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-image-area {
    flex: 1 !important;
    min-width: 400px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-image-area img {
    width: 100% !important;
    max-height: 55vh !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-info-area {
    flex: 1.5 !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-pokemon-name {
    font-size: 3.6rem !important;
    margin-bottom: 30px !important;
    text-align: left !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .reveal-btn {
    padding: 20px 40px !important;
    font-size: 1.2rem !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-nav {
    margin-top: 45px !important;
    gap: 40px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-nav-btn {
    padding: 15px 45px !important;
    font-size: 1rem !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-counter-wrapper {
    margin-top: 30px !important;
}

/* Адаптив обычной презентации на мобильных */
@media (max-width: 768px) {
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-card {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 20px !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-image-area {
        min-width: auto !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-pokemon-name {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-description {
        font-size: 0.8rem !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .reveal-btn {
        padding: 10px 20px !important;
        font-size: 0.8rem !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-nav-btn {
        padding: 8px 20px !important;
        font-size: 0.7rem !important;
    }
}

/* ============================================
   РЕЖИМ "ОДИН ИГРОК" — САЙДБАР ВНУТРИ .pres-content
   Левая часть = карточка (~70%), Правая = пульт (~30%)
   ============================================ */

/* Сайдбара нет — скрыт по умолчанию */
#gameSidebar {
    display: none;
}

/* Когда сайдбар виден — переключаем pres-content на строку */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 20px !important;
}

/* Карточка покемона — левая часть ~62% */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card-container {
    flex: 1 1 62% !important;
    min-width: 0 !important;
    max-width: 62% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Карточка растягивается на всю ширину контейнера */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card {
    width: 100% !important;
    padding: 25px !important;
    gap: 30px !important;
    flex: 1 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-image-area {
    order: 2 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-info-area {
    order: 1 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-pokemon-name {
    text-align: right !important;
    font-size: 1.8rem !important;
    margin-bottom: 15px !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-description {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    padding: 14px !important;
    margin-bottom: 15px !important;
}

/* Навигация под карточкой */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-nav {
    margin-top: 15px !important;
    gap: 20px !important;
    flex-shrink: 0 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-nav-btn {
    padding: 10px 25px !important;
    font-size: 0.8rem !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-counter-wrapper {
    margin-top: 0 !important;
}

/* Скрыть кнопку "Раскрыть тип" и навигацию в режиме один игрок */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .reveal-types-container {
    display: none !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-nav {
    display: none !important;
}

/* В комнате (room-mode) — показать раскрытие типов в карточке, скрыть навигацию */
.fullscreen-presentation.room-mode:has(#gameSidebar[style*="display: block"]) .reveal-types-container {
    display: flex !important;
}

.fullscreen-presentation.room-mode:has(#gameSidebar[style*="display: block"]) .pres-nav {
    display: none !important;
}

/* Кнопки управления комнатой в sidebar */
#roomPresPrevBtn, #roomPresNextBtn {
    background: rgba(15,52,96,0.5) !important;
}

#roomPresPrevBtn:hover, #roomPresNextBtn:hover {
    background: rgba(233,69,96,0.3) !important;
}

/* Пульт — правая часть ~30% */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 38% !important;
    max-width: 38% !important;
    min-width: 260px !important;
    background: rgba(10, 20, 40, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 30px !important;
    padding: 20px !important;
    border: 1px solid rgba(233, 69, 96, 0.4) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}

/* Стили элементов пульта */
#gameSidebar h3 {
    color: #e94560 !important;
    font-size: 1rem !important;
    margin-bottom: 15px !important;
    text-align: center !important;
}

#gameSidebar .types-game-section {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    margin-bottom: 15px !important;
    border: 1px solid rgba(233, 69, 96, 0.2) !important;
    overflow: hidden !important;
    flex: none !important;
}

#gameSidebar .types-game-section.section-active {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#gameSidebar .types-game-section-header {
    background: rgba(233, 69, 96, 0.15) !important;
    padding: 10px 15px !important;
    font-size: 0.65rem !important;
    color: #e94560 !important;
    flex-shrink: 0 !important;
}

#gameSidebar #singleMainContent,
#gameSidebar #singleExtraContent {
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#gameSidebar .types-game-types-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    align-content: stretch !important;
}

#gameSidebar .types-game-type-btn,
#gameSidebar .types-game-real-btn {
    background: #1a1a2e !important;
    border: 2px solid #e94560 !important;
    border-radius: 10px !important;
    padding: 10px 4px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

#gameSidebar .types-game-type-btn img,
#gameSidebar .types-game-real-btn img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
}

#gameSidebar .types-game-type-btn.type-selected {
    background: rgba(233, 69, 96, 0.4) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4) !important;
}

#gameSidebar .types-game-type-btn span,
#gameSidebar .types-game-real-btn span {
    font-size: 0.5rem !important;
    color: white !important;
}

#gameSidebar .types-game-selected-list {
    padding: 8px 12px !important;
    display: none !important;
}

#gameSidebar #singleCommitBtn {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

#gameSidebar .types-game-chip {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    padding: 3px 8px !important;
    border-radius: 15px !important;
    font-size: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: white !important;
}

#gameSidebar .types-game-remove {
    background: rgba(0,0,0,0.4) !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
    padding: 1px 5px !important;
    border-radius: 10px !important;
    font-size: 0.5rem !important;
}

#gameSidebar .types-game-real-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
}

#gameSidebar .types-game-status {
    font-size: 0.55rem !important;
    text-align: center !important;
    color: #f39c12 !important;
    padding: 8px !important;
}

#singleCommitBtn {
    width: 100% !important;
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border: none !important;
    padding: 10px !important;
    font-size: 0.65rem !important;
    border-radius: 25px !important;
    color: white !important;
    cursor: pointer !important;
    margin-bottom: 15px !important;
    font-family: 'Minecraft', monospace !important;
    letter-spacing: 1px !important;
}

#singleCommitBtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 20px rgba(233,69,96,0.4) !important;
}

#singleResetBtn {
    background: rgba(15, 52, 96, 0.8) !important;
    border: 1px solid #e94560 !important;
    padding: 6px 15px !important;
    border-radius: 20px !important;
    color: white !important;
    cursor: pointer !important;
    font-size: 0.55rem !important;
    font-family: 'Minecraft', monospace !important;
}

#singleRealPanel {
    background: rgba(233, 69, 96, 0.1) !important;
    border-radius: 15px !important;
    padding: 10px !important;
    margin-top: 10px !important;
    border: 1px solid rgba(233,69,96,0.3) !important;
}

#singleGameScore {
    font-size: 1rem !important;
    font-weight: bold !important;
    color: #f39c12 !important;
    text-align: center !important;
    margin-bottom: 15px !important;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-content {
        flex-direction: column !important;
    }
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card-container {
        flex: none !important;
        max-width: 100% !important;
    }
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
        flex: none !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}
/* ============================================
   ПУЛЬТ ИГРОКА КОМНАТЫ (room.html) — точная копия #gameSidebar
   ============================================ */
#roomSidebarArea {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 38% !important;
    max-width: 38% !important;
    min-width: 280px !important;
    background: rgba(10, 20, 40, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 30px !important;
    padding: 20px !important;
    border: 1px solid rgba(233, 69, 96, 0.4) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

#roomSidebarArea h3 {
    color: #e94560 !important;
    font-size: 1rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-family: 'Minecraft', monospace !important;
}

#roomSidebarArea .types-game-section {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    margin-bottom: 15px !important;
    border: 1px solid rgba(233, 69, 96, 0.2) !important;
    overflow: hidden !important;
    flex: none !important;
}

#roomSidebarArea .types-game-section.section-active {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#roomSidebarArea .types-game-section-header {
    background: rgba(233, 69, 96, 0.15) !important;
    padding: 10px 15px !important;
    font-size: 0.65rem !important;
    color: #e94560 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    user-select: none !important;
    font-family: 'Minecraft', monospace !important;
}

#roomSidebarArea #roomMainContent,
#roomSidebarArea #roomExtraContent {
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#roomSidebarArea .types-game-types-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    align-content: stretch !important;
}

#roomSidebarArea .types-game-type-btn {
    background: #1a1a2e !important;
    border: 2px solid #e94560 !important;
    border-radius: 10px !important;
    padding: 10px 4px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 100% !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#roomSidebarArea .types-game-type-btn img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
}

#roomSidebarArea .types-game-type-btn span {
    font-size: 0.5rem !important;
    color: white !important;
    font-family: 'Minecraft', monospace !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

#roomSidebarArea .types-game-type-btn.type-selected {
    background: rgba(233, 69, 96, 0.4) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4) !important;
    transform: translateY(-2px) !important;
}

#roomSidebarArea .types-game-type-btn:hover:not(:disabled) {
    border-color: #ff6b81 !important;
    background: #252542 !important;
    transform: translateY(-1px) !important;
}

#roomSidebarArea .types-game-type-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

#roomSidebarArea .types-game-selected-list {
    display: none !important;
}

#roomSidebarArea .types-game-commit {
    width: 100% !important;
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border: none !important;
    padding: 14px 20px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
    color: white !important;
    cursor: pointer !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    font-family: 'Minecraft', monospace !important;
    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4) !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

#roomSidebarArea .types-game-commit:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.6) !important;
    transform: translateY(-1px) !important;
}

#roomSidebarArea .types-game-commit:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

#roomSidebarArea .types-game-reset-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 6px 18px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#roomSidebarArea .types-game-reset-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* Стили презентации для комнаты room.html */
.room-fullscreen {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 100vh !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

.room-fullscreen .pres-header {
    background: rgba(10, 20, 40, 0.75) !important;
    backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(233, 69, 96, 0.25) !important;
    padding: 10px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
}

.room-fullscreen .pres-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 20px !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
}

.room-fullscreen .pres-card-container {
    flex: 1 1 62% !important;
    min-width: 0 !important;
    max-width: 62% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.room-fullscreen .pres-card {
    width: 100% !important;
    background: rgba(10, 20, 40, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 30px !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 25px !important;
    gap: 30px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.room-fullscreen .pres-image-area {
    order: 2 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.room-fullscreen .pres-image-area img {
    max-width: 100% !important;
    max-height: 50vh !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6)) !important;
}

.room-fullscreen .pres-info-area {
    order: 1 !important;
    flex: 1.2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.room-fullscreen .pres-pokemon-name {
    text-align: right !important;
    font-size: 1.8rem !important;
    margin-bottom: 15px !important;
    color: #e94560 !important;
    font-family: 'Minecraft', monospace !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.6) !important;
    word-break: break-word !important;
}

.room-fullscreen .pres-description {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    padding: 16px !important;
    margin-bottom: 15px !important;
    background: rgba(15, 30, 55, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: 'Minecraft', monospace !important;
    backdrop-filter: blur(10px) !important;
    max-height: 250px !important;
    overflow-y: auto !important;
}

@media (max-width: 992px) {
    .room-fullscreen .pres-content {
        flex-direction: column !important;
        padding: 12px !important;
        gap: 16px !important;
    }
    .room-fullscreen .pres-card-container {
        max-width: 100% !important;
        flex: none !important;
    }
    .room-fullscreen .pres-card {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 16px !important;
    }
    .room-fullscreen .pres-image-area {
        order: 1 !important;
    }
    .room-fullscreen .pres-image-area img {
        max-height: 200px !important;
    }
    .room-fullscreen .pres-info-area {
        order: 2 !important;
        width: 100% !important;
    }
    .room-fullscreen .pres-pokemon-name {
        text-align: center !important;
        font-size: 1.5rem !important;
    }
    #roomSidebarArea {
        flex: none !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
    }
}

@media (max-width: 540px) {
    #roomSidebarArea .types-game-types-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    #roomSidebarArea .types-game-type-btn {
        min-height: 52px !important;
        padding: 6px 2px !important;
    }
    #roomSidebarArea .types-game-type-btn img {
        width: 28px !important;
        height: 28px !important;
    }
    #roomSidebarArea .types-game-type-btn span {
        font-size: 0.42rem !important;
    }
}

/* ============================================
   РАСКРЫТИЕ ТИПОВ
   ============================================ */

/* Контейнер-обёртка — красивая последовательная анимация */
.reveal-types-container {
    position: relative;
    width: 100%;
    border-radius: 60px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    background: linear-gradient(90deg, 
        /* Красные/Оранжевые */
        #F08030, #F85888, #C03028, #EE99AC,
        /* Жёлтые/Золотые */
        #F8D030, #E0C068, #B8A038,
        /* Зелёные/Травяные */
        #78C850, #A8B820, #98D8D8,
        /* Синие/Водные */
        #6890F0, #7038F8, #705898, #A890F0,
        /* Нейтральные/Тёмные */
        #A8A878, #705848, #A040A0, #B8B8D0,
        /* Замыкание */
        #F08030
    );
    background-size: 400% auto;
    animation: pokemonRainbow 18s linear infinite;
}

@keyframes pokemonRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* Контейнер раскрыт — увеличиваем высоту с плавной анимацией */
.reveal-types-container.types-expanded {
    padding-bottom: 250px;
    transition: padding-bottom 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* Кнопка — прозрачная */
#revealPresBtn {
    width: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    border: none;
    padding: 20px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #FFD700;
    border-radius: 60px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    text-shadow: 
        -1px -1px 0 rgba(0,0,0,0.5),
        1px -1px 0 rgba(0,0,0,0.5),
        -1px 1px 0 rgba(0,0,0,0.5),
        1px 1px 0 rgba(0,0,0,0.5),
        0 0 5px rgba(0,0,0,0.5);
}

/* Кнопка раскрыта */
#revealPresBtn.types-expanded {
    opacity: 0.7;
    font-size: 0.8rem;
    padding-top: 10px;
    padding-bottom: 10px;
    text-shadow: 
        -1px -1px 0 rgba(0,0,0,0.6),
        1px -1px 0 rgba(0,0,0,0.6),
        -1px 1px 0 rgba(0,0,0,0.6),
        1px 1px 0 rgba(0,0,0,0.6);
}


/* Панель типов — плавное появление */
.types-reveal-panel {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1), visibility 0.4s;
    z-index: 3;
}

.types-reveal-panel.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1) 0.1s, visibility 0.4s;
}

/* Карточки типов — анимация появления с задержкой */
.types-reveal-panel .reveal-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px 35px;
    border-radius: 35px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.types-reveal-panel.show .reveal-type-card {
    opacity: 1;
    transform: translateY(0);
}

.types-reveal-panel.show .reveal-type-card:nth-child(1) { transition-delay: 0.05s; }
.types-reveal-panel.show .reveal-type-card:nth-child(2) { transition-delay: 0.1s; }

.types-reveal-panel .reveal-type-card:hover {
    transform: scale(1.05);
    background: rgba(233, 69, 96, 0.4);
    border-color: #e94560;
}

.types-reveal-panel .reveal-type-card img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.types-reveal-panel .reveal-type-card span {
    font-size: 1.1rem;
    color: white;
    font-weight: bold;
}
/* ============================================
   СЖАТИЕ ОПИСАНИЯ
   ============================================ */

/* Описание — нормальное состояние */
.pres-description {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 45px;
    color: #f0f0f0;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 30px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

/* Описание сжатое — когда карточка раскрыта */
.pres-card.types-expanded .pres-description {
    margin-bottom: 15px;
    padding: 10px 20px;
    font-size: 0.9rem;
    line-height: 1.3;
    max-height: 80px;
    overflow-y: auto;
    transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
/* ============================================
   ЦВЕТНЫЕ РАМКИ ДЛЯ КАРТОЧЕК ПОКЕМОНОВ
   ============================================ */

/* Анимация мерцания для рамок */
@keyframes borderPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);
        border-color: rgba(233, 69, 96, 0.6);
    }
    70% {
        box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1);
        border-color: rgba(233, 69, 96, 1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
        border-color: rgba(233, 69, 96, 0.6);
    }
}

/* Базовый стиль карточки */
#devMode .pokemon-card {
    position: relative;
    transition: all 0.3s ease;
}

/* Цвета типов для рамок */
.border-type-normal { border-color: #A8A878; }
.border-type-fire { border-color: #F08030; }
.border-type-water { border-color: #6890F0; }
.border-type-electric { border-color: #F8D030; }
.border-type-grass { border-color: #78C850; }
.border-type-ice { border-color: #98D8D8; }
.border-type-fighting { border-color: #C03028; }
.border-type-poison { border-color: #A040A0; }
.border-type-ground { border-color: #E0C068; }
.border-type-flying { border-color: #A890F0; }
.border-type-psychic { border-color: #F85888; }
.border-type-bug { border-color: #A8B820; }
.border-type-rock { border-color: #B8A038; }
.border-type-ghost { border-color: #705898; }
.border-type-dragon { border-color: #7038F8; }
.border-type-dark { border-color: #705848; }
.border-type-steel { border-color: #B8B8D0; }
.border-type-fairy { border-color: #EE99AC; }

/* Один тип — сплошная рамка */
#devMode .pokemon-card[data-type-count="1"] {
    border: 2px solid;
    transition: all 0.3s ease;
}

/* Два типа — градиентная рамка (по диагонали) */
#devMode .pokemon-card[data-type-count="2"] {
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.3s ease;
}

/* Анимация мерцания для всех карточек */
#devMode .pokemon-card {
    animation: borderPulse 2s ease-in-out infinite;
}

/* Замедляем анимацию для карточек без типов */
#devMode .pokemon-card[data-type-count="0"] {
    animation: borderPulse 3s ease-in-out infinite;
    border-color: rgba(233, 69, 96, 0.4);
}

/* У карточек с градиентом убираем стандартную анимацию border, добавляем свою */
#devMode .pokemon-card[data-type-count="2"] {
    animation: none;
    position: relative;
    background-clip: padding-box;
}

#devMode .pokemon-card[data-type-count="2"]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--color1), var(--color2));
    border-radius: 15px;
    z-index: -1;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

#devMode .pokemon-card[data-type-count="2"]:hover::before {
    opacity: 1;
}

/* Для градиентных карточек своя анимация */
#devMode .pokemon-card[data-type-count="2"] {
    animation: borderGradientPulse 2s ease-in-out infinite;
}

@keyframes borderGradientPulse {
    0% { box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.3); }
    50% { box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(233, 69, 96, 0); }
}
/* ============================================
   ЦВЕТНЫЕ РАМКИ ДЛЯ КАРТОЧЕК ПОКЕМОНОВ
   ============================================ */

/* Анимация мерцания */
@keyframes borderPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

/* Базовый стиль карточки */
#devMode .pokemon-card {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 74px;
}

/* Контейнер списка — убираем горизонтальный скролл */
#devMode .pokemon-list,
#devMode .slides-list-panel {
    overflow-x: hidden !important;
}

/* Подсветка при наведении для всех карточек — только сдвиг и лёгкое свечение */
#devMode .pokemon-card:hover {
    transform: translateX(5px);
    filter: brightness(1.03);
    box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.2);
}

/* Карточка с одним типом */
#devMode .pokemon-card[data-type-count="1"] {
    border: 2px solid var(--card-color);
    animation: borderPulse 2s ease-in-out infinite;
}

/* Карточка с двумя типами — градиентная рамка */
#devMode .pokemon-card[data-type-count="2"] {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: none;
    position: relative;
    z-index: 0;
}

#devMode .pokemon-card[data-type-count="2"]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--color1), var(--color2));
    border-radius: 17px;
    z-index: -2;
    transition: opacity 0.3s ease;
    opacity: 0.8;
    animation: borderPulse 2s ease-in-out infinite;
}

#devMode .pokemon-card[data-type-count="2"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border-radius: 13px;
    z-index: -1;
}

/* Карточка без типов */
#devMode .pokemon-card[data-type-count="0"] {
    border: 2px solid rgba(233, 69, 96, 0.5);
    animation: borderPulse 3s ease-in-out infinite;
}

/* Активная карточка */
#devMode .pokemon-card.active {
    border: 2px solid white !important;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
}

/* У активной карточки с двумя типами отключаем псевдоэлементы */
#devMode .pokemon-card.active[data-type-count="2"]::before,
#devMode .pokemon-card.active[data-type-count="2"]::after {
    display: none;
}

/* ============================================
   ФОН ДЛЯ ОБЛАСТИ ЗАГРУЗКИ ФОТО
   ============================================ */

/* Фон для области загрузки фото покемона */
#uploadAreaDev {
    background-image: url('background/PhotoFon.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

/* Затемнение фона, чтобы фото покемона было лучше видно */
#uploadAreaDev::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 16px;
    pointer-events: none;
    z-index: 0;
}

/* Само фото покемона поверх фона */
#imagePreviewDev {
    position: relative;
    z-index: 2;
    background: transparent !important;
}

/* Плейсхолдер тоже поверх фона */
#imagePlaceholder {
    position: relative;
    z-index: 2;
}
/* ============================================
   ТЕНЬ ДЛЯ ФОТО ПОКЕМОНА
   ============================================ */

/* Тень для фото покемона */
#imagePreviewDev {
    filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.9));
    transition: filter 0.3s ease;
}

#imagePreviewDev:hover {
    filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 1));
}
/* ============================================
   СТИЛИ ДЛЯ АКТИВНОЙ КАРТОЧКИ
   ============================================ */

#devMode .pokemon-card.active .pokemon-name,
#devMode .pokemon-card.active > div div:last-child {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: bold;
}
/* ============================================
   ФИКС ОБРЕЗАНИЯ ИМЕНИ ПОКЕМОНА
   ============================================ */

#devMode .pokemon-card .pokemon-name {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.3;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 0.7rem !important;
}

#devMode .pokemon-card {
    min-height: 74px;
    height: auto;
}

#devMode .pokemon-card > div {
    min-width: 0;
    flex: 1;
}
/* ============================================
   ЭФФЕКТ БЛИКА ДЛЯ АКТИВНОЙ КАРТОЧКИ
   ============================================ */

/* Общий контейнер для всех карточек - обеспечиваем overflow hidden */
#devMode .pokemon-card.active {
    position: relative;
    overflow: hidden;
}

/* Анимация блика - используем отдельный класс, который будет добавляться через JS */
#devMode .pokemon-card.active .shine-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.7), 
        transparent
    );
    animation: shineSimple 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 9999;
}

@keyframes shineSimple {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}



/* Фикс для занавески — чтобы доходила до краёв */
.tab-btn {
    overflow: hidden;
}

.tab-btn:hover::before {
    width: 1000px;
    height: 1000px;
}

/* Кнопки действий в режиме разработчика — яркие, но приятные глазу */
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev) {
    transition: all 0.2s ease !important;
    font-weight: normal !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    color: white !important;
    border: none !important;
}

/* Вернуться к игре — ярко-жёлтый */
.back-to-play-btn {
    background: #e67e22 !important;
}
.back-to-play-btn:hover {
    background: #f39c12 !important;
    transform: translateY(-2px);
}

/* Добавить покемона — синий */
#addPokemonBtnDev {
    background: #2980b9 !important;
}
#addPokemonBtnDev:hover {
    background: #3498db !important;
    transform: translateY(-2px);
}

/* По шаблону — фиолетовый */
#templateBtn {
    background: #8e44ad !important;
}
#templateBtn:hover {
    background: #9b59b6 !important;
    transform: translateY(-2px);
}

/* Случайный — оранжевый */
#randomPokemonBtn {
    background: #d35400 !important;
}
#randomPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}

/* Сохранить — зелёный */
#savePokemonBtnDev {
    background: #27ae60 !important;
}
#savePokemonBtnDev:hover {
    background: #2ecc71 !important;
    transform: translateY(-2px);
}

/* Удалить — красный */
#deletePokemonBtnDev {
    background: #c0392b !important;
}
#deletePokemonBtnDev:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Новая коллекция — бирюзовый */
#createGameBtnDev {
    background: #16a085 !important;
}
#createGameBtnDev:hover {
    background: #1abc9c !important;
    transform: translateY(-2px);
}

/* Экспорт — тёмно-синий */
#exportCollectionBtn {
    background: #2c3e50 !important;
}
#exportCollectionBtn:hover {
    background: #34495e !important;
    transform: translateY(-2px);
}

/* Импорт — серо-синий */
#importCollectionBtn {
    background: #3a6a7a !important;
}
#importCollectionBtn:hover {
    background: #4a8a9a !important;
    transform: translateY(-2px);
}

/* Удалить коллекцию */
#deleteCurrentGameBtn {
    background: #c0392b !important;
}
#deleteCurrentGameBtn:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Очистить пустые записи */
#clearEmptyPokemonBtn {
    background: #d35400 !important;
}
#clearEmptyPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}
/* ============================================
   ГЛОБАЛЬНОЕ ЕДИНООБРАЗИЕ СКРУГЛЕНИЙ
   ============================================ */

/* Основные контейнеры */
.main-menu,
.menu-header,
.tab-content,
.game-card,
.modal-content,
.confirm-modal-content,
.completion-modal-content,
.pres-card,
.editor-panel,
.slides-list-panel,
.bg-manager,
.bg-card,
.types-game-container,
.types-game-section,
.types-game-history-panel {
    border-radius: 20px !important;
}

/* Кнопки */
.tab-btn,
.pres-nav-btn,
.close-pres-btn,
.reveal-btn,
.back-to-play-btn,
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev),
.save-btn,
.delete-btn,
.btn-confirm,
.btn-cancel,
.types-game-commit,
.types-game-reset-btn,
#singleCommitBtn,
#singleResetBtn,
.filter-toggle,
.filter-tag,
.filter-gen {
    border-radius: 30px !important;
}

/* Карточки и маленькие блоки */
.pokemon-card,
.template-pokemon-card,
.type-icon-item,
.bg-card img,
.pres-image-area img,
#uploadAreaDev,
.modal-content input,
.modal-content textarea,
#devMode input,
#devMode textarea,
#devMode select {
    border-radius: 12px !important;
}

/* Мелкие элементы */
.types-game-chip,
.types-game-remove,
.social-block,
.custom-notification,
.pres-counter,
.filter-section {
    border-radius: 16px !important;
}

/* Иконки типов и их контейнеры */
.reveal-type-card,
.types-game-type-btn,
.types-game-real-btn {
    border-radius: 14px !important;
}

/* Убираем лишние скругления у внутренних элементов */
.pres-card .reveal-types-container {
    border-radius: 40px !important;
}

/* Полоски и разделители оставляем без скруглений */
.filter-title,
.editor-title,
.bg-title,
.types-game-history-title {
    border-radius: 0 !important;
}
/* ============================================
   АНИМАЦИИ ДЛЯ КАРТОЧЕК КОЛЛЕКЦИЙ
   ============================================ */

/* Появление карточек при загрузке */
.game-card {
    opacity: 0;
    transform: translateY(30px);
    animation: collectionCardReveal 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

@keyframes collectionCardReveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Задержки для каждой карточки */
.games-grid .game-card:nth-child(1) { animation-delay: 0.05s; }
.games-grid .game-card:nth-child(2) { animation-delay: 0.10s; }
.games-grid .game-card:nth-child(3) { animation-delay: 0.15s; }
.games-grid .game-card:nth-child(4) { animation-delay: 0.20s; }
.games-grid .game-card:nth-child(5) { animation-delay: 0.25s; }
.games-grid .game-card:nth-child(6) { animation-delay: 0.30s; }

/* При наведении — плавный подъём и увеличение тени */
.game-card {
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.2);
}

.game-card:hover {
    transform: translateY(-10px) scale(1.02);
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.2);
}

/* Иконка папки внутри карточки — небольшой акцент при наведении */
.game-card:hover h3 i {
    animation: iconPop 0.3s ease-out;
}

@keyframes iconPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Кнопка удаления — появляется с небольшой задержкой при наведении */
.delete-collection-btn {
    opacity: 0.7;
    transition: all 0.2s ease;
}

.game-card:hover .delete-collection-btn {
    opacity: 1;
}

/* Подсветка краёв карточки при наведении */
.game-card {
    position: relative;
    overflow: hidden;
}

.game-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(233, 69, 96, 0.15), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.game-card:hover::after {
    left: 100%;
}
/* Кнопки действий в режиме разработчика — яркие, но приятные глазу */
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev) {
    transition: all 0.2s ease !important;
    font-weight: normal !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    color: white !important;
    border: none !important;
}

/* Вернуться к игре — ярко-жёлтый */
.back-to-play-btn {
    background: #e67e22 !important;
}
.back-to-play-btn:hover {
    background: #f39c12 !important;
    transform: translateY(-2px);
}

/* Добавить покемона — синий */
#addPokemonBtnDev {
    background: #2980b9 !important;
}
#addPokemonBtnDev:hover {
    background: #3498db !important;
    transform: translateY(-2px);
}

/* По шаблону — фиолетовый */
#templateBtn {
    background: #8e44ad !important;
}
#templateBtn:hover {
    background: #9b59b6 !important;
    transform: translateY(-2px);
}

/* Случайный — оранжевый */
#randomPokemonBtn {
    background: #d35400 !important;
}
#randomPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}

/* Сохранить — зелёный */
#savePokemonBtnDev {
    background: #27ae60 !important;
}
#savePokemonBtnDev:hover {
    background: #2ecc71 !important;
    transform: translateY(-2px);
}

/* Удалить — красный */
#deletePokemonBtnDev {
    background: #c0392b !important;
}
#deletePokemonBtnDev:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Новая коллекция — бирюзовый */
#createGameBtnDev {
    background: #16a085 !important;
}
#createGameBtnDev:hover {
    background: #1abc9c !important;
    transform: translateY(-2px);
}

/* Экспорт — тёмно-синий */
#exportCollectionBtn {
    background: #2c3e50 !important;
}
#exportCollectionBtn:hover {
    background: #34495e !important;
    transform: translateY(-2px);
}

/* Импорт — серо-синий */
#importCollectionBtn {
    background: #3a6a7a !important;
}
#importCollectionBtn:hover {
    background: #4a8a9a !important;
    transform: translateY(-2px);
}

/* Удалить коллекцию */
#deleteCurrentGameBtn {
    background: #c0392b !important;
}
#deleteCurrentGameBtn:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Очистить пустые записи */
#clearEmptyPokemonBtn {
    background: #d35400 !important;
}
#clearEmptyPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}
/* ============================================
   ГЛОБАЛЬНОЕ ЕДИНООБРАЗИЕ СКРУГЛЕНИЙ
   ============================================ */

/* Основные контейнеры */
.main-menu,
.menu-header,
.tab-content,
.game-card,
.modal-content,
.confirm-modal-content,
.completion-modal-content,
.pres-card,
.editor-panel,
.slides-list-panel,
.bg-manager,
.bg-card,
.types-game-container,
.types-game-section,
.types-game-history-panel {
    border-radius: 20px !important;
}

/* Кнопки */
.tab-btn,
.pres-nav-btn,
.close-pres-btn,
.reveal-btn,
.back-to-play-btn,
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev),
.save-btn,
.delete-btn,
.btn-confirm,
.btn-cancel,
.types-game-commit,
.types-game-reset-btn,
#singleCommitBtn,
#singleResetBtn,
.filter-toggle,
.filter-tag,
.filter-gen {
    border-radius: 30px !important;
}

/* Карточки и маленькие блоки */
.pokemon-card,
.template-pokemon-card,
.type-icon-item,
.bg-card img,
.pres-image-area img,
#uploadAreaDev,
.modal-content input,
.modal-content textarea,
#devMode input,
#devMode textarea,
#devMode select {
    border-radius: 12px !important;
}

/* Мелкие элементы */
.types-game-chip,
.types-game-remove,
.social-block,
.custom-notification,
.pres-counter,
.filter-section {
    border-radius: 16px !important;
}

/* Иконки типов и их контейнеры */
.reveal-type-card,
.types-game-type-btn,
.types-game-real-btn {
    border-radius: 14px !important;
}

/* Убираем лишние скругления у внутренних элементов */
.pres-card .reveal-types-container {
    border-radius: 40px !important;
}

/* Полоски и разделители оставляем без скруглений */
.filter-title,
.editor-title,
.bg-title,
.types-game-history-title {
    border-radius: 0 !important;
}
/* Просто красим обычный select */
#gameSelectDev {
    display: inline-block !important;
    cursor: pointer;
    transition: all 0.25s ease !important;
    background: #1a1a2e !important;
    border: 2px solid #e94560 !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.7rem !important;
    min-width: 180px !important;
}

#gameSelectDev:hover {
    background: #2a2a4e !important;
    border-color: #ff6b81 !important;
    transform: translateY(-2px);
}

#gameSelectDev:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.3);
}
/* ============================================
   АНИМАЦИЯ СМЕНЫ КОЛЛЕКЦИИ
   ============================================ */

/* Анимация сжатия каждой карточки */
.card-collapsing {
    animation: cardCollapse 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes cardCollapse {
    0% {
        opacity: 1;
        transform: scale(1);
        margin-bottom: 12px;
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
        margin-bottom: 0;
        height: 0;
        padding: 0;
    }
}

/* Анимация появления карточек - каждая со своим сдвигом */
.pokemon-card {
    opacity: 1;
}

.pokemon-card.card-enter {
    animation: cardEnter 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

@keyframes cardEnter {
    0% {
        opacity: 0;
        transform: translateX(60px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
/* Анимация смены коллекции - простая версия */
@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.pokemon-card.slide-out {
    animation: slideOut 0.2s ease forwards !important;
}

.pokemon-card.slide-in {
    animation: slideIn 0.3s ease forwards !important;
}
/* Анимация смены коллекции */
.slide-out {
    animation: slideOutAnim 0.2s ease forwards !important;
}

.slide-in {
    animation: slideInAnim 0.3s ease forwards !important;
}

@keyframes slideOutAnim {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes slideInAnim {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ============================================
   АНИМАЦИЯ СМЕНЫ ВЫБРАННОГО ПОКЕМОНА
   ============================================ */

/* Анимация для имени */
.pokemon-name-changing {
    animation: namePulse 0.25s ease-out;
}

@keyframes namePulse {
    0% {
        transform: scale(1);
        color: #e94560;
    }
    40% {
        transform: scale(1.02);
        color: #ff6b81;
    }
    100% {
        transform: scale(1);
        color: #e94560;
    }
}

/* Анимация для описания */
.pokemon-desc-changing {
    animation: descFade 0.25s ease-out;
}

@keyframes descFade {
    0% {
        opacity: 0.5;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Анимация для картинки */
.pokemon-image-changing {
    animation: imagePop 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

@keyframes imagePop {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Анимация для поля загрузки фото */
.upload-area-changing {
    animation: uploadAreaPulse 0.25s ease-out;
}

@keyframes uploadAreaPulse {
    0% {
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);
    }
    50% {
        border-color: #ff6b81;
        box-shadow: 0 0 0 5px rgba(233, 69, 96, 0.2);
    }
    100% {
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

/* Анимация для сетки типов */
.types-grid-changing {
    animation: typesSlide 0.25s ease-out;
}

@keyframes typesSlide {
    0% {
        opacity: 0;
        transform: translateX(-8px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ============================================
   АНИМАЦИЯ ЗАЛИВКИ ВЫБРАННОГО ТИПА
   ============================================ */

/* Базовый стиль иконки типа */
.type-icon-item {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Анимация появления выбранного состояния */
.type-icon-item.selected {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border-color: white !important;
    transform: scale(1.02);
    animation: selectGlow 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

/* Анимация снятия выбора */
.type-icon-item.deselecting {
    animation: deselectShrink 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes selectGlow {
    0% {
        transform: scale(0.95);
        background: #1a1a2e;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.7);
    }
    50% {
        transform: scale(1.05);
        background: linear-gradient(135deg, #e94560, #c62a47);
        box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.3);
    }
    100% {
        transform: scale(1.02);
        background: linear-gradient(135deg, #e94560, #c62a47);
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

@keyframes deselectShrink {
    0% {
        transform: scale(1.02);
        background: linear-gradient(135deg, #e94560, #c62a47);
        opacity: 1;
    }
    50% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        background: #1a1a2e;
        opacity: 1;
    }
}

/* Пульсация при добавлении нового типа */
.type-icon-item.adding {
    animation: typeAddedPulse 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes typeAddedPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #2ecc71;
    }
    30% {
        transform: scale(1.1);
        box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.5);
        border-color: #2ecc71;
    }
    70% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #2ecc71;
        border-color: #e94560;
    }
}

/* Пульсация при удалении типа */
.type-icon-item.removing {
    animation: typeRemovedPulse 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes typeRemovedPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #e74c3c;
    }
    40% {
        transform: scale(0.92);
        box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.4);
        border-color: #e74c3c;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #e74c3c;
        border-color: #e94560;
    }
}
/* ============================================
   ЗАКРУЧЕННАЯ АНИМАЦИЯ ДЛЯ СЛУЧАЙНОГО ПОКЕМОНА
   ============================================ */

/* Анимация для имени - закручивается сверху */
.random-name-animate {
    animation: randomNameTwist 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards !important;
}

@keyframes randomNameTwist {
    0% {
        opacity: 0;
        transform: translateY(-30px) rotateX(-90deg);
        letter-spacing: 8px;
    }
    50% {
        opacity: 0.7;
        transform: translateY(5px) rotateX(10deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
        letter-spacing: normal;
    }
}

/* Анимация для описания - закручивается изнутри */
.random-desc-animate {
    animation: randomDescTwist 0.45s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards !important;
}

@keyframes randomDescTwist {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
        filter: blur(4px);
    }
    40% {
        transform: scale(1.02) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
        filter: blur(0);
    }
}

/* Анимация для картинки - вылетает с вращением */
.random-image-animate {
    animation: randomImageTwist 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards !important;
}

@keyframes randomImageTwist {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-180deg);
    }
    40% {
        transform: scale(1.05) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* Анимация для области загрузки */
.random-upload-animate {
    animation: randomUploadPulse 0.4s ease-out forwards !important;
}

@keyframes randomUploadPulse {
    0% {
        transform: scale(0.95);
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.5);
    }
    50% {
        transform: scale(1.02);
        border-color: #ff6b81;
        box-shadow: 0 0 0 8px rgba(233, 69, 96, 0.2);
    }
    100% {
        transform: scale(1);
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

/* Анимация для типов - закрученная */
.type-icon-item.random-type-animate {
    animation: randomTypeTwist 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards !important;
}

@keyframes randomTypeTwist {
    0% {
        opacity: 0;
        transform: rotate(-180deg) scale(0.2);
        filter: blur(4px);
    }
    40% {
        transform: rotate(10deg) scale(1.1);
        filter: blur(0);
    }
    70% {
        transform: rotate(-5deg) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
        filter: blur(0);
    }
}
/* ============================================
   РЕГУЛЯТОР МАСШТАБА ПРЕЗЕНТАЦИИ
   ============================================ */

.pres-zoom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 14px;
    border-radius: 40px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.pres-zoom-btn {
    background: rgba(233, 69, 96, 0.8);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .pres-zoom-btn:hover {
        background: #e94560;
        transform: scale(1.1);
        box-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
    }

    .pres-zoom-btn:active {
        transform: scale(0.95);
    }

.pres-zoom-reset {
    width: auto;
    padding: 0 12px;
    border-radius: 20px;
    font-size: 0.6rem;
}

.pres-zoom-value {
    color: #e94560;
    font-size: 0.7rem;
    font-family: 'Minecraft', monospace;
    min-width: 42px;
    text-align: center;
    font-weight: bold;
}

.pres-volume-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(233, 69, 96, 0.3);
}

.pres-volume-controls i {
    color: #e94560;
    font-size: 0.8rem;
}

.pres-volume-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(233, 69, 96, 0.25);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.pres-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

.pres-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

/* ============================================
   ОКНО РАСКРЫТИЯ ТИПОВ (Один игрок)
   ============================================ */
.type-reveal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.92);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

.type-reveal-overlay.active {
    display: flex !important;
}

.type-reveal-overlay .reveal-title {
    font-family: 'Minecraft', monospace;
    color: #f0f0f0;
    font-size: 2.2rem;
    margin-bottom: 80px;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.6);
    transition: margin-bottom 0.5s ease;
}

.type-reveal-overlay .reveal-title.shrink {
    margin-bottom: 15px;
}

.type-reveal-overlay .reveal-types-row {
    display: flex;
    gap: 30px;
    align-items: center;
    transform: scale(1.5);
    margin-bottom: 20px;
    transition: transform 0.5s ease, margin-bottom 0.5s ease;
}

.type-reveal-overlay .reveal-types-row.shrink {
    transform: scale(0.7);
    margin-bottom: 0;
}

.type-reveal-overlay .reveal-type-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 30px;
    border-radius: 20px;
    background: rgba(15, 52, 96, 0.6);
    border: 2px solid rgba(233, 69, 96, 0.5);
    animation: typePopIn 0.4s ease backwards;
}

.type-reveal-overlay .reveal-type-item:nth-child(2) {
    animation-delay: 0.15s;
}

.type-reveal-overlay .reveal-type-item img {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 10px rgba(233, 69, 96, 0.5));
}

.type-reveal-overlay .reveal-type-item span {
    font-family: 'Minecraft', monospace;
    color: #e0e0e0;
    font-size: 1.1rem;
    text-transform: capitalize;
}

@keyframes typePopIn {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.reveal-pokemon-container {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
}

.reveal-pokemon-container.show {
    opacity: 1;
    transform: translateY(0);
}

.reveal-pokemon-container img {
    width: 360px;
    height: 360px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(233, 69, 96, 0.5));
    animation: typePopIn 0.5s ease;
}

.reveal-pokemon-name {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 1.5rem;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.4);
    text-transform: capitalize;
}

.reveal-next-btn {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    padding: 14px 40px;
    background: linear-gradient(135deg, #e94560, #c23152);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    margin-top: 30px;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.4s ease 0.8s forwards;
}

.reveal-next-btn:hover {
    background: linear-gradient(135deg, #ff6b81, #e94560);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
}

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

/* ============================================
   МОДАЛЬНОЕ ОКНО ЗАВЕРШЕНИЯ РАУНДА (Один игрок)
   ============================================ */
.completion-single {
    width: 620px !important;
    max-height: 85vh;
    overflow-y: auto;
    padding: 30px 35px !important;
}

.completion-single::-webkit-scrollbar {
    width: 6px;
}
.completion-single::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

.completion-trophy {
    font-size: 2.2rem !important;
    color: #f39c12 !important;
    margin-bottom: 10px !important;
}

.completion-collection {
    font-size: 0.7rem;
    color: #ccc;
    margin-bottom: 15px !important;
}

.completion-mode-label {
    font-size: 0.6rem;
    color: #e94560;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px !important;
}
.completion-collection strong {
    color: #e94560;
}

.completion-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 18px;
    padding: 12px 0;
    background: rgba(233, 69, 96, 0.1);
    border-radius: 15px;
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.completion-score-label {
    font-size: 0.6rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.completion-score-value {
    font-size: 2rem;
    color: #f39c12;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(243, 156, 18, 0.4);
}

.completion-history-list {
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 18px;
    padding-right: 5px;
}
.completion-history-list::-webkit-scrollbar {
    width: 4px;
}
.completion-history-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 2px;
}

.completion-history-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 10px;
    margin-bottom: 6px;
    font-size: 0.65rem;
    border: 1px solid rgba(233, 69, 96, 0.15);
}

.completion-history-num {
    color: #888;
    font-size: 0.6rem;
    min-width: 18px;
    text-align: center;
}

.completion-history-img img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(233, 69, 96, 0.4);
}
.completion-history-img .no-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(233, 69, 96, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 0.8rem;
}

.completion-history-info {
    flex: 1;
    min-width: 0;
}

.completion-history-name {
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.completion-history-types,
.completion-history-guess {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.completion-history-types .label,
.completion-history-guess .label {
    color: #999;
    font-size: 0.55rem;
}

.type-icon-sm {
    width: 20px;
    height: 20px;
}
.type-icon-sm.guessed {
    filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.6));
}
.type-icon-sm.guessed-extra {
    filter: drop-shadow(0 0 4px rgba(241, 196, 15, 0.6));
}

.no-guess {
    color: #777;
    font-style: italic;
    font-size: 0.55rem;
}

.completion-history-earned {
    font-weight: bold;
    font-size: 0.7rem;
    min-width: 35px;
    text-align: right;
}
.completion-history-earned.positive { color: #2ecc71; }
.completion-history-earned.negative { color: #e74c3c; }

.completion-save-block {
    margin-bottom: 12px;
}

.completion-save-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.completion-name-input {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.3s;
    margin-top: 0 !important;
}
.completion-name-input:focus {
    border-color: #e94560;
}
.completion-name-input::placeholder {
    color: #777;
}

.completion-name-clear {
    flex: 0 0 auto;
    background: none !important;
    border: none !important;
    color: #888 !important;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    line-height: 1;
    transition: color 0.2s;
    transform: none !important;
    box-shadow: none !important;
}
.completion-name-clear:hover {
    color: #e94560 !important;
    transform: none !important;
    box-shadow: none !important;
}

.completion-remember {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #aaa;
    font-size: 0.6rem;
    cursor: pointer;
    white-space: nowrap;
    margin-top: 0 !important;
}
.completion-remember input[type="checkbox"] {
    accent-color: #e94560;
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin-top: 0 !important;
}

.completion-desc-input {
    width: 100%;
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.3s;
    margin-top: 10px;
    box-sizing: border-box;
}
.completion-desc-input:focus {
    border-color: #e94560;
}
.completion-desc-input::placeholder {
    color: #777;
}

.completion-save-btn {
    width: 100%;
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    font-size: 0.7rem !important;
}
.completion-save-btn:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4) !important;
}
.completion-save-btn:disabled {
    cursor: default;
}

.completion-close-btn {
    background: linear-gradient(135deg, #1a1a2e, #0f3460) !important;
    border: 1px solid #e94560 !important;
    padding: 8px 25px !important;
    border-radius: 12px !important;
    font-size: 0.65rem !important;
}

/* ============================================
   ВКЛАДКА "ИСТОРИИ РАУНДОВ"
   ============================================ */
.histories-section {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

.hist-mode-switcher {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.hist-mode-btn {
    background: rgba(15, 52, 96, 0.3);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 50px;
    color: rgba(255,255,255,0.6);
    padding: 8px 16px;
    font-size: 0.7rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hist-mode-btn.active {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #e94560;
}

.hist-mode-count {
    font-size: 0.55rem;
    opacity: 0.7;
}

.histories-mode-block {
    display: none;
    background: rgba(15, 52, 96, 0.3);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 20px;
    padding: 20px;
    width: 100%;
}

.histories-mode-block.hist-active {
    display: block;
}

.histories-mode-title {
    color: #e94560;
    font-size: 0.85rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.histories-mode-chevron {
    font-size: 0.6rem;
    color: #888;
    transition: transform 0.3s ease;
}

.histories-mode-block.collapsed .histories-mode-chevron {
    transform: rotate(-90deg);
}

.histories-mode-block.collapsed .history-empty,
.histories-mode-block.collapsed .history-card {
    display: none;
}

.histories-mode-count {
    color: #888;
    font-size: 0.55rem;
    font-style: italic;
}

.history-card {
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 15px;
    margin-bottom: 12px;
    transition: all 0.3s;
    overflow: hidden;
}
.history-card:hover {
    border-color: #e94560;
    box-shadow: 0 4px 20px rgba(233, 69, 96, 0.2);
}

.history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.history-card-header:hover {
    background: rgba(233, 69, 96, 0.05);
}

.history-card-toggle {
    color: #888;
    font-size: 0.6rem;
    margin-left: 8px;
    transition: transform 0.3s;
}
.history-card.expanded .history-card-toggle {
    transform: rotate(180deg);
}

.history-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 15px;
}
.history-card.expanded .history-card-body {
    max-height: 600px;
    padding: 0 15px 15px 15px;
}

.history-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.history-card-name {
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}
.history-card-name:hover {
    color: #e94560;
}

.history-card-desc {
    color: #ccc;
    font-size: 0.6rem;
    font-style: italic;
    cursor: pointer;
    transition: color 0.2s;
    margin-top: 2px;
}
.history-card-desc:hover {
    color: #e94560;
}
.history-card-desc-empty {
    color: #666;
}
.history-card-desc-empty:hover {
    color: #888;
}

.history-edit-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #e94560;
    border-radius: 6px;
    padding: 4px 8px;
    color: #fff;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    outline: none;
    margin-top: 2px;
    box-sizing: border-box;
}

.history-card-collection {
    color: #aaa;
    font-size: 0.6rem;
}

.history-card-date {
    color: #777;
    font-size: 0.55rem;
}

.history-card-score {
    font-size: 1.1rem;
    color: #f39c12;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

.history-card-rounds {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.history-round-pokemon {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 52, 96, 0.5);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.55rem;
    color: #ccc;
}

.history-round-pokemon img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.history-round-types {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.history-round-arrow {
    color: #666;
    font-size: 0.55rem;
    margin: 0 2px;
}

.history-round-guessed .type-icon-sm {
    filter: drop-shadow(0 0 3px rgba(46, 204, 113, 0.5));
}

.history-round-skipped {
    color: #666;
    font-size: 0.5rem;
    font-style: italic;
}

.history-card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.history-card-btn {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #e94560;
    padding: 5px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.3s;
}
.history-card-btn:hover {
    background: #e94560;
    color: #fff;
}
.history-card-btn.delete-btn:hover {
    background: #c0392b;
    border-color: #c0392b;
}

.history-empty {
    color: #666;
    font-size: 0.65rem;
    text-align: center;
    padding: 30px;
    font-style: italic;
}

/* ============================================
   ТАБЛИЦА ЛИДЕРОВ — СТИЛЬ РЕЖИМА РАЗРАБОТЧИКА
   ============================================ */

@keyframes lbPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes lbGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(233,69,96,0.15); }
    50% { box-shadow: 0 0 30px rgba(233,69,96,0.3); }
}

@keyframes lbFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes lbScaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes lbFadeSlide {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.lb-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}

/* ---- Header (dev panel style) ---- */
.lb-header {
    text-align: center;
    padding: 28px 20px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    animation: lbGlow 3s ease-in-out infinite;
}

.lb-header-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(233,69,96,0.06) 0%, transparent 60%);
    animation: lbPulse 4s ease-in-out infinite;
    pointer-events: none;
}

.lb-header i:first-child {
    font-size: 2.2rem;
    color: #e94560;
    margin-bottom: 8px;
    display: block;
    filter: drop-shadow(0 0 10px rgba(233,69,96,0.4));
    animation: lbFloat 3s ease-in-out infinite;
}

.lb-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    color: white;
    margin: 0 0 6px;
    letter-spacing: 1px;
}

.lb-header p {
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
    margin: 0;
}

/* ---- Tabs (dev toggle style) ---- */
.lb-tabs {
    display: flex;
    gap: 4px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 4px;
}

.lb-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.lb-tab:hover {
    color: rgba(255,255,255,0.7);
    background: rgba(233, 69, 96, 0.1);
}

.lb-tab.active {
    color: white;
    background: linear-gradient(135deg, #e94560, #c62a47);
    box-shadow: 0 2px 12px rgba(233, 69, 96, 0.4);
}

.lb-tab i {
    font-size: 0.7rem;
}

/* ---- Tab Content ---- */
.lb-tab-content {
    display: none;
    animation: lbFadeSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lb-tab-content.active {
    display: block;
}

/* ---- Sub-tabs ---- */
.lb-tabs .lb-subtab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.35);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.lb-tabs .lb-subtab:hover {
    color: rgba(255,255,255,0.6);
    background: rgba(233, 69, 96, 0.08);
}

.lb-tabs .lb-subtab.active {
    color: white;
    background: rgba(233, 69, 96, 0.3);
    box-shadow: inset 0 0 10px rgba(233, 69, 96, 0.2);
}

.lb-tabs .lb-subtab i {
    font-size: 0.6rem;
}

.lb-subtab-content {
    animation: lbFadeSlide 0.3s ease;
}

/* ---- Stats Row ---- */
.lb-stats-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.lb-stat-card {
    flex: 1;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 14px 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.lb-stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    transition: left 0.5s;
}

.lb-stat-card:hover::after {
    left: 200%;
}

.lb-stat-card:hover {
    transform: translateY(-3px);
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.25);
}

.lb-stat-card--rounds {
    border-color: rgba(99,144,240,0.4);
}

.lb-stat-card--rounds:hover {
    box-shadow: 0 5px 20px rgba(99,144,240,0.25);
    border-color: #6390f0;
}

.lb-stat-card--perfect {
    border-color: rgba(46,204,113,0.4);
}

.lb-stat-card--perfect:hover {
    box-shadow: 0 5px 20px rgba(46,204,113,0.25);
    border-color: #2ecc71;
}

.lb-stat-card--best {
    border-color: rgba(255,215,0,0.4);
}

.lb-stat-card--best:hover {
    box-shadow: 0 5px 20px rgba(255,215,0,0.25);
    border-color: #ffd700;
}

.lb-stat-icon {
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.lb-stat-card--rounds .lb-stat-icon { color: #6390f0; }
.lb-stat-card--perfect .lb-stat-icon { color: #2ecc71; }
.lb-stat-card--best .lb-stat-icon { color: #ffd700; }

.lb-stat-value {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: white;
    font-weight: bold;
}

.lb-stat-label {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    margin-top: 3px;
}

/* ---- Mode Block ---- */
.lb-mode-block {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    padding: 22px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
}

.lb-mode-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
}

.lb-mode-block--speed::before { background: linear-gradient(90deg, #f7d02c, #ee8130); }
.lb-mode-block--check::before { background: linear-gradient(90deg, #2ecc71, #3498db); }
.lb-mode-block--single::before { background: linear-gradient(90deg, #e94560, #d63384); }

.lb-mode-block:hover {
    border-color: rgba(233, 69, 96, 0.35);
}

/* ---- Podium ---- */
.lb-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 0 0;
}

.lb-podium-item {
    text-align: center;
    padding: 14px 10px 10px;
    border-radius: 16px 16px 0 0;
    position: relative;
    min-width: 80px;
    animation: lbScaleIn 0.5s ease backwards;
    transition: all 0.3s;
}

.lb-podium-item:hover {
    transform: translateY(-4px);
}

.lb-podium-first {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(255,215,0,0.5);
    border-bottom: none;
    padding-top: 18px;
    order: 2;
    animation-delay: 0.1s;
}

.lb-podium-first:hover {
    box-shadow: 0 5px 20px rgba(255,215,0,0.25);
    border-color: #ffd700;
}

.lb-podium-second {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(192,192,192,0.4);
    border-bottom: none;
    order: 1;
    animation-delay: 0.2s;
}

.lb-podium-second:hover {
    box-shadow: 0 5px 20px rgba(192,192,192,0.2);
    border-color: #c0c0c0;
}

.lb-podium-third {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(205,127,50,0.4);
    border-bottom: none;
    order: 3;
    animation-delay: 0.3s;
}

.lb-podium-third:hover {
    box-shadow: 0 5px 20px rgba(205,127,50,0.2);
    border-color: #cd7f32;
}

.lb-podium-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    border: 2px solid rgba(233,69,96,0.3);
}

.lb-podium-first .lb-podium-avatar { background: linear-gradient(135deg, #ffd700, #ffaa00); box-shadow: 0 0 12px rgba(255,215,0,0.5); border-color: #ffd700; }
.lb-podium-second .lb-podium-avatar { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); box-shadow: 0 0 12px rgba(192,192,192,0.4); border-color: #c0c0c0; }
.lb-podium-third .lb-podium-avatar { background: linear-gradient(135deg, #cd7f32, #b87333); box-shadow: 0 0 12px rgba(205,127,50,0.4); border-color: #cd7f32; }

.lb-podium-medal {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.lb-podium-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    margin: 0 auto;
    letter-spacing: 0.5px;
}

.lb-podium-score {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #e94560;
    font-weight: bold;
    margin-top: 4px;
}

.lb-guest-tag {
    display: inline-block;
    font-size: 0.5rem;
    background: rgba(255,255,255,0.15);
    color: #ccc;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 1px 4px;
    margin-left: 3px;
    vertical-align: middle;
    font-family: 'Minecraft', monospace;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.lb-guest-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: #666;
    border: 1px solid #444;
    border-radius: 50%;
    font-size: 8px;
    line-height: 14px;
    text-align: center;
    color: #ccc;
    font-weight: bold;
}

/* ---- Category ---- */
.lb-category {
    background: #1a1a2e;
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 14px;
    margin-bottom: 12px;
    transition: all 0.3s;
}

.lb-category:hover {
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.15);
}

.lb-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e94560;
}

.lb-category-label {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 0.7rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 1px;
}

.lb-category-label i {
    font-size: 0.6rem;
    opacity: 0.7;
}

.lb-category-count {
    color: rgba(255,255,255,0.3);
    font-size: 0.5rem;
    font-family: 'Minecraft', monospace;
}

/* ---- Rows ---- */
.lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    margin-bottom: 4px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.lb-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background 0.3s;
}

.lb-row:hover {
    background: rgba(233, 69, 96, 0.08);
    border-color: rgba(233, 69, 96, 0.2);
    transform: translateX(3px);
}

.lb-row:hover::before {
    background: #e94560;
}

.lb-medal {
    font-size: 1.1rem;
    min-width: 30px;
    text-align: center;
    animation: lbFloat 2s ease-in-out infinite;
}

.lb-rank {
    color: rgba(255,255,255,0.3);
    font-size: 0.65rem;
    min-width: 30px;
    text-align: center;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
}

.lb-row-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lb-row-name {
    color: white;
    font-size: 0.68rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Minecraft', monospace;
}

.lb-row-meta {
    color: rgba(255,255,255,0.3);
    font-size: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-row-score {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 0.8rem;
    font-weight: bold;
    min-width: 50px;
    text-align: right;
    text-shadow: 0 0 8px rgba(233,69,96,0.3);
}

/* ---- Best ---- */
.lb-category-best {
    margin-top: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 1px solid rgba(255,165,0,0.3);
    border-radius: 10px;
    color: #ffa500;
    font-size: 0.55rem;
    text-align: center;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s;
}

.lb-category-best:hover {
    border-color: #ffa500;
    box-shadow: 0 3px 12px rgba(255,165,0,0.2);
}

.lb-category-best i {
    margin-right: 4px;
    filter: drop-shadow(0 0 4px rgba(255,165,0,0.4));
}

/* ---- Horizontal Scroll Row ---- */
.lb-scroll-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 2px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.lb-scroll-row::-webkit-scrollbar { height: 5px; }
.lb-scroll-row::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.lb-scroll-row::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.3); border-radius: 4px; }
.lb-scroll-row::-webkit-scrollbar-thumb:hover { background: rgba(233,69,96,0.6); }

.lb-scroll-card {
    flex: 0 0 130px;
    scroll-snap-align: start;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    transition: all 0.3s;
    position: relative;
}
.lb-scroll-card:first-child {
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
}
.lb-scroll-card:nth-child(2) {
    border-color: rgba(192, 192, 192, 0.4);
}
.lb-scroll-card:nth-child(3) {
    border-color: rgba(205, 127, 50, 0.4);
}
.lb-scroll-card:hover {
    transform: translateY(-3px);
    border-color: rgba(233, 69, 96, 0.5);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.2);
}

.lb-scroll-medal {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.5));
}
.lb-scroll-rank {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    font-weight: 700;
}

.lb-scroll-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e94560, #c23152);
    border: 2px solid rgba(233, 69, 96, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    position: relative;
}
.lb-scroll-card:first-child .lb-scroll-avatar {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255,215,0,0.5);
}
.lb-scroll-card:nth-child(2) .lb-scroll-avatar {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    border-color: #c0c0c0;
    box-shadow: 0 0 12px rgba(192,192,192,0.4);
}
.lb-scroll-card:nth-child(3) .lb-scroll-avatar {
    background: linear-gradient(135deg, #cd7f32, #b87333);
    border-color: #cd7f32;
    box-shadow: 0 0 12px rgba(205,127,50,0.4);
}

.lb-scroll-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: visible !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}
.lb-scroll-meta {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
}
.lb-scroll-score {
    font-size: 1.1rem;
    font-weight: 900;
    color: #e94560;
    text-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

/* ---- Empty ---- */
.lb-empty {
    color: rgba(255,255,255,0.2);
    font-size: 0.6rem;
    text-align: center;
    padding: 15px;
    font-style: italic;
}

.lb-empty-full {
    text-align: center;
    padding: 50px 20px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px dashed rgba(233, 69, 96, 0.3);
    color: rgba(255,255,255,0.3);
    font-size: 0.7rem;
    line-height: 1.6;
}

.lb-empty-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    color: rgba(233,69,96,0.25);
    animation: lbFloat 3s ease-in-out infinite;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .lb-podium {
        gap: 6px;
    }
    .lb-podium-item {
        min-width: 60px;
        padding: 10px 6px;
    }
    .lb-podium-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
    .lb-scroll-card {
        flex: 0 0 110px;
        padding: 10px 8px;
    }
    .lb-scroll-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }
    .lb-scroll-score {
        font-size: 0.95rem;
    }
    .lb-stats-row {
        gap: 6px;
    }
    .lb-stat-card {
        padding: 10px 6px;
    }
}

/* ============================================
   МОДАЛЬНЫЕ ОКНА НАСТРОЙКИ РЕЖИМОВ
   ============================================ */
.mode-setup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.92);
    z-index: 1000002 !important;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}
.mode-setup-overlay.active {
    display: flex !important;
}

.mode-setup-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 30px;
    padding: 35px 40px;
    text-align: center;
    color: white;
    width: 420px;
    max-width: 90%;
    box-shadow: 0 0 70px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}

.mode-setup-modal h2 {
    color: #e94560;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.mode-setup-desc {
    font-size: 0.65rem;
    color: #bbb;
    margin-bottom: 20px;
    line-height: 1.5;
}

.mode-setup-options {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mode-setup-btn {
    background: rgba(15, 52, 96, 0.6);
    border: 2px solid rgba(233, 69, 96, 0.4);
    color: white;
    padding: 12px 20px;
    border-radius: 15px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 70px;
}
.mode-setup-btn:hover {
    background: #e94560;
    border-color: #e94560;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
}

.mode-setup-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.mode-setup-custom label {
    color: #aaa;
    font-size: 0.6rem;
}

.mode-setup-input {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    width: 100px;
    text-align: center;
    outline: none;
}
.mode-setup-input:focus {
    border-color: #e94560;
}

.mode-setup-go-btn {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s;
}
.mode-setup-go-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(233, 69, 96, 0.4);
}

.mode-setup-cancel {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #999;
    padding: 8px 20px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s;
}
.mode-setup-cancel:hover {
    border-color: #e94560;
    color: #e94560;
}

/* ============================================
   ТАЙМЕР "НА СКОРОСТЬ!"
   ============================================ */
.speed-timer-overlay {
    display: none;
}
.speed-timer-overlay.active {
    display: block !important;
}

.speed-timer-inline {
    display: none;
}
.speed-timer-inline.active {
    display: inline-flex !important;
    align-items: center;
}

.speed-timer-value {
    background: rgba(15, 52, 96, 0.85);
    backdrop-filter: blur(15px);
    border: 2px solid #e94560;
    border-radius: 40px;
    padding: 4px 16px;
    font-size: 0.85rem;
    color: #fff;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.6);
    box-shadow: 0 0 30px rgba(233, 69, 96, 0.3);
    transition: all 0.3s;
    white-space: nowrap;
}

.speed-timer-value.warning {
    border-color: #f39c12;
    color: #f39c12;
    text-shadow: 0 0 15px rgba(243, 156, 18, 0.6);
    box-shadow: 0 0 30px rgba(243, 156, 18, 0.3);
    animation: timerPulse 1s infinite;
}

.speed-timer-value.danger {
    border-color: #e74c3c;
    color: #e74c3c;
    text-shadow: 0 0 15px rgba(231, 76, 60, 0.6);
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.3);
    animation: timerPulse 0.5s infinite;
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   СКРОЛЛ-БАРЫ ДЛЯ МОДАЛОК
   ============================================ */
.mode-setup-modal::-webkit-scrollbar {
    width: 5px;
}
.mode-setup-modal::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

/* ============================================
   УВЕДОМЛЕНИЕ ТИПОВ "НА СКОРОСТЬ!" (сверху по центру)
   ============================================ */
.speed-type-notification {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(-30px);
    z-index: 1000003 !important;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    backdrop-filter: blur(20px);
    border: 2px solid #e94560;
    border-radius: 20px;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Minecraft', monospace;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 30px rgba(233, 69, 96, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.speed-type-notification.active {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

.speed-type-label {
    color: #ccc;
    font-size: 0.65rem;
    white-space: nowrap;
}

.speed-type-icons {
    display: flex;
    gap: 10px;
}

.speed-type-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 5px 10px;
    animation: speedTypePop 0.3s ease backwards;
}

.speed-type-item:nth-child(2) {
    animation-delay: 0.1s;
}

.speed-type-item img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 6px rgba(233, 69, 96, 0.4));
}

.speed-type-item span {
    color: #fff;
    font-size: 0.6rem;
    text-transform: capitalize;
}

@keyframes speedTypePop {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* ============================================
   МОДАЛЬНОЕ ОКНО ПОДТВЕРЖДЕНИЯ ВЫХОДА
   ============================================ */
.exit-confirm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.85);
    z-index: 1000002 !important;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}

.exit-confirm-overlay.active {
    display: flex !important;
}

.exit-confirm-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    text-align: center;
    color: white;
    width: 380px;
    max-width: 90%;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}

.exit-confirm-modal i {
    font-size: 2rem;
    color: #f39c12;
    margin-bottom: 12px;
}

.exit-confirm-modal h3 {
    color: #e94560;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.exit-confirm-modal p {
    color: #bbb;
    font-size: 0.6rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.exit-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.exit-confirm-btn {
    padding: 10px 22px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.exit-confirm-btn.yes {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}
.exit-confirm-btn.yes:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.5);
}

.exit-confirm-btn.no {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: white;
}
.exit-confirm-btn.no:hover {
    background: #e94560;
    transform: scale(1.05);
}

/* ============================================
   МОДАЛЬНОЕ ОКНО ОЧИСТКИ СЛУЧАЙНЫХ КОЛЛЕКЦИЙ
   ============================================ */
.clear-random-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 1000002 !important;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}

.clear-random-overlay.active {
    display: flex !important;
}

.clear-random-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    text-align: center;
    color: white;
    width: 500px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}

.clear-random-modal h2 {
    color: #e94560;
    font-size: 1rem;
    margin-bottom: 8px;
}

.clear-random-modal p {
    color: #bbb;
    font-size: 0.6rem;
    margin-bottom: 18px;
}

.clear-random-list {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 18px;
    text-align: left;
}

.clear-random-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 10px;
    margin-bottom: 6px;
    border: 1px solid rgba(233, 69, 96, 0.15);
    cursor: pointer;
    transition: all 0.3s;
}

.clear-random-item:hover {
    border-color: #e94560;
}

.clear-random-item.excluded {
    opacity: 0.4;
    border-color: rgba(46, 204, 113, 0.4);
}

.clear-random-item input[type="checkbox"] {
    accent-color: #2ecc71;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.clear-random-item-name {
    flex: 1;
    font-size: 0.65rem;
    color: #ddd;
}

.clear-random-item-count {
    font-size: 0.55rem;
    color: #888;
}

.clear-random-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.clear-random-btn {
    padding: 10px 20px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.clear-random-btn.delete {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}
.clear-random-btn.delete:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.5);
}

.clear-random-btn.cancel {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: white;
}
.clear-random-btn.cancel:hover {
    background: #e94560;
    transform: scale(1.05);
}

.clear-random-modal::-webkit-scrollbar {
    width: 5px;
}
.clear-random-modal::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

.collection-picker-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}
.collection-picker-overlay.active {
    display: flex !important;
}
.collection-picker-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    text-align: center;
    color: white;
    width: 420px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}
.collection-picker-modal h2 {
    color: #e94560;
    font-size: 1rem;
    margin-bottom: 18px;
}
.collection-picker-list {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 18px;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: #e94560 transparent;
}
.collection-picker-list::-webkit-scrollbar {
    width: 5px;
}
.collection-picker-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}
.collection-picker-list::-webkit-scrollbar-track {
    background: transparent;
}
.collection-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.collection-picker-item:hover {
    background: rgba(15, 52, 96, 0.7);
    border-color: rgba(233, 69, 96, 0.3);
    transform: translateX(4px);
}
.collection-picker-item.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
}
.collection-picker-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: all 0.2s;
}
.collection-picker-item.active .dot {
    background: #e94560;
}
.collection-picker-item .name {
    flex: 1;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.collection-picker-item.active .name {
    color: #e94560;
}
.collection-picker-item .count {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.6rem;
    flex-shrink: 0;
}
.collection-picker-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.collection-picker-btn {
    padding: 10px 20px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.collection-picker-btn.cancel {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    width: 100%;
}
.collection-picker-btn.cancel:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
    color: #e94560;
}
.collection-picker-modal::-webkit-scrollbar {
    width: 5px;
}
.collection-picker-modal::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.leaderboard-launch-section {
    grid-column: 1 / -1;
    text-align: center;
    padding: 28px 20px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
}

.leaderboard-launch-title {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 0.85rem;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.leaderboard-launch-subtitle {
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
    margin-bottom: 20px;
}

.leaderboard-launch-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.leaderboard-launch-btn {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 25px 35px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s;
    min-width: 140px;
}

.leaderboard-launch-btn:hover {
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.25);
    transform: translateY(-3px);
}

.leaderboard-launch-count {
    font-size: 1.8rem;
    color: #e94560;
    font-weight: bold;
}

.leaderboard-launch-label {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    margin-top: 5px;
}

.leaderboard-launch-custom {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.leaderboard-launch-custom-label {
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
}

.leaderboard-launch-custom-input {
    width: 80px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 8px 12px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    text-align: center;
    outline: none;
    transition: all 0.3s;
}

.leaderboard-launch-custom-input:focus {
    border-color: #ff6b81;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
}

.leaderboard-launch-custom-input::placeholder {
    color: #555;
}

.leaderboard-launch-custom-btn {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    border-radius: 12px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.leaderboard-launch-custom-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 12px rgba(233, 69, 96, 0.4);
}

@keyframes modalZoomIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== DATABASE TAB ===== */

/* Анимации для базы данных */
@keyframes dbCardIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dbHeaderGlow {
    0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 20px rgba(233,69,96,0.1); }
    50% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 40px rgba(233,69,96,0.25); }
}

@keyframes dbStatCount {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes dbDetailIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes dbOverlayIn {
    from { opacity: 0; backdrop-filter: blur(0px); }
    to { opacity: 1; backdrop-filter: blur(6px); }
}

@keyframes dbShine {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes dbStatBarGrow {
    from { width: 0; }
}

@keyframes dbPillPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233,69,96,0.4); }
    50% { box-shadow: 0 0 0 4px rgba(233,69,96,0); }
}

/* Заголовок базы данных */
.db-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding: 24px 30px;
    background: linear-gradient(135deg, rgba(15,52,96,0.6), rgba(26,26,46,0.6));
    border-radius: 20px;
    border: 1px solid rgba(233,69,96,0.2);
    backdrop-filter: blur(12px);
    animation: dbHeaderGlow 4s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.db-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(233,69,96,0.08), transparent);
    animation: dbShine 6s ease-in-out infinite;
}

.db-header-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(233,69,96,0.4);
}

.db-header-text {
    flex: 1;
}

.db-header-text h2 {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 1.2rem;
    margin-bottom: 4px;
    text-shadow: 0 0 15px rgba(233,69,96,0.4);
    letter-spacing: 1px;
}

.db-header-text p {
    font-family: 'Minecraft', monospace;
    color: rgba(255,255,255,0.5);
    font-size: 0.6rem;
    letter-spacing: 0.5px;
}

.db-header-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    margin-right: 4px;
}

.db-chart-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.6);
    color: rgba(255,255,255,0.85);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.db-chart-btn i {
    color: #e94560;
    font-size: 0.8rem;
}

.db-chart-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: white;
    box-shadow: 0 4px 12px rgba(233,69,96,0.25);
}

.db-header-stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.db-header-stat {
    text-align: center;
    padding: 10px 18px;
    background: rgba(0,0,0,0.3);
    border-radius: 14px;
    border: 1px solid rgba(233,69,96,0.15);
    min-width: 80px;
}

.db-header-stat-value {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 1.3rem;
    color: #e94560;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(233,69,96,0.4);
    animation: dbStatCount 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.db-header-stat-label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
    letter-spacing: 1px;
}
.db-autoscroll-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}
.db-autoscroll-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(233,69,96,0.4);
    background: rgba(15,52,96,0.6);
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.db-autoscroll-btn:hover {
    background: rgba(233,69,96,0.3);
    border-color: #e94560;
}
.db-autoscroll-btn.active {
    background: #e94560;
    border-color: #e94560;
    animation: autoScrollPulse 1.5s infinite;
}
@keyframes autoScrollPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233,69,96,0.4); }
    50% { box-shadow: 0 0 12px 4px rgba(233,69,96,0.3); }
}
.db-autoscroll-speed {
    display: flex;
    align-items: center;
    gap: 4px;
}
.db-autoscroll-speed input[type="range"] {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    outline: none;
}
.db-autoscroll-speed input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    cursor: pointer;
}
.db-autoscroll-speed span {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    min-width: 12px;
    text-align: center;
}

/* Панель управления */
.db-controls {
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(15,52,96,0.3);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
}

.db-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.db-search-wrapper {
    flex: 1;
    min-width: 220px;
    position: relative;
}

.db-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
    transition: color 0.3s;
    pointer-events: none;
}

.db-search-wrapper:focus-within .db-search-icon {
    color: #e94560;
}

.db-search-input {
    width: 100%;
    padding: 12px 40px 12px 40px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.5);
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.db-search-input:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.15), 0 4px 12px rgba(0,0,0,0.2);
    background: rgba(15,52,96,0.7);
}

.db-search-input::placeholder { color: rgba(255,255,255,0.3); }

.db-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.5);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.db-search-clear:hover {
    background: rgba(233,69,96,0.4);
    color: white;
}

.db-sort-select {
    padding: 12px 18px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.5);
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    outline: none;
    transition: all 0.3s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.db-sort-select:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.15);
}

.db-sort-select option { background: #1a1a2e; color: white; }

.db-view-toggle { display: flex; gap: 4px; }

.db-view-btn {
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.5);
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.db-view-btn:hover {
    color: white;
    border-color: rgba(233,69,96,0.4);
    background: rgba(233,69,96,0.1);
}

.db-view-btn.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: white;
    border-color: #e94560;
    box-shadow: 0 4px 12px rgba(233,69,96,0.3);
}

/* Подвкладки БД */
.db-subtabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 16px;
    padding: 8px;
    background: rgba(15,52,96,0.25);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}
.db-subtabs .db-view-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    font-size: 0.85rem;
    font-family: 'Minecraft', monospace;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.db-subtabs .db-view-btn i { font-size: 0.95rem; }

/* Сетка способностей */
.db-abil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.db-abil-card {
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 18px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: dbCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
    cursor: default;
}
.db-abil-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e94560, #ff6b9d);
    opacity: 0.5;
}
.db-abil-card:hover {
    transform: translateY(-3px);
    border-color: rgba(233,69,96,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.db-abil-names {
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
    width: fit-content;
    transition: all 0.2s ease;
}
.db-abil-names:hover .db-abil-name-ru {
    color: #e94560;
    text-decoration: underline;
}
.db-abil-name-ru {
    color: #fff;
    font-size: 0.95rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
}
.db-abil-name-en {
    color: rgba(255,255,255,0.4);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.db-abil-desc { margin-top: 10px; color: rgba(255,255,255,0.85); font-size: 0.72rem; line-height: 1.6; }
.db-abil-holders { margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.06); }
.db-abil-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    margin: -2px -8px 0;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.45);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-align: left;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.db-abil-toggle i { font-size: 0.5rem; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
.db-abil-toggle .db-abil-count {
    margin-left: auto;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(233,69,96,0.15);
    color: #ff8ba0;
    font-size: 0.55rem;
}
.db-abil-toggle:hover { color: #fff; background: rgba(233,69,96,0.08); }
.db-abil-holders.open .db-abil-toggle { color: #fff; }
.db-abil-holders.open .db-abil-toggle i { transform: rotate(90deg); }
.db-abil-collapse {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.db-abil-holders.open .db-abil-collapse { display: grid; animation: dbCardIn 0.3s ease backwards; }
.db-abil-holders-modal {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(72px, 86px)) !important;
    gap: 8px !important;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px 4px;
}
.db-abil-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 6px 4px 6px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.6);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.db-abil-holder:hover {
    border-color: #ff4757;
    background: rgba(255, 71, 87, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.25);
}
.db-abil-holder-img {
    width: 52px;
    height: 52px;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    padding: 2px;
    flex-shrink: 0;
}
.db-abil-holder-dex {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.52rem;
    font-family: 'Minecraft', monospace;
    line-height: 1;
}
.db-abil-holder-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.56rem;
    font-family: 'Minecraft', monospace;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Сетка движений (Компактный вид по умолчанию + Режим постера) */
.db-moves-view-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}
.db-moves-view-modes {
    display: inline-flex;
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 3px;
    gap: 4px;
}
.db-view-mode-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 5px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-view-mode-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.db-view-mode-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #e94560, #c23152);
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
}

.db-moves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.db-moves-grid.db-moves-grid-poster {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

/* 1. Классическая компактная карточка (Основной вид) */
.db-move-card {
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 18px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: dbCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
    cursor: default;
    display: flex;
    flex-direction: column;
}
.db-move-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--card-accent, #888), transparent);
    opacity: 0.6;
}
.db-move-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.db-move-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}
.db-move-typecat {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.08);
}
.db-move-tc-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.db-move-type-img, .db-move-cat-img { width: 26px; height: 26px; object-fit: contain; }
.db-move-type-name {
    color: rgba(255,255,255,0.9);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.db-move-names {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-move-names:hover .db-move-name-ru {
    color: #e94560;
    text-decoration: underline;
}
.db-move-name-ru {
    color: #fff;
    font-size: 0.95rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    text-align: center;
    white-space: normal;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
    line-height: 1.25;
    max-width: 100%;
}
.db-move-name-en {
    color: rgba(255,255,255,0.4);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
}
.db-move-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.db-move-cat-label {
    color: rgba(255,255,255,0.55);
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.db-move-gen {
    margin-left: auto;
    color: rgba(255,255,255,0.35);
    font-size: 0.58rem;
    font-family: 'Minecraft', monospace;
}
.db-move-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
}
.db-move-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
.db-move-stat i { color: var(--card-accent, #888); font-size: 0.7rem; opacity: 0.8; }
.db-move-stat b { color: #fff !important; font-size: 0.85rem; font-family: 'Minecraft', monospace; }
.db-move-stat b .db-move-pp-max {
    font-size: 0.52rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.65);
    margin-left: 2px;
}
.db-move-stat span { color: rgba(255,255,255,0.35); font-size: 0.52rem; font-family: 'Minecraft', monospace; text-transform: uppercase; letter-spacing: 0.03em; }

/* 2. Карточка-постер (Вид по шаблону) */
.db-moves-grid.db-moves-grid-poster {
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 24px;
}
@media (max-width: 540px) {
    .db-moves-grid.db-moves-grid-poster {
        grid-template-columns: 1fr;
    }
}
.db-move-card.db-move-card-poster {
    background-color: var(--card-accent, #777);
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.15) 100%), var(--card-accent, #777);
    border: 4px solid #ffffff;
    border-radius: 26px;
    padding: 16px 20px 20px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.45), inset 0 2px 6px rgba(255,255,255,0.75);
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}
.db-move-card.db-move-card-poster::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--type-icon-url);
    background-repeat: repeat;
    background-size: 52px 52px;
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
    height: auto;
}
.db-move-card.db-move-card-poster:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 14px 34px rgba(0,0,0,0.55), inset 0 2px 6px rgba(255,255,255,0.9);
}
.db-mcard-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
}
.db-mcard-title {
    position: relative;
    z-index: 1;
    font-family: 'Minecraft', monospace;
    font-size: 1.45rem;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
    cursor: pointer;
    transition: transform 0.2s ease, text-shadow 0.2s ease;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        0 2.5px 0 #000,
        0 -2px 0 #000,
        2px 0 0 #000,
        -2px 0 0 #000,
        0 4px 6px rgba(0,0,0,0.8);
}
.db-mcard-title:hover {
    transform: scale(1.03);
    text-shadow:
        -2px -2px 0 #e94560,
        2px -2px 0 #e94560,
        -2px 2px 0 #e94560,
        2px 2px 0 #e94560,
        0 3px 8px rgba(233, 69, 96, 0.85);
}
.db-mcard-tags {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
.db-mcard-body {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 14px;
    align-items: stretch;
    justify-content: space-between;
    flex: 1;
}
.db-mcard-info-box {
    flex: 1;
    min-width: 0;
    background: var(--card-dark-accent-grad, linear-gradient(180deg, #2b1218 0%, #1e0a0f 100%));
    border: 3px solid #ffffff;
    border-radius: 18px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 3px 10px rgba(0,0,0,0.3);
    overflow: hidden;
}
.db-mcard-stats-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.2fr;
    gap: 6px;
    align-items: flex-start;
}
.db-mcard-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    min-width: 0;
}
.db-mcard-stat-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: var(--card-stat-lbl-color, #ffb3b8);
    white-space: nowrap;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.db-mcard-stat-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        0 2px 0 #000,
        0 -2px 0 #000,
        2px 0 0 #000,
        -2px 0 0 #000,
        0 3px 5px rgba(0,0,0,0.85);
}
.db-mcard-pp-max {
    font-size: 0.52rem;
    font-weight: normal;
    color: #ffffff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    margin-left: 2px;
}
.db-mcard-desc-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.db-mcard-desc {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: #ffffff;
    text-align: center;
    line-height: 1.38;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0,0,0,0.9);
}
.db-mcard-extras {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.db-mcard-extra-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 1px 6px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
}
.db-mcard-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-shrink: 0;
    width: 148px;
}
.db-mcard-type-pill {
    border-radius: 999px;
    border: 3.5px solid #ffffff;
    padding: 6px 12px;
    background: var(--card-accent, #777);
    box-shadow: 0 4px 10px rgba(0,0,0,0.22), inset 0 2px 4px rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-mcard-type-txt {
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow:
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px 1.5px 0 #000,
        1.5px 1.5px 0 #000,
        0 1.5px 0 #000,
        0 -1.5px 0 #000,
        1.5px 0 0 #000,
        -1.5px 0 0 #000,
        0 2px 4px rgba(0,0,0,0.85);
    white-space: nowrap;
    display: block;
    letter-spacing: 0.02em;
    line-height: 1;
}
.db-mcard-cat-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 46px;
}
.db-mcard-cat-img {
    width: 70px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}
.db-mcard-side-extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-top: 2px;
}
.db-mcard-extra-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    padding: 2px 7px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
}
.db-mcard-extra-pill.tag {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    padding: 2.5px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.7);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 18%, rgba(15, 23, 42, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 55%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--pill-color, #FF0045) 20%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    transition: all 0.2s ease;
}
.db-mcard-extra-pill.tag i {
    font-size: 0.6rem;
    color: var(--pill-color, #ffffff);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--pill-color, #ffffff) 80%, transparent));
}
.db-mcard-extra-pill.tag:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 28%, rgba(15, 23, 42, 0.85));
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 80%, transparent);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--pill-color, #FF0045) 40%, transparent);
}

/* Модалка движения */
.db-move-detail-table { display: flex; flex-direction: column; gap: 6px; }
.db-move-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(15,52,96,0.3);
}
.db-move-detail-label {
    color: rgba(255,255,255,0.5);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    white-space: nowrap;
}
.db-move-detail-value {
    color: #fff;
    font-size: 0.78rem;
    font-family: 'Minecraft', monospace;
    text-align: right;
    margin-left: auto;
    word-break: break-word;
}

/* Фильтры */
.db-filters-section {
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-filter-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.db-mode-toggle {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.db-mode-btn {
    padding: 4px 12px;
    border: none;
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.db-mode-btn:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.06);
}

.db-mode-btn.active {
    background: #e94560;
    color: white;
}

.db-mode-btn:hover:not(.active) {
    background: rgba(233,69,96,0.2);
    color: rgba(255,255,255,0.7);
}

.db-pill.active.multi {
    background: rgba(233,69,96,0.6);
    border-color: #e94560;
}

.db-filters-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.db-filters-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-filters-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-filter-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-filter-label {
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    white-space: nowrap;
    letter-spacing: 0.5px;
    min-width: 110px;
    flex-shrink: 0;
}

.db-filter-label i {
    color: #e94560;
    margin-right: 3px;
    font-size: 0.55rem;
}

.db-filter-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.db-type-pills {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.db-type-pills .db-pill {
    padding: 6px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-transform: capitalize;
    aspect-ratio: 3/2;
}

.db-type-pills .db-pill img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    border-radius: 50%;
}

.db-pill {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.db-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(233,69,96,0.2), transparent);
    opacity: 0;
    transition: opacity 0.25s;
}

.db-pill:hover {
    background: rgba(233,69,96,0.2);
    color: white;
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-1px);
}

.db-pill:hover::after { opacity: 1; }

.db-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: white;
    border-color: #e94560;
    box-shadow: 0 2px 10px rgba(233,69,96,0.3);
    animation: dbPillPulse 2s ease-in-out infinite;
}

/* Контент */
.db-content {
    min-height: 200px;
}

/* Карточки */
.db-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.db-card {
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 18px;
    cursor: default;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: dbCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.db-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--card-accent, #e94560), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.db-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    transition: left 0.6s;
    pointer-events: none;
}

.db-card:hover {
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3), 0 0 20px rgba(233,69,96,0.1);
}

.db-card:hover::before { opacity: 1; }
.db-card:hover::after { left: 200%; }

.db-card-top {
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
}

.db-card-img {
    width: 75px;
    height: 75px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
    flex-shrink: 0;
    transition: all 0.3s;
}

.db-card:hover .db-card-img {
    transform: scale(1.08);
    filter: drop-shadow(0 5px 12px rgba(233,69,96,0.3));
}

.db-card-info { flex: 1; min-width: 0; }

.db-card-id {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1px;
}

.db-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: white;
    margin: 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
.db-card-name:hover {
    color: #e94560;
    text-decoration: underline;
}
.db-card-img {
    cursor: pointer;
    transition: transform 0.2s ease;
}
.db-card-img:hover {
    transform: scale(1.08);
}

.db-card-engname {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.3);
    margin-bottom: 5px;
    font-style: italic;
}

.db-card-types {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.db-card-type-badge {
    padding: 3px 10px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: white;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: transform 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.1);
}

.db-card-type-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
    border-radius: 3px;
}

.db-card:hover .db-card-type-badge {
    transform: scale(1.05);
}

.db-card-stats-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 10px;
    margin-bottom: 8px;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}

.db-stat-item {
    display: flex;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: rgba(255,255,255,0.5);
}

.db-stat-item span:last-child {
    color: white;
    font-weight: bold;
}

.db-stat-total {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 4px;
    margin-top: 2px;
}

.db-stat-total span:last-child {
    color: #e94560 !important;
}

.db-card-abilities {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.5;
    margin-bottom: 6px;
}

.db-card-abilities b { color: rgba(255,255,255,0.6); }

.db-abil-mini {
    cursor: pointer;
    color: inherit;
    transition: color .15s;
}

.db-abil-mini:hover {
    color: #ff8ba0;
}

.db-card-tags {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.db-tag {
    padding: 2px 7px;
    border-radius: 5px;
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
    transition: all 0.2s;
}

.db-card:hover .db-tag {
    background: rgba(233,69,96,0.1);
    color: rgba(255,255,255,0.6);
}

/* Таблица */
.db-table-wrapper {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(15,52,96,0.2);
}

.db-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: white;
    table-layout: fixed;
}

.db-table th {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, #1a1a2e, rgba(26,26,46,0.95));
    padding: 12px 8px;
    text-align: left;
    color: #e94560;
    border-bottom: 2px solid rgba(233,69,96,0.3);
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}

/* Ширина колонок */
.th-id { width: 60px; }
.th-img { width: 48px; }
.th-name { width: 140px; }
.th-types { width: 70px; }
.th-stat { width: 44px; text-align: center; }
.th-total { width: 50px; text-align: center; }
.th-abilities { width: 200px; }
.th-tags { width: 110px; }

.db-table th:hover {
    color: white;
    background: rgba(233,69,96,0.15);
}

.db-table td {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
    transition: background 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-table .td-id {
    color: rgba(255,255,255,0.4);
    text-align: center;
    padding-left: 8px;
}

.db-table .td-stat {
    text-align: center;
    font-size: 0.56rem;
    padding: 8px 4px;
}

.db-table .td-total {
    text-align: center;
    color: #e94560;
    font-weight: bold;
    padding: 8px 4px;
}

.db-table .td-abilities {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.5);
    overflow: hidden;
}

.db-abs-grid {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.db-abs-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.db-abs-col span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.db-abs-sep {
    color: rgba(255,255,255,0.15);
    flex-shrink: 0;
}

.db-abs-empty {
    color: rgba(255,255,255,0.15);
}

.db-table .td-tags {
    max-width: 0;
}

.db-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.db-tags-grid .db-move-meta-tag {
    font-size: 0.58rem;
    padding: 1.5px 6px;
    gap: 3.5px;
}
.db-tags-grid .db-move-meta-tag i {
    font-size: 0.55rem;
}

.db-table .db-tag {
    display: block;
    padding: 1px 4px;
    border-radius: 3px;
    font-family: 'Minecraft', monospace;
    font-size: 0.42rem;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.4;
    max-width: 44px;
}

.db-table tr {
    transition: all 0.2s;
}

.db-table tbody tr:hover td {
    background: rgba(15,52,96,0.3);
}

.db-table tbody tr:hover {
    box-shadow: inset 3px 0 0 #e94560;
}

.db-table-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
    border-radius: 8px;
    transition: transform 0.2s;
}

.db-table tbody tr:hover .db-table-img {
    transform: scale(1.15);
}

.db-table-types {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.db-table-type-wrap {
    position: relative;
    display: inline-flex;
    cursor: help;
}

.db-table-type-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
    border-radius: 4px;
    transition: transform 0.2s;
}

.db-table-type-wrap:hover .db-table-type-icon {
    transform: scale(1.3);
}

.db-floating-tip {
    display: none;
    position: absolute;
    background: #16213e;
    color: white;
    font-size: 0.55rem;
    padding: 3px 10px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 999999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    border: 1px solid rgba(233,69,96,0.4);
    text-transform: capitalize;
    font-family: 'Minecraft', monospace;
}

.cstm-confirm-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Minecraft', monospace;
}
.cstm-confirm-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    min-width: 320px;
    max-width: 420px;
    text-align: center;
    color: white;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}
.cstm-confirm-icon {
    font-size: 1.5rem;
    color: #e94560;
    margin-bottom: 10px;
}
.cstm-confirm-msg {
    color: #bbb;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    line-height: 1.5;
    margin-bottom: 22px;
}
.cstm-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.cstm-confirm-btn {
    padding: 10px 24px;
    border-radius: 12px;
    border: none;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}
.cstm-confirm-yes {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}
.cstm-confirm-yes:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.5);
}
.cstm-confirm-no {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: white;
}
.cstm-confirm-no:hover {
    background: #e94560;
    transform: scale(1.05);
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.db-table-name-cell {
    white-space: nowrap;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-table-desc {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255,255,255,0.35);
    font-size: 0.55rem;
}

/* Детальное модальное окно */
.db-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: dbOverlayIn 0.3s ease-out;
    backdrop-filter: blur(6px);
}

.db-detail-modal {
    background: linear-gradient(145deg, #16213e, #1a1a2e);
    border: 1px solid var(--modal-border, rgba(233,69,96,0.3));
    border-radius: 22px;
    padding: 32px;
    max-width: 620px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    animation: dbDetailIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 40px var(--modal-glow, rgba(233,69,96,0.15));
    scrollbar-color: var(--modal-accent, rgba(255, 255, 255, 0.25)) rgba(26, 26, 46, 0.5);
}

.db-detail-modal::-webkit-scrollbar {
    width: 6px;
}
.db-detail-modal::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
    margin: 12px 0;
}
.db-detail-modal::-webkit-scrollbar-thumb {
    background: var(--modal-accent, rgba(255, 255, 255, 0.25));
    border-radius: 3px;
    transition: background 0.2s ease;
}
.db-detail-modal::-webkit-scrollbar-thumb:hover {
    background: var(--modal-accent-hover, var(--modal-accent, rgba(255, 255, 255, 0.45)));
}

.db-status-detail-modal,
.db-field-detail-modal,
.db-gimmick-detail-modal,
.db-type-detail-modal,
.db-adv-detail-modal {
    border: 1px solid var(--modal-border, rgba(255, 255, 255, 0.15)) !important;
    border-top: 4px solid var(--modal-accent, #9c88ff) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px var(--modal-glow, rgba(255, 255, 255, 0.1)) !important;
}

.db-status-detail-modal .db-detail-section-title,
.db-field-detail-modal .db-detail-section-title,
.db-gimmick-detail-modal .db-detail-section-title,
.db-type-detail-modal .db-detail-section-title,
.db-adv-detail-modal .db-detail-section-title {
    color: var(--modal-accent, #00cec9) !important;
    border-bottom: 1px solid var(--modal-border, rgba(255, 255, 255, 0.12)) !important;
}

.db-status-detail-modal .db-detail-close:hover,
.db-field-detail-modal .db-detail-close:hover,
.db-gimmick-detail-modal .db-detail-close:hover,
.db-type-detail-modal .db-detail-close:hover,
.db-adv-detail-modal .db-detail-close:hover {
    color: white !important;
    background: var(--modal-border, rgba(255, 255, 255, 0.15)) !important;
    border-color: var(--modal-accent, #00cec9) !important;
}

.db-detail-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.db-detail-close:hover {
    color: white;
    background: rgba(233,69,96,0.4);
    border-color: #e94560;
    transform: rotate(90deg);
}

.db-detail-top {
    display: flex;
    gap: 22px;
    margin-bottom: 22px;
    align-items: flex-start;
}

.db-detail-img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
    border-radius: 20px;
    background: rgba(0,0,0,0.2);
    padding: 10px;
    transition: transform 0.3s;
}

.db-detail-img:hover {
    transform: scale(1.05);
}

.db-detail-info { flex: 1; }

.db-detail-id {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1px;
}

.db-detail-name {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    color: white;
    margin: 5px 0;
    text-shadow: 0 0 10px rgba(233,69,96,0.3);
}

.db-detail-engname {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    margin-bottom: 10px;
    font-style: italic;
}

.db-detail-types {
    display: flex;
    gap: 7px;
    margin-bottom: 10px;
}

.db-detail-type-badge {
    padding: 5px 14px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: white;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: transform 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.1);
}

.db-detail-type-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
    border-radius: 4px;
}

.db-detail-type-badge:hover {
    transform: scale(1.08);
}

.db-detail-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.db-detail-section {
    margin-bottom: 16px;
    padding: 14px;
    background: rgba(0,0,0,0.15);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.04);
}

.db-detail-section-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(233,69,96,0.15);
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}

.db-detail-section-title i {
    font-size: 0.6rem;
}

.db-detail-desc {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.6;
}

.db-detail-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-detail-stat {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 12px;
    background: rgba(15,52,96,0.4);
    border-radius: 8px;
    transition: all 0.2s;
    gap: 8px;
}

.db-detail-stat:hover {
    background: rgba(15,52,96,0.6);
}

.db-detail-stat .label { color: rgba(255,255,255,0.45); text-align: right; }

.stat-bar-wrap {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}

.stat-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.db-detail-stat .value { color: white; font-weight: bold; min-width: 30px; text-align: right; }

.db-detail-stat.total {
    grid-column: 1 / -1;
    text-align: center;
    background: linear-gradient(135deg, rgba(233,69,96,0.15), rgba(233,69,96,0.08));
    border: 1px solid rgba(233,69,96,0.2);
    padding: 8px;
}

.db-detail-stat.total .value {
    color: #e94560;
    font-size: 0.85rem;
    text-shadow: 0 0 8px rgba(233,69,96,0.4);
}

.db-detail-abilities { line-height: 1.9; }

.db-detail-efx { display: flex; flex-direction: column; gap: 6px; }
.efx-grid { display: flex; flex-direction: column; gap: 6px; }
.efx-group { display: flex; align-items: center; gap: 8px; }
.efx-label {
    min-width: 32px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    font-weight: bold;
    flex-shrink: 0;
}
.efx-types {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.efx-type-chip {
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    white-space: nowrap;
}

.db-detail-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 12px 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.25s;
}
.db-detail-download:hover {
    background: rgba(233,69,96,0.15);
    border-color: rgba(233,69,96,0.4);
    color: white;
}

.db-detail-ability {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.65);
    padding: 3px 0;
}

.db-detail-ability .db-abil-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: color .15s;
}

.db-detail-ability .db-abil-link:hover {
    color: #ff8ba0;
}

.db-detail-ability b { color: white; }
.db-detail-ability .hidden-label {
    color: #e94560;
    font-size: 0.52rem;
    font-style: italic;
}

.db-detail-holders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 12px;
    max-height: 330px;
    overflow-y: auto;
    padding-right: 4px;
}

.db-abil-scale-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.45);
    margin-right: 2px;
}

.db-abil-scale {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.85);
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    transition: all .15s;
}

.db-abil-scale:hover {
    background: rgba(255,255,255,0.12);
}

.db-abil-scale.active {
    border-color: #e94560;
    background: rgba(233,69,96,0.18);
    color: #ff8ba0;
}

.db-loading {
    text-align: center;
    padding: 60px;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
}

.db-loading i {
    margin-right: 8px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.db-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.3);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
}

.db-empty i {
    display: block;
    font-size: 2rem;
    margin-bottom: 15px;
    color: rgba(233,69,96,0.3);
}

/* Адаптив для базы данных */
@media (max-width: 768px) {
    .db-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px;
    }

    .db-header-stats {
        width: 100%;
        justify-content: center;
    }

    .db-header-text h2 {
        font-size: 1rem;
    }

    .db-cards {
        grid-template-columns: 1fr;
    }

    .db-search-row {
        flex-direction: column;
    }

    .db-search-wrapper {
        min-width: auto;
    }

    .db-sort-select {
        width: 100%;
    }

    .db-filter-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .db-filters-columns {
        grid-template-columns: 1fr;
    }

    .db-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .db-table {
        table-layout: auto;
        min-width: 700px;
    }

    .db-detail-modal {
        padding: 20px;
        border-radius: 18px;
    }

    .db-detail-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .db-detail-types,
    .db-detail-tags {
        justify-content: center;
    }
}

/* ============================================
   ВКЛАДКА: ПОМОЩЬ С ПРОЕКТОМ
   ============================================ */

#tabHelp h2 {
    font-family: 'Minecraft', monospace;
    color: white;
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

/* ========================================
   HELP TAB — SUPER DESIGN
   ======================================== */

/* Hero */
.help-hero {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 15px 25px;
    background: rgba(15, 52, 96, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 20px;
    margin-bottom: 16px;
}

.help-hero-icon {
    font-size: 1.2rem;
    color: #e94560;
    flex-shrink: 0;
}

.help-hero h2 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    color: white;
    margin: 0;
}

.help-hero p {
    color: rgba(255,255,255,0.4);
    font-size: 0.65rem;
    margin: 0 0 0 auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
    flex: 1 1 100%;
}

/* Cards */
.help-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 900px;
    margin: 0 auto 24px;
}

.help-card {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    padding: 24px 18px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.help-card:nth-child(1) { animation-delay: 0.1s; }
.help-card:nth-child(2) { animation-delay: 0.2s; }
.help-card:nth-child(3) { animation-delay: 0.3s; }

.help-card-shine {
    display: none;
}

.help-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #e94560, #c62a47);
    opacity: 0.6;
    transition: opacity 0.3s;
}

.help-card:hover::before {
    opacity: 1;
}

.help-card:hover {
    transform: translateY(-3px);
    border-color: rgba(233, 69, 96, 0.4);
    box-shadow: 0 8px 25px rgba(233, 69, 96, 0.1);
}

.help-card-icon {
    font-size: 1.8rem;
    margin-bottom: 12px;
    position: relative;
    transition: transform 0.3s;
    color: #e94560;
    filter: drop-shadow(0 0 8px rgba(233,69,96,0.3));
}

.help-card:hover .help-card-icon {
    transform: scale(1.1);
}

.help-card-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: white;
    margin-bottom: 6px;
    position: relative;
}

.help-card-desc {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.5;
    position: relative;
}

.help-card-arrow {
    margin-top: 12px;
    color: rgba(255,255,255,0.15);
    font-size: 0.7rem;
    transition: all 0.3s;
    position: relative;
}

.help-card:hover .help-card-arrow {
    color: #e94560;
    transform: translateX(4px);
}

/* Submissions Button */
.help-submissions-wrap {
    text-align: center;
    margin-bottom: 20px;
}

.help-submissions-btn {
    padding: 10px 24px;
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.help-submissions-btn:hover {
    border-color: #e94560;
    color: white;
    box-shadow: 0 4px 20px rgba(233,69,96,0.15);
    transform: translateY(-2px);
}

/* Submissions Tabs */
.help-sub-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    padding: 4px;
}

.help-sub-tab {
    flex: 1;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.help-sub-tab:hover {
    color: rgba(255,255,255,0.7);
    background: rgba(233,69,96,0.08);
}

.help-sub-tab.active {
    background: rgba(233,69,96,0.2);
    color: white;
}

.help-sub-tab i {
    font-size: 0.5rem;
}

/* Submission Items */
.help-submission-item {
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.15);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    position: relative;
    transition: border-color 0.2s;
}

.help-submission-item:hover {
    border-color: rgba(233,69,96,0.3);
}

.help-submission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.help-submission-type {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

.help-submission-date {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.25);
}

.help-submission-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
}

.help-submission-details b {
    color: white;
}

.help-submission-reply {
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.7);
}

.help-submission-reply i {
    color: #3498db;
    margin-right: 4px;
}

.help-submission-reply b {
    color: #3498db;
}

.help-submission-delete {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.15);
    cursor: pointer;
    font-size: 0.6rem;
    padding: 4px;
    transition: color 0.2s;
    border-radius: 6px;
}

.help-submission-delete:hover {
    color: #e74c3c;
    background: rgba(231,76,60,0.1);
}

/* Forms */
.help-form {
    max-width: 700px;
    margin: 0 auto;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    overflow: hidden;
}

.help-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 2px solid #e94560;
}

.help-form-header h3 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-form-header h3 i {
    color: #e94560;
}

.help-close-btn {
    background: #c0392b;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 0.7rem;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.help-close-btn:hover {
    background: #e74c3c;
    transform: translateY(-2px);
}

.help-form-body {
    padding: 22px;
}

.help-form-body label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #e94560;
    margin-bottom: 6px;
    margin-top: 16px;
}

.help-form-body label:first-child {
    margin-top: 0;
}

.help-input,
.help-textarea,
.help-select {
    width: 100%;
    padding: 10px 14px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    transition: all 0.25s;
    box-sizing: border-box;
}

.help-input:focus,
.help-textarea:focus,
.help-select:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.15);
}

.help-textarea {
    resize: vertical;
    min-height: 80px;
}

.help-select {
    cursor: pointer;
}

.help-select option {
    background: #1a1a2e;
    color: white;
}

/* Фильтры в форме идеи */
.help-filters-section {
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 12px;
    padding: 15px;
    margin-top: 6px;
}

.help-filter-group {
    margin-bottom: 12px;
}

.help-filter-group:last-child {
    margin-bottom: 0;
}

.help-filter-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-bottom: 8px;
}

.help-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.help-filter-tag {
    padding: 5px 12px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
}

.help-filter-tag:hover {
    border-color: #e94560;
    color: white;
}

.help-filter-tag.selected {
    background: #e94560;
    border-color: #e94560;
    color: white;
}

/* Чипсы покемонов */
.help-pokemon-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.help-pokemon-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
}

.help-pokemon-chip .remove-chip {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
}

.help-pokemon-chip .remove-chip:hover {
    color: #e94560;
}

.help-add-pokemon-btn {
    background: rgba(233, 69, 96, 0.1);
    border: 1px dashed rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
}

.help-add-pokemon-btn:hover {
    border-color: #e94560;
    color: white;
}

/* Mechanics Grid */
.help-mechanics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}

.help-mech-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0 !important;
}

.help-mech-check:hover {
    border-color: rgba(233,69,96,0.5);
    background: rgba(233,69,96,0.08);
    color: rgba(255,255,255,0.8);
}

.help-mech-check input {
    display: none;
}

.help-mech-box {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(233,69,96,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    background: rgba(233,69,96,0.05);
    transition: all 0.25s;
    flex-shrink: 0;
    position: relative;
}

.help-mech-check input:checked ~ .help-mech-box {
    background: rgba(233,69,96,0.25);
    border-color: #e94560;
    color: #e94560;
}

.help-mech-check input:checked ~ .help-mech-box i {
    display: none;
}

.help-mech-check input:checked ~ .help-mech-box::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: #e94560;
}

.help-mech-check input:checked ~ *:last-child {
    color: white;
}

.help-mech-check--other {
    grid-column: 1 / -1;
}

/* Submit Button */
.help-submit-btn {
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    background: #2ecc71;
    border: none;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.help-submit-btn:hover {
    background: #27ae60;
    transform: translateY(-2px);
}

/* Селектор покемона */
.help-pokemon-selector {
    position: relative;
}

.help-pokemon-list {
    max-height: 260px;
    overflow-y: auto;
    background: #1a1a2e;
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 10px;
    margin-top: 6px;
}

.help-pokemon-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.help-pokemon-item:hover {
    background: rgba(233, 69, 96, 0.15);
}

.help-pokemon-item img {
    width: 30px;
    height: 30px;
}

.help-pokemon-item .name {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: white;
}

.help-pokemon-item .engname {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

.help-selected-pokemon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 10px;
    margin-top: 6px;
}

.help-selected-pokemon img {
    width: 40px;
    height: 40px;
}

/* Чекбоксы */
.help-replace-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.help-replace-options .help-check-label {
    margin: 0 !important;
    min-height: 36px;
    font-size: 0.62rem;
}

.help-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0;
    min-height: 36px;
    box-sizing: border-box;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s;
}

.help-check-label:hover {
    border-color: rgba(233,69,96,0.5);
    background: rgba(233,69,96,0.08);
    color: white;
}

.help-check-label:has(input:checked) {
    border-color: #e94560;
    background: rgba(233,69,96,0.15);
    color: white;
}

.help-check-label input[type="checkbox"] {
    accent-color: #e94560;
    width: 14px;
    height: 14px;
}

/* Модалка выбора покемона для идеи */
.help-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-picker-modal {
    background: rgba(15, 52, 96, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 16px;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.help-picker-modal h3 {
    font-family: 'Minecraft', monospace;
    color: white;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* Секции редактирования */
.help-edit-section {
    margin-top: 10px;
    padding: 10px 12px;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    animation: helpFadeIn 0.25s ease;
}

.help-edit-section label {
    margin-top: 0 !important;
    font-size: 0.6rem !important;
    margin-bottom: 4px !important;
}

.help-edit-section .help-input,
.help-edit-section .help-textarea {
    padding: 7px 10px;
    font-size: 0.65rem;
}

.help-name-row {
    display: flex;
    gap: 8px;
}

.help-name-field {
    flex: 1;
}

.help-name-field label {
    display: block;
    margin-bottom: 3px !important;
}

/* Сетка иконок типов */
.help-type-icons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.help-type-icons-grid .type-icon-item {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 30, 60, 0.5);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0.5;
}

.help-type-icons-grid .type-icon-item:hover {
    opacity: 0.8;
    transform: scale(1.08);
}

.help-type-icons-grid .type-icon-item.selected {
    opacity: 1;
    border-color: white;
    background: linear-gradient(135deg, #e94560, #c62a47);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.4);
}

.help-type-icons-grid .type-icon-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.help-selected-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.help-selected-type-tag {
    padding: 4px 12px;
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(233, 69, 96, 0.3);
    border: 1px solid rgba(233, 69, 96, 0.4);
}

.help-selected-type-tag .remove-type {
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.7rem;
}

.help-selected-type-tag .remove-type:hover {
    opacity: 1;
}

/* Сетка статов */
.help-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
}

.help-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.help-stat-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.5);
    min-width: 45px;
}

.help-stat-input {
    flex: 1;
    padding: 5px 8px;
    background: rgba(10,30,60,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    outline: none;
    width: 50px;
}

.help-stat-input:focus {
    border-color: rgba(233,69,96,0.5);
}

/* Abilities grid */
.help-abs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.help-abs-item label {
    font-size: 0.55rem !important;
    margin-bottom: 3px !important;
}

.help-abs-item .help-input {
    padding: 5px 8px;
    font-size: 0.6rem;
}

/* ==================== НОВЫЙ РЕЖИМ РАЗРАБОТЧИКА ==================== */

@keyframes devnewGlow {
    0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 20px rgba(233,69,96,0.1); }
    50% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 40px rgba(233,69,96,0.25); }
}

@keyframes devnewShine {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes devnewFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes devnewCardIn {
    from { opacity: 0; transform: translateY(15px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes devnewPillPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233,69,96,0.3); }
    50% { box-shadow: 0 0 0 4px rgba(233,69,96,0); }
}

@keyframes devnewStatPop {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes devnewFadeSlide {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes devnewTypeGlow {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46,204,113,0.6); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(46,204,113,0.2); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}

@keyframes devnewTypeRemove {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231,76,60,0.5); }
    40% { transform: scale(0.88); box-shadow: 0 0 0 4px rgba(231,76,60,0.3); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231,76,60,0); }
}

/* ===== Hero Header ===== */
.dn-hero {
    text-align: center;
    padding: 30px 20px 24px;
    background: linear-gradient(135deg, rgba(15,52,96,0.6), rgba(26,26,46,0.7));
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.2);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    animation: devnewGlow 4s ease-in-out infinite;
}

.dn-hero::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(233,69,96,0.06), transparent);
    animation: devnewShine 6s ease-in-out infinite;
}

.dn-hero-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: white;
    box-shadow: 0 6px 20px rgba(233,69,96,0.4);
    margin-bottom: 12px;
    animation: devnewFloat 3s ease-in-out infinite;
    position: relative; z-index: 1;
}

.dn-hero h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem; color: white;
    text-shadow: 0 0 20px rgba(233,69,96,0.4);
    margin-bottom: 4px;
    position: relative; z-index: 1;
}

.dn-hero p {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: rgba(255,255,255,0.4);
    position: relative; z-index: 1;
}

.dn-hero-stats {
    display: flex; gap: 12px; justify-content: center;
    margin-top: 16px;
    position: relative; z-index: 1;
}

.dn-hero-stat {
    text-align: center;
    padding: 8px 16px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    border: 1px solid rgba(233,69,96,0.12);
    min-width: 70px;
}

.dn-hero-stat-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem; color: #e94560; font-weight: bold;
    text-shadow: 0 0 8px rgba(233,69,96,0.3);
    animation: devnewStatPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dn-hero-stat-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem; color: rgba(255,255,255,0.35);
    letter-spacing: 0.5px;
}

/* ===== Toolbar ===== */
.dn-toolbar {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    padding: 14px 18px;
    background: rgba(15,52,96,0.3);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
}

.dn-toolbar-group {
    display: flex; gap: 6px; align-items: center;
}

.dn-toolbar-sep {
    width: 1px; height: 24px;
    background: rgba(233,69,96,0.2);
    margin: 0 4px;
}

.dn-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.4);
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
    white-space: nowrap;
}

.dn-pill:hover {
    background: rgba(233,69,96,0.15);
    color: white;
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-1px);
}

.dn-pill i { font-size: 0.6rem; }

.dn-pill--accent {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: white;
    border-color: #e94560;
}
.dn-pill--accent:hover {
    box-shadow: 0 4px 14px rgba(233,69,96,0.35);
    transform: translateY(-2px);
}

.dn-pill--green { border-color: rgba(46,204,113,0.3); }
.dn-pill--green:hover { background: rgba(46,204,113,0.15); border-color: rgba(46,204,113,0.5); }

.dn-pill--purple { border-color: rgba(155,89,182,0.3); }
.dn-pill--purple:hover { background: rgba(155,89,182,0.15); border-color: rgba(155,89,182,0.5); }

.dn-pill--orange { border-color: rgba(243,156,18,0.3); }
.dn-pill--orange:hover { background: rgba(243,156,18,0.15); border-color: rgba(243,156,18,0.5); }

.dn-pill--blue { border-color: rgba(52,152,219,0.3); }
.dn-pill--blue:hover { background: rgba(52,152,219,0.15); border-color: rgba(52,152,219,0.5); }

.dn-pill--red { border-color: rgba(231,76,60,0.3); }
.dn-pill--red:hover { background: rgba(231,76,60,0.15); border-color: rgba(231,76,60,0.5); }

.dn-pill--teal { border-color: rgba(22,160,133,0.3); }
.dn-pill--teal:hover { background: rgba(22,160,133,0.15); border-color: rgba(22,160,133,0.5); }

.dn-select {
    padding: 7px 12px;
    background: rgba(26,26,46,0.8);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 10px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    min-width: 160px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.dn-select:focus {
    border-color: #e94560;
    outline: none;
}

/* ===== Main Layout ===== */
.dn-main {
    display: flex; gap: 20px; align-items: stretch;
    flex-wrap: wrap;
}

/* ===== Editor Panel ===== */
.dn-editor {
    flex: 2; min-width: 340px;
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px;
    padding: 22px;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    transition: border-color 0.3s;
}

.dn-editor:hover {
    border-color: rgba(233,69,96,0.2);
}

.dn-editor-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem; color: white;
    padding-bottom: 12px; margin-bottom: 18px;
    border-bottom: 2px solid rgba(233,69,96,0.3);
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}

.dn-editor-title i { color: #e94560; }

/* Upload area */
.dn-upload {
    width: 200px; min-height: 200px;
    background: #1a1a2e;
    border: 2px dashed rgba(233,69,96,0.35);
    border-radius: 16px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative; overflow: hidden;
    flex-shrink: 0;
}

.dn-upload:hover {
    border-color: #e94560;
    background: rgba(26,26,46,0.9);
    box-shadow: 0 0 20px rgba(233,69,96,0.1);
}

.dn-upload-icon {
    font-size: 2rem; color: #e94560;
    margin-bottom: 8px;
    transition: transform 0.3s;
}

.dn-upload:hover .dn-upload-icon { transform: scale(1.1); }

.dn-upload-text {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.4);
}

.dn-upload-img {
    width: 100%; max-height: 180px;
    object-fit: contain; border-radius: 12px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
    transition: filter 0.3s;
}

.dn-upload-img:hover {
    filter: drop-shadow(0 6px 18px rgba(233,69,96,0.3));
}

/* Editor form fields */
.dn-editor-body {
    display: flex; gap: 20px; margin-bottom: 20px;
}

.dn-editor-fields { flex: 1; }

.dn-field-label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.dn-field-label i { color: #e94560; margin-right: 4px; }

.dn-input {
    width: 100%;
    padding: 9px 14px;
    background: rgba(10,20,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    transition: all 0.25s;
    box-sizing: border-box;
}

.dn-input:focus {
    border-color: rgba(233,69,96,0.5);
    box-shadow: 0 0 0 3px rgba(233,69,96,0.1), 0 2px 8px rgba(0,0,0,0.2);
    outline: none;
}

.dn-input::placeholder { color: rgba(255,255,255,0.2); }

.dn-textarea {
    width: 100%;
    padding: 9px 14px;
    background: rgba(10,20,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    resize: vertical;
    min-height: 80px;
    transition: all 0.25s;
    box-sizing: border-box;
}

.dn-textarea:focus {
    border-color: rgba(233,69,96,0.5);
    box-shadow: 0 0 0 3px rgba(233,69,96,0.1), 0 2px 8px rgba(0,0,0,0.2);
    outline: none;
}

.dn-textarea::placeholder { color: rgba(255,255,255,0.2); }

/* Type grid */
.dn-types-section {
    margin-bottom: 20px;
}

.dn-types-grid {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 4px 0;
}

.dn-type-item {
    width: 80px;
    text-align: center;
    padding: 8px 4px 6px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10,20,40,0.4);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
}

.dn-type-item:hover {
    border-color: rgba(233,69,96,0.3);
    transform: translateY(-2px);
    background: rgba(233,69,96,0.08);
}

.dn-type-item img {
    width: 42px; height: 42px; object-fit: contain;
    transition: transform 0.2s;
}

.dn-type-item:hover img { transform: scale(1.1); }

.dn-type-item span {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.45rem;
    color: rgba(255,255,255,0.5);
    margin-top: 3px;
}

.dn-type-item.selected {
    border-color: rgba(46,204,113,0.5);
    background: rgba(46,204,113,0.12);
    animation: devnewTypeGlow 0.35s ease;
}

.dn-type-item.selected span { color: #2ecc71; }

.dn-type-item.removing {
    animation: devnewTypeRemove 0.3s ease;
}

/* Action buttons row */
.dn-actions {
    display: flex; gap: 12px;
    margin-top: auto; padding-top: 14px;
}

.dn-btn {
    flex: 1;
    padding: 11px 16px;
    border: none; border-radius: 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: white;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

.dn-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

.dn-btn--save {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    box-shadow: 0 4px 12px rgba(46,204,113,0.25);
}
.dn-btn--save:hover { box-shadow: 0 6px 18px rgba(46,204,113,0.35); }

.dn-btn--delete {
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    box-shadow: 0 4px 12px rgba(231,76,60,0.25);
}
.dn-btn--delete:hover { box-shadow: 0 6px 18px rgba(231,76,60,0.35); }

/* ===== List Panel ===== */
.dn-list {
    flex: 1; min-width: 260px;
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px;
    padding: 22px;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    transition: border-color 0.3s;
}

.dn-list:hover {
    border-color: rgba(233,69,96,0.2);
}

.dn-list-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem; color: white;
    padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 2px solid rgba(233,69,96,0.3);
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}

.dn-list-title i { color: #e94560; }

.dn-list-scroll {
    flex: 1;
    display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
}

.dn-list-scroll::-webkit-scrollbar { width: 5px; }
.dn-list-scroll::-webkit-scrollbar-track { background: transparent; }
.dn-list-scroll::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.3); border-radius: 10px; }

/* Pokemon cards in list */
.dn-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(15,52,96,0.4), rgba(26,26,46,0.5));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
    animation: devnewCardIn 0.35s ease backwards;
}

.dn-card::before {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    transition: left 0.5s;
}

.dn-card:hover {
    border-color: rgba(233,69,96,0.3);
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.dn-card:hover::before { left: 200%; }

.dn-card.active {
    border-color: rgba(233,69,96,0.5);
    background: linear-gradient(135deg, rgba(233,69,96,0.12), rgba(26,26,46,0.5));
    box-shadow: 0 0 15px rgba(233,69,96,0.1);
}

.dn-card-img {
    width: 46px; height: 46px;
    object-fit: cover; border-radius: 10px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.dn-card-placeholder {
    width: 46px; height: 46px;
    background: rgba(26,26,46,0.8);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.dn-card-placeholder i { font-size: 1.2rem; color: #e94560; }

.dn-card-info { flex: 1; min-width: 0; }

.dn-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem; color: white; font-weight: bold;
    white-space: normal; word-break: break-word;
    line-height: 1.3;
    transition: color 0.2s;
}

.dn-card.active .dn-card-name {
    background: linear-gradient(135deg, #ffd700, #f39c12);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dn-card-types {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem; color: rgba(233,69,96,0.7);
    margin-top: 3px;
}

/* Clear empty button */
.dn-clear-btn {
    margin-top: 14px;
    padding: 9px 14px;
    background: rgba(243,156,18,0.15);
    border: 1px solid rgba(243,156,18,0.25);
    border-radius: 12px;
    color: rgba(243,156,18,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.25s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

.dn-clear-btn:hover {
    background: rgba(243,156,18,0.25);
    border-color: rgba(243,156,18,0.4);
    color: #f39c12;
}

/* ===== Background Manager ===== */
.dn-bg-manager {
    margin-top: 20px;
    padding: 18px;
    background: linear-gradient(145deg, rgba(15,52,96,0.4), rgba(26,26,46,0.5));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
}

.dn-bg-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem; color: #e94560;
    padding-bottom: 8px; margin-bottom: 12px;
    border-bottom: 1px solid rgba(233,69,96,0.2);
    display: flex; align-items: center; gap: 6px;
}

.dn-bg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.dn-bg-card {
    position: relative; border-radius: 12px; overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.06);
    aspect-ratio: 16/9;
    transition: all 0.3s;
}

.dn-bg-card:hover {
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.dn-bg-card.active {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233,69,96,0.3);
}

.dn-bg-card img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.dn-bg-card .dn-bg-delete {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px;
    background: rgba(231,76,60,0.8);
    border: none; border-radius: 50%;
    color: white; font-size: 0.6rem;
    cursor: pointer;
    display: none; align-items: center; justify-content: center;
    transition: background 0.2s;
}

.dn-bg-card .dn-bg-rename {
    position: absolute; top: 4px; right: 30px;
    width: 22px; height: 22px;
    background: rgba(233,69,96,0.8);
    border: none; border-radius: 50%;
    color: white; font-size: 0.55rem;
    cursor: pointer;
    display: none; align-items: center; justify-content: center;
    transition: background 0.2s;
}

.dn-bg-card:hover .dn-bg-delete { display: flex; }
.dn-bg-card:hover .dn-bg-rename { display: flex; }
.dn-bg-card .dn-bg-delete:hover { background: #e74c3c; }
.dn-bg-card .dn-bg-rename:hover { background: #e94560; }

.dn-bg-upload {
    border: 2px dashed rgba(233,69,96,0.25);
    border-radius: 12px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    aspect-ratio: 16/9;
    cursor: pointer;
    transition: all 0.3s;
    color: rgba(255,255,255,0.3);
}

.dn-bg-upload:hover {
    border-color: rgba(233,69,96,0.5);
    color: rgba(233,69,96,0.7);
}

.dn-bg-upload i { font-size: 1.3rem; margin-bottom: 4px; }
.dn-bg-upload span { font-family: 'Minecraft', monospace; font-size: 0.48rem; }

.dn-bg-current {
    margin-top: 10px;
    text-align: center;
}

.dn-bg-current-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
}

.dn-bg-current img {
    max-width: 200px; max-height: 100px;
    object-fit: cover; border-radius: 10px;
    border: 1px solid rgba(233,69,96,0.2);
}

/* ===== Modal (new style) ===== */
.dn-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 20000;
    backdrop-filter: blur(6px);
    animation: devnewFadeSlide 0.25s ease;
}

.dn-modal {
    background: linear-gradient(145deg, #16213e, #1a1a2e);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 22px;
    padding: 28px;
    max-width: 500px; width: 92%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 30px rgba(233,69,96,0.1);
    animation: devnewCardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dn-modal h3 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem; color: white;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}

.dn-modal h3 i { color: #e94560; }

.dn-modal-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(10,20,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    margin-bottom: 18px;
    box-sizing: border-box;
}

.dn-modal-input:focus {
    border-color: rgba(233,69,96,0.5);
    outline: none;
}

.dn-modal-actions {
    display: flex; gap: 10px; justify-content: flex-end;
}

.dn-modal-btn {
    padding: 9px 20px;
    border: none; border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: white;
    cursor: pointer;
    transition: all 0.25s;
    display: flex; align-items: center; gap: 6px;
}

.dn-modal-btn:hover { transform: translateY(-2px); }

.dn-modal-btn--confirm {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}
.dn-modal-btn--cancel {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
}
.dn-modal-btn--cancel:hover {
    background: rgba(255,255,255,0.12);
}

/* Template modal (new style) */
.dn-template-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 20000;
    backdrop-filter: blur(6px);
    animation: devnewFadeSlide 0.25s ease;
}

.dn-template-modal {
    background: linear-gradient(145deg, #16213e, #1a1a2e);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 22px;
    padding: 28px;
    max-width: 800px; width: 95%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 30px rgba(233,69,96,0.1);
    animation: devnewCardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dn-template-modal::-webkit-scrollbar { width: 5px; }
.dn-template-modal::-webkit-scrollbar-track { background: transparent; }
.dn-template-modal::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.3); border-radius: 10px; }

.dn-template-modal h3 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem; color: white;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}

.dn-template-modal h3 i { color: #e94560; }

.dn-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 14px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 4px;
}

.dn-template-grid::-webkit-scrollbar { width: 4px; }
.dn-template-grid::-webkit-scrollbar-track { background: transparent; }
.dn-template-grid::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.2); border-radius: 10px; }

.dn-template-card {
    background: linear-gradient(135deg, rgba(15,52,96,0.4), rgba(26,26,46,0.5));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative; overflow: hidden;
}

.dn-template-card:hover {
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.dn-template-card img {
    width: 60px; height: 60px;
    object-fit: contain;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.dn-template-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: white;
}

.dn-template-card-types {
    font-family: 'Minecraft', monospace;
    font-size: 0.45rem; color: rgba(233,69,96,0.6);
    margin-top: 2px;
}

/* ===== Back to Play Button ===== */
.dn-back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: rgba(243,156,18,0.15);
    border: 1px solid rgba(243,156,18,0.3);
    border-radius: 30px;
    color: #f39c12;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.25s;
    margin-bottom: 16px;
}

.dn-back-btn:hover {
    background: rgba(243,156,18,0.25);
    border-color: rgba(243,156,18,0.5);
    transform: translateX(-3px);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .dn-main { flex-direction: column; }
    .dn-editor, .dn-list { min-width: 100%; }
    .dn-hero-stats { flex-wrap: wrap; }
    .dn-toolbar { gap: 6px; }
    .dn-card { padding: 8px 10px; }
    .dn-type-item { width: 65px; }
    .dn-type-item img { width: 36px; height: 36px; }
}

/* ==================== НОВАЯ ТАБЛИЦА ЛИДЕРОВ (СТИЛЬ РЕЖИМА РАЗРАБОТЧИКА) ==================== */

/* Back button */
.lbn-back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: #e67e22;
    border: none; border-radius: 30px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 16px;
}
.lbn-back-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(230,126,34,0.4); }

/* Header */
.lbn-header {
    display: flex; align-items: center; gap: 20px;
    padding: 20px 28px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    margin-bottom: 20px;
}
.lbn-header-icon {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(233,69,96,0.3);
    flex-shrink: 0;
}
.lbn-header-text h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1rem; color: white;
    margin-bottom: 2px;
    letter-spacing: 1px;
}
.lbn-header-text p {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: rgba(255,255,255,0.4);
}

/* Toolbar (tab switcher) */
.lbn-toolbar {
    display: flex; gap: 4px; margin-bottom: 20px;
    background: #1a1a2e;
    padding: 4px;
    border-radius: 12px;
    border: 2px solid #e94560;
    flex-wrap: wrap;
}
.lbn-tab {
    flex: 1;
    padding: 8px 16px;
    border: none; border-radius: 10px;
    background: transparent;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.3s;
}
.lbn-tab:hover { color: rgba(255,255,255,0.7); background: rgba(233, 69, 96, 0.1); }
.lbn-tab.active { color: white; box-shadow: 0 2px 12px rgba(233, 69, 96, 0.4); }
.lbn-tab[data-lbn-tab="speed"].active { background: linear-gradient(135deg, #f39c12, #e67e22); }
.lbn-tab[data-lbn-tab="speed"]:not(.active) { background: rgba(243,156,18,0.15); border: 1px solid rgba(243,156,18,0.3); }
.lbn-tab[data-lbn-tab="check"].active { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.lbn-tab[data-lbn-tab="check"]:not(.active) { background: rgba(46,204,113,0.15); border: 1px solid rgba(46,204,113,0.3); }
.lbn-tab[data-lbn-tab="single"].active { background: linear-gradient(135deg, #e94560, #c62a47); }
.lbn-tab[data-lbn-tab="single"]:not(.active) { background: rgba(233,69,96,0.15); border: 1px solid rgba(233,69,96,0.3); }

/* Tab content */
.lbn-tab-content { display: none; }
.lbn-tab-content.active { display: block; }

/* Mode block */
.lbn-mode-block {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    transition: border-color 0.3s;
}
.lbn-mode-block:hover { border-color: rgba(233, 69, 96, 0.35); }

/* Stats row */
.lbn-stats-row {
    display: flex; gap: 10px; margin-bottom: 16px;
    flex-wrap: wrap;
}
.lbn-stat-card {
    flex: 1; min-width: 100px;
    text-align: center;
    padding: 14px 10px;
    border-radius: 15px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    transition: all 0.3s;
}
.lbn-stat-card:hover { transform: translateY(-3px); border-color: #e94560; box-shadow: 0 5px 20px rgba(233, 69, 96, 0.2); }
.lbn-stat-card--rounds { border-color: rgba(99,144,240,0.4); }
.lbn-stat-card--rounds:hover { box-shadow: 0 5px 20px rgba(99,144,240,0.2); border-color: #6390f0; }
.lbn-stat-card--perfect { border-color: rgba(46,204,113,0.4); }
.lbn-stat-card--perfect:hover { box-shadow: 0 5px 20px rgba(46,204,113,0.2); border-color: #2ecc71; }
.lbn-stat-card--best { border-color: rgba(255,215,0,0.4); }
.lbn-stat-card--best:hover { box-shadow: 0 5px 20px rgba(255,215,0,0.2); border-color: #ffd700; }
.lbn-stat-icon { font-size: 1.1rem; margin-bottom: 6px; }
.lbn-stat-card--rounds .lbn-stat-icon { color: #6390f0; }
.lbn-stat-card--perfect .lbn-stat-icon { color: #2ecc71; }
.lbn-stat-card--best .lbn-stat-icon { color: #ffd700; }
.lbn-stat-value {
    font-family: 'Minecraft', monospace;
    font-size: 1rem; color: white; font-weight: bold;
}
.lbn-stat-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem; color: rgba(255,255,255,0.4);
    margin-top: 3px;
}

/* Category */
.lbn-category {
    background: #1a1a2e;
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 16px;
    margin-bottom: 14px;
    transition: all 0.3s;
}
.lbn-category:last-child { margin-bottom: 0; }
.lbn-category:hover { border-color: #e94560; box-shadow: 0 5px 20px rgba(233, 69, 96, 0.15); }
.lbn-category-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e94560;
}
.lbn-category-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem; color: #e94560; font-weight: bold;
    display: flex; align-items: center; gap: 8px;
    letter-spacing: 1px;
}
.lbn-category-label i { color: #e94560; }
.lbn-category-count {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.35);
}

/* Podium */
.lbn-podium {
    display: flex; justify-content: center; align-items: flex-end;
    gap: 12px; margin-bottom: 16px; padding: 10px 0 0;
}
.lbn-podium-item {
    text-align: center;
    padding: 14px 10px 10px;
    border-radius: 16px 16px 0 0;
    min-width: 80px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    transition: all 0.3s;
}
.lbn-podium-item:hover { transform: translateY(-4px); }
.lbn-podium-first {
    border: 2px solid rgba(255,215,0,0.5); border-bottom: none;
    padding-top: 18px; order: 2;
}
.lbn-podium-first:hover { box-shadow: 0 5px 20px rgba(255,215,0,0.2); border-color: #ffd700; }
.lbn-podium-second {
    border: 2px solid rgba(192,192,192,0.4); border-bottom: none;
    order: 1;
}
.lbn-podium-second:hover { box-shadow: 0 5px 20px rgba(192,192,192,0.15); border-color: #c0c0c0; }
.lbn-podium-third {
    border: 2px solid rgba(205,127,50,0.4); border-bottom: none;
    order: 3;
}
.lbn-podium-third:hover { box-shadow: 0 5px 20px rgba(205,127,50,0.15); border-color: #cd7f32; }
.lbn-podium-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    margin: 0 auto 6px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem; font-weight: bold; color: white;
    border: 2px solid rgba(233,69,96,0.3);
}
.lbn-podium-first .lbn-podium-avatar { background: linear-gradient(135deg, #ffd700, #ffaa00); box-shadow: 0 0 10px rgba(255,215,0,0.4); border-color: #ffd700; }
.lbn-podium-second .lbn-podium-avatar { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); border-color: #c0c0c0; }
.lbn-podium-third .lbn-podium-avatar { background: linear-gradient(135deg, #cd7f32, #b87333); border-color: #cd7f32; }
.lbn-podium-medal { font-size: 1.3rem; margin-bottom: 4px; }
.lbn-podium-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: white; font-weight: bold;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px;
    letter-spacing: 0.5px;
}
.lbn-podium-score {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem; color: #e94560; font-weight: bold;
}

/* Player rows */
.lbn-rows { display: flex; flex-direction: column; gap: 6px; }
.lbn-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
}
.lbn-row:hover {
    background: rgba(233, 69, 96, 0.08);
    border-color: rgba(233, 69, 96, 0.2);
    transform: translateX(3px);
}
.lbn-medal { font-size: 1rem; min-width: 28px; text-align: center; }
.lbn-rank {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem; color: rgba(255,255,255,0.35);
    min-width: 28px; text-align: center;
}
.lbn-row-info { flex: 1; min-width: 0; }
.lbn-row-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem; color: white; display: block;
}
.lbn-row-meta {
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem; color: rgba(255,255,255,0.3);
    display: block; margin-top: 2px;
}
.lbn-row-score {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem; color: #e94560; font-weight: bold;
}

/* Best player highlight */
.lbn-best {
    margin-top: 12px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: #ffd700;
    display: flex; align-items: center; gap: 6px;
}
.lbn-best:hover { border-color: #ffd700; box-shadow: 0 3px 12px rgba(255,215,0,0.2); }
.lbn-best i { color: #ffd700; }

/* Empty state */
.lbn-empty {
    text-align: center;
    padding: 50px 20px;
    color: rgba(255,255,255,0.3);
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px dashed rgba(233, 69, 96, 0.3);
}
.lbn-empty i { font-size: 2rem; color: #e94560; margin-bottom: 12px; display: block; }
.lbn-empty span {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem; display: block;
}
.lbn-empty-sub {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.2); display: block; margin-top: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .lbn-stats-row { flex-direction: column; }
    .lbn-podium { flex-wrap: wrap; }
    .lbn-toolbar { justify-content: center; }
}

/* ============================================
   ИСПРАВЛЕНИЯ ХАРДКОДИРОВАННЫХ ШИРИН
   ============================================ */
.completion-single {
    max-width: 95vw;
}

.reveal-pokemon-container img {
    width: 360px;
    height: 360px;
    max-width: 90vw;
    max-height: 90vw;
    object-fit: contain;
}

/* ============================================
   ПЛАНШЕТЫ (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .menu-header {
        padding: 30px 20px;
        border-radius: 40px;
    }

    .menu-header h1 {
        font-size: 1.8rem;
    }

    .tab-btn {
        padding: 10px 25px;
        font-size: 0.8rem;
    }

    .tab-content {
        padding: 20px;
    }

    .pres-card {
        padding: 30px;
        gap: 30px;
    }

    .pres-image-area {
        min-width: 300px;
    }

    .pres-pokemon-name {
        font-size: 2.5rem;
    }

    .pres-description {
        font-size: 1.1rem;
    }

    .filter-buttons {
        flex-wrap: wrap;
    }

    .help-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
        flex: 0 0 35% !important;
        max-width: 35% !important;
        min-width: 220px !important;
    }

    .completion-single {
        width: 550px !important;
    }

    .dn-editor {
        min-width: 280px;
    }

    .editor-panel {
        min-width: 280px !important;
    }

    .custom-notification {
        max-width: 300px;
        bottom: 20px;
        right: 20px;
    }
}

/* ============================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    body {
        padding: 6px;
        font-size: 14px;
    }

    .menu-header {
        padding: 20px 12px;
        margin-bottom: 30px;
        border-radius: 30px;
    }

    .menu-header h1 {
        font-size: 1.1rem;
    }

    .tab-btn {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    .tab-content {
        padding: 12px;
    }

    /* Фильтры */
    .filter-section {
        padding: 8px;
        margin-bottom: 12px;
    }

    .filter-buttons {
        gap: 6px;
    }

    .filter-toggle {
        padding: 5px 10px;
        font-size: 0.55rem;
    }

    .filter-gen-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .filter-types-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Модальные окна */
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 15px !important;
    }

    .modal-large {
        max-height: 85vh;
    }

    .modal-two-columns {
        flex-direction: column !important;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .modal-filters {
        max-height: 28vh;
        flex: none;
        max-width: 100%;
        overflow-y: auto;
        padding: 10px;
    }

    .modal-filters .filter-section {
        margin-bottom: 8px;
        padding: 8px;
    }

    .modal-filters .filter-title {
        margin-bottom: 6px;
        font-size: 0.6rem;
    }

    .filter-type-icon {
        width: 18px;
        height: 18px;
        object-fit: contain;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
        border-radius: 3px;
        vertical-align: middle;
        margin-right: 4px;
    }

    .filter-tags {
        gap: 6px;
    }

    .filter-tag {
        padding: 4px 8px;
    }

    .modal-results {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 10px;
    }

    .modal-results .filter-section {
        margin-bottom: 4px;
        padding: 6px 8px;
    }

    .modal-results .filter-title {
        margin-bottom: 2px;
    }

    .pokemon-list-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .completion-single {
        width: 95vw !important;
        padding: 15px !important;
        max-height: 80vh;
    }

    .completion-trophy {
        font-size: 2rem;
    }

    .exit-confirm-modal,
    .clear-random-modal,
    .mode-setup-modal {
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* Презентация */
    .pres-card {
        padding: 15px;
        gap: 15px;
        border-radius: 16px;
    }

    .pres-image-area {
        min-width: auto !important;
    }

    .pres-pokemon-name {
        font-size: 1.2rem;
    }

    .pres-description {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .reveal-btn {
        padding: 8px 16px;
        font-size: 0.7rem;
    }

    .pres-nav {
        gap: 10px;
    }

    .pres-nav-btn {
        padding: 6px 14px;
        font-size: 0.65rem;
    }

    /* Fullscreen presentation */
    .fullscreen-presentation .pres-card {
        padding: 12px;
        gap: 12px;
    }

    .fullscreen-presentation .pres-pokemon-name {
        font-size: 1.1rem;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-content {
        min-width: 0 !important;
        flex-direction: column !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card-container {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        gap: 8px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-info-area {
        text-align: center !important;
        order: 1 !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-image-area {
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-image-area img {
        max-height: 15vh !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-pokemon-name {
        text-align: center !important;
        font-size: 1rem !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-description {
        font-size: 0.5rem !important;
        line-height: 1.3 !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        display: block !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
        flex: 1 1 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 16px !important;
        padding: 12px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-section {
        overflow: visible !important;
        flex: none !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-section.section-active {
        flex: none !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar #singleMainContent,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar #singleExtraContent {
        flex: none !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-types-grid,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-grid {
        flex: none !important;
        min-height: auto !important;
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-type-btn,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-btn {
        padding: 6px 2px !important;
        gap: 3px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-type-btn img,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-btn img {
        width: 32px !important;
        height: 32px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-type-btn span,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-btn span {
        font-size: 0.4rem !important;
    }

    /* Side-by-side: stack on mobile */
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card {
        flex-direction: column !important;
    }

    /* Reveal типов */
    .type-reveal-overlay .reveal-title {
        font-size: 1.2rem !important;
        margin-bottom: 40px !important;
    }

    .type-reveal-overlay .reveal-title.shrink {
        margin-bottom: 10px !important;
    }

    .type-reveal-overlay .reveal-types-row {
        transform: scale(1) !important;
        gap: 15px !important;
    }

    .type-reveal-overlay .reveal-types-row.shrink {
        transform: scale(0.6) !important;
    }

    .type-reveal-overlay .reveal-type-item {
        padding: 12px 18px !important;
        gap: 8px !important;
    }

    .type-reveal-overlay .reveal-type-item img {
        width: 50px !important;
        height: 50px !important;
    }

    .type-reveal-overlay .reveal-type-item span {
        font-size: 0.7rem !important;
    }

    .reveal-pokemon-name {
        font-size: 1rem;
    }

    .reveal-next-btn {
        font-size: 0.9rem;
        padding: 10px 24px;
    }

    /* Типы */
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #devMode .type-icons-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #devMode .type-icon-item {
        width: 55px !important;
    }

    #devMode .type-icon-item img {
        width: 30px !important;
        height: 30px !important;
    }

    /* Dev mode */
    .editor-panel {
        min-width: 0 !important;
    }

    .slides-list-panel {
        min-width: 0 !important;
    }

    .dn-editor {
        min-width: 0 !important;
    }

    .dn-list {
        min-width: 0 !important;
    }

    .dn-upload {
        width: 140px !important;
        min-height: 140px !important;
    }

    .dn-card {
        padding: 10px !important;
    }

    .dn-type-item {
        width: 45px !important;
    }

    .dn-hero-stats {
        gap: 8px !important;
    }

    /* Games grid */
    .games-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .game-card {
        padding: 12px !important;
    }

    /* Help tab */
    .help-cards {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .help-card {
        padding: 20px 14px 18px !important;
    }

    .help-form {
        max-width: 100% !important;
        padding: 0 8px;
    }

    /* Уведомления */
    .custom-notification {
        left: 10px;
        right: 10px;
        bottom: 15px;
        max-width: none;
        font-size: 0.7rem;
        padding: 12px 16px;
    }

    /* Database tab */
    .db-header {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .db-search-row {
        flex-direction: column !important;
    }

    .db-cards {
        grid-template-columns: 1fr !important;
    }
    .db-pill-name {
        display: none;
    }
    .db-type-pills .db-pill {
        padding: 4px;
        aspect-ratio: 1;
    }
    .db-type-pills {
        grid-template-columns: repeat(9, 1fr);
    }

    .db-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .db-table {
        min-width: 600px;
    }

    /* Leaderboard */
    .lb-podium {
        gap: 8px !important;
    }

    .lb-podium-item {
        padding: 12px 8px !important;
    }

    .lb-podium-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .lb-scroll-row {
        gap: 8px !important;
    }
    .lb-scroll-card {
        flex: 0 0 100px !important;
        padding: 10px 6px !important;
    }

    .lb-stats-row {
        flex-direction: column !important;
    }

    .lbn-stats-row {
        flex-direction: column !important;
    }

    .lbn-podium {
        gap: 8px !important;
    }

    /* Speed timer */
    .speed-timer-value {
        font-size: 0.75rem !important;
        padding: 3px 10px !important;
    }

    /* Music manager */
    .bg-music-manager {
        flex-direction: column;
    }

    .music-item {
        flex-wrap: wrap;
    }

    /* Game selector */
    .game-selector {
        padding: 8px;
        gap: 6px;
    }

    .game-selector select {
        font-size: 0.65rem;
        padding: 6px 8px;
    }
}

/* ===== Custom Number Input +/- ===== */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

.num-input-group {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(233, 69, 96, 0.4);
    background: rgba(15, 52, 96, 0.6);
}

.num-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 32px;
    background: rgba(233, 69, 96, 0.25);
    border: none;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
    flex-shrink: 0;
}

.num-btn:hover {
    background: rgba(233, 69, 96, 0.5);
}

.num-btn:active {
    background: rgba(233, 69, 96, 0.7);
    transform: scale(0.92);
}

.num-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.num-input-group input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    -webkit-appearance: textfield;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(15, 52, 96, 0.6);
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    text-align: center;
    outline: none;
    width: 50px;
    height: 32px;
    padding: 0 4px;
}

.num-input-group input[type="number"]::-webkit-inner-spin-button,
.num-input-group input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.num-input-group input[type="number"]:focus {
    background: rgba(20, 60, 110, 0.8);
}

/* Stat inputs variant */
.num-input-group.help-stat-num input[type="number"] {
    width: 40px;
    font-size: 0.6rem;
    background: rgba(10, 30, 60, 0.5);
}

.num-input-group.help-stat-num .num-btn {
    width: 24px;
    height: 26px;
    font-size: 0.7rem;
    background: rgba(233, 69, 96, 0.15);
}

/* Модальное окно ввода (prompt) */
.prompt-modal {
    display: none;
    position: fixed;
    z-index: 20001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.prompt-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 400px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 50px rgba(233,69,96,0.4);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.prompt-modal-content h3 {
    color: #e94560;
    margin-bottom: 15px;
    font-size: 1rem;
    letter-spacing: 1px;
}

.prompt-modal-content input {
    width: 100%;
    padding: 10px 15px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    margin-bottom: 5px;
    box-sizing: border-box;
}

.prompt-modal-content input:focus {
    border-color: #ff6b81;
    box-shadow: 0 0 12px rgba(233,69,96,0.3);
}

.prompt-modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.prompt-modal-buttons button {
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.prompt-modal-buttons button:first-child {
    background: #2ecc71;
    color: white;
}

.prompt-modal-buttons button:first-child:hover {
    background: #27ae60;
    transform: scale(1.05);
}

.prompt-modal-buttons button:last-child {
    background: #2c3e50;
    color: white;
}

.prompt-modal-buttons button:last-child:hover {
    background: #1a252f;
    transform: scale(1.05);
}

/* Подрежим "Усложняющийся" */
.progressive-mode-toggle {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(233,69,96,0.2);
}

.progressive-toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.progressive-toggle-label input[type="checkbox"] {
    display: none;
}

.progressive-toggle-slider {
    width: 44px;
    height: 24px;
    background: #2c3e50;
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
}

.progressive-toggle-slider::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
}

.progressive-toggle-label input:checked + .progressive-toggle-slider {
    background: #2ecc71;
}

.progressive-toggle-label input:checked + .progressive-toggle-slider::after {
    transform: translateX(20px);
}

.progressive-toggle-text {
    display: flex;
    flex-direction: column;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: white;
    line-height: 1.4;
}

.progressive-toggle-text i {
    color: #2ecc71;
    margin-right: 4px;
}

.progressive-toggle-hint {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
}

.progressive-guessed-count {
    margin-top: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 8px;
}

.progressive-guessed-count strong {
    color: #2ecc71;
}

.progressive-reset-btn {
    background: rgba(231,76,60,0.2);
    border: 1px solid rgba(231,76,60,0.3);
    color: #e74c3c;
    padding: 3px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    transition: all 0.2s;
}

.progressive-reset-btn:hover {
    background: rgba(231,76,60,0.4);
}

.progressive-view-btn {
    background: rgba(52,152,219,0.2);
    border: 1px solid rgba(52,152,219,0.3);
    color: #3498db;
    padding: 3px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    transition: all 0.2s;
}

.progressive-view-btn:hover {
    background: rgba(52,152,219,0.4);
}

.guessed-pokemon-modal {
    max-width: 90vw !important;
    width: 700px !important;
}

.guessed-pokemon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0;
    margin: 15px 0;
}

.guessed-pokemon-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    transition: all 0.2s;
}

.guessed-pokemon-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(233,69,96,0.3);
    transform: translateY(-2px);
}

.guessed-pokemon-card img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.guessed-pokemon-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
    margin-top: 6px;
    font-weight: bold;
}

.guessed-pokemon-types {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.guessed-pokemon-types .type-chip {
    font-size: 0.4rem;
    padding: 2px 6px;
    border-radius: 6px;
}

.guessed-pokemon-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0;
    margin: 15px 0;
}

.guessed-round-group {
    margin-bottom: 15px;
}

.guessed-round-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    padding: 5px 10px;
    border-bottom: 1px solid rgba(233,69,96,0.2);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================
   Лекция: стили
   ============================================ */

.lecture-container {
    max-width: 900px;
    margin: 0 auto;
}

.lecture-hero {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(233,69,96,0.15), rgba(15,52,96,0.3));
    border-radius: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(233,69,96,0.3);
}

.lecture-hero-icon {
    font-size: 3rem;
    color: #e94560;
    margin-bottom: 15px;
}

.lecture-hero h2 {
    font-size: 1.3rem;
    color: white;
    margin-bottom: 10px;
}

.lecture-hero p {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
}

.lecture-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.lecture-meta span {
    color: rgba(255,255,255,0.6);
    font-size: 0.7rem;
    background: rgba(0,0,0,0.3);
    padding: 5px 12px;
    border-radius: 20px;
}

.lecture-meta i {
    color: #e94560;
    margin-right: 5px;
}

/* Навигация по блокам */
.lecture-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    justify-content: center;
}

.lecture-nav-btn {
    background: rgba(15,52,96,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s;
}

.lecture-nav-btn:hover {
    border-color: #e94560;
    transform: translateY(-2px);
}

.lecture-nav-btn.active {
    background: #e94560;
    border-color: #fff;
}

/* Блоки лекции */
.lecture-block {
    background: rgba(15,52,96,0.4);
    border-radius: 25px;
    margin-bottom: 20px;
    border: 1px solid rgba(233,69,96,0.2);
    overflow: hidden;
}

.lecture-block-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 25px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(233,69,96,0.2);
}

.lecture-block-num {
    width: 40px;
    height: 40px;
    background: #e94560;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    flex-shrink: 0;
}

.lecture-block-header h3 {
    font-size: 0.9rem;
    color: white;
    margin: 0;
}

.lecture-time {
    color: rgba(255,255,255,0.5);
    font-size: 0.65rem;
}

.lecture-time i {
    color: #e94560;
    margin-right: 4px;
}

.lecture-block-content {
    padding: 20px 25px;
}

/* Слайды */
.lecture-slide {
    background: rgba(0,0,0,0.2);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.05);
}

.lecture-slide:last-child {
    margin-bottom: 0;
}

.lecture-slide-title {
    font-size: 0.8rem;
    color: #e94560;
    margin-bottom: 12px;
    font-weight: bold;
}

.lecture-slide-title i {
    margin-right: 6px;
}

.lecture-slide p {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.lecture-slide p:last-child {
    margin-bottom: 0;
}

.lecture-slide ul {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    line-height: 1.6;
    margin: 10px 0;
    padding-left: 20px;
}

.lecture-slide li {
    margin-bottom: 5px;
}

/* Таблицы */
.lecture-table-wrap {
    overflow-x: auto;
    margin: 12px 0;
}

.lecture-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}

.lecture-table th {
    background: rgba(233,69,96,0.2);
    color: white;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid rgba(233,69,96,0.4);
}

.lecture-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}

.lecture-table tbody tr:hover {
    background: rgba(233,69,96,0.1);
}

/* Бейджи типов */
.type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

.type-fire { background: linear-gradient(135deg, #F08030, #DD4A1C); }
.type-water { background: linear-gradient(135deg, #6890F0, #4070C8); }
.type-grass { background: linear-gradient(135deg, #78C850, #50A030); }
.type-electric { background: linear-gradient(135deg, #F8D030, #E0A000); }
.type-ice { background: linear-gradient(135deg, #98D8D8, #70B8B8); }
.type-fighting { background: linear-gradient(135deg, #C03028, #982820); }
.type-poison { background: linear-gradient(135deg, #A040A0, #803080); }
.type-ground { background: linear-gradient(135deg, #E0C068, #C0A050); }
.type-flying { background: linear-gradient(135deg, #A890F0, #8870D0); }
.type-psychic { background: linear-gradient(135deg, #F85888, #D83868); }
.type-bug { background: linear-gradient(135deg, #A8B820, #889818); }
.type-rock { background: linear-gradient(135deg, #B8A038, #988028); }
.type-ghost { background: linear-gradient(135deg, #705898, #584078); }
.type-dragon { background: linear-gradient(135deg, #7038F8, #5028C8); }
.type-dark { background: linear-gradient(135deg, #705848, #584038); }
.type-steel { background: linear-gradient(135deg, #B8B8D0, #9898B0); }
.type-fairy { background: linear-gradient(135deg, #EE99AC, #CC7788); }

/* Цитаты */
.lecture-quote {
    background: linear-gradient(135deg, rgba(233,69,96,0.15), rgba(233,69,96,0.05));
    border-left: 4px solid #e94560;
    padding: 15px 20px;
    border-radius: 0 12px 12px 0;
    margin: 15px 0;
    color: rgba(255,255,255,0.9);
    font-size: 0.75rem;
    line-height: 1.6;
    font-style: italic;
}

.lecture-quote-main {
    background: linear-gradient(135deg, rgba(233,69,96,0.25), rgba(233,69,96,0.1));
    border-left-width: 6px;
    font-size: 0.85rem;
    padding: 20px 25px;
}

/* Карточки */
.lecture-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.lecture-card {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
}

.lecture-card-title {
    color: #e94560;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.lecture-card p {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

.lecture-card-info {
    background: rgba(15,52,96,0.4);
}

.lecture-card-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lecture-card-info li {
    padding: 4px 0;
    color: rgba(255,255,255,0.7);
    font-size: 0.7rem;
}

.lecture-card-info li::before {
    content: '•';
    color: #e94560;
    margin-right: 8px;
}

/* Интерактив */
.lecture-interactive {
    background: linear-gradient(135deg, rgba(15,52,96,0.5), rgba(0,0,0,0.3));
    border: 2px solid rgba(233,69,96,0.4);
    border-radius: 20px;
    overflow: hidden;
    margin: 15px 0;
}

.lecture-interactive-header {
    background: rgba(233,69,96,0.2);
    padding: 12px 20px;
    color: #e94560;
    font-size: 0.8rem;
    font-weight: bold;
    border-bottom: 1px solid rgba(233,69,96,0.3);
}

.lecture-interactive-header i {
    margin-right: 8px;
}

.lecture-interactive-content {
    padding: 20px;
}

.lecture-interactive-content p {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    line-height: 1.6;
}

.lecture-interactive-content ul {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    margin: 10px 0;
    padding-left: 20px;
}

.lecture-interactive-answer {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
    border: 1px solid rgba(76,175,80,0.3);
}

.lecture-interactive-answer-title {
    color: #4CAF50;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.lecture-interactive-answer-title i {
    margin-right: 6px;
}

.lecture-interactive-answer p {
    color: rgba(255,255,255,0.8);
}

.lecture-interactive-answer ul {
    color: rgba(255,255,255,0.8);
}

.lecture-interactive-small {
    border-color: rgba(255,193,7,0.4);
}

.lecture-interactive-small .lecture-interactive-header {
    background: rgba(255,193,7,0.15);
    color: #FFC107;
    border-bottom-color: rgba(255,193,7,0.3);
}

/* Да/Нет бейджи */
.lecture-no {
    background: rgba(76,175,80,0.2);
    color: #4CAF50;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.65rem;
}

.lecture-yes {
    background: rgba(255,193,7,0.2);
    color: #FFC107;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.65rem;
}

/* Финальный слайд */
.lecture-slide-final {
    text-align: center;
    background: linear-gradient(135deg, rgba(233,69,96,0.1), rgba(15,52,96,0.3));
    border: 1px solid rgba(233,69,96,0.3);
}

/* Дополнительные материалы */
.lecture-extras {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(233,69,96,0.2);
}

.lecture-extras h3 {
    color: white;
    font-size: 0.9rem;
    margin-bottom: 15px;
    text-align: center;
}

.lecture-extras h3 i {
    color: #e94560;
    margin-right: 8px;
}

/* Скрытие блоков при фильтрации */
.lecture-block.hidden {
    display: none;
}

/* ------------------- Помощь с хостингом (золотая тема) ------------------- */
.hosting-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 25px;
    background: rgba(30, 25, 10, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 200, 50, 0.2);
    border-radius: 20px;
    margin-bottom: 24px;
}

.hosting-hero-icon {
    font-size: 1.2rem;
    color: #f5c842;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(245, 200, 66, 0.4));
}

.hosting-hero h2 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    color: #f5c842;
    margin: 0;
}

.hosting-hero p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
    margin: 0 0 0 auto;
    white-space: nowrap;
}

.hosting-donate-card {
    background: linear-gradient(135deg, rgba(30, 25, 10, 0.7), rgba(20, 18, 8, 0.8));
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 200, 50, 0.5);
    border-radius: 20px;
    padding: 35px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(245, 200, 66, 0.1);
}

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

.hosting-donate-shine {
    display: none;
}

.hosting-donate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #f5c842, transparent);
    opacity: 0.6;
}

.hosting-donate-icon {
    font-size: 2.5rem;
    color: #f5c842;
    margin-bottom: 14px;
    filter: drop-shadow(0 0 15px rgba(245, 200, 66, 0.4));
    animation: cardFloat 3s ease-in-out infinite;
}

.hosting-donate-card h3 {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    color: #f5c842;
    margin-bottom: 10px;
}

.hosting-donate-card p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

.hosting-donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: linear-gradient(135deg, #f5c842, #d4a520);
    border: none;
    border-radius: 50px;
    color: #1a1a2e;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(245, 200, 66, 0.3);
}

.hosting-donate-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 30px rgba(245, 200, 66, 0.5);
    color: #1a1a2e;
}

.hosting-donate-btn:active {
    transform: translateY(0) scale(0.98);
}

.hosting-donate-note {
    margin-top: 14px;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.hosting-donate-note i {
    color: rgba(255, 200, 50, 0.4);
}

/* Адаптив для хостинга */
@media (max-width: 768px) {
    .hosting-hero {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .hosting-hero p {
        margin: 0;
    }
    .hosting-donate-card {
        padding: 25px 18px;
    }
    .hosting-donate-btn {
        padding: 12px 28px;
        font-size: 0.7rem;
    }
}

/* Адаптив */
@media (max-width: 768px) {
    .lecture-hero h2 {
        font-size: 1rem;
    }
    
    .lecture-meta {
        flex-direction: column;
        align-items: center;
    }
    
    .lecture-nav {
        gap: 6px;
    }
    
    .lecture-nav-btn {
        padding: 6px 12px;
        font-size: 0.6rem;
    }
    
    .lecture-block-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .lecture-cards-row {
        grid-template-columns: 1fr;
    }
    
    .lecture-table {
        font-size: 0.6rem;
    }
    
    .lecture-table th,
    .lecture-table td {
        padding: 6px 8px;
    }
}

/* ------------------- Авторизация ------------------- */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 40%, rgba(233, 69, 96, 0.08) 0%, transparent 50%),
                linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    z-index: 50000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInUp 0.6s ease;
}

.auth-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(15, 52, 96, 0.95));
    border: 2px solid #e94560;
    border-radius: 30px;
    padding: 24px 35px 30px 35px;
    width: 420px;
    max-width: 92%;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(233, 69, 96, 0.2);
    animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.auth-card-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 12px;
}

.auth-lang-switch {
    display: inline-flex;
    background: rgba(10, 10, 26, 0.85);
    border: 1.5px solid rgba(233, 69, 96, 0.45);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
    transition: all 0.2s ease;
}

.auth-lang-switch:hover {
    border-color: rgba(233, 69, 96, 0.85);
    box-shadow: 0 3px 15px rgba(233, 69, 96, 0.3);
}

.auth-lang-switch .lang-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: none;
    padding: 6px 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.auth-lang-switch .lang-btn:hover {
    color: #fff;
    background: rgba(233, 69, 96, 0.2);
}

.auth-lang-switch .lang-btn.active {
    background: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

.auth-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -6px;
    margin-bottom: 12px;
}

.auth-forgot-link {
    color: #e94560;
    font-size: 0.62rem;
    text-decoration: none;
    transition: opacity 0.2s;
    font-family: 'Minecraft', monospace;
}

.auth-forgot-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.auth-subtitle {
    color: #aaa;
    font-size: 0.65rem;
    margin-bottom: 18px;
    line-height: 1.4;
}

.auth-back-link {
    margin-top: 16px;
    color: #aaa;
    font-size: 0.65rem;
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
    text-align: center;
}

.auth-back-link:hover {
    color: #e94560;
}

.auth-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    background: rgba(20, 20, 40, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-tab:hover {
    border-color: rgba(233, 69, 96, 0.5);
    color: white;
}

.auth-tab.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: #e94560;
    color: #e94560;
}

.auth-form {
    text-align: center;
}

.auth-icon {
    font-size: 2.5rem;
    color: #e94560;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 15px rgba(233, 69, 96, 0.4));
}

.auth-form h2 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    color: white;
    margin-bottom: 20px;
}

.auth-field {
    text-align: left;
    margin-bottom: 14px;
}

.auth-field label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
}

.auth-field label i {
    margin-right: 6px;
    color: #e94560;
    width: 14px;
    text-align: center;
}

.auth-field input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(10, 10, 30, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
}

.auth-field input:focus {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.2);
}

.auth-field input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.auth-error {
    color: #e74c3c;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    min-height: 18px;
    margin-bottom: 10px;
}

.auth-submit-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    border-radius: 14px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(233, 69, 96, 0.4);
}

.auth-submit-btn:active {
    transform: translateY(0);
}

.auth-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.auth-skip {
    text-align: center;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: color 0.2s;
}

.auth-skip:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* Панель пользователя */
.user-bar {
    position: relative;
    z-index: 10000;
    max-width: 1200px;
    margin: 0 auto 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
}

.user-bar-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.user-bar-info i {
    color: #e94560;
    font-size: 1.1rem;
}

.user-avatar-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #e94560;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
}
.user-avatar-wrap:hover {
    border-color: #f39c12;
    box-shadow: 0 0 10px rgba(243,156,18,0.4);
}
.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-name-image {
    height: 40px;
    width: 40px;
    object-fit: contain;
    margin-left: 6px;
    vertical-align: middle;
    border-radius: 4px;
    flex-shrink: 0;
}

.admin-badge {
    background: #e94560;
    color: #fff;
    font-size: 0.55rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    padding: 0 4px;
    cursor: pointer;
    animation: badgePulse 2s infinite;
    flex-shrink: 0;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.notif-badge {
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    transition: all 0.2s;
}

.notif-badge:hover {
    background: transparent;
    opacity: 0.8;
}

.notif-badge:hover i {
    color: #ff6b81;
}

.notif-badge.has-unread {
    background: transparent;
    border: none;
    animation: badgePulse 2s infinite;
}

.notif-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e94560;
    color: #fff;
    font-size: 0.45rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    min-width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    border-radius: 50%;
    padding: 0 2px;
}

.notif-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: rgba(15, 20, 40, 0.97);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 16px;
    padding: 12px;
    min-width: 280px;
    max-width: 350px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 9999;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.notif-dropdown-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #e94560;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 8px;
}

.notif-dropdown-title i {
    margin-right: 6px;
}

.notif-item {
    padding: 8px 10px;
    border-radius: 10px;
    margin-bottom: 6px;
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.2);
    cursor: default;
}

.notif-item.unread {
    background: rgba(52, 152, 219, 0.15);
    border-color: rgba(52, 152, 219, 0.4);
}

.notif-item-header {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notif-item-header span {
    color: #3498db;
}

.notif-item-text {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
}

.notif-empty {
    text-align: center;
    color: rgba(255,255,255,0.25);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 16px 0;
}

.notif-item-user-reply {
    background: rgba(233, 69, 96, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.6);
}

.notif-item-user-reply i {
    color: #e94560;
    margin-right: 4px;
}

.notif-item-user-reply b {
    color: #e94560;
}

.notif-reply-box {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.notif-reply-input {
    flex: 1;
    background: rgba(10, 10, 30, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    outline: none;
}

.notif-reply-input:focus {
    border-color: rgba(233, 69, 96, 0.5);
}

.notif-reply-send {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 8px;
    padding: 4px 10px;
    color: #e94560;
    cursor: pointer;
    transition: all 0.2s;
}

.notif-reply-send:hover {
    background: rgba(233, 69, 96, 0.4);
    color: white;
}

.user-bar-logout {
    background: rgba(231, 76, 60, 0.2);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 20px;
    color: #e74c3c;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.user-bar-logout:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
}

.guest-bar-login {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.guest-bar-login:hover {
    background: rgba(46, 204, 113, 0.3);
    border-color: #2ecc71;
}

/* ------------------- Админ-панель ------------------- */
.admin-controls {
    margin-bottom: 20px;
}

.admin-filter-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.admin-filter-btn {
    background: rgba(20, 20, 40, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 10px;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-filter-btn:hover {
    border-color: rgba(233, 69, 96, 0.5);
    color: white;
}

.admin-filter-btn.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: #e94560;
    color: #e94560;
}

.admin-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

.admin-stat b {
    margin-right: 3px;
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-item {
    background: rgba(15, 52, 96, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.15);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color 0.2s;
}

.admin-item:hover {
    border-color: rgba(233, 69, 96, 0.35);
}

.admin-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.admin-item-type {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
}

.admin-item-user {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
}

.admin-item-user i { margin-right: 4px; }

.admin-item-status {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    margin-left: auto;
}

.admin-item-date {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.25);
}

.admin-item-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin-bottom: 10px;
}

.admin-item-details b {
    color: white;
}

.admin-item-actions {
    display: flex;
    gap: 8px;
}

.admin-item-actions button {
    background: rgba(20, 20, 40, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-item-actions button:hover {
    border-color: rgba(233, 69, 96, 0.5);
    color: white;
    background: rgba(233, 69, 96, 0.15);
}

.admin-delete-btn:hover {
    border-color: #e74c3c !important;
    color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.15) !important;
}

.admin-item-reply {
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
    font-family: 'Minecraft', monospace;
}

.admin-item-reply i {
    color: #3498db;
    margin-right: 4px;
}

.admin-item-user-reply {
    background: rgba(233, 69, 96, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
    font-family: 'Minecraft', monospace;
}

.admin-item-user-reply i {
    color: #e94560;
    margin-right: 4px;
}

.admin-item-user-reply b {
    color: #e94560;
}

.admin-mark-read-btn {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: 6px;
    padding: 2px 8px;
    color: #2ecc71;
    cursor: pointer;
    font-size: 0.55rem;
    margin-left: 8px;
    transition: all 0.2s;
    vertical-align: middle;
}

.admin-mark-read-btn:hover {
    background: rgba(46, 204, 113, 0.3);
    color: white;
}

.admin-sub-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.admin-sub-tab {
    background: rgba(15, 52, 96, 0.6);
    border: 2px solid rgba(233, 69, 96, 0.4);
    border-radius: 50px;
    color: rgba(255,255,255,0.7);
    padding: 8px 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-sub-tab:hover {
    border-color: rgba(233, 69, 96, 0.4);
    color: rgba(255,255,255,0.8);
}

.admin-sub-tab.active {
    background: rgba(233, 69, 96, 0.2);
    border-color: #e94560;
    color: #e94560;
}

.admin-item-reply-box {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.admin-reply-input {
    flex: 1;
    background: rgba(10, 10, 30, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 8px;
    padding: 6px 10px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
}

.admin-reply-input:focus {
    border-color: rgba(233, 69, 96, 0.6);
}

.admin-reply-send {
    background: rgba(233, 69, 96, 0.25);
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 8px;
    padding: 6px 12px;
    color: #e94560;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-reply-send:hover {
    background: rgba(233, 69, 96, 0.4);
    color: white;
}

@media (max-width: 480px) {
    .auth-card { padding: 22px 18px; }
    .auth-tab { font-size: 0.6rem; padding: 8px; }
    .admin-filter-btns { gap: 5px; }
    .admin-item-header { gap: 6px; }
}

/* ============================================
   ПОЛНАЯ АДАПТИВНОСТЬ ДЛЯ ТЕЛЕФОНОВ
   ============================================ */

/* --- Табы: перенос на мобильных --- */
.tabs {
    gap: 10px;
    justify-content: center;
}

.tab-btn {
    white-space: nowrap;
    flex-shrink: 1;
}

/* --- Мобильный: <=768px --- */
@media (max-width: 768px) {
    body { padding: 6px; }

    .main-menu { max-width: 100%; }

    .menu-header {
        padding: 20px 15px;
        margin-bottom: 20px;
        border-radius: 30px !important;
    }
    .menu-header h1 {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }
    .menu-header p {
        font-size: 0.6rem;
        line-height: 1.4;
    }

    .tab-btn {
        padding: 8px 16px;
        font-size: 0.65rem;
    }

    .tab-content {
        padding: 15px;
        border-radius: 20px !important;
    }

    /* Переключатель режимов — перенос */
    .mode-switcher,
    [style*="display: flex"][style*="justify-content: space-between"][style*="border-radius: 20px"] {
        flex-direction: column !important;
        align-items: stretch !important;
        border-radius: 20px !important;
        padding: 10px !important;
        gap: 10px !important;
    }
    [style*="display: flex"][style*="justify-content: space-between"][style*="border-radius: 20px"] > div {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    /* Модалки */
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 15px !important;
        border-radius: 20px !important;
    }
    .modal-two-columns {
        flex-direction: column !important;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    .modal-filters {
        max-height: 28vh;
        flex: none;
        max-width: 100%;
        overflow-y: auto;
        padding: 8px;
    }
    .modal-filters .filter-section {
        margin-bottom: 6px;
        padding: 6px;
    }
    .modal-filters .filter-title {
        margin-bottom: 4px;
        font-size: 0.55rem;
    }
    .filter-type-icon {
        width: 16px;
        height: 16px;
        margin-right: 3px;
    }
    .filter-tags {
        gap: 5px;
    }
    .filter-tag {
        padding: 3px 6px;
    }
    .modal-results {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 8px;
    }
    .modal-results .filter-section {
        margin-bottom: 3px;
        padding: 5px 6px;
    }
    .modal-results .filter-title {
        margin-bottom: 1px;
    }
    .modal-buttons {
        flex-direction: column;
        gap: 8px;
    }
    .modal-buttons button {
        width: 100%;
        padding: 12px;
    }

    .confirm-modal-content,
    .completion-modal-content,
    .exit-confirm-modal,
    .clear-random-modal,
    .mode-setup-modal {
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* Презентация */
    .pres-card {
        flex-direction: column !important;
        padding: 15px !important;
        gap: 15px !important;
    }
    .pres-image-area {
        min-width: auto !important;
        width: 100% !important;
    }
    .pres-pokemon-name {
        font-size: 1.3rem;
    }
    .pres-description {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    /* Карточки игр */
    .games-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .game-card {
        padding: 12px !important;
    }

    /* Фильтры */
    .filter-section {
        padding: 8px;
        margin-bottom: 10px;
    }
    .filter-buttons {
        gap: 6px;
    }
    .filter-toggle {
        padding: 5px 10px;
        font-size: 0.55rem;
    }
    .filter-gen-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .filter-types-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Список покемонов */
    .pokemon-list-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* Один игрок / Speed */
    .completion-single {
        width: 95vw !important;
        padding: 15px !important;
        max-height: 80vh;
    }
    .speed-timer-value {
        padding: 3px 10px !important;
        font-size: 0.75rem !important;
    }

    /* Типы */
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .reveal-type-card img {
        width: 80px;
        height: 80px;
    }
    .types-reveal-panel {
        gap: 30px;
    }

    /* Reveal покемон */
    .reveal-pokemon-container img {
        width: 180px;
        height: 180px;
    }
    .reveal-pokemon-name {
        font-size: 1rem;
    }

    /* Dev mode */
    .editor-panel,
    .slides-list-panel,
    .dn-editor,
    .dn-list {
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    .dev-main-grid {
        flex-direction: column !important;
    }
    .back-to-play-btn {
        width: 100%;
    }
    .admin-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .admin-header > div {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .game-selector {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .game-selector select {
        min-width: 0 !important;
        flex: 1 !important;
    }
    #uploadAreaDev {
        min-height: 150px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #tabDev .editor-panel > div:nth-child(2) {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    #tabDev .editor-panel > div:nth-child(2) > div {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    #typeIconsGridDev {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        flex-wrap: unset !important;
        padding: 5px !important;
    }
    #typeIconsGridDev .type-icon-item {
        width: auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        max-width: none !important;
        flex: none !important;
        justify-self: stretch !important;
        align-self: stretch !important;
    }
    #tabDev .action-buttons {
        flex-direction: column !important;
    }
    #tabDev .action-buttons button {
        width: 100%;
    }
    .dn-upload {
        width: 120px !important;
        min-height: 120px !important;
    }
    .dn-card {
        padding: 8px !important;
    }
    .dn-type-item {
        width: 40px !important;
    }
    #devMode .type-icons-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #devMode .type-icon-item {
        width: auto !important;
    }
    #devMode .type-icon-item img {
        width: 28px !important;
        height: 28px !important;
    }

    /* Помощь */
    .help-cards {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .help-card {
        padding: 15px 12px !important;
    }
    .help-form {
        max-width: 100% !important;
        padding: 0;
    }

    /* Leaderboard */
    .lbn-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .lbn-toolbar {
        flex-wrap: wrap;
        justify-content: center;
    }
    .lbn-tab {
        padding: 6px 12px;
        font-size: 0.6rem;
    }
    .lbn-stats-row {
        flex-direction: column !important;
    }
    .lbn-podium {
        gap: 8px !important;
        flex-wrap: wrap;
    }
    .lbn-podium-item {
        padding: 10px 6px !important;
        min-width: 90px;
    }
    .lbn-podium-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    .lbn-row {
        padding: 8px 10px;
        gap: 6px;
    }

    /* Database */
    .db-header {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .db-search-row {
        flex-direction: column !important;
    }
    .db-cards {
        grid-template-columns: 1fr !important;
    }
    .db-pill-name {
        display: none;
    }
    .db-type-pills .db-pill {
        padding: 3px;
        aspect-ratio: 1;
    }
    .db-type-pills {
        grid-template-columns: repeat(9, 1fr) !important;
    }
    .db-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* User bar */
    .user-bar {
        top: 8px;
        right: 8px;
        left: 8px;
        padding: 8px 12px;
    }
    .user-bar-info {
        font-size: 0.65rem;
    }

    /* Уведомления */
    .custom-notification {
        left: 8px;
        right: 8px;
        bottom: 10px;
        max-width: none;
        font-size: 0.7rem;
        padding: 10px 14px;
    }

    /* Lecture table */
    .lecture-table {
        font-size: 0.6rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .lecture-table th,
    .lecture-table td {
        padding: 5px 6px;
        white-space: nowrap;
    }

    /* Music manager */
    .bg-music-manager {
        flex-direction: column;
    }
    .music-item {
        flex-wrap: wrap;
    }

    /* Auth overlay */
    .auth-overlay {
        padding: 15px;
    }
    .auth-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        border-radius: 20px !important;
    }

    /* Game selector */
    .game-selector {
        padding: 8px;
        gap: 6px;
    }
    .game-selector select {
        font-size: 0.65rem;
        padding: 6px 8px;
    }
}

/* --- Маленькие телефоны: <=400px --- */
@media (max-width: 400px) {
    .menu-header h1 {
        font-size: 0.95rem;
    }
    .tab-btn {
        padding: 6px 10px;
        font-size: 0.58rem;
    }
    .pres-pokemon-name {
        font-size: 1.1rem;
    }
    .lbn-podium-item {
        min-width: 80px;
    }
    .reveal-pokemon-container img {
        width: 140px;
        height: 140px;
    }
}

/* ============================================
   СИСТЕМА ДРУЗЕЙ
   ============================================ */

.friends-badge,
.invites-badge {
    display: none;
    position: relative;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    transition: color 0.3s;
    z-index: 10000;
}
.friends-badge:hover,
.invites-badge:hover {
    color: #e94560;
}
.friends-badge.has-requests {
    color: #3498db;
}
.invites-badge.has-invites {
    color: #fff;
    background: #f39c12;
    border-radius: 50%;
    padding: 2px 5px;
}
.friends-badge .friends-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e94560;
    color: #fff;
    font-size: 0.5rem;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-family: 'Minecraft', monospace;
}
.invites-badge .invites-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e94560;
    color: #fff;
    font-size: 0.5rem;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-family: 'Minecraft', monospace;
}

/* Friends Dropdown */
.friends-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 340px;
    max-height: 450px;
    overflow-y: auto;
    background: #16213e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 12px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.friends-dropdown-title {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(233,69,96,0.3);
}
.friends-search-box {
    position: relative;
    margin-bottom: 10px;
}
.friends-search-box input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(15,52,96,0.5);
    border: 1px solid rgba(233,69,96,0.3);
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    box-sizing: border-box;
}
.friends-search-box input:focus {
    border-color: #e94560;
}
.friends-search-box input::placeholder {
    color: rgba(255,255,255,0.3);
}
.friends-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.3);
    border-radius: 8px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 10;
    display: none;
}
.friends-search-results.has-results {
    display: block;
}
.friends-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.8);
    cursor: default;
}
.friends-search-item:last-child {
    border-bottom: none;
}
.friends-search-item button {
    background: rgba(233,69,96,0.3);
    border: 1px solid #e94560;
    border-radius: 6px;
    color: #e94560;
    padding: 3px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.2s;
}
.friends-search-item button:hover {
    background: #e94560;
    color: #fff;
}
.friends-search-item button.friend-pending {
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.4);
    cursor: default;
}
.friends-section {
    margin-top: 8px;
}
.friends-section-title {
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.friends-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: background 0.2s;
}
.friends-item:hover {
    background: rgba(233,69,96,0.1);
}
.friends-item .online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}
.friends-item .online-dot.online {
    background: #2ecc71;
}
.friends-item-name {
    flex: 1;
    color: rgba(255,255,255,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.friends-item-actions {
    display: flex;
    gap: 4px;
}
.friends-item-actions button {
    background: none;
    border: 1px solid rgba(233,69,96,0.3);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    padding: 2px 6px;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
}
.friends-item-actions button:hover {
    border-color: #e94560;
    color: #e94560;
}
.friends-item-actions button.invite-btn:hover {
    border-color: #f39c12;
    color: #f39c12;
}
.friends-item-actions button.accept-btn {
    border-color: #2ecc71;
    color: #2ecc71;
}
.friends-item-actions button.accept-btn:hover {
    background: #2ecc71;
    color: #fff;
}
.friends-item-actions button.reject-btn {
    border-color: #e74c3c;
    color: #e74c3c;
}
.friends-item-actions button.reject-btn:hover {
    background: #e74c3c;
    color: #fff;
}
.friends-empty {
    text-align: center;
    color: rgba(255,255,255,0.25);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 12px;
}

/* Invites Dropdown */
.invites-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: #16213e;
    border: 2px solid #f39c12;
    border-radius: 12px;
    padding: 12px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.invites-dropdown-title {
    color: #f39c12;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(243,156,18,0.3);
}
.invites-list {
    margin-bottom: 8px;
}
.invites-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(15,52,96,0.3);
    border-radius: 8px;
    margin-bottom: 6px;
}
.invites-item-info {
    flex: 1;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.8);
}
.invites-item-info .mode-label {
    color: #f39c12;
    font-size: 0.55rem;
}
.invites-item-actions {
    display: flex;
    gap: 4px;
}
.invites-item-actions button {
    background: none;
    border: 1px solid rgba(243,156,18,0.3);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    padding: 3px 8px;
    font-size: 0.55rem;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
}
.invites-item-actions button.accept-btn {
    border-color: #2ecc71;
    color: #2ecc71;
}
.invites-item-actions button.accept-btn:hover {
    background: #2ecc71;
    color: #fff;
}
.invites-item-actions button.reject-btn {
    border-color: #e74c3c;
    color: #e74c3c;
}
.invites-item-actions button.reject-btn:hover {
    background: #e74c3c;
    color: #fff;
}

/* Invite Modal */
.invite-mode-btn {
    flex: 1;
    padding: 10px;
    background: rgba(15,52,96,0.3);
    border: 2px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}
.invite-mode-btn:hover {
    border-color: rgba(233,69,96,0.5);
    color: rgba(255,255,255,0.9);
}
.invite-mode-btn.active {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}
.invite-setting-btn {
    padding: 8px 16px;
    background: rgba(15,52,96,0.3);
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
}
.invite-setting-btn:hover {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.9);
}
.invite-setting-btn.active {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}
.invite-send-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #e94560, #c0392b);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s;
}
.invite-send-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(233,69,96,0.4);
}

/* Waiting dots animation */
.invite-wait-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.wait-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f39c12;
    animation: waitPulse 1.4s infinite ease-in-out both;
}
.wait-dot:nth-child(1) { animation-delay: -0.32s; }
.wait-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes waitPulse {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* ============================================
   МОБИЛЬНАЯ АДАПТАЦИЯ ИГРОВОГО ИНТЕРФЕЙСА
   ============================================ */

/* --- pres-header на мобильных --- */
@media (max-width: 768px) {
    .pres-header {
        padding: 10px 12px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .pres-header h3 {
        font-size: 0.65rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }
    .pres-zoom-controls {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 4px 8px !important;
        order: 3;
        width: 100%;
        justify-content: center;
    }
    .pres-zoom-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.65rem !important;
    }
    .pres-zoom-value {
        font-size: 0.6rem !important;
        min-width: 30px !important;
    }
    .pres-volume-controls {
        margin-left: 0 !important;
        padding-left: 8px !important;
        border-left: 1px solid rgba(233,69,96,0.3) !important;
    }
    .pres-volume-slider {
        width: 100px !important;
    }
    .pres-zoom-reset {
        padding: 0 22px !important;
        font-size: 0.6rem !important;
    }
    .close-pres-btn, #closePresBtn {
        padding: 6px 16px !important;
        font-size: 0.6rem !important;
        order: 2;
        flex-shrink: 0;
    }
    /* Карточка покемона */
    .pres-card {
        padding: 12px !important;
        gap: 12px !important;
        border-radius: 20px !important;
        width: 100% !important;
        animation: none !important;
    }
    /* Пульт участника - сетка типов */
    .types-game-section {
        overflow: visible !important;
    }
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .pres-image-area {
        min-width: auto !important;
        width: 100%;
    }
    .pres-image-area img {
        max-height: 35vh !important;
    }
    .pres-pokemon-name {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
        text-align: center;
    }
    .pres-description {
        font-size: 0.6rem !important;
        line-height: 1.3 !important;
        padding: 10px !important;
    }
    .reveal-btn {
        padding: 10px 20px !important;
        font-size: 0.75rem !important;
    }
    .pres-nav {
        gap: 10px !important;
        margin-top: 20px !important;
    }
    .pres-nav-btn {
        padding: 8px 16px !important;
        font-size: 0.7rem !important;
    }
    .pres-counter {
        padding: 0 16px !important;
        font-size: 0.7rem !important;
        line-height: 36px !important;
        height: 36px !important;
    }
    .pres-content {
        padding: 12px !important;
    }
}

/* --- Маленькие телефоны --- */
@media (max-width: 480px) {
    .pres-header {
        padding: 8px 10px !important;
    }
    .pres-header h3 {
        font-size: 0.55rem !important;
    }
    .pres-zoom-controls {
        gap: 3px !important;
        padding: 3px 6px !important;
    }
    .pres-zoom-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.55rem !important;
    }
    .pres-zoom-reset {
        padding: 0 18px !important;
        font-size: 0.55rem !important;
    }
    .pres-volume-slider {
        width: 80px !important;
    }
    #closePresBtn {
        padding: 5px 10px !important;
        font-size: 0.55rem !important;
        border-radius: 20px !important;
    }
    #closePresBtn i {
        font-size: 0.6rem;
    }
    .pres-card {
        padding: 10px !important;
        gap: 10px !important;
        border-radius: 14px !important;
    }
    .pres-image-area img {
        max-height: 28vh !important;
    }
    .pres-pokemon-name {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }
    .pres-description {
        font-size: 0.6rem !important;
        padding: 8px !important;
    }
    .reveal-btn {
        padding: 8px 14px !important;
        font-size: 0.65rem !important;
    }
    .pres-nav-btn {
        padding: 6px 12px !important;
        font-size: 0.6rem !important;
    }
    .pres-counter {
        padding: 0 12px !important;
        font-size: 0.6rem !important;
        line-height: 30px !important;
        height: 30px !important;
    }
    /* Модалка завершения */
    .completion-single {
        width: 95vw !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }
    .completion-score-value {
        font-size: 1.5rem !important;
    }
    .completion-history-row {
    padding: 3px 6px !important;
        font-size: 0.55rem !important;
    }
    .completion-history-img img {
        width: 28px !important;
        height: 28px !important;
    }
    /* Speed timer */
    .speed-timer-value {
        padding: 4px 12px !important;
        font-size: 0.8rem !important;
    }
    /* Mode setup modal */
    .mode-setup-modal {
        padding: 20px 16px !important;
        border-radius: 20px !important;
    }
    .mode-setup-btn {
        padding: 8px 14px !important;
        font-size: 0.6rem !important;
    }
    /* Exit confirm */
    .exit-confirm-modal {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }
}

.chat-conversation-item {
    transition: background 0.2s !important;
}
.chat-conversation-item:hover {
    background: rgba(233, 69, 96, 0.1) !important;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.duel-results-container {
    display: flex;
    gap: 15px;
    margin: 15px 0;
    align-items: stretch;
}

.duel-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
}

@media (max-width: 600px) {
    .duel-results-container {
        flex-direction: column;
        gap: 0;
    }
    .duel-vs {
        padding: 8px 0;
        font-size: 1.2rem;
    }
}

.duels-friend-list {
    display: flex;
    gap: 8px;
    padding: 10px 0;
    overflow-x: auto;
    flex-wrap: wrap;
}

.duels-friend-item {
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Minecraft', monospace;
}

.duels-friend-item:hover,
.duels-friend-item.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    color: #e94560;
}

.duels-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.duel-history-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.2s;
}

.duel-history-card:hover {
    background: rgba(233, 69, 96, 0.08);
    border-color: rgba(233, 69, 96, 0.2);
}

.duel-history-icon {
    font-size: 1.2rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.duel-history-info {
    flex: 1;
    min-width: 0;
}

.duel-history-names {
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
}

.duel-history-mode {
    color: #888;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    margin-top: 2px;
}

.duel-history-scores {
    display: flex;
    gap: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* ===== ROOM ANIMATIONS ===== */
@keyframes roomFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes roomSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes roomCodeGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(233,69,96,0.4), 0 0 40px rgba(233,69,96,0.2); }
    50% { text-shadow: 0 0 30px rgba(233,69,96,0.7), 0 0 60px rgba(233,69,96,0.4), 0 0 90px rgba(233,69,96,0.2); }
}

@keyframes roomPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

#roomRoleSelectOverlay[style*="display: flex"],
#roomSetupOverlay[style*="display: flex"],
#roomResultsOverlay[style*="display: flex"] {
    animation: roomFadeIn 0.25s ease-out;
}

#roomRoleSelectOverlay[style*="display: flex"] > div,
#roomSetupOverlay[style*="display: flex"] > div,
#roomResultsOverlay[style*="display: flex"] > div {
    animation: roomSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#roomWaitingOverlay[style*="display: flex"] {
    animation: roomFadeIn 0.3s ease-out;
}

#roomWaitingOverlay[style*="display: flex"] > div {
    animation: roomSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#roomCodeDisplay {
    animation: roomCodeGlow 2s ease-in-out infinite;
    transition: letter-spacing 0.3s ease;
}

#roomRoleSelectOverlay button[onclick*="selectRoomRole"],
#roomSetupOverlay button[onclick*="createRoom"],
#roomWaitingOverlay button[onclick*="startRoomGame"],
#roomResultsOverlay button[onclick*="closeRoom"] {
    transition: all 0.2s ease;
}

#roomRoleSelectOverlay button[onclick*="selectRoomRole"]:hover,
#roomSetupOverlay button[onclick*="createRoom"]:hover,
#roomWaitingOverlay button[onclick*="startRoomGame"]:hover:not([style*="opacity: 0.5"]) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(233,69,96,0.4);
}

#roomRoleSelectOverlay button[onclick*="selectRoomRole"]:active,
#roomSetupOverlay button[onclick*="createRoom"]:active,
#roomWaitingOverlay button[onclick*="startRoomGame"]:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(233,69,96,0.3);
}

#roomRoleSelectOverlay button[onclick*="closeRoomRoleSelect"],
#roomSetupOverlay button[onclick*="closeRoomSetup"],
#roomWaitingOverlay button[onclick*="closeRoom"]:not(#roomStartBtn),
#roomResultsOverlay button[onclick*="closeRoom"] {
    transition: all 0.2s ease;
}

#roomRoleSelectOverlay button[onclick*="closeRoomRoleSelect"]:hover,
#roomSetupOverlay button[onclick*="closeRoomSetup"]:hover,
#roomWaitingOverlay button[onclick*="closeRoom"]:hover:not(#roomStartBtn),
#roomResultsOverlay button[onclick*="closeRoom"]:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

#roomRoleSelectOverlay button[onclick*="closeRoomRoleSelect"]:active,
#roomSetupOverlay button[onclick*="closeRoomSetup"]:active,
#roomWaitingOverlay button[onclick*="closeRoom"]:active:not(#roomStartBtn),
#roomResultsOverlay button[onclick*="closeRoom"]:active {
    transform: translateY(1px);
}

#roomPlayersList > div {
    animation: roomSlideUp 0.3s ease-out;
    animation-fill-mode: both;
}

#roomPlayersList > div:nth-child(1) { animation-delay: 0.05s; }
#roomPlayersList > div:nth-child(2) { animation-delay: 0.1s; }
#roomPlayersList > div:nth-child(3) { animation-delay: 0.15s; }
#roomPlayersList > div:nth-child(4) { animation-delay: 0.2s; }
#roomPlayersList > div:nth-child(5) { animation-delay: 0.25s; }
#roomPlayersList > div:nth-child(6) { animation-delay: 0.3s; }

#roomResultsTable > div {
    animation: roomSlideUp 0.3s ease-out;
    animation-fill-mode: both;
}

#roomResultsTable > div:nth-child(1) { animation-delay: 0.05s; }
#roomResultsTable > div:nth-child(2) { animation-delay: 0.1s; }
#roomResultsTable > div:nth-child(3) { animation-delay: 0.15s; }
#roomResultsTable > div:nth-child(4) { animation-delay: 0.2s; }
#roomResultsTable > div:nth-child(5) { animation-delay: 0.25s; }
#roomResultsTable > div:nth-child(6) { animation-delay: 0.3s; }

@keyframes roomCodePopIn {
    0% { opacity: 0; transform: scale(0.5); }
    70% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

#roomCodeDisplay.animate-in {
    animation: roomCodePopIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== CHAT ANIMATIONS ===== */
@keyframes chatItemSlideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes chatMsgSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes chatWindowOpen {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes chatReplySlide {
    from { opacity: 0; max-height: 0; padding: 0 15px; }
    to { opacity: 1; max-height: 60px; padding: 8px 15px; }
}

#tabChat .chat-conversation-item {
    animation: chatItemSlideIn 0.3s ease-out;
    animation-fill-mode: both;
}

#tabChat .chat-conversation-item:nth-child(2) { animation-delay: 0.03s; }
#tabChat .chat-conversation-item:nth-child(3) { animation-delay: 0.06s; }
#tabChat .chat-conversation-item:nth-child(4) { animation-delay: 0.09s; }
#tabChat .chat-conversation-item:nth-child(5) { animation-delay: 0.12s; }
#tabChat .chat-conversation-item:nth-child(6) { animation-delay: 0.15s; }
#tabChat .chat-conversation-item:nth-child(7) { animation-delay: 0.18s; }
#tabChat .chat-conversation-item:nth-child(8) { animation-delay: 0.21s; }

#tabChat .chat-conversation-item:hover {
    transform: translateX(4px);
    background: rgba(233,69,96,0.08);
}

#chatWindow[style*="display: flex"] {
    animation: chatWindowOpen 0.25s ease-out;
}



#chatReplyPreview[style*="display: flex"] {
    animation: chatReplySlide 0.2s ease-out;
}

#chatSendBtn {
    transition: all 0.2s ease;
}

#chatSendBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233,69,96,0.4);
}

#chatSendBtn:active {
    transform: translateY(1px) scale(0.97);
}

#chatInput:focus {
    border-color: #e94560 !important;
    box-shadow: 0 0 0 2px rgba(233,69,96,0.2);
}

/* ===== ADMIN ANIMATIONS ===== */
@keyframes adminCardSlideIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes adminSubTabPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.admin-sub-tab {
    transition: all 0.2s ease;
}

.admin-sub-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233,69,96,0.3);
}

.admin-sub-tab.active {
    animation: adminSubTabPulse 0.3s ease-out;
}

.admin-filter-btn {
    transition: all 0.2s ease;
}

.admin-filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(233,69,96,0.25);
}

.admin-filter-btn:active {
    transform: translateY(0) scale(0.97);
}

#adminSubmissionsList > div,
#adminSubmissionsList > .admin-card {
    animation: adminCardSlideIn 0.3s ease-out;
    animation-fill-mode: both;
}

#adminSubmissionsList > div:nth-child(1),
#adminSubmissionsList > .admin-card:nth-child(1) { animation-delay: 0.03s; }
#adminSubmissionsList > div:nth-child(2),
#adminSubmissionsList > .admin-card:nth-child(2) { animation-delay: 0.06s; }
#adminSubmissionsList > div:nth-child(3),
#adminSubmissionsList > .admin-card:nth-child(3) { animation-delay: 0.09s; }
#adminSubmissionsList > div:nth-child(4),
#adminSubmissionsList > .admin-card:nth-child(4) { animation-delay: 0.12s; }
#adminSubmissionsList > div:nth-child(5),
#adminSubmissionsList > .admin-card:nth-child(5) { animation-delay: 0.15s; }
#adminSubmissionsList > div:nth-child(6),
#adminSubmissionsList > .admin-card:nth-child(6) { animation-delay: 0.18s; }
#adminSubmissionsList > div:nth-child(7),
#adminSubmissionsList > .admin-card:nth-child(7) { animation-delay: 0.21s; }
#adminSubmissionsList > div:nth-child(8),
#adminSubmissionsList > .admin-card:nth-child(8) { animation-delay: 0.24s; }
#adminSubmissionsList > div:nth-child(9),
#adminSubmissionsList > .admin-card:nth-child(9) { animation-delay: 0.27s; }
#adminSubmissionsList > div:nth-child(10),
#adminSubmissionsList > .admin-card:nth-child(10) { animation-delay: 0.3s; }

#tabAdmin .admin-sub-tabs {
    animation: chatItemSlideIn 0.3s ease-out;
}

#tabAdmin .admin-controls {
    animation: chatMsgSlideUp 0.3s ease-out 0.1s both;
}

.hosting-hero {
    animation: chatMsgSlideUp 0.4s ease-out;
}

/* ===== CHAT CONTEXT MENU ===== */
@keyframes ctxMenuIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes ctxMenuOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.92); }
}

#chatContextMenu {
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#chatContextMenu.ctx-menu-hiding {
    animation: ctxMenuOut 0.15s ease forwards;
    pointer-events: none;
}

#chatContextMenu button:hover {
    background: rgba(233,69,96,0.15);
}

#chatContextMenu button:active {
    background: rgba(233,69,96,0.25);
}

#chatContextMenu #ctxDelete:hover {
    background: rgba(233,69,96,0.15);
}

#chatContextMenu hr {
    border: none;
    border-top: 1px solid rgba(233,69,96,0.15);
    margin: 4px 0;
}

/* ===== UNIFIED MODAL SYSTEM ===== */
.confirm-modal,
.prompt-modal,
.mode-setup-overlay,
.exit-confirm-overlay,
.clear-random-overlay {
    background: rgba(5, 10, 25, 0.92);
    backdrop-filter: blur(10px);
    z-index: 1000002 !important;
}

.completion-modal {
    background: radial-gradient(circle, rgba(233,69,96,0.15), rgba(5,10,25,0.95));
    backdrop-filter: blur(10px);
}

.confirm-modal-content,
.completion-modal-content,
.prompt-modal-content,
.mode-setup-modal,
.exit-confirm-modal,
.clear-random-modal {
    background: linear-gradient(145deg, #0f0f23, #1a1a2e) !important;
    border: 2px solid #e94560 !important;
    border-radius: 20px !important;
    box-shadow: 0 0 40px rgba(233,69,96,0.3), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.confirm-modal-content h3,
.completion-modal-content h2,
.prompt-modal-content h3,
.mode-setup-modal h2,
.exit-confirm-modal h3,
.clear-random-modal h2 {
    color: #e94560 !important;
    letter-spacing: 1px;
}

.confirm-modal-content p,
.completion-modal-content p,
.prompt-modal-content p,
.mode-setup-desc,
.exit-confirm-modal p,
.clear-random-modal p {
    color: rgba(255,255,255,0.6) !important;
}

.confirm-modal-buttons button,
.prompt-modal-buttons button,
.completion-modal-content button,
.exit-confirm-btn,
.mode-setup-start-btn {
    font-family: 'Minecraft', monospace;
    border-radius: 12px !important;
    padding: 10px 24px !important;
    border: none !important;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.2s ease;
}

.confirm-modal-buttons button:first-child,
.mode-setup-start-btn {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    color: white !important;
}

.confirm-modal-buttons button:first-child:hover,
.mode-setup-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233,69,96,0.4);
}

.confirm-modal-buttons button:last-child,
.prompt-modal-buttons button:last-child,
.exit-confirm-btn {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.7) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

.confirm-modal-buttons button:last-child:hover,
.prompt-modal-buttons button:last-child:hover,
.exit-confirm-btn:hover {
    background: rgba(255,255,255,0.15) !important;
    transform: translateY(-2px);
}

.prompt-modal-buttons button:first-child {
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    color: white !important;
}

.prompt-modal-buttons button:first-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46,204,113,0.4);
}

.completion-modal-content button {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    color: white !important;
    padding: 12px 30px !important;
    margin-top: 20px;
}

.completion-modal-content button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(233,69,96,0.5);
}

.exit-confirm-btn.yes {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    color: white !important;
}

.exit-confirm-btn.yes:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233,69,96,0.4);
}

@keyframes modalPopCenter {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes modalZoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes completionPop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    70% { transform: translate(-50%, -50%) scale(1.02); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Type icons in filter tags */
.filter-type-icon {
    width: 12px !important;
    height: 12px !important;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 3px;
}

.filter-tag {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* ============================================
   ТИР-ЛИСТ
   ============================================ */
.tl-header {
    text-align: center;
    margin-bottom: 24px;
}
.tl-header h2 {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    margin-bottom: 8px;
}
.tl-header p {
    color: rgba(255,255,255,0.5);
    font-size: 0.65rem;
    margin-bottom: 16px;
}
.tl-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.tl-btn {
    background: rgba(15,52,96,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.tl-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
}
.tl-btn-save { border-color: rgba(76,175,80,0.5); }
.tl-btn-save:hover { background: rgba(76,175,80,0.2); border-color: #4caf50; }
.tl-btn-reset { border-color: rgba(244,67,54,0.5); }
.tl-btn-reset:hover { background: rgba(244,67,54,0.2); border-color: #f44336; }
.tl-btn-export { border-color: rgba(33,150,243,0.5); }
.tl-btn-export:hover { background: rgba(33,150,243,0.2); border-color: #2196f3; }
.tl-btn-add { border-color: rgba(233,69,96,0.5); }
.tl-btn-add:hover { background: rgba(233,69,96,0.2); border-color: #e94560; }
.tl-btn-saves { border-color: rgba(255,193,7,0.5); }
.tl-btn-saves:hover { background: rgba(255,193,7,0.2); border-color: #ffc107; }
.tl-save-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); margin-bottom:6px; cursor:pointer; transition:all 0.2s; }
.tl-save-item:hover { background:rgba(255,255,255,0.08); border-color:rgba(233,69,96,0.4); }
.tl-save-del { background:none; border:1px solid rgba(233,69,96,0.3); color:#e94560; width:28px; height:28px; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.6rem; transition:all 0.2s; flex-shrink:0; }
.tl-save-del:hover { background:rgba(233,69,96,0.2); border-color:#e94560; }

#tabTierlist {
    overflow: visible;
}
.tl-board {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}
.tl-tier-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 64px;
    border-radius: 10px;
    overflow: visible;
    background: rgba(15,15,35,0.5);
    border: 1px solid rgba(255,255,255,0.06);
}
.tl-tier-label {
    width: 48px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 1.1rem;
    flex-shrink: 0;
    border-radius: 10px 0 0 10px;
    user-select: none;
}
.tl-tier-drop {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 0 0 8px;
    min-height: 64px;
    align-items: center;
    transition: background 0.2s;
}
.tl-drop-hover {
    background: rgba(233,69,96,0.15) !important;
    outline: 2px dashed rgba(233,69,96,0.5);
    outline-offset: -2px;
}
.tl-tier-controls {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}
.tl-tier-row:hover .tl-tier-controls {
    opacity: 1;
}
.tl-ctrl-btn {
    background: rgba(255,255,255,0.06);
    border: none;
    color: rgba(255,255,255,0.4);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    transition: all 0.15s;
}
.tl-ctrl-btn:hover {
    background: rgba(233,69,96,0.2);
    color: #e94560;
}
.tl-ctrl-btn--del:hover {
    background: rgba(244,67,54,0.2);
    color: #f44336;
}
.tl-tier-arrows {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 4px 4px 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.tl-tier-row:hover .tl-tier-arrows {
    opacity: 1;
}
.tl-arrow-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.5rem;
    transition: color 0.15s;
}
.tl-arrow-btn:hover {
    color: #e94560;
}
.tl-add-tier-row {
    display: flex;
    justify-content: center;
    padding: 8px;
}
.tl-add-tier-btn {
    background: rgba(233,69,96,0.1);
    border: 1px dashed rgba(233,69,96,0.4);
    color: rgba(233,69,96,0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.tl-add-tier-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}

.tl-pool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: rgba(15,52,96,0.3);
    border-radius: 10px;
    border: 1px solid rgba(233,69,96,0.15);
}
.tl-pool-header span {
    color: rgba(255,255,255,0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
}
.tl-search {
    background: rgba(10,10,26,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    padding: 5px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    outline: none;
    width: 200px;
    transition: border-color 0.2s;
}
.tl-search:focus {
    border-color: #e94560;
}
.tl-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
    background: rgba(10,10,26,0.3);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}
.tl-pool::-webkit-scrollbar {
    width: 6px;
}
.tl-pool::-webkit-scrollbar-track {
    background: transparent;
}
.tl-pool::-webkit-scrollbar-thumb {
    background: rgba(233,69,96,0.3);
    border-radius: 3px;
}

.tl-poke-card {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    cursor: grab;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.15s;
    flex-shrink: 0;
}
.tl-poke-card:hover {
    border-color: #e94560;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(233,69,96,0.3);
}
.tl-poke-card:active {
    cursor: grabbing;
}
.tl-poke-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tl-poke-card--placed {
    height: 64px;
    width: unset;
    aspect-ratio: 1;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 4px;
    flex-shrink: 0;
}
.tl-poke-card--placed img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}
.tl-poke-card--placed:hover {
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
}
.tl-poke-card--placed img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tl-poke-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e94560;
    color: white;
    font-size: 0.45rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    border: 1px solid rgba(0,0,0,0.3);
}
.tl-poke-card--placed:hover .tl-poke-remove {
    display: flex;
}

.tl-zoom-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 4px 12px;
}
.tl-zoom-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.tl-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    cursor: pointer;
    border: none;
}
.tl-zoom-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    cursor: pointer;
    border: none;
}
.tl-zoom-reset {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    transition: all 0.15s;
}
.tl-zoom-reset:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}

/* Edit modal */
.tl-edit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Minecraft', monospace;
}
.tl-edit-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    min-width: 320px;
    max-width: 90vw;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
    color: white;
    text-align: center;
}
.tl-edit-modal h3 {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    margin: 0 0 16px 0;
    text-align: center;
}
.tl-edit-field {
    margin-bottom: 14px;
}
.tl-edit-field label {
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    display: block;
    margin-bottom: 6px;
}
.tl-edit-input {
    width: 100%;
    background: rgba(10,10,26,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    box-sizing: border-box;
}
.tl-edit-input:focus {
    border-color: #e94560;
}
.tl-edit-colors {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.tl-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}
.tl-color-swatch:hover {
    transform: scale(1.15);
}
.tl-color-active {
    border-color: white;
    box-shadow: 0 0 8px rgba(255,255,255,0.4);
}
.tl-color-picker {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: none;
    padding: 0;
}
.tl-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}
.tl-export-modal {
    background: #0a0a1a;
    border: 2px solid #e94560;
    border-radius: 16px;
    padding: 24px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

/* Pool settings */
.tl-pool-settings-btn {
    background: rgba(233,69,96,0.1);
    border: 1px solid rgba(233,69,96,0.3);
    color: rgba(233,69,96,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.tl-pool-settings-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}

/* Pool modal */
.tl-pool-modal {
    background: linear-gradient(135deg, #0d1b30, #0a1628);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 16px;
    padding: 0;
    width: 560px;
    max-width: 94vw;
    max-height: 88vh;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 40px rgba(233,69,96,0.08);
    display: flex;
    flex-direction: column;
}
.tl-pool-modal-header {
    padding: 20px 24px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tl-pool-modal-header h3 {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    margin: 0 0 14px 0;
}
.tl-pool-mode-toggle {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.tl-pool-mode-btn {
    background: rgba(15,52,96,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 7px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tl-pool-mode-btn:hover {
    background: rgba(233,69,96,0.1);
    border-color: rgba(233,69,96,0.3);
    color: white;
}
.tl-pool-mode-btn.active {
    background: rgba(233,69,96,0.15);
    border-color: #e94560;
    color: #e94560;
}

/* Tag sections */
#tlPoolTagSection {
    padding: 14px 24px;
    overflow-y: auto;
    flex: 1;
}
.tl-pool-hint {
    text-align: center;
    color: rgba(255,255,255,0.35);
    font-size: 0.5rem;
    font-family: 'Minecraft', monospace;
    margin-bottom: 14px;
}
.tl-hint-include {
    color: #4caf50;
}
.tl-hint-exclude {
    color: #f44336;
}
.tl-pool-section {
    margin-bottom: 14px;
}
.tl-pool-section-title {
    color: rgba(255,255,255,0.45);
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tl-pool-section-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.tl-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(15,25,50,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.5);
    user-select: none;
}
.tl-tag-pill:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
}
.tl-tag-none {
    color: rgba(255,255,255,0.45);
    border-color: rgba(255,255,255,0.08);
    background: rgba(15,25,50,0.4);
}
.tl-tag-include {
    color: #66bb6a;
    border-color: rgba(76,175,80,0.35);
    background: rgba(76,175,80,0.1);
}
.tl-tag-include:hover {
    background: rgba(76,175,80,0.18);
}
.tl-tag-exclude {
    color: #ef5350;
    border-color: rgba(244,67,54,0.35);
    background: rgba(244,67,54,0.1);
}
.tl-tag-exclude:hover {
    background: rgba(244,67,54,0.18);
}
.tl-tag-state {
    width: 13px;
    text-align: center;
    font-size: 0.5rem;
    flex-shrink: 0;
}
.tl-tag-label {
    white-space: nowrap;
}

/* Footer */
.tl-pool-modal-footer {
    padding: 14px 24px;
    display: flex;
    gap: 8px;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.tl-pool-action-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 7px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tl-pool-action-btn.save {
    background: rgba(76,175,80,0.15);
    border-color: rgba(76,175,80,0.4);
    color: #66bb6a;
}
.tl-pool-action-btn.save:hover {
    background: rgba(76,175,80,0.25);
}
.tl-pool-action-btn.reset {
    background: rgba(255,152,0,0.1);
    border-color: rgba(255,152,0,0.3);
    color: #ffa726;
}
.tl-pool-action-btn.reset:hover {
    background: rgba(255,152,0,0.2);
}
.tl-pool-action-btn.cancel {
    background: rgba(244,67,54,0.08);
    border-color: rgba(244,67,54,0.25);
    color: rgba(255,255,255,0.4);
}
.tl-pool-action-btn.cancel:hover {
    background: rgba(244,67,54,0.15);
    color: rgba(255,255,255,0.7);
}

/* ===== TAP-TO-SELECT (mobile drag alternative) ===== */
.tl-poke-selected {
    outline: 3px solid #ffeb3b !important;
    box-shadow: 0 0 14px rgba(255,235,59,0.5) !important;
    transform: scale(1.15) !important;
    z-index: 50;
}
.tl-board-selecting .tl-tier-drop {
    outline: 2px dashed rgba(255,235,59,0.35);
    outline-offset: -2px;
    min-height: 80px;
}
.tl-board-selecting .tl-tier-row {
    cursor: pointer;
}
.tl-board-selecting .tl-tier-row:hover .tl-tier-drop {
    background: rgba(255,235,59,0.1);
}
.tl-pool-selecting {
    outline: 2px dashed rgba(255,235,59,0.35);
    outline-offset: -2px;
    cursor: pointer;
}

/* ===== MOBILE TIER LIST ===== */
@media (max-width: 768px) {
    #tabTierlist {
        padding: 12px !important;
    }
    .tl-header h2 {
        font-size: 0.75rem !important;
    }
    .tl-header p {
        font-size: 0.55rem !important;
        margin-bottom: 10px !important;
    }
    .tl-actions {
        gap: 6px !important;
        justify-content: center !important;
    }
    .tl-btn {
        font-size: 0.5rem !important;
        padding: 5px 8px !important;
    }
    .tl-btn i {
        display: none;
    }
    .tl-zoom-wrap {
        padding: 3px 8px !important;
        gap: 4px !important;
    }
    .tl-zoom-slider {
        width: 55px !important;
    }
    .tl-zoom-reset {
        padding: 2px 6px !important;
        font-size: 0.5rem !important;
    }

    /* Tier rows: stack vertically */
    .tl-tier-row {
        flex-direction: column !important;
        min-height: auto !important;
        border-radius: 8px !important;
        overflow: visible !important;
    }
    .tl-tier-label {
        width: 100% !important;
        min-height: 32px !important;
        height: 32px !important;
        font-size: 0.7rem !important;
        border-radius: 8px 8px 0 0 !important;
        flex-direction: row !important;
    }
    .tl-tier-drop {
        min-height: 48px !important;
        padding: 6px !important;
        gap: 4px !important;
        border-top: none !important;
        border-radius: 0 0 8px 8px !important;
    }
    .tl-poke-card--placed {
        height: 48px !important;
        width: 48px !important;
        aspect-ratio: 1 !important;
    }

    /* Controls always visible on mobile */
    .tl-tier-controls {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        opacity: 1 !important;
        flex-direction: row !important;
        gap: 4px !important;
        z-index: 5;
    }
    .tl-tier-row {
        position: relative !important;
    }
    .tl-tier-arrows {
        opacity: 1 !important;
        position: absolute !important;
        bottom: 4px !important;
        right: 4px !important;
        flex-direction: row !important;
        gap: 3px !important;
    }
    .tl-arrow-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.5rem !important;
    }
    .tl-ctrl-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.5rem !important;
    }

    /* Pool */
    .tl-pool-header {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    .tl-pool-header > div {
        width: 100% !important;
        justify-content: space-between !important;
    }
    .tl-search {
        width: 100% !important;
        font-size: 0.55rem !important;
    }
    .tl-pool {
        max-height: 300px !important;
        gap: 4px !important;
        padding: 6px !important;
    }
    .tl-pool .tl-poke-card {
        width: 42px !important;
        height: 42px !important;
    }
    .tl-pool-settings-btn {
        font-size: 0.5rem !important;
        padding: 4px 8px !important;
    }

    /* Pool return bar when selecting */
    .tl-pool-selecting::before {
        content: 'Нажмите сюда чтобы вернуть в пул';
        display: block;
        width: 100%;
        text-align: center;
        font-family: 'Minecraft', monospace;
        font-size: 0.5rem;
        color: #ffeb3b;
        padding: 6px;
        margin-bottom: 4px;
        border-radius: 6px;
        background: rgba(255,235,59,0.08);
    }
}

@media (max-width: 480px) {
    .tl-actions .tl-btn span,
    .tl-actions .tl-btn:not(.tl-zoom-wrap) {
        font-size: 0.45rem !important;
        padding: 4px 6px !important;
    }
    .tl-pool .tl-poke-card {
        width: 36px !important;
        height: 36px !important;
    }
    .tl-poke-card--placed {
        height: 42px !important;
        width: 42px !important;
    }
}

/* DexID Game */
.dexid-mode-btn {
    padding: 10px 24px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.dexid-mode-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.dexid-mode-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
.dexid-num-input {
    width: 100%;
    padding: 20px 24px;
    border-radius: 14px;
    border: 2px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.4);
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.dexid-num-input::-webkit-inner-spin-button,
.dexid-num-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.dexid-rounds-btn {
    padding: 12px 28px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.dexid-rounds-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.dexid-rounds-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
.better-mode-btn {
    padding: 10px 24px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.better-mode-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.better-mode-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
.better-rounds-btn {
    padding: 12px 28px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.better-rounds-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.better-rounds-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
#dexidSuggestions .dexid-sugg-item {
    padding: 14px 20px;
    color: rgba(255,255,255,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.15s;
}
#dexidSuggestions .dexid-sugg-item:hover,
#dexidSuggestions .dexid-sugg-item.active {
    background: rgba(233,69,96,0.2);
}
#dexidSuggestions .dexid-sugg-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
}
.dexid-result-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}
.dexid-result-row img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}
/* ============================================
   РАЗДЕЛЕНИЕ ВКЛАДОК: ИГРЫ / ОСТАЛЬНОЕ
   ============================================ */

/* 1. Контейнер табов — без подложки, просто флекс-колонка */
.tabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

/* 2. Строки — флекс с переносом */
.tabs-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* 3. Разделитель между строками */
.tabs-row--other {
    border-top: 1px solid rgba(233, 69, 96, 0.15);
    padding-top: 12px;
}

/* 4. Игровые вкладки — выделенные, крупные */
.tab-btn.game-tab {
    font-size: 0.9rem !important;
    padding: 14px 32px !important;
    background: linear-gradient(145deg, rgba(15, 52, 96, 0.4), rgba(26, 26, 46, 0.6)) !important;
    border: 2px solid rgba(233, 69, 96, 0.25) !important;
    border-radius: 16px !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

    /* 5. Неоновое свечение при наведении */
    .tab-btn.game-tab:hover {
        transform: translateY(-3px) scale(1.03) !important;
        border-color: #e94560 !important;
        box-shadow: 0 8px 30px rgba(233, 69, 96, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }

    /* 6. Активная игровая вкладка */
    .tab-btn.game-tab.active {
        background: linear-gradient(135deg, rgba(233, 69, 96, 0.3), rgba(198, 42, 71, 0.5)) !important;
        border-color: #e94560 !important;
        box-shadow: 0 0 35px rgba(233, 69, 96, 0.4), 0 0 70px rgba(233, 69, 96, 0.15) !important;
        color: #fff !important;
        text-shadow: 0 0 15px rgba(233, 69, 96, 0.8);
    }

        /* 7. Неоновая линия под активной вкладкой */
        .tab-btn.game-tab.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 20%;
            width: 60%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #e94560, transparent);
            border-radius: 2px;
            box-shadow: 0 0 15px #e94560, 0 0 30px rgba(233, 69, 96, 0.3);
            animation: gameTabGlow 1.8s ease-in-out infinite;
        }

@keyframes gameTabGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scaleX(0.8);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* 8. Анимация иконок игровых вкладок */
.tab-btn.game-tab i {
    font-size: 1.1rem !important;
    margin-right: 10px !important;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 0 4px rgba(233, 69, 96, 0.2));
}

.tab-btn.game-tab:hover i {
    transform: scale(1.3) rotate(-8deg) !important;
    filter: drop-shadow(0 0 15px rgba(233, 69, 96, 0.8));
}

.tab-btn.game-tab.active i {
    filter: drop-shadow(0 0 20px rgba(233, 69, 96, 0.9));
}

/* 9. ТИР-ЛИСТ — ЗОЛОТАЯ ТЕМА */
.tab-btn.game-tab[data-tab="tierlist"] {
    border-color: rgba(255, 215, 0, 0.3) !important;
    background: linear-gradient(145deg, rgba(40, 30, 10, 0.5), rgba(60, 40, 10, 0.4)) !important;
}

    .tab-btn.game-tab[data-tab="tierlist"]:hover {
        border-color: #ffd700 !important;
        box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 215, 0, 0.1) !important;
    }

    .tab-btn.game-tab[data-tab="tierlist"].active {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(200, 150, 0, 0.4)) !important;
        border-color: #ffd700 !important;
        box-shadow: 0 0 35px rgba(255, 215, 0, 0.4), 0 0 70px rgba(255, 215, 0, 0.15) !important;
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
    }

        .tab-btn.game-tab[data-tab="tierlist"].active::after {
            background: linear-gradient(90deg, transparent, #ffd700, transparent);
            box-shadow: 0 0 15px #ffd700, 0 0 30px rgba(255, 215, 0, 0.3);
        }

    .tab-btn.game-tab[data-tab="tierlist"]:hover i {
        color: #ffd700 !important;
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
    }

    .tab-btn.game-tab[data-tab="tierlist"].active i {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.9));
    }

/* 10. Обычные вкладки (вторая строка) — скромные, чистые */
.tabs-row--other .tab-btn {
    background: rgba(20, 20, 40, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 30px !important;
    padding: 10px 22px !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.2s ease !important;
}

    .tabs-row--other .tab-btn:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        transform: translateY(-2px) !important;
    }

    .tabs-row--other .tab-btn.active {
        background: rgba(233, 69, 96, 0.15) !important;
        border-color: rgba(233, 69, 96, 0.4) !important;
        color: #e94560 !important;
    }
/* ============================================
   АНИМАЦИЯ ДЛЯ DEXID
   ============================================ */

/* Анимация входа */
@keyframes dexidModalIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }

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

/* Анимация выхода */
@keyframes dexidModalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
}

/* Анимация фона */
@keyframes dexidOverlayIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

@keyframes dexidOverlayOut {
    from {
        opacity: 1;
        backdrop-filter: blur(8px);
    }

    to {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

/* Контейнер оверлея */
#dexidOverlay {
    animation: dexidOverlayIn 0.3s ease forwards;
}

    /* Контент модалки */
    #dexidOverlay > div {
        animation: dexidModalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* ===== КЛАССЫ ДЛЯ АНИМАЦИИ ВЫХОДА ===== */

    /* Оверлей исчезает */
    #dexidOverlay.overlay-out {
        animation: dexidOverlayOut 0.3s ease forwards !important;
    }

        /* Контент вылетает */
        #dexidOverlay.overlay-out > div {
            animation: dexidModalOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        }
/* Кнопка закрытия в DexID */
#dexidOverlay button[onclick*="dexidClose"] {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

#dexidOverlay button[onclick*="dexidClose"]:hover {
    transform: rotate(25deg) scale(1.1) !important;
    background: rgba(233, 69, 96, 0.3) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
}

#dexidOverlay button[onclick*="dexidClose"]:active {
    transform: rotate(25deg) scale(0.9) !important;
}
/* ============================================
   АНИМАЦИЯ ДЛЯ НАСТРОЙКИ ПУЛА ПОКЕМОНОВ
   ============================================ */

/* Анимация входа */
@keyframes tlPoolModalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

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

/* Анимация выхода */
@keyframes tlPoolModalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

/* Анимация фона */
@keyframes tlPoolOverlayIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

@keyframes tlPoolOverlayOut {
    from {
        opacity: 1;
        backdrop-filter: blur(4px);
    }

    to {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

/* Оверлей */
.tl-edit-overlay {
    animation: tlPoolOverlayIn 0.25s ease forwards;
}

    /* Модалка */
    .tl-edit-overlay .tl-pool-modal {
        animation: tlPoolModalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* ===== КЛАССЫ ДЛЯ АНИМАЦИИ ВЫХОДА ===== */

    /* Оверлей исчезает */
    .tl-edit-overlay.overlay-out {
        animation: tlPoolOverlayOut 0.25s ease forwards !important;
    }

        /* Модалка вылетает */
        .tl-edit-overlay.overlay-out .tl-pool-modal {
            animation: tlPoolModalOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        }

/* ============================================
   ГЕНЕРАТОР КАРТОЧЕК АТАК (НОВЫЙ СТИЛЬ)
   ============================================ */

.move-generator-modal {
    max-width: 560px !important;
    padding: 28px !important;
}

.move-gen-field {
    margin-bottom: 14px;
}

    .move-gen-field label {
        display: block;
        color: rgba(255,255,255,0.5);
        font-family: 'Minecraft', monospace;
        font-size: 0.6rem;
        margin-bottom: 5px;
        letter-spacing: 0.5px;
    }

.move-cat-btn-gen {
    padding: 6px 14px;
    border-radius: 20px;
    border: 2px solid rgba(255,255,255,0.15);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.25s;
}

    .move-cat-btn-gen:hover {
        border-color: rgba(255,255,255,0.3);
        color: rgba(255,255,255,0.8);
    }

    .move-cat-btn-gen.active {
        border-color: #e94560;
        background: rgba(233,69,96,0.2);
        color: #e94560;
    }

.move-type-btn {
    padding: 4px 10px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.6;
}

    .move-type-btn:hover {
        transform: scale(1.05);
        opacity: 0.9;
    }

    .move-type-btn.active {
        border-color: white !important;
        opacity: 1;
        transform: scale(1.05);
        box-shadow: 0 0 12px rgba(255,255,255,0.2);
    }

    .lang-switch {
        display: inline-flex;
        border: 2px solid rgba(233,69,96,0.5);
        border-radius: 30px;
        overflow: hidden;
        margin-right: 10px;
        background: rgba(15,52,96,0.7);
    }
    .lang-btn {
        font-family: 'Minecraft', monospace;
        font-size: 0.55rem;
        color: #fff;
        background: transparent;
        border: none;
        padding: 9px 14px;
        cursor: pointer;
        transition: all 0.15s;
    }
    .lang-btn:hover { color: #e94560; }
    .lang-btn.active {
        background: #e94560;
        color: #fff;
        box-shadow: 0 0 14px rgba(233,69,96,0.5);
    }
    .user-bar .lang-switch { align-self: center; }

/* ============================================
   ИГРА «У КОГО ЛУЧШЕ» — оформлена как DexID
   ============================================ */

#betterOverlay { animation: dexidOverlayIn 0.3s ease forwards; }
#betterOverlay > div { animation: dexidModalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
#betterOverlay.overlay-out { animation: dexidOverlayOut 0.3s ease forwards !important; }
#betterOverlay.overlay-out > div { animation: dexidModalOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; }
#betterOverlay button[onclick*="betterClose"] {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}
#betterOverlay button[onclick*="betterClose"]:hover {
    transform: rotate(25deg) scale(1.1) !important;
    background: rgba(233, 69, 96, 0.3) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
}
#betterOverlay button[onclick*="betterClose"]:active {
    transform: rotate(25deg) scale(0.9) !important;
}

.better-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.better-card {
    background: rgba(15,52,96,0.3); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 14px; text-align: center; cursor: pointer; color: #fff;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; position: relative;
}
.better-card:hover:not(.answered) { transform: translateY(-4px); border-color: #e94560; box-shadow: 0 6px 20px rgba(233,69,96,0.3); }
.better-card.answered { cursor: default; }
.better-card.correct { border-color: #2ecc71; box-shadow: 0 0 22px rgba(46,204,113,0.5); }
.better-card.wrong { border-color: #e74c3c; box-shadow: 0 0 22px rgba(231,76,60,0.4); }
.better-card img { width: 100%; max-width: 120px; height: 110px; object-fit: contain; image-rendering: pixelated; }
.better-card-name { font-size: 0.55rem; line-height: 1.5; margin: 8px 0 6px; min-height: 2.2em; display: flex; align-items: center; justify-content: center; }
.better-stat-reveal { display: none; margin-top: 8px; }
.better-card.answered .better-stat-reveal { display: block; }
.better-stat-line { font-size: 0.5rem; color: rgba(255,255,255,0.8); margin-bottom: 5px; }
.better-stat-bar-wrap { height: 7px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.better-stat-bar { height: 100%; background: #4ecdc4; border-radius: 4px; }
.better-card.correct .better-stat-bar { background: #2ecc71; }
.better-verdict { position: absolute; top: 8px; right: 8px; font-size: 0.8rem; display: none; }
.better-card.answered .better-verdict { display: block; }
.better-card.correct .better-verdict { color: #2ecc71; }
.better-card.wrong .better-verdict { color: #e74c3c; }
.better-prompt { text-align: center; font-size: 0.9rem; line-height: 1.8; padding: 24px; background: rgba(15,52,96,0.3); border: 1px solid rgba(233,69,96,0.2); border-radius: 16px; margin-bottom: 20px; color: #fff; }
.better-prompt b { color: #e94560; }
.better-prompt .mode { color: #4ecdc4; }
.better-timerbar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin-bottom: 20px; }
.better-timerbar > div { height: 100%; width: 100%; background: linear-gradient(90deg, #2ecc71, #e94560); transition: width 1s linear; }
.better-feedback { text-align: center; font-size: 0.7rem; line-height: 1.8; min-height: 2.2em; margin-bottom: 20px; }
.better-feedback.ok { color: #2ecc71; }
.better-feedback.bad { color: #e74c3c; }

/* Кнопка открытия детальной карточки */
.db-card-open-btn {
    margin-top: 12px;
    width: 100%;
    background: rgba(233, 69, 96, 0.14);
    border: 1px solid rgba(233, 69, 96, 0.45);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 8px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-shadow: 1px 1px 0 #000;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
.db-card-open-btn:hover {
    background: linear-gradient(135deg, #e94560, #c23152);
    border-color: #e94560;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.5);
    transform: translateY(-2px);
    color: #ffffff;
}
.db-card-open-btn:active {
    transform: translateY(0);
}
.db-mcard-open-btn {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.db-mcard-open-btn:hover {
    background: #ffffff;
    color: #111122;
    text-shadow: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Иконка открытия рядом с заголовком */
.db-title-open-icon {
    font-size: 0.65em;
    opacity: 0.45;
    margin-left: 5px;
    vertical-align: middle;
    transition: all 0.2s ease;
}
.db-card-name:hover .db-title-open-icon,
.db-abil-names:hover .db-title-open-icon,
.db-move-names:hover .db-title-open-icon,
.db-mcard-title:hover .db-title-open-icon {
    opacity: 1;
    color: #e94560;
    transform: translate(1px, -1px);
}

.db-table-abil-item, .db-abil-mini {
    cursor: pointer;
    transition: color 0.2s ease, text-decoration 0.2s ease;
    user-select: text;
    display: inline-block;
}
.db-table-abil-item:hover, .db-abil-mini:hover {
    color: #e94560;
    text-decoration: underline;
}

/* Двойная категория Z-приёмов (Физ + Спец) */
.db-move-tc-dual {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.db-move-cat-slash {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    font-weight: bold;
    margin: 0 1px;
}
.db-mcard-cat-badge.dual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 105px;
    height: 52px;
}
.db-mcard-cat-badge.dual .db-mcard-cat-img {
    width: 48px;
    height: 32px;
    object-fit: contain;
}

/* Градиентные рамки для всех рамок (карточка, инфо-бокс, плашка типа) */
.db-move-card.db-move-card-poster.db-card-grad-gmax {
    border-color: transparent;
    background: 
        radial-gradient(circle at 50% 30%, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.15) 100%) padding-box,
        linear-gradient(180deg, var(--card-accent, #777) 0%, #FF0045 100%) border-box,
        var(--card-accent, #777);
    box-shadow: 0 10px 28px rgba(255, 0, 69, 0.25), inset 0 2px 6px rgba(255,255,255,0.75);
}
.db-move-card.db-move-card-poster.db-card-grad-gmax .db-mcard-info-box {
    border-color: transparent;
    background: 
        linear-gradient(180deg, #44264e 0%, #2b1433 100%) padding-box,
        linear-gradient(180deg, var(--card-accent, #777) 0%, #FF0045 100%) border-box;
}
.db-move-card.db-move-card-poster.db-card-grad-gmax .db-mcard-type-pill {
    border-radius: 999px;
    border: 3.5px solid #ffffff;
    padding: 6px 12px;
    background: var(--card-accent, #777);
    box-shadow: 0 4px 10px rgba(0,0,0,0.22), inset 0 2px 4px rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-mcard-type-txt {
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow:
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px 1.5px 0 #000,
        1.5px 1.5px 0 #000,
        0 1.5px 0 #000,
        0 -1.5px 0 #000,
        1.5px 0 0 #000,
        -1.5px 0 0 #000,
        0 2px 4px rgba(0,0,0,0.85);
    white-space: nowrap;
    display: block;
    letter-spacing: 0.02em;
    line-height: 1;
}

.db-move-card.db-move-card-poster.db-card-grad-zmove .db-mcard-type-pill {
    border-radius: 999px;
    border: 3.5px solid #ffffff;
    padding: 6px 12px;
    background: var(--card-accent, #777);
    box-shadow: 0 4px 10px rgba(0,0,0,0.22), inset 0 2px 4px rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-mcard-type-txt {
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow:
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px 1.5px 0 #000,
        1.5px 1.5px 0 #000,
        0 1.5px 0 #000,
        0 -1.5px 0 #000,
        1.5px 0 0 #000,
        -1.5px 0 0 #000,
        0 2px 4px rgba(0,0,0,0.85);
    white-space: nowrap;
    display: block;
    letter-spacing: 0.02em;
    line-height: 1;
}

.db-mcard-extra-pill.tag {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    padding: 2.5px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.7);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 18%, rgba(15, 23, 42, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 55%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--pill-color, #FF0045) 20%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    transition: all 0.2s ease;
}
.db-mcard-extra-pill.tag i {
    font-size: 0.6rem;
    color: var(--pill-color, #ffffff);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--pill-color, #ffffff) 80%, transparent));
}
.db-mcard-extra-pill.tag:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 28%, rgba(15, 23, 42, 0.85));
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 80%, transparent);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--pill-color, #FF0045) 40%, transparent);
}

.db-move-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.db-move-cats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.db-move-cats-row .db-move-cat-img {
    width: 22px;
    height: 14px;
    object-fit: contain;
}

.db-move-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
/* Sleek Glassmorphic Move Tags & Gen Pill */
.db-move-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.db-move-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2.5px 8px;
    border-radius: 999px;
    font-size: 0.63rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    font-family: 'Minecraft', monospace;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.7);
    background: color-mix(in srgb, var(--tag-bg, #FF0045) 18%, rgba(15, 23, 42, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-color: color-mix(in srgb, var(--tag-bg, #FF0045) 55%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--tag-bg, #FF0045) 20%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}
.db-move-meta-tag i {
    font-size: 0.62rem;
    color: var(--tag-bg, #ffffff);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tag-bg, #ffffff) 80%, transparent));
    display: inline-block;
    vertical-align: middle;
}
.db-move-meta-tag:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--tag-bg, #FF0045) 30%, rgba(15, 23, 42, 0.85));
    border-color: color-mix(in srgb, var(--tag-bg, #FF0045) 80%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tag-bg, #FF0045) 45%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.db-move-gen {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    padding: 2.5px 7px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.db-move-pp-max {
    font-size: 0.52rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.65);
    margin-left: 2px;
}

/* Таблицы для Способностей и Движений */
.db-table-abilities .th-id { width: 45px; text-align: center; }
.db-table-abilities .th-name { width: 170px; text-align: left; }
.db-table-abilities .th-desc { min-width: 260px; text-align: left; }
.db-table-abilities .th-holders { min-width: 200px; text-align: left; }
.db-table-abilities .th-count { width: 65px; text-align: center; }

.db-table-desc-full {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.35;
    word-break: break-word;
    max-width: 420px;
}
.db-table-holders-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    max-width: 520px;
}
.db-table-mini-holder {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.db-table-mini-holder:hover {
    transform: scale(1.25);
    background: rgba(233, 69, 96, 0.3);
    z-index: 2;
}
.db-table-holders-more {
    font-size: 0.55rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.5);
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
}
.db-table-subname {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: normal;
    display: block;
    margin-top: 1px;
}

.db-table-moves .th-id { width: 55px; text-align: center; }
.db-table-moves .th-name { min-width: 150px; text-align: left; }
.db-table-moves .th-type { width: 110px; text-align: left; }
.db-table-moves .th-cat { width: 120px; text-align: left; }
.db-table-moves .th-gen { width: 55px; text-align: center; }
.db-table-moves .th-tags { min-width: 100px; text-align: center; }

.db-table-type-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: bold;
}
.db-table-cats-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.db-table-cat-icon {
    width: 20px;
    height: 14px;
    object-fit: contain;
}
.db-table-cat-lbl {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
}

/* Move Numeric & Range Filter Controls */
.db-filter-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.db-num-input {
    width: 76px;
    height: 32px;
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    text-align: center;
    padding: 0 6px;
    outline: none;
    transition: all 0.2s ease;
}
.db-num-input:focus {
    border-color: #e94560;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
    background: rgba(15, 52, 96, 0.7);
}
.db-num-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
}
.db-range-sep {
    color: rgba(255, 255, 255, 0.4);
    font-weight: bold;
    font-size: 0.8rem;
}
.db-reset-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.18), rgba(233, 69, 96, 0.08));
    border: 1px solid rgba(233, 69, 96, 0.45);
    color: #ff6b81;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}
.db-reset-filters-btn i {
    font-size: 0.65rem;
    transition: transform 0.35s ease;
}
.db-reset-filters-btn:hover {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4);
}
.db-reset-filters-btn:hover i {
    transform: rotate(-180deg);
}
.db-reset-filters-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(233, 69, 96, 0.25);
}



/* ===== Режим «Страница / Профиль Покемона» (Dossier View) ===== */
.db-pokemon-profile-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0 40px;
    animation: fadeIn 0.3s ease;
}

/* Навигационная панель профиля */
.db-profile-nav-bar {
    position: relative;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 16px;
    backdrop-filter: blur(12px);
}
.db-profile-nav-left, .db-profile-nav-right, .db-profile-nav-center {
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-profile-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.db-profile-btn:hover {
    background: rgba(233, 69, 96, 0.35);
    border-color: #e94560;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233, 69, 96, 0.3);
}
.db-profile-btn.primary {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.4), rgba(194, 49, 82, 0.5));
    border-color: #e94560;
    color: #ffffff;
    font-weight: bold;
}
.db-profile-btn.primary:hover {
    background: linear-gradient(135deg, #e94560, #c62a47);
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.45);
}

/* Главная сетка профиля */

/* Переключатель форм покемона с одинаковым DexID */
.db-profile-forms-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-profile-forms-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-profile-forms-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.db-profile-form-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-profile-form-pill:hover {
    background: rgba(233, 69, 96, 0.25);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.5);
    transform: translateY(-1px);
}
.db-profile-form-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(233, 69, 96, 0.4);
}

.db-profile-hero-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
}
@media (max-width: 900px) {
    
/* Переключатель форм покемона с одинаковым DexID */
.db-profile-forms-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-profile-forms-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-profile-forms-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.db-profile-form-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-profile-form-pill:hover {
    background: rgba(233, 69, 96, 0.25);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.5);
    transform: translateY(-1px);
}
.db-profile-form-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(233, 69, 96, 0.4);
}

.db-profile-hero-grid {
        grid-template-columns: 1fr;
    }
}

/* Левая колонка: Арт, Типы, Описание */
.db-profile-card-left {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
}
.db-profile-card-left::before {
    content: '';
    position: absolute;
    top: -50px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: var(--poke-glow, rgba(233, 69, 96, 0.25));
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}
.db-profile-img-wrap {
    position: relative;
    z-index: 1;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-profile-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.65));
    transform: scale(var(--sprite-scale, 1));
    transform-origin: center center;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.db-profile-img:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.07));
}
.db-profile-img.is-pixel-sprite {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: auto;
    height: auto;
    max-width: 96px;
    max-height: 96px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.db-profile-img.is-pixel-sprite:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.08));
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.85));
}
.db-profile-img.is-gif {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.db-profile-img.is-gif:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.08));
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.85));
}
.db-profile-media-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.db-profile-toggle-group {
    display: inline-flex;
    gap: 2px;
    background: rgba(0, 0, 0, 0.45);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
}
.db-view-mode-btn,
.db-shiny-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    padding: 4px 8px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.db-view-mode-btn:hover,
.db-shiny-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}
.db-view-mode-btn.active,
.db-shiny-btn.active {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.db-profile-shiny-toggle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.db-profile-identity {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.db-profile-dex {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #e94560;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.db-profile-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    word-break: break-word;
}
.db-profile-name-en {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}
.db-profile-types {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.db-profile-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    min-width: 110px;
    max-width: 135px;
    box-sizing: border-box;
    white-space: nowrap;
    letter-spacing: 0.4px;
    backdrop-filter: blur(8px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.db-profile-type-badge:hover {
    transform: translateY(-2px);
}
.db-profile-type-badge img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}
.db-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}
.db-profile-desc-box {
    position: relative;
    z-index: 1;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}

/* Правая колонка: Характеристики, Способности, Защита типов */
.db-profile-card-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.db-profile-section {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 18px 22px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.db-profile-sec-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #e94560;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

/* Характеристики */
.db-profile-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-profile-stat-row {
    display: grid;
    grid-template-columns: 80px 120px 1fr;
    align-items: center;
    gap: 12px;
}
.db-profile-stat-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-profile-stat-num {
    white-space: nowrap;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    font-weight: bold;
    color: #ffffff;
    text-align: right;
}
.db-profile-bar-bg {
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.db-profile-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-profile-stat-total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #ffffff;
}

/* Способности */
.db-profile-abilities-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-profile-ability-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.db-profile-ability-item:hover {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    transform: translateX(3px);
}
.db-profile-ability-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffffff;
}
.db-profile-ability-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Эффективность типов */
.db-profile-efx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 6px;
}
.db-profile-efx-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 4px;
}
.db-profile-efx-type {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.db-profile-efx-val {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
}
.db-efx-super { color: #ff4757; }
.db-efx-resist { color: #2ed573; }
.db-efx-immune { color: #a4b0be; }
.db-efx-norm { color: rgba(255, 255, 255, 0.6); }

/* Нижний блок: Изучаемые приёмы (Movepool) */
.db-profile-learnsets-section {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.db-learnset-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}
.db-learnset-tab-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-learnset-tab-btn:hover {
    background: rgba(233, 69, 96, 0.2);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.4);
}
.db-learnset-tab-btn.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4);
    font-weight: bold;
}
.db-learnset-tab-count {
    background: rgba(0, 0, 0, 0.35);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.55rem;
}

/* Фильтры и поиск внутри таблицы приёмов */
.db-learnset-filter-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.db-learnset-search {
    flex: 1;
    min-width: 200px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.2s;
}
.db-learnset-search:focus {
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.25);
}
.db-learnset-select {
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    outline: none;
}

/* Таблица приёмов */
.db-learnset-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}
.db-learnset-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: left;
}

/* Стили интерактивной 3-позиционной сортировки таблицы приёмов */
.db-learnset-table th.db-sortable-th {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}
.db-learnset-table th.db-sortable-th:hover {
    background: rgba(233, 69, 96, 0.25) !important;
    color: #ffffff !important;
}
.db-learnset-table th.db-sortable-th.active {
    background: rgba(233, 69, 96, 0.35) !important;
    color: #ff6b81 !important;
    border-bottom: 2px solid #ff4757 !important;
}
.db-sort-arrows {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.25);
    vertical-align: middle;
    transition: all 0.2s ease;
}
.db-learnset-table th.db-sortable-th:hover .db-sort-arrows {
    color: rgba(255, 255, 255, 0.85);
}
.db-sort-arrows.active {
    color: #ff4757 !important;
    font-size: 0.8rem;
    filter: drop-shadow(0 0 6px rgba(255, 71, 87, 0.8));
}

.db-learnset-table th {
    background: rgba(15, 23, 42, 0.95);
    padding: 10px 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    user-select: none;
}
.db-learnset-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #ffffff;
    vertical-align: middle;
}
.db-learnset-row {
    cursor: pointer;
    transition: background 0.15s ease;
}
.db-learnset-row:hover {
    background: rgba(233, 69, 96, 0.12);
}
.db-learnset-lvl-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    display: inline-block;
    min-width: 44px;
    text-align: center;
}
.db-learnset-move-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.db-learnset-move-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-learnset-move-name-en {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
}
.db-learnset-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    width: auto;
    min-width: 92px;
    max-width: 130px;
    box-sizing: border-box;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.db-learnset-type-badge img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}

.db-learnset-table th.th-desc,
.db-learnset-table td.td-desc {
    min-width: 240px;
    max-width: 380px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    white-space: normal;
}
.db-learnset-table td.td-prio {
    text-align: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-learnset-table td.td-contact {
    text-align: center;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
}

.db-learnset-cat-img {
    width: 32px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}


/* Стили эффективности типов с учётом способностей */
.efx-ability-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.efx-ability-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 4px;
}
.efx-ability-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.efx-ability-pill:hover {
    background: rgba(233, 69, 96, 0.2);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.4);
}
.efx-ability-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.35);
}
.efx-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
}
.efx-type-chip.has-ability-mod {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.6) !important;
}
.efx-ability-note-badge {
    font-size: 0.52rem;
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    padding: 1px 4px;
    border-radius: 4px;
    margin-left: 2px;
}


/* Стили интерактивного уровня Динамакса / Гигантамакса */


.db-dmax-pill-candy {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 2px;
    filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.8));
    display: inline-block;
}

.db-dmax-candy-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(0 0 6px rgba(255, 0, 127, 0.8));
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.db-dmax-level-switcher:hover 
.db-dmax-pill-candy {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 2px;
    filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.8));
    display: inline-block;
}

.db-dmax-candy-icon {
    transform: scale(1.15) rotate(10deg);
}

.db-dmax-level-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(255, 0, 127, 0.15), rgba(233, 69, 96, 0.1));
    border: 1px solid rgba(255, 0, 127, 0.35);
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(255, 0, 127, 0.2);
}
.db-dmax-level-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #ff007f;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
}
.db-dmax-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.db-dmax-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-dmax-pill:hover {
    background: rgba(255, 0, 127, 0.3);
    color: #ffffff;
    border-color: #ff007f;
    transform: translateY(-1px);
}
.db-dmax-pill.active {
    background: linear-gradient(135deg, #ff007f, #e94560);
    color: #ffffff;
    border-color: #ff007f;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(255, 0, 127, 0.6);
}
.db-profile-bar-fill.dmax-hp-glow {
    background: linear-gradient(90deg, #ff007f, #e94560, #ff4757) !important;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.db-dmax-badge-hp {
    white-space: nowrap;
    font-size: 0.58rem;
    color: #ff007f;
    font-weight: bold;
    margin-left: 4px;
    text-shadow: 0 0 6px rgba(255, 0, 127, 0.5);
}


/* ===== Модальное окно предпросмотра и настройки карточки покемона ===== */
.db-card-customizer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    animation: fadeIn 0.25s ease;
}
.db-card-customizer-modal {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    width: 100%;
    max-width: 960px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.db-card-customizer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.95);
}
.db-card-customizer-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-card-customizer-body {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
@media (max-width: 850px) {
    .db-card-customizer-body {
        grid-template-columns: 1fr;
    }
}
.db-card-preview-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px;
    overflow: auto;
    max-height: 68vh;
}
.db-card-preview-canvas {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
.db-card-settings-pane {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.db-card-setting-group {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-card-setting-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-card-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    user-select: none;
}
.db-card-customizer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.95);
}


.db-profile-nav-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}


/* ==========================================================================
   ITEMS DATABASE STYLES
   ========================================================================== */
.db-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    width: 100%;
}
.db-item-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 165px;
}
.db-item-card:hover {
    border-color: #ff4757;
    background: rgba(233, 69, 96, 0.12);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255, 71, 87, 0.2);
}
.db-item-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.db-item-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.db-item-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.db-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.db-item-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-item-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-item-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: fit-content;
}
.db-item-cat-badge.competitive { background: rgba(233, 69, 96, 0.2); color: #ff6b81; border: 1px solid rgba(233, 69, 96, 0.4); }
.db-item-cat-badge.type_boost { background: rgba(52, 152, 219, 0.2); color: #74b9ff; border: 1px solid rgba(52, 152, 219, 0.4); }
.db-item-cat-badge.plates_memories { background: rgba(0, 206, 201, 0.2); color: #00cec9; border: 1px solid rgba(0, 206, 201, 0.4); }
.db-item-cat-badge.signature { background: rgba(241, 196, 15, 0.2); color: #f1c40f; border: 1px solid rgba(241, 196, 15, 0.4); }
.db-item-cat-badge.berry { background: rgba(46, 204, 113, 0.2); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.4); }
.db-item-cat-badge.mega { background: rgba(155, 89, 182, 0.2); color: #a29bfe; border: 1px solid rgba(155, 89, 182, 0.4); }
.db-item-cat-badge.z_crystal { background: rgba(255, 159, 26, 0.2); color: #ff9f1a; border: 1px solid rgba(255, 159, 26, 0.4); }
.db-item-cat-badge.evolution { background: rgba(255, 107, 129, 0.2); color: #ff6b81; border: 1px solid rgba(255, 107, 129, 0.4); }
.db-item-cat-badge.pokeball { background: rgba(235, 77, 75, 0.2); color: #eb4d4b; border: 1px solid rgba(235, 77, 75, 0.4); }
.db-item-cat-badge.medicine { background: rgba(112, 161, 255, 0.2); color: #70a1ff; border: 1px solid rgba(112, 161, 255, 0.4); }
.db-item-cat-badge.training { background: rgba(30, 144, 255, 0.2); color: #1e90ff; border: 1px solid rgba(30, 144, 255, 0.4); }
.db-item-cat-badge.tera_shard { background: rgba(0, 210, 211, 0.2); color: #00d2d3; border: 1px solid rgba(0, 210, 211, 0.4); }
.db-item-cat-badge.utility { background: rgba(164, 176, 190, 0.2); color: #a4b0be; border: 1px solid rgba(164, 176, 190, 0.4); }

.db-item-desc-preview {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
    margin-top: auto;
    min-height: 64px;
}
.db-item-table-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
}
.db-table-items th.th-desc,
.db-table-items td.td-desc {
    text-align: left;
    min-width: 280px;
    font-size: 0.74rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
}


/* ==========================================================================
   BATTLE MECHANICS: FIELD EFFECTS, STATUSES, GIMMICKS STYLES
   ========================================================================== */

/* --- 1. Field Effects Grid & Cards --- */
.db-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    width: 100%;
}
.db-field-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 220px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-field-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--field-accent, #ff9f43);
    opacity: 0.8;
}
.db-field-card:hover {
    border-color: var(--field-accent, #ff9f43);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 159, 67, 0.2);
}
.db-field-card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.db-field-card-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.db-field-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.db-field-cat-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    margin-left: auto;
}
.db-field-title-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}
.db-field-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.25;
    word-break: break-word;
}
.db-field-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    font-weight: normal;
}
.db-field-duration {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #feca57;
    background: rgba(254, 202, 87, 0.12);
    border: 1px solid rgba(254, 202, 87, 0.25);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    line-height: 1.3;
}
.db-field-desc-preview {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
    margin-top: auto;
}
.db-field-triggers-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.db-field-triggers-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.db-field-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.db-field-pill-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}
.db-field-pill-chip.move {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    color: #ff7675;
}
.db-field-pill-chip.move:hover {
    background: rgba(233, 69, 96, 0.35);
    border-color: #ff4757;
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}
.db-field-pill-chip.ability {
    background: rgba(241, 196, 15, 0.15);
    border-color: rgba(241, 196, 15, 0.4);
    color: #f1c40f;
}
.db-field-pill-chip.ability:hover {
    background: rgba(241, 196, 15, 0.35);
    border-color: #f39c12;
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(241, 196, 15, 0.3);
}
.db-field-pill-chip .en {
    font-size: 0.55rem;
    opacity: 0.65;
    font-style: italic;
}

/* Modal interactive items */
.db-field-interactive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.db-field-interactive-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-field-interactive-item:hover {
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.db-field-interactive-item.move:hover {
    border-color: #ff4757;
}
.db-field-interactive-item.ability:hover {
    border-color: #f1c40f;
}
.db-item-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
}
.db-field-interactive-item.move .db-item-icon-box {
    color: #ff7675;
    background: rgba(233, 69, 96, 0.2);
}
.db-field-interactive-item.ability .db-item-icon-box {
    color: #f1c40f;
    background: rgba(241, 196, 15, 0.2);
}
.db-item-text-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.db-item-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    color: #ffffff;
}
.db-item-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    font-weight: normal;
}
.db-item-type-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
}
.db-item-effect-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.3;
}
.db-item-arrow {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.25);
    transition: transform 0.2s ease, color 0.2s ease;
}
.db-field-interactive-item:hover .db-item-arrow {
    transform: translateX(3px);
    color: #ffffff;
}

/* --- 2. Statuses Grid & Cards --- */
.db-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    width: 100%;
}
.db-status-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 220px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-status-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--status-color, #e84118);
    opacity: 0.8;
}
.db-status-card:hover {
    border-color: var(--status-color, #e84118);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 20px var(--status-glow, var(--status-color, rgba(232, 65, 24, 0.25)));
}
.db-status-card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.db-status-card-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.db-status-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 8px;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
}
.db-status-type-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    margin-left: auto;
}
.db-status-type-badge.non_volatile {
    background: rgba(235, 77, 75, 0.25);
    color: #ff7675;
    border: 1px solid rgba(235, 77, 75, 0.5);
}
.db-status-type-badge.volatile {
    background: rgba(162, 155, 254, 0.25);
    color: #a29bfe;
    border: 1px solid rgba(162, 155, 254, 0.5);
}
.db-status-title-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}
.db-status-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.25;
    word-break: break-word;
}
.db-status-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    font-weight: normal;
}
.db-status-desc-preview {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
    margin-top: auto;
}
.db-status-imm-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.db-status-imm-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.db-status-imm-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

/* --- 3. Gimmicks Grid & Cards --- */
.db-gimmick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    width: 100%;
}
.db-gimmick-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.db-gimmick-card:hover {
    transform: translateY(-4px);
    border-color: var(--gimmick-color, #e056fd);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(224, 86, 253, 0.25);
}
.db-gimmick-banner {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}
.db-gimmick-banner-icon {
    font-size: 1.8rem;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}
.db-gimmick-banner-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.db-gimmick-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.db-gimmick-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}
.db-gimmick-gen-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}
.db-gimmick-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.db-gimmick-short-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}
.db-gimmick-features-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #ff9f43;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.db-gimmick-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.db-gimmick-features-list li {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.35;
}
.db-gimmick-features-list li i {
    font-size: 0.7rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Common detail badges */
.db-detail-trigger-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Mechanic & Detail Modal Header */

/* Status Detail Modal Banner & Download Button */
.db-status-banner {
    border-radius: 14px;
    padding: 14px 18px;
    margin-top: 10px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.db-status-banner-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
}

.db-status-banner-dl-btn:hover {
    background: var(--modal-accent, rgba(255, 255, 255, 0.22));
    border-color: var(--modal-accent, rgba(255, 255, 255, 0.45));
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 10px var(--modal-glow, rgba(255, 255, 255, 0.2));
}

.db-status-banner-dl-btn i {
    font-size: 0.72rem;
}

@media (max-width: 600px) {
    .db-status-banner {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .db-status-banner-right {
        width: 100%;
        justify-content: space-between;
    }
}

.db-mechanic-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    padding-right: 40px;
}
.db-mechanic-modal-icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}
.db-mechanic-modal-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
.db-mechanic-modal-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.db-mechanic-title-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.3rem;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    word-break: break-word;
}
.db-mechanic-title-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    margin-top: -2px;
}
.db-mechanic-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.db-mechanic-cat-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 12px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Interactive Chips for Cures & Immunities */
.db-interactive-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 7px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-interactive-chip.static {
    cursor: default;
}
.db-interactive-chip:not(.static):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.db-interactive-chip.move {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    color: #ff7675;
}
.db-interactive-chip.move:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #ff4757;
    box-shadow: 0 2px 10px rgba(255, 71, 87, 0.35);
}
.db-interactive-chip.ability {
    background: rgba(241, 196, 15, 0.15);
    border-color: rgba(241, 196, 15, 0.4);
    color: #f1c40f;
}
.db-interactive-chip.ability:hover {
    background: rgba(241, 196, 15, 0.3);
    border-color: #f39c12;
    box-shadow: 0 2px 10px rgba(241, 196, 15, 0.35);
}
.db-interactive-chip.item {
    background: rgba(46, 204, 113, 0.15);
    border-color: rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}
.db-interactive-chip.item:hover {
    background: rgba(46, 204, 113, 0.3);
    border-color: #27ae60;
    box-shadow: 0 2px 10px rgba(46, 204, 113, 0.35);
}
.db-interactive-chip.field {
    background: rgba(0, 210, 211, 0.15);
    border-color: rgba(0, 210, 211, 0.4);
    color: #00d2d3;
}
.db-interactive-chip.field:hover {
    background: rgba(0, 210, 211, 0.3);
    border-color: #01a3a4;
    box-shadow: 0 2px 10px rgba(0, 210, 211, 0.35);
}
.db-interactive-chip.poketype {
    background: rgba(162, 155, 254, 0.15);
    border-color: rgba(162, 155, 254, 0.4);
    color: #a29bfe;
}
.db-interactive-chip.switch {
    background: rgba(116, 185, 255, 0.15);
    border-color: rgba(116, 185, 255, 0.4);
    color: #74b9ff;
}
.chip-arrow {
    font-size: 0.65rem;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.db-interactive-chip:hover .chip-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* ==========================================================================
   EXPANDED DATABASE: GIMMICKS, TYPES, NATURES, ADVANCED MECHANICS
   ========================================================================== */

/* 1. Gimmicks Cards & Grid */
.db-gimmick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    width: 100%;
}
.db-gimmick-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
    display: flex;
    flex-direction: column;
}
.db-gimmick-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--gimmick-color, #e056fd)30;
    border-color: var(--gimmick-color, #e056fd);
}
.db-gimmick-banner {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}
.db-gimmick-banner-icon {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #ffffff;
    flex-shrink: 0;
}
.db-gimmick-banner-title {
    flex: 1;
}
.db-gimmick-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.db-gimmick-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}
.db-gimmick-gen-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px 10px;
    border-radius: 20px;
    color: #ffffff;
    white-space: nowrap;
}
.db-gimmick-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
}
.db-gimmick-short-desc {
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}
.db-gimmick-features-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #f1c40f;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-gimmick-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.db-gimmick-features-list li {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.db-gimmick-footer-btn {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: var(--gimmick-color, #e056fd);
}

/* 2. Types Grid & Calculator */
.db-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    width: 100%;
}
.db-type-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.db-type-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px var(--type-color, #ff7675)30;
    border-color: var(--type-color, #ff7675);
}
.db-type-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
}
.db-type-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.db-type-title-box {
    flex: 1;
}
.db-type-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #ffffff;
    font-weight: bold;
}
.db-type-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}
.db-type-badge-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.db-type-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.45;
}
.db-type-matchups-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
    border-radius: 8px;
}
.db-type-matchup-col {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
}
.db-type-matchup-col .label {
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.7);
    min-width: 90px;
}
.db-type-matchup-col .badges-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.db-type-mini-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Type Calculator */
/* Type Calculator (Уязвимости и сопротивления) */
.db-type-calc-container {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(20, 27, 48, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.db-type-calc-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.db-type-calc-title-box h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #00cec9;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.db-type-calc-title-box p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.5;
}

.db-type-calc-selectors-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(0, 0, 0, 0.3);
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.db-calc-row-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-calc-row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.db-calc-type-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Individual Type Button */
.db-calc-type-btn {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--t-color, #64748b);
    color: #e2e8f0;
    border-radius: 10px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    outline: none;
}
.db-calc-type-btn:hover {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--t-color, rgba(255, 255, 255, 0.3));
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.db-calc-type-btn.active {
    background: var(--t-color, #00cec9) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px var(--t-color, #00cec9)88, 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    transform: translateY(-1px) scale(1.04);
    font-weight: 800;
}
.db-calc-type-btn.disabled {
    opacity: 0.35;
    filter: grayscale(0.85);
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}
.db-calc-type-btn-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    flex-shrink: 0;
}

/* "None (1 type)" Button */
.db-calc-none-btn {
    border-left-color: #94a3b8;
    background: rgba(30, 41, 59, 0.5);
}
.db-calc-none-btn i {
    font-size: 0.85rem;
    color: #94a3b8;
}
.db-calc-none-btn.active {
    background: #475569 !important;
    border-color: #94a3b8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(148, 163, 184, 0.4) !important;
}
.db-calc-none-btn.active i {
    color: #ffffff;
}

/* Selected Preview */
.db-type-calc-selected-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(15, 23, 42, 0.8);
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/* Results Section */
.db-type-calc-results {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.db-calc-group {
    background: rgba(15, 23, 42, 0.65);
    border-radius: 12px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 5px solid #888;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}
.db-calc-group.danger-heavy {
    border-left-color: #ff3838;
    background: linear-gradient(90deg, rgba(255, 56, 56, 0.12) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.danger {
    border-left-color: #ff7675;
    background: linear-gradient(90deg, rgba(255, 118, 117, 0.1) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.resist {
    border-left-color: #55efc4;
    background: linear-gradient(90deg, rgba(85, 239, 196, 0.1) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.resist-heavy {
    border-left-color: #00b894;
    background: linear-gradient(90deg, rgba(0, 184, 148, 0.12) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.immune {
    border-left-color: #fdcb6e;
    background: linear-gradient(90deg, rgba(253, 203, 110, 0.1) 0%, rgba(15, 23, 42, 0.65) 100%);
}

.db-calc-group-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-calc-badges-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 768px) {
    .db-type-calc-container {
        padding: 16px;
        gap: 16px;
    }
    .db-type-calc-selectors-block {
        padding: 12px;
    }
    .db-calc-type-btn {
        padding: 5px 9px;
        font-size: 0.72rem;
        gap: 6px;
    }
    .db-calc-type-btn-icon {
        width: 18px;
        height: 18px;
    }
}


/* 3. Natures Grid & Cards */
.db-nature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    width: 100%;
}
.db-nature-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-nature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    border-color: #2ecc71;
}
.db-nature-card.neutral {
    border-color: rgba(255, 255, 255, 0.08);
}
.db-nature-card.neutral:hover {
    border-color: #74b9ff;
}
.db-nature-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.db-nature-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.db-nature-info {
    flex: 1;
}
.db-nature-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: bold;
}
.db-nature-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
}
.db-nature-stats-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.db-nature-stat-plus {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(46, 204, 113, 0.3);
}
.db-nature-stat-minus {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ff7675;
    background: rgba(255, 118, 117, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 118, 117, 0.3);
}
.db-nature-neutral-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #74b9ff;
    background: rgba(116, 185, 255, 0.12);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-nature-meta-row {
    margin-top: auto;
}
.db-nature-mint-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-nature-mint-btn:hover {
    background: rgba(46, 204, 113, 0.2);
    border-color: #2ecc71;
    color: #2ecc71;
}

/* 4. Advanced Mechanics Grid & Cards */
.db-advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 18px;
    width: 100%;
}
/* ===== ADVANCED MECHANICS CARDS ===== */
.db-advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
}
.db-advanced-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
}
.db-advanced-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 18px var(--adv-color, #ff7675)30;
    border-color: var(--adv-color, #ff7675);
}
.db-advanced-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}
.db-advanced-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.db-advanced-title-box {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.db-advanced-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: bold;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
}
.db-advanced-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
    word-break: break-word;
    overflow-wrap: break-word;
}
.db-advanced-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    align-self: flex-start;
}
.db-advanced-desc-preview {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.5;
}
.db-advanced-footer-btn {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: var(--adv-color, #ff7675);
}
.db-math-formula-box {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #00cec9;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 206, 201, 0.3);
    padding: 12px 16px;
    border-radius: 8px;
    margin: 10px 0;
    overflow-x: auto;
}

/* Typography & Highlight Enhancements for Database Modals */
.db-section-subtitle {
    font-family: 'Minecraft', monospace;
    font-size: 0.94rem;
    color: #00cec9;
    margin: 16px 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}
.db-hl-bold {
    color: #ffffff;
    font-weight: 700;
}
.db-hl-italic {
    color: #f1c40f;
    font-style: italic;
}
.db-text-list-item {
    margin-bottom: 9px;
    line-height: 1.65;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.92);
}
.db-text-paragraph {
    margin-bottom: 10px;
    line-height: 1.65;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.88);
}
.db-modal-styled-list {
    margin: 0;
    padding-left: 20px;
    list-style: square;
}
.db-matchup-panel {
    background: rgba(255, 255, 255, 0.03);
    padding: 14px 18px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
}
.db-type-mini-badge.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    filter: brightness(1.15);
}
.stat-boost-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.stat-boost-tag.plus {
    background: rgba(46, 204, 113, 0.18);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
}
.stat-boost-tag.minus {
    background: rgba(255, 118, 117, 0.18);
    color: #ff7675;
    border: 1px solid rgba(255, 118, 117, 0.4);
}
.db-interactive-chip.status {
    background: rgba(162, 155, 254, 0.15);
    border-color: rgba(162, 155, 254, 0.4);
    color: #a29bfe;
}
.db-interactive-chip.status:hover {
    background: rgba(162, 155, 254, 0.3);
    border-color: #6c5ce7;
    box-shadow: 0 2px 10px rgba(108, 92, 231, 0.35);
}
.db-interactive-chip.gimmick {
    background: rgba(224, 86, 253, 0.15);
    border-color: rgba(224, 86, 253, 0.4);
    color: #e056fd;
}
.db-interactive-chip.gimmick:hover {
    background: rgba(224, 86, 253, 0.3);
    border-color: #be2edd;
    box-shadow: 0 2px 10px rgba(224, 86, 253, 0.35);
}

/* ==========================================================================
   OFFICIAL TYPE PILLS, IMAGE ICONS, CARDS & MODAL HERO
   ========================================================================== */

/* Universal Type Pill Badge with Image */
.db-type-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, var(--badge-color, #888) 18%, transparent);
    color: var(--badge-color, #fff);
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    text-shadow: none;
    box-shadow: 0 0 8px color-mix(in srgb, var(--badge-color, #888) 18%, transparent);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
    border: 1px solid color-mix(in srgb, var(--badge-color, #888) 50%, transparent);
    letter-spacing: 0.2px;
    backdrop-filter: blur(6px);
    box-sizing: border-box;
    white-space: nowrap;
}
.db-type-pill-badge.size-sm {
    padding: 3px 10px;
    font-size: 0.64rem;
    min-width: 90px;
    max-width: 125px;
    width: auto;
}
.db-type-pill-badge.size-md {
    padding: 4px 11px;
    font-size: 0.72rem;
    min-width: 94px;
}
.db-type-pill-badge.size-lg {
    padding: 6px 16px;
    font-size: 0.82rem;
    min-width: 114px;
}
.db-type-pill-badge.clickable {
    cursor: pointer;
}
.db-type-pill-badge.clickable:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--badge-color, #888) 32%, transparent);
    border-color: var(--badge-color, #888);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 14px color-mix(in srgb, var(--badge-color, #888) 45%, transparent);
    filter: brightness(1.2);
}
.db-type-pill-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}
.db-type-pill-badge.size-md .db-type-pill-icon {
    width: 16px;
    height: 16px;
}
.db-type-pill-badge.size-lg .db-type-pill-icon {
    width: 18px;
    height: 18px;
}

.db-move-type-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
/* Duplicate pill block removed */

/* Types Grid & Cards */
.db-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    width: 100%;
}
.db-type-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 18px 20px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.db-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45), 0 0 20px var(--type-color, #ff7675)35;
    border-color: var(--type-color, #ff7675);
}
.db-type-card-top-bar {
    display: flex;
    align-items: center;
    gap: 14px;
}
.db-type-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.db-type-card-main-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.db-type-title-area {
    flex: 1;
}
.db-type-title-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    color: #ffffff;
    font-weight: bold;
}
.db-type-title-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}
.db-type-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
}
.db-type-card-matchups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 14px;
    border-radius: 10px;
    margin-top: auto;
}
.db-type-matchup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.74rem;
}
.db-type-matchup-row .matchup-lbl {
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.7);
    min-width: 95px;
    flex-shrink: 0;
    margin-top: 0;
}
.db-type-matchup-row .matchup-badges-flow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}
.db-type-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: var(--type-color, #ff7675);
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Type Modal Hero Banner */
.db-type-modal-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid;
}
.db-type-modal-img-wrap {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.db-type-modal-big-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.db-type-modal-title-box {
    flex: 1;
}
.db-type-modal-top-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.db-type-modal-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.4rem;
    color: #ffffff;
    margin: 0;
}
.db-type-modal-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    margin-top: 2px;
}

/* Matchup Structured Panel */
.db-type-detail-modal {
    max-width: 860px !important;
}
.db-matchup-structured-panel {
    background: rgba(255, 255, 255, 0.03);
    padding: 16px 20px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.db-matchup-stat-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-matchup-stat-row .row-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
}
.db-matchup-stat-row.super .row-title { color: #55efc4; }
.db-matchup-stat-row.not-very .row-title { color: #fdcb6e; }
.db-matchup-stat-row.weak .row-title { color: #ff7675; }
.db-matchup-stat-row.resist .row-title { color: #00cec9; }
.db-matchup-stat-row.immune .row-title { color: #f1c40f; }

.db-matchup-stat-row .badges-wrap {
    display: flex;
    column-gap: 10px;
    row-gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.empty-val {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Minecraft', monospace;
}
.db-type-calc-selected-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.25);
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Round Type Icon Circles for Card Preview */
.db-type-icon-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    outline: none;
}
.db-type-icon-circle:hover {
    transform: translateY(-2px) scale(1.18);
    box-shadow: none;
    border-color: transparent;
    filter: brightness(1.2) drop-shadow(0 2px 8px var(--badge-color, rgba(255, 255, 255, 0.5)));
}
.db-type-circle-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
    pointer-events: none;
}

/* Modal Description Text Fix */
.db-detail-desc-full {
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    border-left: 4px solid var(--badge-color, #ff7675) !important;
}
.db-type-detail-text {
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

/* Gimmicks Tables: Z-Moves & Max-Moves */
.db-gimmick-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.db-gimmick-table th {
    background: rgba(255, 255, 255, 0.08);
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: #00cec9;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.db-gimmick-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}
.db-gimmick-move-row:hover td {
    background: rgba(255, 255, 255, 0.04);
}
.db-z-move-name-ru, .db-max-move-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: bold;
}
.db-z-move-name-en, .db-max-move-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
}

/* Max Guard Golden Shield Banner */
.db-max-guard-banner {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.2) 0%, rgba(211, 84, 0, 0.12) 100%);
    border: 2px solid #f1c40f;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 16px 0;
    box-shadow: 0 6px 20px rgba(241, 196, 15, 0.25);
}
.db-max-guard-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(241, 196, 15, 0.25);
    border: 2px solid #f1c40f;
    color: #f1c40f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(241, 196, 15, 0.4);
}
.db-max-guard-info {
    flex: 1;
}
.db-max-guard-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #f1c40f;
    font-weight: bold;
    margin-bottom: 6px;
}
.db-max-guard-desc {
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

/* Move Modal Actions Row */
.db-move-actions-row {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}
.db-move-learners-btn {
    flex: 1;
    background: linear-gradient(135deg, #0984e3 0%, #00cec9 100%);
    border: none;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 12px 18px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(9, 132, 227, 0.4);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.db-move-learners-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 206, 201, 0.5);
    filter: brightness(1.1);
}

/* Move Learners Modal & Grid */
.db-learners-modal {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.db-learners-header {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 14px;
}
.db-learners-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
}
.db-learners-subtitle {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #00cec9;
    margin-top: 4px;
}
.db-learners-body {
    overflow-y: auto;
    max-height: 65vh;
    padding-right: 6px;
}
.db-learners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.db-learner-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-learner-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 206, 201, 0.25);
}
.db-learner-img-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.db-learner-img-wrap img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
}
.db-learner-info {
    flex: 1;
    min-width: 0;
}
.db-learner-dex {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
}
.db-learner-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-learner-types {
    display: flex;
    gap: 4px;
    margin: 4px 0;
}
.db-learner-method {
    font-size: 0.7rem;
    color: #fdcb6e;
    font-family: 'Minecraft', monospace;
}
.db-no-learners-msg {
    text-align: center;
    padding: 30px 20px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
}

/* Type Matrix 18x18 Table */
.db-type-matrix-container {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px 20px;
    width: 100%;
}
.db-type-matrix-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
}
.db-type-matrix-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.legend-box {
    width: 26px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.72rem;
}
.db-matrix-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.db-type-matrix-table {
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
    min-width: 780px;
}
.db-matrix-corner {
    background: rgba(0, 0, 0, 0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #00cec9;
    padding: 6px;
    text-align: center;
    border-radius: 6px;
    min-width: 120px;
}
.corner-atk { color: #55efc4; }
.corner-def { color: #74b9ff; }
.db-matrix-th-col {
    padding: 4px;
    text-align: center;
}
.db-matrix-header-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.db-matrix-hdr-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.db-matrix-th-row {
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffffff;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.db-matrix-th-row:hover {
    transform: scale(1.04);
    filter: brightness(1.15);
}
.db-matrix-row-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.db-matrix-cell {
    text-align: center;
    vertical-align: middle;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.75rem;
    border-radius: 6px;
    height: 34px;
    min-width: 34px;
    transition: transform 0.15s ease;
}
.db-matrix-cell:hover {
    transform: scale(1.2);
    z-index: 2;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.mult-2 {
    background: #2ed573 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.mult-half {
    background: #ff4757 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.mult-0 {
    background: #2f3542 !important;
    color: #a4b0be !important;
    border: 1px solid rgba(255,255,255,0.1);
}
.mult-1 {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.2);
}

/* 5x5 Nature Matrix Table */
.db-nature-matrix-container {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 18px 22px;
    width: 100%;
}
.db-nature-matrix-header {
    margin-bottom: 16px;
}
.db-nature-matrix-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    color: #ffffff;
    margin: 0;
}
.db-nature-matrix-header p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 6px 0 0 0;
}
.db-nature-matrix-table {
    border-collapse: separate;
    border-spacing: 6px;
    width: 100%;
    min-width: 720px;
}
.db-nature-corner {
    background: rgba(0, 0, 0, 0.35);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    min-width: 130px;
}
.corner-up { color: #55efc4; font-weight: bold; }
.corner-down { color: #ff7675; font-weight: bold; }
.db-nature-matrix-th-top {
    background: rgba(255, 255, 255, 0.04);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #55efc4;
}
.db-nature-matrix-th-left {
    background: rgba(255, 255, 255, 0.04);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #ff7675;
}
.db-nature-matrix-cell {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-nature-matrix-cell:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 206, 201, 0.25);
}
.db-nature-matrix-cell.neutral-cell {
    background: rgba(241, 196, 15, 0.1);
    border-color: rgba(241, 196, 15, 0.3);
}
.cell-nature-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: bold;
}
.cell-nature-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
}
.cell-mint {
    font-size: 0.65rem;
    color: #55efc4;
    font-family: 'Minecraft', monospace;
    margin-top: 4px;
}

/* Gimmick Standalone Table Views & Quick Buttons */
.db-gimmick-standalone-container {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 20px 24px;
    width: 100%;
}
.db-gimmick-standalone-header {
    margin-bottom: 20px;
}
.db-gimmick-standalone-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
}
.db-gimmick-standalone-header p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 6px 0 0 0;
}
.db-gimmick-quick-actions {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-gimmick-quick-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    font-weight: bold;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.db-gimmick-quick-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 206, 201, 0.25);
}
.db-gimmick-quick-btn.gold {
    background: rgba(241, 196, 15, 0.12);
    border-color: rgba(241, 196, 15, 0.4);
    color: #f1c40f;
}
.db-gimmick-quick-btn.gold:hover {
    background: rgba(241, 196, 15, 0.25);
    border-color: #f1c40f;
    box-shadow: 0 4px 12px rgba(241, 196, 15, 0.35);
}

/* Muted Eye-Friendly Type Matrix Colors */
.db-matrix-cell.mult-2, .legend-box.mult-2 {
    background: rgba(46, 204, 113, 0.22) !important;
    color: #86efac !important;
    border: 1px solid rgba(46, 204, 113, 0.45) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.db-matrix-cell.mult-half, .legend-box.mult-half {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.38) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.db-matrix-cell.mult-0, .legend-box.mult-0 {
    background: rgba(30, 41, 59, 0.85) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    text-shadow: none;
}
.db-matrix-cell.mult-1, .legend-box.mult-1 {
    background: rgba(255, 255, 255, 0.02) !important;
    color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.035) !important;
}
.db-matrix-cell {
    text-align: center;
    vertical-align: middle;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    border-radius: 6px;
    height: 32px;
    min-width: 32px;
    transition: all 0.15s ease;
}
.db-matrix-cell:hover {
    transform: scale(1.15);
    z-index: 2;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.4);
    filter: brightness(1.2);
}

/* Muted Soft Type Matrix Headers */
.db-matrix-header-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: color-mix(in srgb, var(--hdr-color, #888) 32%, rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid color-mix(in srgb, var(--hdr-color, #888) 55%, transparent) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: all 0.2s ease;
}
.db-matrix-header-badge:hover {
    background: color-mix(in srgb, var(--hdr-color, #888) 50%, rgba(15, 23, 42, 0.95)) !important;
    border-color: var(--hdr-color, #888) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 8px var(--hdr-color, #888);
}

.db-matrix-th-row {
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    color: #ffffff;
    white-space: nowrap;
    background: color-mix(in srgb, var(--row-color, #888) 32%, rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid color-mix(in srgb, var(--row-color, #888) 55%, transparent) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    transition: all 0.2s ease;
}
.db-matrix-th-row:hover {
    background: color-mix(in srgb, var(--row-color, #888) 50%, rgba(15, 23, 42, 0.95)) !important;
    border-color: var(--row-color, #888) !important;
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 10px color-mix(in srgb, var(--row-color, #888) 40%, transparent);
}

/* BP Conversion Micro-Calculators */
.db-bp-calc-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(26, 38, 70, 0.8) 100%);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 14px;
    padding: 18px 22px;
    margin: 18px 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.db-bp-calc-header h3 {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #00cec9;
    margin: 0;
}
.db-bp-calc-header p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 4px 0 14px 0;
}
.db-bp-calc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.db-bp-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
    align-items: flex-start;
    width: fit-content;
}
.db-bp-input-wrap label {
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.db-bp-calc-box .num-input-group {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: fit-content !important;
    align-self: flex-start !important;
    border: 1px solid rgba(0, 206, 201, 0.5) !important;
    background: #0f172a !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
}
.db-bp-calc-box .num-input-group .num-btn {
    width: 34px !important;
    height: 36px !important;
    background: rgba(0, 206, 201, 0.2) !important;
    color: #00cec9 !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s, transform 0.1s !important;
    flex-shrink: 0 !important;
}
.db-bp-calc-box .num-input-group .num-btn:hover {
    background: rgba(0, 206, 201, 0.4) !important;
    color: #ffffff !important;
}
.db-bp-calc-box .num-input-group input[type="number"],
.db-bp-clean-input {
    width: 56px !important;
    height: 36px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.95rem !important;
    font-weight: bold !important;
    text-align: center !important;
    border: none !important;
    outline: none !important;
    padding: 0 2px !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
}
.db-bp-input-wrap select {
    background: #0f172a;
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #ffffff;
    padding: 8px 14px;
    height: 38px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    outline: none;
    transition: all 0.2s ease;
}
.db-bp-input-wrap select:focus {
    border-color: #00cec9;
    box-shadow: 0 0 0 3px rgba(0, 206, 201, 0.2);
}
.db-bp-quick-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 220px;
}
.db-bp-quick-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    margin-right: 2px;
}
.db-bp-quick-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 5px 9px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.db-bp-quick-btn:hover {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #ffffff;
}
.db-bp-quick-btn.active {
    background: #00cec9;
    border-color: #00cec9;
    color: #0f172a;
    font-weight: bold;
}
.db-bp-result-wrap {
    background: rgba(0, 206, 201, 0.12);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    padding: 8px 18px;
    text-align: center;
    min-width: 170px;
    margin-left: auto;
}
.db-bp-result-wrap .res-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-bp-result-wrap .res-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    font-weight: bold;
    color: #ffffff;
    margin-top: 2px;
}

/* Clean & Compact Learners Modal */
.db-learners-modal {
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.db-learners-header {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
}
.db-learners-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    color: #ffffff;
    margin: 0;
}
.db-learners-subtitle {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: #00cec9;
    margin-top: 4px;
}
.db-learners-body {
    overflow-y: auto;
    max-height: 68vh;
    padding: 4px 6px 10px 2px;
}
.db-learners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}
.db-learner-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.18s ease;
}
.db-learner-card:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.25);
}
.db-learner-img-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}
.db-learner-img-wrap img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
}
.db-learner-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.db-learner-top-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.db-learner-dex {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}
.db-learner-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-learner-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}
.db-learner-types {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.db-learner-types .db-type-icon-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}
.db-learner-types .db-type-icon-circle img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.db-learner-method {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #f1c40f;
    background: rgba(241, 196, 15, 0.12);
    border: 1px solid rgba(241, 196, 15, 0.3);
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

/* Move Modal Action Buttons Equal 50% Width */
.db-move-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 18px !important;
}

.db-move-actions-row > button,
.db-move-actions-row .db-move-learners-btn,
.db-move-actions-row .db-detail-download {
    flex: 1 1 0 !important;
    width: 50% !important;
    min-width: 0 !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.8rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.db-move-actions-row .db-move-learners-btn {
    background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%) !important;
    border: 1px solid rgba(0, 206, 201, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 180, 219, 0.3) !important;
}

.db-move-actions-row .db-move-learners-btn:hover {
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 180, 219, 0.45) !important;
}

.db-move-actions-row .db-detail-download {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.db-move-actions-row .db-detail-download:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

/* Metamorphosis Section Styles */
.db-meta-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 30px;
}
.db-meta-explain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 18px;
}
.db-meta-explain-card {
    background: rgba(15, 23, 42, 0.85);
    border-radius: 14px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.db-meta-explain-card.z-card {
    border: 1px solid rgba(241, 196, 15, 0.4);
    border-top: 4px solid #f1c40f;
}
.db-meta-explain-card.max-card {
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-top: 4px solid #00cec9;
}
.db-meta-explain-card .card-icon {
    font-size: 1.6rem;
    margin-bottom: 8px;
}
.db-meta-explain-card.z-card .card-icon { color: #f1c40f; }
.db-meta-explain-card.max-card .card-icon { color: #00cec9; }

.db-meta-explain-card h3 {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff;
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.db-meta-explain-card .card-text p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
    margin: 0 0 8px 0;
}

.db-meta-compare-results {
    display: flex;
    gap: 12px;
    flex: 2;
    min-width: 320px;
    flex-wrap: wrap;
}
.meta-sim-card {
    flex: 1;
    min-width: 150px;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.meta-sim-card.z-sim {
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.35);
}
.meta-sim-card.max-sim {
    background: rgba(0, 206, 201, 0.1);
    border: 1px solid rgba(0, 206, 201, 0.35);
}
.meta-sim-card .sim-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.meta-sim-card.z-sim .sim-tag { color: #f1c40f; }
.meta-sim-card.max-sim .sim-tag { color: #00cec9; }

.meta-sim-card .sim-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: #ffffff;
}
.meta-sim-card .sim-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    font-weight: bold;
    color: #ffffff;
}
.meta-sim-card.z-sim .sim-val { color: #f1c40f; }
.meta-sim-card.max-sim .sim-val { color: #00cec9; }
.meta-sim-card .sim-val span { font-size: 0.75rem; opacity: 0.8; }

.meta-sim-card .sim-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.35;
    margin-top: 2px;
}

/* Gimmick Moves Calculation Modal Styles */
.db-gimmick-calc-action-btn {
    width: 100% !important;
    height: 50px !important;
    border-radius: 12px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.92rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
}

.db-gimmick-calc-action-btn.z-btn {
    background: linear-gradient(135deg, #f1c40f 0%, #e67e22 100%) !important;
    color: #1a1a2e !important;
    box-shadow: 0 4px 18px rgba(241, 196, 15, 0.35) !important;
}
.db-gimmick-calc-action-btn.z-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(241, 196, 15, 0.55) !important;
}

.db-gimmick-calc-action-btn.max-btn {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(0, 206, 201, 0.35) !important;
}
.db-gimmick-calc-action-btn.max-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 206, 201, 0.55) !important;
}

/* Modal Popup Window */
.db-calc-moves-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 15, 30, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.db-calc-moves-modal {
    width: 95vw;
    max-width: 1300px;
    height: 90vh;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    padding: 24px 28px;
}

.db-calc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 14px;
    margin-bottom: 14px;
}
.db-calc-header-title h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0 0 4px 0;
}
.db-calc-header-title p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.db-calc-modal-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.db-calc-mode-switch {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.calc-mode-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 18px;
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.calc-mode-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}
.calc-mode-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(233, 69, 96, 0.4);
}

.db-calc-filters-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.db-calc-search-wrap {
    flex: 2;
    min-width: 240px;
    position: relative;
}
.db-calc-search-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}
.db-calc-search-wrap input {
    width: 100%;
    height: 40px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 0 14px 0 38px;
    color: #ffffff;
    font-size: 0.8rem;
    font-family: 'Minecraft', monospace;
    outline: none;
    box-sizing: border-box;
}
.db-calc-search-wrap input:focus {
    border-color: #00cec9;
}

.db-calc-select-wrap select {
    height: 40px;
    background: #151a30;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 0 12px;
    color: #ffffff;
    font-size: 0.78rem;
    font-family: 'Minecraft', monospace;
    outline: none;
    cursor: pointer;
}

.db-calc-counter {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #00cec9;
    padding: 6px 14px;
    background: rgba(0, 206, 201, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(0, 206, 201, 0.25);
    white-space: nowrap;
}

.db-calc-table-scroll {
    flex: 1;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(10, 15, 30, 0.5);
}

.db-calc-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.db-calc-table th {
    position: sticky;
    top: 0;
    background: #0f172a;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 12px 14px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
    z-index: 2;
}

.db-calc-move-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
    cursor: pointer;
}
.db-calc-move-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}
.db-calc-move-row:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}
.db-calc-move-row td {
    padding: 10px 12px;
    vertical-align: middle;
    font-size: 0.78rem;
}

.db-move-title-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.db-move-names .name-ru {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.82rem;
    color: #ffffff;
}
.db-move-names .name-en {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.db-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 8px;
}
.db-meta-cell.z-cell {
    background: rgba(241, 196, 15, 0.06);
    border: 1px solid rgba(241, 196, 15, 0.2);
}
.db-meta-cell.max-cell {
    background: rgba(0, 206, 201, 0.06);
    border: 1px solid rgba(0, 206, 201, 0.2);
}

.meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.meta-bp-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
}
.meta-bp-badge.z-badge {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
    border: 1px solid rgba(241, 196, 15, 0.4);
}
.meta-bp-badge.max-badge {
    background: rgba(0, 206, 201, 0.2);
    color: #00cec9;
    border: 1px solid rgba(0, 206, 201, 0.4);
}
.meta-bp-badge.guard-badge {
    background: rgba(85, 239, 196, 0.2);
    color: #55efc4;
    border: 1px solid rgba(85, 239, 196, 0.4);
}

.meta-name {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.78rem;
}
.meta-sub, .meta-effect {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.3;
}

/* Card Customizer Radius & Shadow Presets */
.db-card-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.db-card-custom-slider {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    accent-color: #e94560;
}
.db-setting-num-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #00cec9;
    background: rgba(0, 206, 201, 0.12);
    border: 1px solid rgba(0, 206, 201, 0.3);
    padding: 3px 8px;
    border-radius: 6px;
    min-width: 38px;
    text-align: center;
}
.db-preset-pills-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.db-preset-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.db-preset-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}
.db-preset-pill.active {
    background: #e94560;
    border-color: #e94560;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
}


/* ==========================================================================
   2-MODE SITE SWITCHER (МИНИ-ИГРЫ / БАЗА ДАННЫХ)
   ========================================================================== */
.mode-switcher-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(26, 38, 70, 0.75) 100%) !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(233, 69, 96, 0.05) !important;
    backdrop-filter: blur(14px) !important;
}

.menu-header-brand {
    flex: 1;
    text-align: center;
}

.menu-header-brand h1 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    color: #e94560;
    text-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
    letter-spacing: 0.5px;
}

.menu-header-brand p {
    margin: 4px 0 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
}

.site-mode-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: rgba(26, 26, 46, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.92rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
}

.site-mode-btn i {
    font-size: 1.05rem;
    transition: transform 0.2s ease;
}

.site-mode-btn:hover {
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.5);
    background: rgba(233, 69, 96, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.25);
}

.site-mode-btn:hover i {
    transform: scale(1.15);
}

.site-mode-btn.active {
    background: linear-gradient(135deg, #e94560 0%, #c62a47 100%) !important;
    border-color: #ff6b81 !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(233, 69, 96, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.02);
}

#modeBtnDatabase.site-mode-btn:hover {
    border-color: rgba(0, 206, 201, 0.5);
    background: rgba(0, 206, 201, 0.15);
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.25);
}

#modeBtnDatabase.site-mode-btn.active {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%) !important;
    border-color: #81ecec !important;
    box-shadow: 0 0 22px rgba(0, 206, 201, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

@media (max-width: 960px) {
    .mode-switcher-header {
        flex-direction: column;
        gap: 14px;
    }
    .site-mode-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   DATABASE TABS (STYLING MATCHING MINI-GAMES)
   ========================================================================== */
.db-subtabs-container {
    margin-bottom: 26px !important;
    margin-top: 6px !important;
}

.db-subtabs-container .tab-btn.game-tab {
    position: relative;
    overflow: hidden;
}

/* Pokemon - Rose Neon */
.db-subtabs-container #dbSubTabPokemon.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.3), rgba(198, 42, 71, 0.5)) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 35px rgba(233, 69, 96, 0.4), 0 0 70px rgba(233, 69, 96, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.8) !important;
}
.db-subtabs-container #dbSubTabPokemon.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #e94560, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #e94560, 0 0 30px rgba(233, 69, 96, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}

/* Abilities - Gold Neon */
.db-subtabs-container #dbSubTabAbilities {
    border-color: rgba(255, 215, 0, 0.3) !important;
    background: linear-gradient(145deg, rgba(40, 30, 10, 0.5), rgba(60, 40, 10, 0.4)) !important;
}
.db-subtabs-container #dbSubTabAbilities:hover {
    border-color: #ffd700 !important;
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 215, 0, 0.1) !important;
}
.db-subtabs-container #dbSubTabAbilities.active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(200, 150, 0, 0.4)) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.4), 0 0 70px rgba(255, 215, 0, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
}
.db-subtabs-container #dbSubTabAbilities.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #ffd700, 0 0 30px rgba(255, 215, 0, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}
.db-subtabs-container #dbSubTabAbilities:hover i,
.db-subtabs-container #dbSubTabAbilities.active i {
    color: #ffd700 !important;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
}

/* Moves - Cyan Neon */
.db-subtabs-container #dbSubTabMoves {
    border-color: rgba(0, 206, 201, 0.3) !important;
    background: linear-gradient(145deg, rgba(10, 35, 45, 0.5), rgba(15, 45, 60, 0.4)) !important;
}
.db-subtabs-container #dbSubTabMoves:hover {
    border-color: #00cec9 !important;
    box-shadow: 0 8px 30px rgba(0, 206, 201, 0.3), inset 0 1px 0 rgba(0, 206, 201, 0.1) !important;
}
.db-subtabs-container #dbSubTabMoves.active {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.25), rgba(9, 132, 227, 0.4)) !important;
    border-color: #00cec9 !important;
    box-shadow: 0 0 35px rgba(0, 206, 201, 0.4), 0 0 70px rgba(0, 206, 201, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(0, 206, 201, 0.8) !important;
}
.db-subtabs-container #dbSubTabMoves.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00cec9, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #00cec9, 0 0 30px rgba(0, 206, 201, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}
.db-subtabs-container #dbSubTabMoves:hover i,
.db-subtabs-container #dbSubTabMoves.active i {
    color: #00cec9 !important;
    filter: drop-shadow(0 0 15px rgba(0, 206, 201, 0.9));
}

/* Items - Purple Neon */
.db-subtabs-container #dbSubTabItems {
    border-color: rgba(108, 92, 231, 0.3) !important;
    background: linear-gradient(145deg, rgba(30, 20, 50, 0.5), rgba(45, 30, 70, 0.4)) !important;
}
.db-subtabs-container #dbSubTabItems:hover {
    border-color: #a29bfe !important;
    box-shadow: 0 8px 30px rgba(108, 92, 231, 0.3), inset 0 1px 0 rgba(108, 92, 231, 0.1) !important;
}
.db-subtabs-container #dbSubTabItems.active {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.25), rgba(162, 155, 254, 0.4)) !important;
    border-color: #a29bfe !important;
    box-shadow: 0 0 35px rgba(108, 92, 231, 0.4), 0 0 70px rgba(108, 92, 231, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(162, 155, 254, 0.8) !important;
}
.db-subtabs-container #dbSubTabItems.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #a29bfe, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #a29bfe, 0 0 30px rgba(108, 92, 231, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}
.db-subtabs-container #dbSubTabItems:hover i,
.db-subtabs-container #dbSubTabItems.active i {
    color: #a29bfe !important;
    filter: drop-shadow(0 0 15px rgba(162, 155, 254, 0.9));
}


/* ==========================================================================
   GAMES MODE WRAP (UNIFIED BLUE CARD WITH EMBEDDED TABS)
   ========================================================================== */
.games-mode-wrap {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    padding: 24px 30px 30px !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(233, 69, 96, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 30px !important;
}

.games-mode-wrap > .tabs {
    margin-bottom: 24px !important;
}

.games-mode-wrap > .tab-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
}

@media (max-width: 768px) {
    .games-mode-wrap {
        padding: 16px 14px 20px !important;
        border-radius: 16px !important;
    }
}


/* ==========================================================================
   WIDTH CONSTRAINT FIX FOR 2-MODE CONTAINERS
   ========================================================================== */
.main-menu {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#tabDatabase {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.games-mode-wrap {
    max-width: 1200px !important;
    margin: 0 auto 30px auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   TOP BAR BRAND & CENTERED MODE SWITCHER
   ========================================================================== */
.top-bar-brand {
    text-align: center;
    flex: 1;
    margin: 0 15px;
    pointer-events: none;
}

.top-bar-brand h1 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 1.12rem;
    color: #e94560;
    text-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.top-bar-brand p {
    margin: 2px 0 0;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.2;
}

.mode-switcher-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 10px 20px !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(26, 38, 70, 0.75) 100%) !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(233, 69, 96, 0.05) !important;
    backdrop-filter: blur(14px) !important;
}

.mode-switcher-header .site-mode-btn {
    min-width: 200px;
    justify-content: center;
}

@media (max-width: 768px) {
    .user-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 20px;
    }
    .top-bar-brand {
        order: 2;
        width: 100%;
        margin: 4px 0 0 0;
    }
    .top-bar-brand h1 {
        font-size: 0.95rem;
    }
    .top-bar-brand p {
        font-size: 0.58rem;
    }
    .mode-switcher-header {
        gap: 10px !important;
        padding: 8px 12px !important;
    }
    .mode-switcher-header .site-mode-btn {
        min-width: 0;
        flex: 1;
        padding: 10px 12px;
        font-size: 0.75rem;
    }
}


/* ==========================================================================
   TEAM BUILDER (РЕЖИМ СОЗДАТЬ КОМАНДУ)
   ========================================================================== */
#modeBtnTeambuilder.site-mode-btn:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.15);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
}

#modeBtnTeambuilder.site-mode-btn.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(16, 185, 129, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.teambuilder-mode-wrap {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    padding: 24px 30px 30px !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tb-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.tb-team-name-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 280px;
}

.tb-team-name-group .tb-icon {
    font-size: 1.6rem;
    color: #10b981;
}

.tb-team-name-input {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 12px;
    padding: 10px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    outline: none;
    flex: 1;
}

.tb-team-name-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.tb-team-select {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    outline: none;
    cursor: pointer;
}

.tb-actions-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tb-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(26, 26, 46, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 8px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.tb-btn.primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #34d399;
}

.tb-btn.primary:hover {
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
}

.tb-btn.danger {
    color: #ff6b81;
    border-color: rgba(233, 69, 96, 0.4);
}

.tb-btn.danger:hover {
    background: rgba(233, 69, 96, 0.2);
}

.tb-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

.tb-slot-card {
    background: rgba(26, 26, 46, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}

.tb-slot-card:hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.tb-empty-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 20px;
}

.tb-empty-slot:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.tb-empty-slot-icon {
    font-size: 2.2rem;
    color: #10b981;
    margin-bottom: 10px;
}

.tb-empty-slot-title {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 4px;
}

.tb-empty-slot-sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}

.tb-slot-header {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-slot-avatar {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}

.tb-slot-avatar img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.tb-slot-info {
    flex: 1;
    min-width: 0;
}

.tb-slot-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.tb-slot-name {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-slot-eng {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-slot-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: #ff6b81;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px;
}

.tb-type-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.tb-slot-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tb-field-row label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    width: 100px;
    flex-shrink: 0;
}

.tb-input, .tb-select {
    flex: 1;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 10px;
    color: #fff;
    font-size: 0.75rem;
    outline: none;
}

.tb-input:focus, .tb-select:focus {
    border-color: #10b981;
}

.tb-moves-block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-moves-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
}

.tb-moves-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tb-move-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-move-item:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.tb-move-num {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #10b981;
}

.tb-move-name {
    font-size: 0.72rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-move-empty {
    color: rgba(255, 255, 255, 0.35);
}

/* Synergy Section */
.tb-synergy-section {
    background: rgba(26, 26, 46, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 20px;
}

.tb-synergy-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #10b981;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-no-synergy {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    padding: 20px;
}

.tb-synergy-table-wrap {
    overflow-x: auto;
}

.tb-synergy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.tb-synergy-table th, .tb-synergy-table td {
    padding: 8px 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-synergy-table th {
    background: rgba(15, 23, 42, 0.8);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
}

.tb-syn-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.tb-syn-pname {
    font-size: 0.65rem;
    margin-top: 2px;
}

.tb-eff-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    font-size: 0.72rem !important;
    font-family: 'Minecraft', monospace !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.85) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.eff-weak4 { background: #b71540 !important; color: #ffffff !important; }
.eff-weak { background: #e55039 !important; color: #ffffff !important; }
.eff-neutral { color: rgba(255, 255, 255, 0.45) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; border: none !important; box-shadow: none !important; }
.eff-resist { background: #00b894 !important; color: #ffffff !important; }
.eff-resist4 { background: #0984e3 !important; color: #ffffff !important; }
.eff-immune { background: #6c5ce7 !important; color: #ffffff !important; }

.tb-weak-count { color: #e55039; font-weight: bold; }
.tb-resist-count { color: #38ada9; font-weight: bold; }

/* Modals */
.tb-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tb-modal-content {
    background: #1a1a2e;
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 20px;
    width: 100%;
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.tb-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.tb-modal-header h3 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    font-size: 1.1rem;
}

.tb-modal-close {
    background: none;
    border: none;
    color: #ff6b81;
    font-size: 1.2rem;
    cursor: pointer;
}

.tb-modal-search {
    position: relative;
    margin-bottom: 14px;
}

.tb-modal-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
}

.tb-modal-search input {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 14px 10px 36px;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
    box-sizing: border-box;
}

.tb-modal-list {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    padding-right: 6px;
}

.tb-poke-pick-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-poke-pick-card:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    transform: translateY(-2px);
}

.tb-poke-pick-card img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 4px;
}

.tb-poke-pick-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-poke-pick-eng {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

.tb-move-pick-item {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-move-pick-item:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.tb-move-pick-left {
    display: flex;
    align-items: center;
}

.tb-move-pick-right {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    gap: 12px;
}

.tb-showdown-textarea {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    outline: none;
    box-sizing: border-box;
    resize: vertical;
}



/* ==========================================================================
   TEAMBUILDER NATIVE DATABASE MODAL STYLES
   ========================================================================== */
.tb-db-modal-content {
    max-width: 1200px !important;
    width: 95vw !important;
    height: 92vh !important;
    max-height: 92vh !important;
    background: #0f172a !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 28px !important;
    box-sizing: border-box !important;
    border-radius: 24px !important;
}

.tb-modal-count-badge {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: #34d399;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    white-space: nowrap;
}

.tb-modal-cards-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 10px 4px 20px;
    margin-top: 4px;
}

.tb-modal-cards-wrap .db-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 16px !important;
}

.tb-selectable-card {
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none;
}

.tb-selectable-card:hover {
    border-color: #10b981 !important;
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 24px rgba(16, 185, 129, 0.3) !important;
}

.tb-selectable-card:hover::before {
    background: linear-gradient(90deg, transparent, #10b981, transparent) !important;
    opacity: 1 !important;
}




/* ==========================================================================
   ADVANCED TEAM BUILDER STYLES (IV/EV, STATS, ITEMS, TERA) - 100% MINECRAFT FONT
   ========================================================================== */
.teambuilder-mode-wrap,
.teambuilder-mode-wrap *,
.tb-modal-content,
.tb-modal-content *,
.tb-slot-card,
.tb-slot-card *,
.tb-stat-editor-row,
.tb-stat-editor-row *,
.tb-ev-presets,
.tb-ev-presets *,
.tb-ev-counter,
.tb-stat-table-header span,
.tb-stat-chip,
.tb-stat-chip *,
.tb-stat-ed-name *,
.tb-stat-ed-final *,
.tb-stat-ed-ev *,
.tb-stat-ed-iv *,
.tb-preset-btn,
.tb-btn,
.tb-btn *,
.tb-tera-toggle-label,
.tb-tera-toggle-label *,
.tb-iv-max-btn {
    font-family: 'Minecraft', monospace !important;
}

/* Ensure Font Awesome icons are NEVER overridden by Minecraft font anywhere in teambuilder or modals */
.teambuilder-mode-wrap i,
.teambuilder-mode-wrap [class*="fa-"],
.tb-modal-content i,
.tb-modal-content [class*="fa-"],
.tb-top-bar i,
.tb-top-bar [class*="fa-"],
.tb-btn i,
.tb-btn [class*="fa-"],
.tb-slot-card i,
.tb-slot-card [class*="fa-"],
.tb-gen-modal-content i,
.tb-gen-modal-content [class*="fa-"],
.tb-gen-poke-card i,
.tb-gen-poke-card [class*="fa-"],
i.fas, i.far, i.fab, i.fa, [class*="fa-"], [class^="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-style: normal !important;
    font-weight: 900 !important;
}



/* Hide default browser spinners for cleaner UI */
.tb-ev-input-box::-webkit-outer-spin-button,
.tb-ev-input-box::-webkit-inner-spin-button,
.tb-iv-input-box::-webkit-outer-spin-button,
.tb-iv-input-box::-webkit-inner-spin-button,
.tb-lvl-input::-webkit-outer-spin-button,
.tb-lvl-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tb-ev-input-box, .tb-iv-input-box, .tb-lvl-input {
    -moz-appearance: textfield;
}

.tb-tera-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 10px;
    padding: 7px 14px;
    color: #81ecec;
    font-size: 0.76rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.tb-tera-toggle-label:hover {
    border-color: #00cec9;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

.tb-tera-toggle-label input {
    accent-color: #00cec9;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.tb-slot-subname {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.tb-slot-lvl {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 4px;
}

.tb-lvl-input {
    width: 44px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 2px 4px;
    color: #fff;
    font-size: 0.7rem;
    text-align: center;
    outline: none;
}

.tb-shiny-btn {
    background: none;
    border: none;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 4px;
}

.tb-shiny-btn.active, .tb-shiny-btn:hover {
    color: #ffd32a;
    transform: scale(1.2);
    filter: drop-shadow(0 0 6px rgba(255, 211, 42, 0.6));
}

.tb-item-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-item-btn:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.tb-item-name {
    font-size: 0.76rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-muted {
    color: rgba(255, 255, 255, 0.35);
}

/* Stats Summary Card in Slot */
.tb-stats-summary-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 8px 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-stats-summary-card:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.tb-stats-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}

.tb-stats-edit-link {
    color: #34d399;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tb-stats-mini-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.tb-stat-chip {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 4px 2px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tb-stat-chip span {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-stat-chip b {
    font-size: 0.75rem;
    color: #fff;
}

.tb-stat-plus {
    color: #2ed573;
    font-size: 0.52rem;
    font-weight: bold;
    margin-left: 2px;
}

.tb-stat-minus {
    color: #ff4757;
    font-size: 0.52rem;
    font-weight: bold;
    margin-left: 2px;
}

/* ==========================================================================
   STATS EDITOR MODAL - PIXEL-PERFECT ALIGNMENT
   ========================================================================== */
.tb-stats-summary-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.tb-ev-counter {
    font-size: 0.82rem;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
    color: #34d399;
}

.tb-ev-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tb-preset-btn {
    background: rgba(26, 38, 70, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    font-size: 0.68rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.tb-preset-btn:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.2);
}

.tb-preset-btn.danger:hover {
    border-color: #ff6b81;
    background: rgba(233, 69, 96, 0.2);
}

.tb-stat-table-header {
    display: grid;
    grid-template-columns: 120px 90px 1fr 110px;
    gap: 16px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tb-stat-editor-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.tb-stat-editor-row {
    display: grid;
    grid-template-columns: 120px 90px 1fr 110px;
    gap: 16px;
    align-items: center;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
}

.tb-stat-ed-name {
    display: flex;
    flex-direction: column;
}

.tb-stat-ed-name b {
    font-size: 0.85rem;
    color: #fff;
}

.tb-stat-ed-name small {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.tb-stat-ed-final {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-stat-val {
    font-size: 1.15rem;
    color: #10b981;
    font-weight: bold;
}

.tb-stat-ed-ev {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tb-ev-slider {
    flex: 1;
    accent-color: #10b981;
    cursor: pointer;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    outline: none;
}

.tb-ev-input-box {
    width: 58px;
    background: rgba(26, 38, 70, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 4px;
    color: #fff;
    font-size: 0.82rem;
    text-align: center;
    outline: none;
    transition: all 0.2s ease;
}

.tb-ev-input-box:focus {
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.tb-stat-ed-iv {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-iv-input-box {
    width: 48px;
    background: rgba(26, 38, 70, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 4px;
    color: #fff;
    font-size: 0.82rem;
    text-align: center;
    outline: none;
    transition: all 0.2s ease;
}

.tb-iv-input-box:focus {
    border-color: #34d399;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.35);
}

.tb-iv-max-btn {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.tb-iv-max-btn.max-31 {
    background: #10b981;
    border-color: #34d399;
    color: #fff;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.tb-iv-max-btn.min-0 {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
    color: #ff6b81;
}

.tb-iv-max-btn.custom-val {
    background: rgba(26, 38, 70, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffd32a;
}

/* Item Picker Row */
.tb-item-pick-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-item-pick-row:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    transform: translateY(-1px);
}

.tb-item-pick-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.tb-item-pick-info {
    flex: 1;
    min-width: 0;
}

.tb-item-pick-name {
    font-size: 0.82rem;
    color: #fff;
    margin-bottom: 2px;
}

.tb-item-pick-eng {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 6px;
}

.tb-item-pick-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
}

.tb-badge-bp {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    color: #ff6b81;
}

.tb-badge-acc {
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    color: #81ecec;
}




/* ==========================================================================
   ITEM PICKER & MOVE PICKER GRID STYLES
   ========================================================================== */
.tb-item-modal-list {
    flex: 1;
    overflow-y: auto;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 12px !important;
    padding: 6px 4px 16px !important;
}

.tb-move-modal-list {
    flex: 1;
    overflow-y: auto;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 10px !important;
    padding: 6px 4px 16px !important;
}

.tb-item-pick-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.tb-item-pick-row:hover {
    border-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.12) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25) !important;
}

.tb-item-pick-icon {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 4px !important;
}

.tb-item-pick-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.tb-item-pick-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.88rem !important;
    color: #fff !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.tb-item-pick-eng {
    font-size: 0.7rem !important;
    color: #f59e0b !important;
    font-weight: normal !important;
}

.tb-item-pick-desc {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.4 !important;
}

.tb-move-pick-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.tb-move-pick-item:hover {
    border-color: #e94560 !important;
    background: rgba(233, 69, 96, 0.12) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.25) !important;
}



/* Nature Button in Slot Card - Compact Auto-Fitting */
.tb-nature-btn {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.tb-nature-btn:hover {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.12) !important;
}

.tb-nature-btn-name {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 0.72rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

.tb-nature-btn-icon {
    color: #00cec9 !important;
    font-size: 0.82rem !important;
    flex-shrink: 0 !important;
}


.db-nature-matrix-cell.active-selected-nature {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.25) !important;
    box-shadow: 0 0 16px rgba(0, 206, 201, 0.5) !important;
    position: relative;
}

.tb-nat-sel-check {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #00cec9;
    font-size: 0.7rem;
}

.tb-item-slot-icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }


/* ==========================================================================
   CUSTOM TERA & ABILITY SELECT BUTTONS & MODALS
   ========================================================================== */
.tb-custom-select-btn {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

.tb-custom-select-btn:hover {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

.tb-custom-select-val {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 0.76rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tb-select-chevron {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
}

.tb-tera-tag-base {
    color: #00cec9 !important;
    font-size: 0.76rem !important;
}

.tb-tera-tag-stellar {
    color: #ffd32a !important;
    font-size: 0.76rem !important;
}

/* Tera Modal Grid */
.tb-tera-special-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.tb-tera-special-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.tb-tera-special-card b {
    font-size: 0.85rem !important;
    color: #fff !important;
    display: block !important;
}

.tb-tera-special-card small {
    font-size: 0.65rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.tb-tera-special-card:hover {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.12) !important;
    transform: translateY(-2px) !important;
}

.tb-tera-special-card.active-tera {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.22) !important;
    box-shadow: 0 0 16px rgba(0, 206, 201, 0.4) !important;
}

.tb-tera-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 8px !important;
}

.tb-tera-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.tb-tera-card-badge {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.tb-type-icon-mini {
    width: 14px !important;
    height: 14px !important;
    object-fit: contain !important;
}

.tb-tera-card-name {
    font-size: 0.75rem !important;
    color: #fff !important;
}

.tb-tera-card:hover {
    border-color: var(--tera-color, #10b981) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.tb-tera-card.active-tera {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.2) !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

.tb-tera-check {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    color: #10b981 !important;
    font-size: 0.65rem !important;
}

/* Ability Modal List */
.tb-ability-list-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.tb-ability-pick-card {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.tb-ability-pick-card:hover {
    border-color: #ffd32a !important;
    background: rgba(255, 211, 42, 0.08) !important;
    transform: translateY(-2px) !important;
}

.tb-ability-pick-card.active-ability {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.18) !important;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.35) !important;
}

.tb-ability-pick-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
    gap: 10px !important;
}

.tb-ability-names b {
    font-size: 0.88rem !important;
    color: #fff !important;
}

.tb-ability-eng {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-left: 6px !important;
}

.tb-ab-pill {
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
}

.tb-ab-pill.regular {
    background: rgba(52, 152, 219, 0.2) !important;
    border: 1px solid rgba(52, 152, 219, 0.4) !important;
    color: #74b9ff !important;
}

.tb-ab-pill.hidden {
    background: rgba(255, 211, 42, 0.2) !important;
    border: 1px solid rgba(255, 211, 42, 0.4) !important;
    color: #ffd32a !important;
}

.tb-ability-desc {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.35 !important;
}

.tb-ab-check {
    color: #10b981 !important;
    font-size: 0.85rem !important;
    margin-left: 6px !important;
}


/* ==========================================================================
   SLEEK LEVEL CONTROL PILL
   ========================================================================== */
.tb-level-control {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(0, 206, 201, 0.35) !important;
    border-radius: 8px !important;
    padding: 3px 8px !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.tb-level-control:hover, .tb-level-control:focus-within {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.1) !important;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3) !important;
}

.tb-lvl-tag {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    color: #00cec9 !important;
    font-weight: bold !important;
    user-select: none !important;
}

.tb-lvl-input {
    width: 36px !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem !important;
    font-weight: bold !important;
    text-align: center !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
}

.tb-lvl-input::-webkit-outer-spin-button,
.tb-lvl-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}


/* ==========================================================================
   DYNAMAX LEVEL SETTING (GIGANTAMAX POKEMON)
   ========================================================================== */
.tb-dmax-field-row {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.tb-dmax-control {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 71, 87, 0.08) !important;
    border: 1px solid rgba(255, 71, 87, 0.3) !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.tb-dmax-control:hover {
    border-color: #ff4757 !important;
    background: rgba(255, 71, 87, 0.14) !important;
    box-shadow: 0 0 12px rgba(255, 71, 87, 0.25) !important;
}

.tb-dmax-badge {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #ff4757 !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
}

.tb-dmax-slider {
    flex: 1 !important;
    min-width: 50px !important;
    height: 6px !important;
    accent-color: #ff4757 !important;
    cursor: pointer !important;
}

.tb-dmax-val {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.tb-dmax-val small {
    color: #ff6b81 !important;
    font-size: 0.65rem !important;
    margin-left: 2px !important;
}


/* ==========================================================================
   CLEAN TERA MODAL & PILL STYLES
   ========================================================================== */
.tb-type-icon-clean {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}

.tb-type-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.74rem !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.tb-tera-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 10px !important;
    padding: 4px 2px !important;
}

.tb-tera-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.tb-tera-card:hover {
    border-color: var(--tera-color, #00cec9) !important;
    background: rgba(0, 206, 201, 0.1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

.tb-tera-card.active-tera {
    border-color: var(--tera-color, #00cec9) !important;
    background: rgba(0, 206, 201, 0.2) !important;
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.4) !important;
}

.tb-tera-card-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tb-tera-check {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    color: #00cec9 !important;
    font-size: 0.7rem !important;
}


/* Clean Tera Display Item inside button (No colored pill) */
.tb-tera-display-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.76rem !important;
}

.tb-type-icon-clean {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}


/* ==========================================================================
   TOP BAR TOGGLES & G-MAX BUTTON
   ========================================================================== */
.tb-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    margin-bottom: 18px !important;
}

.tb-toggles-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.tb-mechanic-toggle {
    cursor: pointer !important;
    user-select: none !important;
    margin: 0 !important;
}

.tb-mechanic-toggle input {
    display: none !important;
}

.tb-toggle-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem !important;
    transition: all 0.2s ease !important;
}

.tb-mechanic-toggle input:checked + .tb-toggle-pill {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.18) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
}

.tb-slot-badges {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.tb-gmax-btn {
    background: rgba(255, 71, 87, 0.12) !important;
    border: 1px solid rgba(255, 71, 87, 0.35) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.tb-gmax-btn:hover {
    border-color: #ff4757 !important;
    color: #fff !important;
    background: rgba(255, 71, 87, 0.25) !important;
}

.tb-gmax-btn.active {
    background: #ff4757 !important;
    border-color: #ff4757 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.6) !important;
}


/* Mega Evolution Toggle Button */
.tb-mega-btn {
    background: rgba(233, 69, 96, 0.12) !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.tb-mega-btn:hover {
    border-color: #e94560 !important;
    color: #fff !important;
    background: rgba(233, 69, 96, 0.25) !important;
}

.tb-mega-btn.active {
    background: linear-gradient(135deg, #e94560, #ff007f) !important;
    border-color: #ff007f !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.6) !important;
}


/* ==========================================================================
   TEAMBUILDER MOVE PICKER MODAL GRID & CARDS
   ========================================================================== */
.tb-move-grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 14px !important;
    align-content: start !important;
}

.tb-move-grid-container .db-move-card {
    min-height: 140px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}


/* Dynamax In-Battle HP Badge in Slot Stat Chip */
.tb-stat-dmax-hp {
    color: #ff007f !important;
    font-size: 0.52rem !important;
    font-weight: bold !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
    text-shadow: 0 0 6px rgba(255, 0, 127, 0.6) !important;
    margin-top: 1px !important;
}


/* Dedicated Transformation Buttons Row (Above Item) */
.tb-transform-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important;
    flex-wrap: wrap !important;
}

.tb-transform-row .tb-mega-btn,
.tb-transform-row .tb-gmax-btn {
    padding: 5px 12px !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
}


/* Description block inside Move Picker Cards */
.db-move-card-desc {
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.12) !important;
    font-size: 0.74rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.4 !important;
    font-family: 'Minecraft', monospace !important;
    word-break: break-word !important;
}


/* Synergy Table Type Icon */
.tb-syn-type-icon {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
    vertical-align: middle !important;
}


/* ==========================================================================
   TRAINER ACADEMY / BEGINNER GUIDE MODAL STYLING
   ========================================================================== */
.db-header-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex-shrink: 0;
    margin-right: 4px;
}

.db-header-actions-row {
    display: flex;
    gap: 8px;
}

.db-beginner-guide-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 12px;
    border: 1px solid rgba(241, 196, 15, 0.5);
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.2), rgba(233, 69, 96, 0.25));
    color: #f1c40f;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(241, 196, 15, 0.15);
}

.db-beginner-guide-btn i {
    color: #f1c40f;
    font-size: 0.85rem;
}

.db-beginner-guide-btn:hover {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.35), rgba(233, 69, 96, 0.4));
    border-color: #f1c40f;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(241, 196, 15, 0.35);
    transform: translateY(-2px);
}

/* Academy Modal */
.db-guide-modal-content {
    background: #0f1424;
    border: 1px solid rgba(241, 196, 15, 0.4);
    border-radius: 20px;
    width: 100%;
    max-width: 860px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(241, 196, 15, 0.2);
    overflow: hidden;
    animation: modalPop 0.25s ease;
}

.db-guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: rgba(241, 196, 15, 0.08);
    border-bottom: 1px solid rgba(241, 196, 15, 0.2);
}

.db-guide-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.db-guide-header-title h3 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    color: #f1c40f;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}


/* Guide Ranks Bar & Pills */
.db-guide-ranks-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: thin;
}

.db-guide-rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.db-guide-rank-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-1px);
}

.db-guide-rank-pill.active {
    font-weight: bold;
}

.db-guide-stepper-wrap {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    display: flex;
    gap: 8px;
    scrollbar-width: thin;
}

.db-guide-step-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.db-guide-step-chip:hover {
    background: rgba(241, 196, 15, 0.15);
    color: #ffffff;
    border-color: rgba(241, 196, 15, 0.4);
}

.db-guide-step-chip.active {
    background: linear-gradient(135deg, #f1c40f, #e67e22);
    color: #0f1424;
    border-color: #f1c40f;
    box-shadow: 0 2px 10px rgba(241, 196, 15, 0.4);
}

.db-guide-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    color: #dfe6e9;
    font-size: 0.88rem;
    line-height: 1.6;
}

.db-guide-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.db-guide-card-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #55efc4;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-guide-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.db-guide-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00b894, #00cec9);
    border: none;
    color: #0f1424;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 206, 201, 0.3);
}

.db-guide-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.45);
}

.db-guide-prev-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-guide-prev-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}


/* Z-Move Teambuilder Styles */
.tb-move-item.is-z-boosted {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.12), rgba(15, 23, 42, 0.8));
    border-color: rgba(0, 206, 201, 0.45);
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.15);
}

.tb-move-item.is-z-boosted:hover {
    border-color: #00cec9;
    box-shadow: 0 0 15px rgba(0, 206, 201, 0.35);
}

.tb-move-z-tag {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.25), rgba(108, 92, 231, 0.25));
    border: 1px solid rgba(0, 206, 201, 0.6);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    color: #00cec9;
    white-space: nowrap;
}

.tb-move-z-tag.signature {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.3), rgba(233, 69, 96, 0.3));
    border-color: #f1c40f;
    color: #f1c40f;
}

.db-move-z-box {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.15), rgba(108, 92, 231, 0.15));
    border: 1px solid rgba(0, 206, 201, 0.45);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 6px;
    font-size: 0.72rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: inset 0 0 12px rgba(0, 206, 201, 0.1);
}

.db-move-z-box.signature {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.2), rgba(233, 69, 96, 0.2));
    border-color: rgba(241, 196, 15, 0.6);
    box-shadow: inset 0 0 12px rgba(241, 196, 15, 0.15);
}


/* Rich Competitive Breakdown Panel */
.tb-stats-insight-section {
    margin-top: 16px;
    background: linear-gradient(145deg, rgba(10, 15, 30, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.tb-stats-insight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.tb-stats-insight-header h4 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.tb-insight-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-insight-tab-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-insight-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.tb-insight-tab-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    font-weight: bold;
}

.tb-insight-tab-content {
    display: none;
    animation: fadeInTab 0.25s ease-out;
}

.tb-insight-tab-content.active {
    display: block;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Overview Banner */
.tb-insight-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.tb-insight-stat-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-insight-stat-card-title {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tb-insight-stat-card-val {
    font-size: 1.1rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    color: #fff;
}

.tb-insight-stat-card-desc {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Speed Ladder */
.tb-speed-ladder-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-speed-tier-row {
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid #f39c12;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-speed-tier-row.faster {
    border-left-color: #2ecc71;
}

.tb-speed-tier-row.tied {
    border-left-color: #ffd32a;
}

.tb-speed-tier-row.slower {
    border-left-color: #e74c3c;
}

.tb-speed-tier-row.tr-first {
    border-left-color: #9b59b6;
    background: rgba(155, 89, 182, 0.1);
}

/* Health / Survival Bar */
.tb-survival-bar-wrap {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.tb-survival-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.tb-survival-bar-fill.safe {
    background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.tb-survival-bar-fill.danger {
    background: linear-gradient(90deg, #f39c12, #e67e22);
}

.tb-survival-bar-fill.ohko {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.tb-threat-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s ease;
}

.tb-threat-card:hover {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.2);
}

.tb-threat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #fff;
}

.tb-threat-attacker {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-threat-move {
    color: #74b9ff;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.tb-threat-dmg-badge {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
}

.tb-threat-dmg-badge.safe { color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.4); }
.tb-threat-dmg-badge.danger { color: #f39c12; border: 1px solid rgba(243, 156, 18, 0.4); }
.tb-threat-dmg-badge.ohko { color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.4); }

.tb-threat-sub {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
}


/* Z-Move Button in Transform Row */
.tb-zmove-btn {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    border-radius: 6px;
    padding: 4px 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-zmove-btn:hover {
    background: rgba(0, 206, 201, 0.3);
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.4);
    transform: translateY(-1px);
}

.tb-zmove-btn.active {
    background: linear-gradient(135deg, #00cec9, #0984e3);
    border-color: #00cec9;
    color: #fff;
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.6);
}

.tb-move-item.z-transformed {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.22), rgba(108, 92, 231, 0.25)) !important;
    border-color: #00cec9 !important;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.35);
    animation: zPulse 2s infinite alternate;
}

.tb-move-item.z-transformed.signature {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.28), rgba(233, 69, 96, 0.28)) !important;
    border-color: #f1c40f !important;
    box-shadow: 0 0 14px rgba(241, 196, 15, 0.45);
}

@keyframes zPulse {
    0% { box-shadow: 0 0 8px rgba(0, 206, 201, 0.25); }
    100% { box-shadow: 0 0 16px rgba(0, 206, 201, 0.55); }
}

.tb-z-power-pill {
    background: linear-gradient(135deg, #ffd32a, #f39c12);
    color: #000;
    font-weight: bold;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    margin-left: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}


/* Format Selector Row */
.tb-insight-format-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-insight-format-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #10b981;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tb-format-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

.tb-format-pill {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-format-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.tb-format-pill.active {
    background: linear-gradient(135deg, #10b981, #0984e3);
    border-color: #10b981;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* Speed Badges Grid & Chips */
.tb-speed-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.tb-speed-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid var(--tier-color, #2ecc71);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 0.72rem;
    color: #fff;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.tb-speed-badge-pill:hover {
    transform: translateY(-2px);
    border-color: var(--tier-color, #2ecc71);
    background: rgba(25, 35, 60, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.tb-speed-badge-name {
    font-weight: 500;
}

.tb-speed-badge-spec {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.tb-speed-badge-val {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.68rem;
    color: var(--tier-color, #2ecc71);
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}


/* Top Bar Clean 2-Row Styling */
.tb-top-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    padding: 14px 18px !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}

.tb-top-row-main {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.tb-top-row-gimmicks {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 10px !important;
}

.tb-gimmicks-header-label {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.tb-team-name-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-width: 260px !important;
    max-width: 520px !important;
}

.tb-team-select {
    background: rgba(26, 26, 46, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    color: #fff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.82rem !important;
    outline: none !important;
    cursor: pointer !important;
    max-width: 200px !important;
}


/* Full Database Comparison Styles */
.tb-db-compare-box {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tb-db-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.tb-db-search-input {
    flex: 1;
    min-width: 240px;
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 8px;
    padding: 8px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    outline: none;
}

.tb-db-search-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.tb-db-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tb-db-filter-chip {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-db-filter-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tb-db-filter-chip.active {
    background: #10b981;
    border-color: #10b981;
    color: #000;
    font-weight: bold;
}

.tb-db-rank-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(52, 152, 219, 0.12));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
}

.tb-db-rank-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb-db-rank-title {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
}

.tb-db-rank-value {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: bold;
    color: #10b981;
}

.tb-db-compare-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
    gap: 10px;
    transition: all 0.2s ease;
}

.tb-db-compare-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(20, 30, 55, 0.95);
}

.tb-db-compare-card-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-db-compare-card-avatar {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.tb-db-compare-card-names {
    display: flex;
    flex-direction: column;
}

.tb-db-compare-card-ru {
    font-weight: 500;
    font-size: 0.78rem;
    color: #fff;
}

.tb-db-compare-card-en {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-db-compare-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    white-space: nowrap;
}

.tb-db-compare-badge.faster {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.tb-db-compare-badge.slower {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}

.tb-db-compare-badge.tied {
    background: rgba(241, 196, 15, 0.15);
    border: 1px solid rgba(241, 196, 15, 0.4);
    color: #ffd32a;
}


/* Team Generator Modal & Button Styles */
.tb-btn.generator-highlight-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25)) !important;
    border: 1px solid #10b981 !important;
    color: #10b981 !important;
    font-weight: bold !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.25s ease !important;
}

.tb-btn.generator-highlight-btn:hover {
    background: linear-gradient(135deg, #10b981, #0984e3) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.6) !important;
    transform: translateY(-1px) !important;
}

.tb-gen-modal-content {
    max-width: 950px;
    width: 95vw;
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(145deg, #0d1322, #151f32);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.tb-gen-section-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #10b981;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.tb-gen-format-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-gen-format-card:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(20, 30, 55, 0.9);
    transform: translateY(-2px);
}

.tb-gen-format-card.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
}

.tb-gen-format-card-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-format-card-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.35;
}

.tb-gen-archetype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.tb-gen-arch-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-gen-arch-card:hover {
    background: rgba(25, 35, 60, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
}

.tb-gen-arch-card.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.tb-gen-arch-card.active span {
    color: #fff !important;
}

.tb-gen-preview-box {
    background: rgba(10, 15, 30, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
}

.tb-gen-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.tb-gen-preview-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.tb-gen-preview-avatar {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.tb-gen-preview-name {
    font-size: 0.72rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.tb-gen-preview-item {
    font-size: 0.62rem;
    color: #f59e0b;
    font-family: 'Minecraft', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.tb-gen-preview-role {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-auto-build-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(52, 152, 219, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 6px;
    color: #10b981;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 5px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.tb-auto-build-btn:hover {
    background: linear-gradient(135deg, #10b981, #0984e3);
    color: #fff;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}


/* Offense & Defense Full DB Card Styles */
.tb-ko-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    white-space: nowrap;
}

.tb-ko-badge.ohko {
    background: rgba(241, 196, 15, 0.18);
    border: 1px solid rgba(241, 196, 15, 0.5);
    color: #ffd32a;
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.2);
}

.tb-ko-badge.twohko {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.tb-ko-badge.survives {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}


/* Flexible Team Generator Layout */
.tb-gen-options-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.tb-gen-options-col {
    flex: 1;
    min-width: 280px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
}

.tb-gen-gimmick-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.tb-gen-gimmick-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 7px 12px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.tb-gen-gimmick-chip:hover {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.tb-gen-gimmick-chip.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.tb-gen-quick-presets {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.tb-gen-preset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tb-gen-preset-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}


/* Individual Pokemon Build Generator Styles */
.tb-single-gen-modal-content {
    max-width: 780px;
    width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(145deg, #0d1322, #151f32);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
}

.tb-role-pills-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 16px;
}

.tb-role-pill {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-role-pill:hover {
    border-color: rgba(16, 185, 129, 0.5);
    color: #fff;
    background: rgba(20, 30, 55, 0.9);
}

.tb-role-pill.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.tb-build-details-card {
    background: rgba(10, 15, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tb-build-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.tb-build-field-box {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-build-field-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.tb-build-field-val {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: #fff;
}

.tb-build-moves-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.tb-build-move-chip {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #74b9ff;
    display: flex;
    align-items: center;
    gap: 6px;
}



/* Database Stat Filters Enhanced Styles */
.db-stat-filters-container {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.db-stat-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.db-stat-subhint {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Minecraft', monospace;
}

.db-stat-reset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 4px 10px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-stat-reset-btn:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
    color: #ff6b81;
}

.db-stat-sliders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.db-stat-filter-item {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.db-stat-filter-item:hover {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(20, 30, 55, 0.9);
}

.db-stat-filter-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
}

.db-stat-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.db-stat-name.hp { color: #ff5e57; }
.db-stat-name.atk { color: #ff9f43; }
.db-stat-name.def { color: #feca57; }
.db-stat-name.spa { color: #54a0ff; }
.db-stat-name.spd { color: #a29bfe; }
.db-stat-name.spe { color: #1dd1a1; }
.db-stat-name.bst { color: #ffd32a; }

.db-stat-range-val {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.35);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.db-stat-inputs-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-stat-num-input {
    flex: 1;
    min-width: 45px;
    background: rgba(10, 15, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 5px 6px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
    text-align: center;
    transition: all 0.2s ease;
}

.db-stat-num-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
    background: rgba(15, 25, 45, 1);
}

.db-stat-dash {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.db-stat-sort-toggles {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.db-stat-sort-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    width: 26px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-stat-sort-btn:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    color: #fff;
}

.db-stat-sort-btn.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: #fff;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* ==========================================================================
   COMMUNITY WALL (ОБЩАЯ СТЕНА КОМАНД) STYLES
   ========================================================================== */
.tb-wall-modal-content {
    max-width: 960px;
    width: 96vw;
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(155deg, #090e1a 0%, #121b2d 100%);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 206, 201, 0.15);
}

.tb-wall-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tb-wall-filters-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
}

.tb-wall-search-input {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    min-width: 240px;
    outline: none;
    transition: all 0.2s ease;
}

.tb-wall-search-input:focus {
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.tb-wall-feed-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.tb-wall-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.tb-wall-card:hover {
    border-color: rgba(0, 206, 201, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.tb-wall-card-author-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-wall-author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-wall-author-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0, 206, 201, 0.5);
    background: #0a0a1a;
}

.tb-wall-author-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.88rem;
    font-weight: bold;
    color: #fff;
}

.tb-wall-date {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
}

.tb-wall-team-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tb-wall-team-name {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #00cec9;
    font-weight: bold;
}

.tb-wall-format-badge {
    background: linear-gradient(135deg, #0984e3, #6c5ce7);
    border-radius: 6px;
    padding: 3px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #fff;
    font-weight: bold;
}

.tb-wall-team-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
    background: rgba(10, 15, 30, 0.6);
    border-radius: 8px;
    padding: 8px 12px;
    border-left: 3px solid #00cec9;
}

.tb-wall-pokemon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.tb-wall-pokemon-chip {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.tb-wall-pokemon-chip img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

.tb-wall-pokemon-chip-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tb-wall-pokemon-chip-item {
    font-size: 0.62rem;
    color: #f59e0b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tb-wall-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-wall-like-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 14px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-wall-like-btn:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
    color: #ff6b81;
}

.tb-wall-like-btn.liked {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-color: #e74c3c;
    color: #fff;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.4);
}

.tb-wall-import-btn {
    background: linear-gradient(135deg, #10b981, #0984e3);
    border: none;
    border-radius: 8px;
    padding: 7px 18px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.tb-wall-import-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
}

/* Publish Modal Styling */
.tb-publish-modal-content {
    max-width: 580px;
    width: 95vw;
    background: linear-gradient(145deg, #0d1322, #151f32);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
}


/* Move Slot Type Icon */
.tb-move-type-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
    margin-right: 2px;
}



/* Pills & Selection Controls */
.tb-gen-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.tb-gen-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-pill.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

/* Archetypes Grid */
.tb-gen-arch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
}

.tb-gen-arch-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-arch-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.tb-gen-arch-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(0, 206, 201, 0.2));
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(9, 132, 227, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 6 Pokemon Cards Grid */
.tb-gen-squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
}

.tb-gen-poke-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tb-gen-poke-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.tb-gen-poke-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.tb-gen-poke-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.tb-gen-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.92rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-poke-role {
    display: inline-block;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 3px;
}

.tb-gen-poke-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tb-gen-poke-moves-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-gen-move-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 4px 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* Pills & Selection Controls */
.tb-gen-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tb-gen-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-pill.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

/* Archetypes Flexible Row (No Truncation) */
.tb-gen-arch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-gen-arch-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tb-gen-arch-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.tb-gen-arch-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(0, 206, 201, 0.2));
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(9, 132, 227, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 6 Pokemon Cards Grid */
.tb-gen-squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
}

.tb-gen-poke-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tb-gen-poke-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.tb-gen-poke-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.tb-gen-poke-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.tb-gen-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-poke-role {
    display: inline-block;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 3px;
}

.tb-gen-poke-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-gen-detail-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-poke-moves-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-gen-move-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 5px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================================
   PROCEDURAL COMPETITIVE TEAM GENERATOR STYLES (CLEAN, NO EMOJIS, SCROLLABLE)
   ========================================================================== */
.tb-gen-modal-content {
    max-width: 1080px;
    width: 95vw;
    height: 90vh;
    max-height: 90vh;
    background: linear-gradient(155deg, #090e1a 0%, #111a2e 50%, #0d1527 100%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9), 0 0 50px rgba(16, 185, 129, 0.12);
    overflow: hidden;
    color: #fff;
    box-sizing: border-box;
}

.tb-gen-modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(9, 14, 26, 0.85);
    flex-shrink: 0;
}

#tbTeamGenModalBody, .tb-gen-modal-body {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

#tbTeamGenModalBody::-webkit-scrollbar {
    width: 7px;
}
#tbTeamGenModalBody::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}
#tbTeamGenModalBody::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.45);
    border-radius: 4px;
}
#tbTeamGenModalBody::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7);
}

.tb-gen-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(9, 14, 26, 0.95);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 10px;
}

/* Pills & Selection Controls */
.tb-gen-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tb-gen-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-pill.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.tb-gen-preset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-gen-preset-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #fff;
}

/* Archetypes Flexible Row (No Truncation) */
.tb-gen-arch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-gen-arch-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tb-gen-arch-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.tb-gen-arch-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(0, 206, 201, 0.2));
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(9, 132, 227, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 6 Pokemon Cards Grid */
.tb-gen-squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
    padding-bottom: 8px;
}

.tb-gen-poke-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tb-gen-poke-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.tb-gen-poke-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.tb-gen-poke-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.tb-gen-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-poke-role {
    display: inline-block;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 3px;
}

.tb-gen-poke-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-gen-detail-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-poke-moves-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-gen-move-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 5px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================================
   SITE MODE SWITCHER FULL WIDTH DISTRIBUTION
   ========================================================================== */
.mode-switcher-header {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 8px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
}

.mode-switcher-header .site-mode-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

.mode-switcher-header .site-mode-btn span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 768px) {
    .mode-switcher-header {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    .mode-switcher-header .site-mode-btn {
        width: 100% !important;
        flex: none !important;
        padding: 10px 12px !important;
    }
}


/* Gimmick Toggles in Procedural Generator */
.tb-gen-gimmick-toggle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-gimmick-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-gimmick-toggle.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}


/* ==========================================================================
   DATABASE STAT FILTERS STYLING (MINIMALIST, UNDER TYPE FILTERS, MINECRAFT FONT)
   ========================================================================== */
.db-stat-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.db-stat-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 22px;
}

.db-stat-sliders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: 4px;
}

.db-stat-filter-item {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 2px 5px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    height: 26px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: all 0.15s ease;
}

.db-stat-filter-item:hover {
    background: rgba(26, 38, 70, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.db-stat-filter-item.has-filter {
    border-color: rgba(16, 185, 129, 0.6) !important;
    background: rgba(16, 185, 129, 0.12) !important;
}

.db-stat-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 0;
}

.db-stat-name i {
    font-size: 0.58rem;
}

.db-stat-name.hp { color: #ef4444; }
.db-stat-name.atk { color: #f97316; }
.db-stat-name.def { color: #eab308; }
.db-stat-name.spa { color: #38bdf8; }
.db-stat-name.spd { color: #a78bfa; }
.db-stat-name.spe { color: #10b981; }
.db-stat-name.bst { color: #fbbf24; }

.db-stat-inputs-row {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.db-stat-num-input {
    width: 32px !important;
    min-width: 0 !important;
    height: 20px !important;
    background: rgba(10, 15, 30, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 1px 2px !important;
    text-align: center !important;
    outline: none !important;
    transition: all 0.15s ease;
    box-sizing: border-box !important;
}

.db-stat-num-input:focus {
    border-color: #10b981 !important;
    background: rgba(15, 23, 42, 1) !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4) !important;
}

.db-stat-num-input::-webkit-outer-spin-button,
.db-stat-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.db-stat-num-input {
    -moz-appearance: textfield;
}

.db-stat-dash {
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.65rem;
    line-height: 1;
}

.db-stat-sort-toggles {
    display: flex;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.db-stat-sort-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 0 4px !important;
    height: 20px !important;
    line-height: 18px !important;
    cursor: pointer;
    transition: all 0.15s ease;
}

.db-stat-sort-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.db-stat-sort-btn.active {
    background: #10b981 !important;
    border-color: #34d399 !important;
    color: #fff !important;
    font-weight: bold;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.db-stat-reset-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 2px 8px;
    height: 22px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.db-stat-reset-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fff;
}

/* Category Filter Compact & 'More...' Drawer Styles */
.db-cat-more-btn {
    background: rgba(15, 52, 96, 0.25);
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    padding: 5px 10px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    white-space: nowrap;
    vertical-align: middle;
}

.db-cat-more-btn i {
    font-size: 0.52rem;
    opacity: 0.75;
    transition: transform 0.2s ease;
}

.db-cat-more-btn:hover {
    background: rgba(15, 52, 96, 0.45);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.db-cat-more-btn.is-open {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #34d399;
}

.db-cat-more-btn.has-active-child {
    background: rgba(16, 185, 129, 0.22);
    border: 1px solid #10b981;
    color: #34d399;
}

.db-cat-more-badge {
    background: #10b981;
    color: #052e16;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.52rem;
    border-radius: 8px;
    padding: 1px 4px;
    line-height: 1;
}

.db-cat-extra-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    padding: 6px 8px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    animation: fadeInCatExtra 0.18s ease-out;
}

@keyframes fadeInCatExtra {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Button in dbShowDetail to open full profile */
.db-detail-open-profile-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(9, 132, 227, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10b981;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.db-detail-open-profile-btn:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(9, 132, 227, 0.35));
    border-color: #34d399;
    color: #fff;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}


/* Move Slot Icons & Dual Name Styling */
.tb-slot-move-type-icon {
    width: 15px;
    height: 15px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 4px;
    vertical-align: middle;
}

.tb-move-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-move-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
}

.tb-move-en-sub {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.65rem;
    font-weight: normal;
    margin-left: 2px;
}


/* ==========================================================================
   BUILD ANALYSIS & SURVIVAL BENCHMARKS MODAL STYLES
   ========================================================================== */
.tb-build-analysis-container {
    margin-top: 18px;
    padding: 14px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.tb-build-analysis-header h4 {
    margin: 0 0 12px 0;
    color: #10b981;
    font-size: 0.95rem;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

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

.tb-analysis-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
}

.tb-analysis-card-title {
    font-weight: bold;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tb-bulk-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    margin-bottom: 6px;
}

.tb-bulk-label {
    color: rgba(255, 255, 255, 0.7);
}

.tb-bulk-val {
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.75rem;
}

.tb-bulk-val.badge-high {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.tb-bulk-val.badge-good {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.tb-bulk-val.badge-mid {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.tb-bulk-val.badge-low {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.tb-surv-meta-header {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 10px 0 6px 0;
    text-transform: uppercase;
}

.tb-surv-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.8);
}

.tb-surv-tag {
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tb-surv-tag.pass {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.tb-surv-tag.mid {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.tb-surv-tag.fail {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.tb-speed-tier-badge {
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.3);
    color: #38bdf8;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.tb-speed-benchmark-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
}

.tb-pros-cons-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tb-pros-list, .tb-cons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-pro-item {
    font-size: 0.72rem;
    color: #34d399;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-con-item {
    font-size: 0.72rem;
    color: #fb7185;
    display: flex;
    align-items: center;
    gap: 6px;
}


/* Slot Card Quick Bulk Summary */
.tb-slot-bulk-quick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    flex-wrap: wrap;
}

.tb-bulk-quick-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tb-bulk-quick-tag b {
    color: #10b981;
}

.tb-stats-modal-expanded {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(16, 185, 129, 0.3);
}


/* Z-Move Slot Badge Styles */
.tb-slot-zmove-badge {
    margin: 6px 0;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 211, 42, 0.1);
    border: 1px solid rgba(255, 211, 42, 0.3);
    color: #ffd32a;
    transition: all 0.2s ease;
}

.tb-slot-zmove-badge.ready {
    background: linear-gradient(135deg, rgba(255, 211, 42, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    border: 1px solid rgba(255, 211, 42, 0.45);
    box-shadow: 0 0 10px rgba(255, 211, 42, 0.15);
}

.tb-slot-zmove-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px dashed rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    font-size: 0.68rem;
}

.tb-zmove-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-zmove-title small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
    margin-left: 2px;
}


/* Profile Card Top Bar & Photo Button */
.db-profile-card-top-bar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    margin-bottom: 2px;
}
.db-profile-photo-btn {
    position: static;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
.db-profile-photo-btn:hover {
    background: #6366f1;
    border-color: #818cf8;
    color: #fff;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
}

.db-profile-search-wrap {
    position: relative;
    z-index: 550;
    min-width: 250px;
    max-width: 360px;
}
.db-profile-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    pointer-events: none;
}
.db-profile-search-input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    color: #fff;
    font-size: 0.82rem;
    transition: all 0.2s;
    font-family: inherit;
}
.db-profile-search-input:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
    background: #0f172a;
}
.db-profile-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 440px;
    max-width: min(460px, calc(100vw - 32px));
    background: #141b2d;
    border: 1px solid rgba(16, 185, 129, 0.55);
    border-radius: 12px;
    max-height: 380px;
    overflow-y: auto;
    z-index: 99999 !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 16px rgba(16, 185, 129, 0.25);
}
.db-profile-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
    text-decoration: none;
}
.db-profile-search-item:last-child {
    border-bottom: none;
}
.db-profile-search-item:hover {
    background: rgba(16, 185, 129, 0.22);
}
.db-profile-search-thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}
.db-profile-search-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    gap: 2px;
}
.db-profile-search-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-profile-search-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-profile-search-dex {
    font-size: 0.72rem;
    color: #10b981;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    flex-shrink: 0;
}
.db-profile-search-types {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}
.db-profile-search-type-pill {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.db-profile-search-empty {
    padding: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
}


/* ==========================================================================
   Z-MOVE BUTTON, MODAL & PER-MOVE EFFECTS
   ========================================================================== */
.tb-zmove-btn {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.16), rgba(255, 159, 26, 0.24));
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: #ffd700;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    font-family: inherit;
}
.tb-zmove-btn:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(255, 159, 26, 0.45));
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    transform: translateY(-1px);
}
.tb-zmove-btn.active {
    background: linear-gradient(135deg, #ffd700, #ff9f1a);
    color: #121829;
    border-color: #fff;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.65);
}

.tb-move-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tb-move-main-line {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.tb-move-z-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    padding: 3px 10px;
    margin-left: 20px;
    border-radius: 6px;
    margin-top: 3px;
    transition: all 0.2s;
    cursor: default;
}
.tb-move-z-sub.damage {
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: #ffd700;
}
.tb-move-z-sub.damage:hover {
    background: rgba(255, 215, 0, 0.16);
    border-color: #ffd700;
}
.tb-move-z-sub.status {
    background: rgba(255, 211, 42, 0.08);
    border: 1px solid rgba(255, 211, 42, 0.45);
    color: #ffd32a;
}
.tb-move-z-sub.status:hover {
    background: rgba(255, 211, 42, 0.18);
    border-color: #ffd32a;
}
.tb-move-z-title {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}
.tb-move-z-bp {
    color: #ffd32a;
    font-weight: 700;
    font-family: 'Minecraft', monospace, sans-serif;
    font-size: 0.72rem;
    flex-shrink: 0;
    margin-left: auto;
}
.tb-move-z-bp.status-boost {
    color: #ffd32a;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Z-Crystal Selection Modal */
.tb-zcrystal-modal-content {
    max-width: 800px !important;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.tb-zcrystal-modal-body {
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tb-zcrystal-actions {
    display: flex;
    justify-content: flex-end;
}
.tb-zcrystal-remove-btn {
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all 0.2s;
}
.tb-zcrystal-remove-btn:hover {
    background: rgba(239, 68, 68, 0.35);
    border-color: #ef4444;
    color: #fff;
}
.tb-zcrystal-section-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tb-zcrystal-section-title.signature {
    color: #ffd700;
}
.tb-zcrystal-signature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
.tb-zcrystal-sig-card {
    background: rgba(15, 23, 42, 0.85);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tb-zcrystal-sig-card:hover {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25);
}
.tb-zcrystal-sig-card.active {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 159, 26, 0.25));
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
}
.tb-zcrystal-sig-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tb-zcrystal-sig-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffd700;
    flex: 1;
}
.tb-zcrystal-sig-details {
    font-size: 0.78rem;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.35;
}
.tb-zcrystal-req-move {
    color: #38bdf8;
    font-weight: 600;
}
.tb-zcrystal-zmove-name {
    color: #f59e0b;
    font-weight: 700;
}
.tb-zcrystal-sig-desc {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 2px;
}

.tb-zcrystal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}
.tb-zcrystal-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tb-zcrystal-card:hover {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    transform: translateY(-2px);
}
.tb-zcrystal-card.compatible {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.08);
}
.tb-zcrystal-card.active {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.2);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}
.tb-zcrystal-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tb-zcrystal-type-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.tb-zcrystal-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
}
.tb-zcrystal-card-zmove {
    font-size: 0.72rem;
    color: #ffd700;
    font-weight: 600;
}
.tb-zcrystal-compat-badge {
    position: absolute;
    right: 8px;
    top: 8px;
    font-size: 0.62rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.25);
    color: #10b981;
    font-weight: 700;
}


/* ==========================================================================
   SYNERGY ANALYSIS TOGGLE & COVERAGE STYLES
   ========================================================================== */
.tb-synergy-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.tb-synergy-header-row .tb-synergy-title {
    margin-bottom: 0;
}
.tb-synergy-mode-tabs {
    display: flex;
    gap: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 4px;
}
.tb-syn-mode-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.tb-syn-mode-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.tb-syn-mode-btn.active {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35);
}
.tb-coverage-good {
    color: #10b981;
    font-weight: 700;
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tb-coverage-none {
    color: #f59e0b;
    font-weight: 700;
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tb-eff-badge.eff-super {
    background: #10b981 !important;
    color: #fff !important;
}


.tb-syn-tera-btn {
    margin-top: 5px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}
.tb-syn-tera-btn:hover {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.18);
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.35);
}
.tb-syn-tera-btn.active {
    background: linear-gradient(135deg, #00cec9, #0984e3);
    color: #fff;
    border-color: #fff;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.7);
}

/* ========================================================================== */
/* SYNERGY & WEAKNESS ANALYSIS ENHANCED DASHBOARD */
/* ========================================================================== */
.tb-syn-dash {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tb-syn-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}
.tb-syn-dash-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    font-family: 'Minecraft', monospace;
}
.tb-syn-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.tb-syn-status-badge.status-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.4));
    border: 1px solid #10b981;
    color: #a7f3d0;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}
.tb-syn-status-badge.status-yellow {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.4));
    border: 1px solid #f59e0b;
    color: #fde68a;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}
.tb-syn-status-badge.status-red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(185, 28, 28, 0.5));
    border: 1px solid #ef4444;
    color: #fecaca;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
    animation: synPulseRed 2s infinite ease-in-out;
}
@keyframes synPulseRed {
    0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.7); }
}

.tb-syn-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}
.tb-syn-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.2s, border-color 0.2s;
}
.tb-syn-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}
.tb-syn-card-label {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tb-syn-card-val {
    font-size: 1.15rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.tb-syn-card-sub {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
}

.tb-syn-tip-box {
    background: rgba(0, 206, 201, 0.08);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.73rem;
    color: #e2e8f0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.tb-syn-tip-box i {
    color: #00cec9;
    font-size: 0.95rem;
    margin-top: 2px;
}

.tb-balance-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
    gap: 4px;
    min-width: 60px;
}
.tb-bal-great {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #34d399;
}
.tb-bal-good {
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid #00cec9;
    color: #55efc4;
}
.tb-bal-neutral {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid #64748b;
    color: #cbd5e1;
}
.tb-bal-warn {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #fbbf24;
}
.tb-bal-danger {
    background: rgba(239, 68, 68, 0.25);
    border: 1px solid #ef4444;
    color: #f87171;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.tb-coverage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    gap: 5px;
    min-width: 68px;
}
.tb-cov-opt {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #34d399;
}
.tb-cov-single {
    background: rgba(9, 132, 227, 0.2);
    border: 1px solid #0984e3;
    color: #74b9ff;
}
.tb-cov-zero {
    background: rgba(244, 63, 94, 0.25);
    border: 1px solid #f43f5e;
    color: #fb7185;
}
.tb-cov-meta-alert {
    background: rgba(239, 68, 68, 0.3);
    border: 1px solid #ef4444;
    color: #fff;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
    animation: synPulseRed 2s infinite ease-in-out;
}



.tb-move-z-sub.status {
    background: rgba(255, 211, 42, 0.12);
    border-color: rgba(255, 211, 42, 0.5);
}
.tb-move-z-eff-badge {
    background: rgba(255, 211, 42, 0.25);
    color: #ffd32a;
    border: 1px solid rgba(255, 211, 42, 0.4);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.62rem;
    font-weight: 700;
    margin-left: auto;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.tb-move-z-sub:hover .tb-move-z-eff-badge {
    background: rgba(255, 211, 42, 0.4);
    box-shadow: 0 0 8px rgba(255, 211, 42, 0.6);
}


/* ==========================================================================
   TEAMBUILDER MOVE & Z-MOVE CONTAINED LAYOUT FIX
   ========================================================================== */
.tb-move-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
.tb-move-main-line {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
}
.tb-move-z-sub {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s !important;
    cursor: default !important;
    min-width: 0 !important;
}
.tb-move-z-sub.damage {
    background: rgba(255, 215, 0, 0.08) !important;
    border: 1px solid rgba(255, 215, 0, 0.4) !important;
    color: #ffd700 !important;
}
.tb-move-z-sub.damage:hover {
    background: rgba(255, 215, 0, 0.18) !important;
    border-color: #ffd700 !important;
}
.tb-move-z-sub.status {
    background: rgba(255, 211, 42, 0.08) !important;
    border: 1px solid rgba(255, 211, 42, 0.45) !important;
    color: #ffd32a !important;
}
.tb-move-z-sub.status:hover {
    background: rgba(255, 211, 42, 0.18) !important;
    border-color: #ffd32a !important;
}
.tb-move-z-title {
    color: #fff !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-right: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.tb-move-z-bp {
    color: #ffd32a !important;
    font-weight: 700 !important;
    font-family: 'Minecraft', monospace, sans-serif !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    white-space: nowrap !important;
}
.tb-move-z-bp.status-boost {
    color: #ffd32a !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
}

/* ===== MECHANICS JUMP BUTTONS & BANNERS ===== */
.db-mechanic-jump-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    margin-top: 14px;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.25) 0%, rgba(0, 206, 201, 0.15) 100%);
    border: 1px solid rgba(0, 206, 201, 0.45);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(0, 206, 201, 0.1);
}
.db-mechanic-jump-banner:hover {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.45) 0%, rgba(0, 206, 201, 0.3) 100%);
    border-color: #55efc4;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(85, 239, 196, 0.25);
}
.jump-banner-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.jump-banner-left i {
    font-size: 1.4rem;
    color: #55efc4;
}
.jump-banner-title {
    font-size: 0.92rem;
    font-weight: bold;
    color: #ffffff;
}
.jump-banner-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}
.jump-arrow {
    color: #55efc4;
    font-size: 1rem;
    transition: transform 0.2s ease;
}
.db-mechanic-jump-banner:hover .jump-arrow {
    transform: translateX(4px);
}
.db-mechanic-jump-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.4) 0%, rgba(0, 206, 201, 0.3) 100%);
    border: 1px solid #00cec9;
    border-radius: 10px;
    color: #55efc4;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(0, 206, 201, 0.2);
}
.db-mechanic-jump-btn:hover {
    background: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(85, 239, 196, 0.4);
}
.db-adv-tab-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid rgba(0, 206, 201, 0.5);
    color: #55efc4;
    font-size: 0.72rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-adv-tab-pill:hover {
    background: rgba(0, 206, 201, 0.45);
    border-color: #55efc4;
    color: #ffffff;
    transform: scale(1.05);
}

.db-math-formula-box {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: #55efc4;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(0, 206, 201, 0.5);
    box-shadow: 0 4px 20px rgba(0, 206, 201, 0.15), inset 0 0 15px rgba(0, 206, 201, 0.05);
    padding: 14px 18px;
    border-radius: 10px;
    margin: 12px 0;
    overflow-x: auto;
    line-height: 1.6;
    letter-spacing: 0.3px;
}
.db-section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 206, 201, 0.4), transparent);
    margin: 18px 0;
}

/* ===== TERA RULE CARD & EXCEPTIONS GRID ===== */
.db-tera-rule-card {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.15) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 10px;
}
.db-tera-rule-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: #55efc4;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 206, 201, 0.2);
}
.db-tera-rule-header i {
    font-size: 1.5rem;
    color: #00cec9;
}
.db-tera-exceptions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.db-tera-exception-item {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 10px 14px;
    border-left: 3px solid #ff7675;
}
.db-tera-exception-item.tech {
    border-left-color: #fdcb6e;
}
.db-tera-exception-item .exception-title {
    font-size: 0.82rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-tera-exception-item.bad .exception-title i {
    color: #ff7675;
}
.db-tera-exception-item.tech .exception-title i {
    color: #fdcb6e;
}
.db-tera-exception-item .exception-desc {
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}


.db-card-dl-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    font-size: 0.72rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.db-card-dl-action-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.db-status-cat-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
}

/* --- Status Card Avatar & Meta Chips Fixes --- */
.db-status-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.db-status-meta-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.db-status-chips-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.db-status-chip-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.85) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
}

.db-status-chips-row:has(.fa-shield-alt) .db-status-chip-label i {
    color: #2ecc71;
}

.db-status-chips-row:has(.fa-meteor) .db-status-chip-label i {
    color: #ff7675;
}

.db-status-chips-row:has(.fa-bolt) .db-status-chip-label i {
    color: #f1c40f;
}

.db-status-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.db-field-interactive-item.terrain .db-item-icon-box,
.db-field-interactive-item.field .db-item-icon-box {
    color: #a29bfe;
    background: rgba(162, 155, 254, 0.2);
}
.db-field-interactive-item.type .db-item-icon-box {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.2);
}
.db-field-interactive-item.item .db-item-icon-box {
    color: #0984e3;
    background: rgba(9, 132, 227, 0.2);
}


/* ==========================================================================
   TEAM GENERATOR 2.0 ENHANCED STYLES
   ========================================================================== */
.tb-gen-section-box {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s;
}
.tb-gen-section-box:hover {
    border-color: rgba(255, 255, 255, 0.16);
}
.tb-gen-input-wrap {
    width: 100%;
}
.tb-gen-text-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(10, 15, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
}
.tb-gen-text-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
    background: rgba(10, 18, 36, 0.95);
}
.tb-gen-chip-btn {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #e2e8f0;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    padding: 5px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    transition: all 0.18s ease;
}
.tb-gen-chip-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}
.tb-gen-chip-btn.active {
    background: rgba(245, 158, 11, 0.3) !important;
    border-color: #f59e0b !important;
    color: #fef08a !important;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}
.tb-gen-bring-badge {
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace !important;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
}
.tb-gen-pin-btn {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem;
    padding: 3px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
    transition: all 0.15s ease;
}
.tb-gen-pin-btn:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #fff;
}
.tb-gen-pin-btn.pinned {
    background: rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
    color: #f59e0b;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}
.tb-gen-reroll-btn {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem;
    padding: 3px 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
    transition: all 0.18s ease;
}
.tb-gen-reroll-btn:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    color: #10b981;
}
.tb-gen-bring-badge.core {
    background: rgba(16, 185, 129, 0.22);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #10b981;
}
.tb-gen-bring-badge.bench {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
}
.tb-gen-poke-card.is-core-card {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}


/* ==========================================================================
   ADMIN TRANSLATION & NAME CUSTOMIZATION SYSTEM STYLES
   ========================================================================== */
.admin-inline-pencil-btn {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #e94560;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.admin-inline-pencil-btn:hover {
    background: #e94560;
    color: #fff;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
    transform: scale(1.05);
}

.admin-inline-tag-btn {
    background: rgba(0, 206, 201, 0.15) !important;
    border: 1px dashed rgba(0, 206, 201, 0.6) !important;
    color: #00cec9 !important;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.admin-inline-tag-btn:hover {
    background: #00cec9 !important;
    color: #000 !important;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.6) !important;
    transform: translateY(-1px);
}

.admin-modal-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    background: rgba(0, 206, 201, 0.18);
    border: 1px solid rgba(0, 206, 201, 0.45);
    border-radius: 12px;
    color: #55efc4;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
}
.admin-modal-tag-chip i {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.15s;
}
.admin-modal-tag-chip i:hover {
    color: #ff4757;
}

.admin-modal-preset-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.admin-modal-preset-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
.admin-modal-preset-chip.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.admin-trans-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 7, 15, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999 !important;
}

.admin-trans-modal-content {
    background: #0f1123;
    border: 1px solid rgba(233, 69, 96, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(233, 69, 96, 0.2);
    border-radius: 14px;
    width: 95%;
    max-width: 520px;
    padding: 20px 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: adminTransFadeIn 0.2s ease;
}

@keyframes adminTransFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.admin-trans-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
}

.admin-trans-type-badge {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.5);
    color: #ff6b81;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
}

.admin-trans-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-trans-field-group label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: space-between;
}

.admin-trans-input {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 9px 12px;
    color: #fff;
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
}

.admin-trans-input:focus {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
    background: rgba(15, 23, 42, 0.8);
}

.admin-trans-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
    margin-top: 4px;
}

/* Admin Panel Translations Table */
.admin-trans-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    overflow: hidden;
}

.admin-trans-table th {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.admin-trans-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
}

.admin-trans-table tr:hover td {
    background: rgba(233, 69, 96, 0.05);
}

/* Modal Tabs & Stats Styling */
.admin-trans-tabs-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}

.admin-trans-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-trans-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.admin-trans-tab-btn.active {
    background: rgba(233, 69, 96, 0.2);
    border-color: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

.admin-trans-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-trans-textarea {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 70px;
    line-height: 1.4;
    transition: all 0.2s;
}

.admin-trans-textarea:focus {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
    background: rgba(15, 23, 42, 0.8);
}

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

.admin-trans-stat-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-trans-stat-label {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-weight: bold;
}

.admin-trans-stat-input {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 8px;
    color: #55efc4;
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: bold;
    text-align: center;
    outline: none;
    transition: all 0.2s;
}

.admin-trans-stat-input:focus {
    border-color: #55efc4;
    box-shadow: 0 0 8px rgba(85, 239, 196, 0.35);
}

.admin-trans-total-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(233, 69, 96, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 8px;
    padding: 8px 14px;
    margin-top: 4px;
}

.admin-trans-select {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    font-size: 0.82rem;
    outline: none;
}

/* ========================================================================== */
/* NEWS & UPDATES (CHANGELOG) MODE STYLES */
/* ========================================================================== */
.news-mode-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 14px 40px;
}

.news-header-banner {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.news-header-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 206, 201, 0.12), transparent 70%);
    pointer-events: none;
}

.news-header-main {
    flex: 1;
    min-width: 280px;
}

.news-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.news-header-title {
    font-size: 1.45rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-header-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    line-height: 1.45;
}

.news-header-stats-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.news-stat-pill {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.news-stat-pill i {
    font-size: 1.15rem;
}

.news-stat-val {
    font-size: 0.95rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    color: #fff;
}

.news-stat-lbl {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

/* Controls Bar */
.news-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.news-category-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.news-cat-btn {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.news-cat-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.news-cat-btn.active {
    background: linear-gradient(135deg, #e94560, #c0392b);
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 2px 10px rgba(233, 69, 96, 0.4);
}

.news-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
    flex: 0 1 320px;
}

.news-search-box i.fa-search {
    position: absolute;
    left: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    pointer-events: none;
}

.news-search-box input {
    width: 100%;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 32px 8px 34px;
    color: #fff;
    font-size: 0.78rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.news-search-box input:focus {
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.news-search-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 4px;
}

.news-search-clear:hover {
    color: #fff;
}

/* News Cards */
.news-posts-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.news-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.news-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.news-card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.news-card-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.news-version-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
}

.news-tag-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
}

.news-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
}

.news-date-text {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.news-card-title {
    font-size: 1.12rem;
    color: #fff;
    margin: 0 0 8px 0;
    font-family: 'Minecraft', monospace;
    line-height: 1.4;
}

.news-card-summary {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

.news-card-body.collapsed {
    display: none;
}

.news-highlights-wrap {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 14px;
}

.news-hl-header {
    font-size: 0.75rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.news-highlight-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.news-highlight-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-hl-badge-col {
    flex: 0 0 64px;
}

.news-hl-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    text-align: center;
    width: 100%;
}

.news-hl-content-col {
    flex: 1;
}

.news-hl-title {
    font-size: 0.82rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.news-hl-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.45;
}

.news-card-footer {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

.news-expand-toggle-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 5px 12px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.news-expand-toggle-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.news-empty-state {
    text-align: center;
    padding: 40px 20px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
}

.news-reset-btn {
    margin-top: 14px;
    background: linear-gradient(135deg, #0984e3, #00cec9);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
}

.news-reset-btn:hover {
    opacity: 0.9;
}

/* ==========================================================================
   POKE DIV COMMUNITY HUB (ACTIONS, TYPES, SUGGESTIONS & POLLS)
   ========================================================================== */

.comm-actions-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* Quick Suggest Translation Pencil Button for RU users */
.suggest-trans-pencil-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 206, 201, 0.14);
    border: 1px solid rgba(0, 206, 201, 0.38);
    color: #00cec9;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    font-size: 0.65rem;
    cursor: pointer;
    margin-left: 6px;
    padding: 0;
    vertical-align: middle;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.suggest-trans-pencil-btn:hover {
    background: #00cec9;
    color: #0f172a;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.6);
}

.comm-account-display {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 206, 201, 0.08);
    border: 1px solid rgba(0, 206, 201, 0.28);
    border-radius: 8px;
    padding: 10px 14px;
    user-select: none;
}

.comm-idea-card-title {
    margin: 12px 0 8px 0;
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.4;
}

.comm-idea-content-box {
    background: rgba(255, 255, 255, 0.035);
    border-left: 3px solid #00cec9;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 10px;
    white-space: pre-wrap;
    word-break: break-word;
}

.comm-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.comm-btn-suggest {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%);
    color: #fff;
    border: 1px solid rgba(0, 206, 201, 0.5);
}

.comm-btn-suggest:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.45);
    filter: brightness(1.1);
}

.comm-btn-poll {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: 1px solid rgba(245, 158, 11, 0.5);
}

.comm-btn-poll:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
    filter: brightness(1.1);
}

.comm-types-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.45);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.comm-types-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.comm-type-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.76rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.comm-type-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.comm-type-btn.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(233, 69, 96, 0.15));
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

.comm-sort-group {
    display: flex;
    gap: 4px;
}

.comm-sort-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 5px 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.comm-sort-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.comm-sort-btn.active {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    color: #00cec9;
}

/* Community Cards */
.comm-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.92) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.comm-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.comm-card.comm-card-suggestion {
    border-left: 4px solid #00cec9;
}

.comm-card.comm-card-suggestion.status-approved {
    border-left: 4px solid #10b981;
}

.comm-card.comm-card-poll {
    border-left: 4px solid #f59e0b;
}

.comm-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.comm-author-col {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comm-author-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(0, 206, 201, 0.15);
    color: #00cec9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    border: 1px solid rgba(0, 206, 201, 0.3);
}

.comm-author-avatar.admin {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
}

.comm-author-avatar.custom {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(0, 206, 201, 0.45) !important;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.25);
}

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

.comm-author-badge-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    vertical-align: middle;
    margin-left: 6px;
    border-radius: 4px;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.comm-author-badge-img:hover {
    transform: scale(1.25);
}

.comm-author-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comm-author-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.comm-admin-pill {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
    border: 1px solid rgba(233, 69, 96, 0.4);
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
}

.comm-post-date {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
}

.comm-badge-col {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.comm-cat-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.comm-cat-pill.poll {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
}

.comm-status-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-status-pill.approved {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.comm-status-pill.voting {
    background: rgba(9, 132, 227, 0.18);
    color: #0984e3;
    border: 1px solid rgba(9, 132, 227, 0.35);
}

.comm-admin-card-actions {
    display: inline-flex;
    gap: 6px;
    margin-left: 6px;
}

.comm-admin-btn {
    border: none;
    border-radius: 5px;
    padding: 4px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-admin-btn.approve {
    background: #10b981;
    color: #fff;
}

.comm-admin-btn.delete {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.comm-admin-btn:hover {
    filter: brightness(1.2);
}

/* Translation comparison bar */
.comm-trans-compare-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
}

.comm-trans-box {
    flex: 1;
}

.comm-trans-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.comm-trans-value {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    font-weight: bold;
}

.comm-trans-box.eng .comm-trans-value {
    color: #e2e8f0;
}

.comm-trans-box.rus .comm-trans-value {
    color: #00cec9;
}

.comm-trans-arrow {
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.1rem;
}

.comm-reasoning-box {
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid rgba(0, 206, 201, 0.5);
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 12px;
    line-height: 1.45;
}

.comm-admin-comment-box {
    display: flex;
    gap: 8px;
    font-size: 0.78rem;
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    border: 1px dashed rgba(16, 185, 129, 0.3);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.comm-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 10px;
}

.comm-vote-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comm-vote-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 5px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.comm-vote-btn.like:hover, .comm-vote-btn.like.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #10b981;
}

.comm-vote-btn.dislike:hover, .comm-vote-btn.dislike.active {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

.comm-rating-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
}

.comm-rating-pill.pos {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.comm-rating-pill.neg {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.comm-rating-pill.zero {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}

/* Poll styling */
.comm-poll-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #fff;
    margin: 8px 0 6px 0;
    line-height: 1.4;
}

.comm-poll-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
    line-height: 1.45;
}

.comm-poll-options-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.comm-poll-opt-row {
    position: relative;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
}

.comm-poll-opt-row:hover {
    border-color: rgba(245, 158, 11, 0.5);
    transform: translateX(2px);
}

.comm-poll-opt-row.selected {
    border-color: #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.comm-poll-opt-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.45) 100%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.comm-poll-opt-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
}

.comm-poll-opt-radio {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
}

.comm-poll-opt-row.selected .comm-poll-opt-radio {
    color: #f59e0b;
}

.comm-poll-opt-text {
    flex: 1;
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    color: #fff;
}

.comm-poll-opt-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
}

.comm-poll-opt-stat .votes-num {
    color: rgba(255, 255, 255, 0.5);
}

.comm-poll-opt-stat .votes-pct {
    font-weight: bold;
    color: #f59e0b;
    min-width: 35px;
    text-align: right;
}

.comm-poll-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 10px;
}

.comm-poll-total b {
    color: #fff;
}

/* Modals */
.comm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.comm-modal-card {
    background: #1a1a2e;
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 14px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    animation: modalIn 0.2s ease-out;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.comm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.5);
}

.comm-modal-header h1,
.comm-modal-header h2,
.comm-modal-header h3,
.comm-modal-header h4,
.comm-modal-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.comm-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.comm-modal-close:hover {
    color: #fff;
}

.comm-modal-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.comm-form-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
}

.comm-form-input, .comm-form-textarea {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 9px 12px;
    color: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s;
}

.comm-form-input:focus, .comm-form-textarea:focus {
    border-color: #00cec9;
}

.comm-btn-add-opt {
    background: rgba(245, 158, 11, 0.15);
    border: 1px dashed rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    border-radius: 6px;
    padding: 6px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    margin-top: 6px;
}

.comm-btn-add-opt:hover {
    background: rgba(245, 158, 11, 0.25);
}

.comm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.5);
}

.comm-btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 7px 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
}

.comm-btn-submit {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%);
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.comm-btn-submit:hover {
    filter: brightness(1.1);
}

/* ==========================================================================
   TERA GENERATOR & TACTICAL RECOMMENDATIONS
   ========================================================================== */
.tb-gen-tera-detail {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 6px;
    padding: 3px 8px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    transition: all 0.2s ease;
}

.tb-gen-tera-detail:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.5);
}

.tb-tera-rec-box {
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.tb-tera-rec-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-tera-rec-chip:hover {
    background: rgba(168, 85, 247, 0.18);
    border-color: rgba(168, 85, 247, 0.5);
    transform: translateY(-1px);
}

.tb-tera-rec-chip.active {
    background: rgba(168, 85, 247, 0.28);
    border-color: #a855f7;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}






/* ==========================================================================
   COMMUNITY BUILDS & TEAMS ON NEWS WALL
   ========================================================================== */
.comm-card.comm-card-team {
    border-left: 4px solid #00cec9 !important;
}

.comm-card.comm-card-build {
    border-left: 4px solid #a855f7 !important;
}

.comm-type-pill.team {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid #00cec9;
    color: #00cec9;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-type-pill.build {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid #a855f7;
    color: #c084fc;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-format-badge {
    padding: 3px 9px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.comm-team-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.08rem;
    color: #fff;
    margin: 6px 0 8px 0;
}

.comm-team-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
    margin-bottom: 12px;
}

.comm-team-pokes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.comm-team-poke-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.2s, transform 0.2s;
}

.comm-team-poke-card:hover {
    border-color: #00cec9;
    transform: translateY(-2px);
}

.comm-team-poke-art-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 6px;
}

.comm-team-poke-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

.comm-tera-badge {
    position: absolute;
    bottom: -4px;
    right: -6px;
    padding: 2px 6px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.comm-team-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.comm-team-poke-sub {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Minecraft', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.comm-team-poke-props {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    margin-top: 6px;
}

.comm-team-prop-chip {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comm-team-prop-chip i {
    font-size: 0.55rem;
    opacity: 0.7;
}

.comm-team-details-wrap {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.comm-details-header {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #00cec9;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.comm-poke-detail-row {
    background: rgba(10, 15, 30, 0.6);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.comm-poke-detail-head {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
}

.comm-poke-detail-title {
    color: #fff;
}

.comm-nature-tag {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid #10b981;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.62rem;
}

.comm-evs-tag {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.65rem;
}

.comm-poke-moves-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
}

.comm-detail-move-chip {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #e2e8f0;
    font-family: 'Minecraft', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comm-build-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.comm-build-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid;
    outline: none;
}

.comm-build-action-btn.details {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

.comm-build-action-btn.details:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.comm-build-action-btn.import {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    color: #00cec9;
}

.comm-build-action-btn.import:hover {
    background: rgba(0, 206, 201, 0.3);
    color: #fff;
    transform: translateY(-1px);
}

.comm-build-action-btn.copy {
    background: rgba(9, 132, 227, 0.15);
    border-color: #0984e3;
    color: #74b9ff;
}

.comm-build-action-btn.copy:hover {
    background: rgba(9, 132, 227, 0.3);
    color: #fff;
    transform: translateY(-1px);
}

/* Single Pokemon Hero Card */
.comm-single-build-box {
    display: flex;
    gap: 16px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 12px;
    padding: 16px;
    align-items: center;
    margin: 12px 0;
    flex-wrap: wrap;
}

.comm-single-art-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 90px;
}

.comm-single-art {
    width: 84px;
    height: 84px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
}

.comm-role-badge {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid #a855f7;
    color: #c084fc;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.58rem;
    font-family: 'Minecraft', monospace;
}

.comm-single-info-col {
    flex: 1;
    min-width: 220px;
}

.comm-single-head {
    margin-bottom: 8px;
}

.comm-single-name {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #fff;
    font-weight: bold;
}

.comm-single-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.comm-single-chips-wrap {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.comm-chip-pill {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.comm-chip-pill.item i { color: #f59e0b; }
.comm-chip-pill.ability i { color: #00cec9; }
.comm-chip-pill.nature i { color: #10b981; }
.comm-chip-pill.evs i { color: #818cf8; }

.comm-single-moves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
}

.comm-single-move-chip {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    color: #fff;
    font-family: 'Minecraft', monospace;
}

/* Modal Publish Build */
.modal-publish-build {
    max-width: 620px !important;
    width: 95% !important;
    max-height: 88vh;
    overflow-y: auto;
}

.publish-build-tabs-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    flex-wrap: wrap;
}

.pub-tab-btn {
    background: none;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.pub-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.pub-tab-btn.active {
    background: rgba(0, 206, 201, 0.18);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.pub-field-row {
    margin-bottom: 12px;
}

.pub-label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 5px;
}

.pub-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

.pub-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.2s;
}

.pub-input:focus {
    border-color: #00cec9;
}

.pub-team-chips-preview {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    min-height: 48px;
    align-items: center;
}

.pub-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    color: #fff;
    font-family: 'Minecraft', monospace;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pub-preview-chip img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.pub-search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid #00cec9;
    border-radius: 8px;
    padding: 8px;
    margin-top: 6px;
}

.pub-search-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.15s;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #fff;
}

.pub-search-item:hover {
    background: rgba(0, 206, 201, 0.25);
}

.pub-search-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.pub-selected-poke-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 206, 201, 0.1);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Minecraft', monospace;
}

.comm-btn-publish-build {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.2), rgba(9, 132, 227, 0.2)) !important;
    border: 1px solid #00cec9 !important;
    color: #00cec9 !important;
}

.comm-btn-publish-build:hover {
    background: linear-gradient(135deg, #00cec9, #0984e3) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.4);
}



/* ===== СХЕМА ЗОН ПОРАЖЕНИЯ ПРИЁМА (Move Target Diagram) ===== */
.db-move-target-box {
    background: rgba(18, 22, 36, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 20px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.db-target-diagram {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 380px;
}

.db-target-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    padding: 4px;
    border-radius: 14px;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

.db-target-row.side-active {
    outline: 3px solid #2ecc71;
    box-shadow: 0 0 16px rgba(46, 204, 113, 0.5);
    background: rgba(46, 204, 113, 0.1);
}

.db-target-pill {
    padding: 10px 4px;
    border-radius: 14px;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 700;
    color: #ffffff;
    border: 3.5px solid transparent;
    transition: all 0.2s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Enemy pills (orange like photo) */
.db-target-enemy {
    background: #de8326;
    opacity: 0.85;
}

/* Ally pills (cyan/blue like photo) */
.db-target-ally {
    background: #16c0eb;
    opacity: 0.85;
}

/* User pill (matches cyan from photo, sized to fit Пользователь) */
.db-target-user {
    background: #16c0eb;
    opacity: 0.85;
    font-size: 0.72rem;
    letter-spacing: -0.25px;
    white-space: nowrap;
}

/* Highlighted target pills (vibrant green border like photo) */
.db-target-pill.active {
    opacity: 1 !important;
    border: 3.5px solid #27ae60 !important;
    box-shadow: 0 0 12px rgba(39, 174, 96, 0.75), inset 0 0 6px rgba(39, 174, 96, 0.35);
}

.db-target-desc {
    margin-top: 14px;
    text-align: center;
    font-style: italic;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.45;
    max-width: 400px;
}

.db-detail-target-section {
    margin-top: 14px;
}

.db-detail-target-pill-badge {
    margin-left: 8px;
    font-size: 0.74rem;
    font-weight: normal;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(39, 174, 96, 0.2);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
    vertical-align: middle;
}

.db-move-target-badge, .db-move-meta-tag.db-move-target-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.35);
    white-space: nowrap;
}

.db-mcard-extra-pill.target {
    border-color: rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}


/* ==========================================================================
   ADMIN TAG & CATEGORY EDITOR STYLES (MINECRAFT FONT)
   ========================================================================== */
.comm-admin-btn.tags {
    background: rgba(0, 206, 201, 0.18) !important;
    border: 1px solid rgba(0, 206, 201, 0.4) !important;
    color: #00cec9 !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.15s ease !important;
}

.comm-admin-btn.tags:hover {
    background: rgba(0, 206, 201, 0.35) !important;
    color: #fff !important;
    border-color: #00cec9 !important;
}

.news-admin-tag-btn {
    background: rgba(0, 206, 201, 0.15) !important;
    border: 1px solid rgba(0, 206, 201, 0.35) !important;
    color: #00cec9 !important;
    border-radius: 6px !important;
    padding: 3px 9px !important;
    cursor: pointer !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.74rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.15s ease !important;
}

.news-admin-tag-btn:hover {
    background: rgba(0, 206, 201, 0.3) !important;
    border-color: #00cec9 !important;
    color: #fff !important;
}

.admin-editable {
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.admin-editable:hover {
    filter: brightness(1.25) !important;
    outline: 1px dashed rgba(0, 206, 201, 0.7) !important;
}

.news-tag-presets-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.news-tag-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    padding: 2px 8px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.news-tag-chip:hover {
    background: rgba(0, 206, 201, 0.2) !important;
    border-color: #00cec9 !important;
    color: #fff !important;
}

#modalAdminEditTags,
#modalAdminEditTags input,
#modalAdminEditTags select,
#modalAdminEditTags textarea,
#modalAdminEditTags button,
#modalAdminEditTags label,
#modalAdminEditTags span,
#modalAdminEditTags div {
    font-family: 'Minecraft', monospace !important;
}

#modalAdminEditTags i,
#modalAdminEditTags [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}

/* ==========================================================================
   PROFILE CRY CONTROLS - ULTRA-COMPACT SINGLE-ROW TOOLBAR
   ========================================================================== */
.db-profile-cry-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 2px;
    padding: 3px 8px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    max-width: 100%;
    flex-wrap: nowrap;
    position: relative;
    z-index: 5;
}

.db-profile-cry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.db-profile-cry-btn span {
    display: inline-block;
    line-height: 1;
}

.db-profile-cry-btn.play i,
.db-profile-cry-btn.retro i {
    display: inline-block;
    line-height: 1;
    transform: translateY(1.5px);
}

.db-profile-cry-btn.play {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(233, 69, 96, 0.18));
    border-color: rgba(233, 69, 96, 0.5);
    color: #fff;
}
.db-profile-cry-btn.play:hover {
    background: rgba(233, 69, 96, 0.6);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}
.db-profile-cry-btn.play.playing {
    background: linear-gradient(135deg, #e94560, #ff6b8b) !important;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out;
}

.db-profile-cry-btn.retro {
    background: rgba(108, 92, 231, 0.2);
    border-color: rgba(108, 92, 231, 0.4);
    color: #a29bfe;
    padding: 4px 8px;
}
.db-profile-cry-btn.retro:hover {
    background: rgba(108, 92, 231, 0.45);
    color: #fff;
    box-shadow: 0 0 8px rgba(108, 92, 231, 0.5);
}
.db-profile-cry-btn.retro.playing {
    background: #6c5ce7 !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(108, 92, 231, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out;
}

.db-profile-cry-btn.download {
    background: rgba(0, 184, 148, 0.15);
    border-color: rgba(0, 184, 148, 0.35);
    color: #55efc4;
    padding: 4px 7px;
    width: 26px;
    height: 26px;
}
.db-profile-cry-btn.download:hover {
    background: rgba(0, 184, 148, 0.4);
    color: #fff;
    box-shadow: 0 0 8px rgba(0, 184, 148, 0.5);
}

.db-profile-cry-vol-expandable {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.db-profile-cry-vol-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-profile-cry-vol-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.db-profile-cry-vol-pop {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 6px 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    align-items: center;
    gap: 8px;
    z-index: 100;
    white-space: nowrap;
}

.db-profile-cry-vol-expandable:hover .db-profile-cry-vol-pop,
.db-profile-cry-vol-expandable.active .db-profile-cry-vol-pop {
    display: flex;
}

.db-profile-cry-vol-pop::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #0f172a transparent transparent transparent;
}

.db-cry-compact-range {
    width: 65px;
    height: 4px;
    accent-color: #e94560;
    cursor: pointer;
}

#dbProfileCryVolVal {
    font-size: 0.68rem;
    color: #e94560;
    font-weight: 700;
    min-width: 28px;
    text-align: right;
    font-family: 'Minecraft', monospace;
}


/* ==========================================================================
   POKÉMON SOUNDS & CRIES DATABASE (SOUNDBOARD & CAPCUT TOOLS)
   ========================================================================== */

.db-cries-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 15px !important;
    box-sizing: border-box !important;
}

.db-cry-card {
    background: rgba(22, 27, 46, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    backdrop-filter: blur(10px) !important;
    font-family: 'Minecraft', monospace !important;
    box-sizing: border-box !important;
}

.db-cry-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(233, 69, 96, 0.5) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(233, 69, 96, 0.2) !important;
}

.db-cry-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

.db-cry-card-dex {
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    color: #e94560 !important;
    background: rgba(233, 69, 96, 0.15) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 0.5px !important;
    font-family: 'Minecraft', monospace !important;
}

.db-cry-card-types {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
}

.db-cry-card-type-dot {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.db-cry-card-type-dot img {
    width: 13px !important;
    height: 13px !important;
    object-fit: contain !important;
    display: block !important;
}

.db-cry-card-sprite-wrap {
    width: 90px !important;
    height: 90px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 6px auto !important;
    position: relative !important;
    cursor: pointer !important;
}

.db-cry-card-sprite {
    max-width: 85px !important;
    max-height: 85px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)) !important;
    transition: transform 0.25s ease !important;
}

.db-cry-card:hover .db-cry-card-sprite {
    transform: scale(1.08) !important;
}

.db-cry-card-name-ru {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    font-family: 'Minecraft', monospace !important;
    margin-top: 4px !important;
}

.db-cry-card-name-en {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    font-family: 'Minecraft', monospace !important;
}

.db-cry-card-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
}

.db-cry-play-row {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
}

.db-cry-play-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 10px !important;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(233, 69, 96, 0.1)) !important;
    border: 1px solid rgba(233, 69, 96, 0.4) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
}

.db-cry-play-btn:hover {
    background: rgba(233, 69, 96, 0.45) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.5) !important;
}

.db-cry-play-btn.playing {
    background: linear-gradient(135deg, #e94560, #ff6b8b) !important;
    border-color: #fff !important;
    box-shadow: 0 0 18px rgba(233, 69, 96, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out !important;
}

.db-cry-retro-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 7px 8px !important;
    background: rgba(108, 92, 231, 0.2) !important;
    border: 1px solid rgba(108, 92, 231, 0.4) !important;
    border-radius: 8px !important;
    color: #a29bfe !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
}

.db-cry-retro-btn:hover {
    background: rgba(108, 92, 231, 0.4) !important;
    color: #fff !important;
    border-color: #a29bfe !important;
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.4) !important;
}

.db-cry-retro-btn.playing {
    background: #6c5ce7 !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: 0 0 16px rgba(108, 92, 231, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out !important;
}

.db-cry-download-row {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
}

.db-cry-dl-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 5px 8px !important;
    background: rgba(0, 184, 148, 0.15) !important;
    border: 1px solid rgba(0, 184, 148, 0.3) !important;
    border-radius: 7px !important;
    color: #55efc4 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
}

.db-cry-dl-btn:hover {
    background: rgba(0, 184, 148, 0.35) !important;
    color: #fff !important;
    border-color: #00b894 !important;
    box-shadow: 0 0 10px rgba(0, 184, 148, 0.4) !important;
}

.db-cry-volume-slider {
    accent-color: #e94560 !important;
    height: 6px !important;
    border-radius: 3px !important;
}


/* ==========================================================================
   SOUND DATABASE STYLES (SFX, JINGLES, MOVES, OST)
   ========================================================================== */
.db-sound-card {
    background: rgba(22, 27, 46, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    backdrop-filter: blur(10px) !important;
    font-family: 'Minecraft', monospace !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.db-sound-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(233, 69, 96, 0.5) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(233, 69, 96, 0.2) !important;
}

.db-sound-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.db-sound-badge {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 0.4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-transform: uppercase !important;
}

.db-sound-format {
    font-size: 0.65rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}

.db-sound-icon-wrap {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    margin: 4px 0 10px 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease !important;
}

.db-sound-card:hover .db-sound-icon-wrap {
    transform: scale(1.08) !important;
}

.db-sound-name-ru {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 2px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.db-sound-name-en {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-style: italic !important;
    margin-bottom: 8px !important;
}

.db-sound-desc {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.db-sound-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
}

.db-sound-tag {
    font-size: 0.6rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
}

.db-sound-card-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
}

.db-sound-play-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(233, 69, 96, 0.5) !important;
    background: rgba(233, 69, 96, 0.2) !important;
    color: #fff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.db-sound-play-btn:hover {
    background: rgba(233, 69, 96, 0.4) !important;
    border-color: #e94560 !important;
    transform: scale(1.02) !important;
}

.db-sound-play-btn.playing {
    background: #e94560 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.6) !important;
    animation: soundPulse 1.2s infinite ease-in-out !important;
}

@keyframes soundPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(233, 69, 96, 0.5); }
    50% { box-shadow: 0 0 18px rgba(233, 69, 96, 0.9); }
}

.db-sound-dl-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.7rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.db-sound-dl-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.db-sound-progress-container {
    width: 100% !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
}

.db-sound-progress-bar {
    width: 100% !important;
    height: 5px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.db-sound-progress-fill {
    height: 100% !important;
    transition: width 0.2s linear !important;
}


/* ==========================================================================
   BACKDROP & VIDEO BACKGROUND GENERATOR (ADMIN PANEL)
   ========================================================================== */

.bd-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.bd-header-info {
    flex: 1;
    min-width: 260px;
}

.bd-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bd-main-grid {
    display: grid;
    grid-template-columns: minmax(360px, 460px) 1fr;
    gap: 24px;
    align-items: flex-start;
}

@media (max-width: 960px) {
    .bd-main-grid {
        grid-template-columns: 1fr;
    }
}

.bd-controls-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bd-panel-box {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s ease;
}

.bd-panel-box:hover {
    border-color: rgba(233, 69, 96, 0.25);
}

.bd-panel-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}

.bd-preset-chips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bd-preset-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.64rem;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-preset-chip:hover {
    background: rgba(233, 69, 96, 0.18);
    border-color: rgba(233, 69, 96, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.bd-preset-chip.active {
    background: rgba(233, 69, 96, 0.28);
    border-color: #e94560;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.35);
}

.bd-res-btns-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.bd-res-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bd-res-btn:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.4);
    color: #ffffff;
}

.bd-res-btn.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.bd-custom-res-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.bd-input-num {
    width: 80px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 5px 8px;
}

.bd-input-num:focus {
    border-color: #00cec9;
    outline: none;
}

.bd-colors-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.bd-color-chips-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bd-color-chip {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.bd-color-chip:hover {
    transform: scale(1.15);
    border-color: #ffffff;
}

.bd-color-chip.active {
    border-color: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.bd-color-input {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.bd-select {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 6px 10px;
    cursor: pointer;
    width: 100%;
}

.bd-select:focus {
    border-color: #e94560;
    outline: none;
}

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

.bd-slider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.bd-slider-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.bd-range {
    flex: 1;
    height: 4px;
    accent-color: #e94560;
    cursor: pointer;
}

.bd-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
}

.bd-checkbox-label input[type="checkbox"] {
    accent-color: #e94560;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.bd-input-text {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 7px 10px;
    width: 100%;
    box-sizing: border-box;
}

.bd-input-text:focus {
    border-color: #00cec9;
    outline: none;
}

/* Right Column: Preview */
.bd-preview-col {
    position: relative;
}

.bd-preview-sticky {
    position: sticky;
    top: 20px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.bd-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bd-res-badge {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.35);
    color: #00cec9;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 3px 8px;
    border-radius: 4px;
}

.bd-preview-fs-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.72rem;
    transition: all 0.2s ease;
}

.bd-preview-fs-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.bd-canvas-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #060911;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    min-height: 320px;
    overflow: hidden;
}

#backdropPreviewCanvas {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
    display: block;
}

.bd-preview-tips {
    margin-top: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.63rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
}

/* Fullscreen Modal */
.bd-fullscreen-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.bd-fullscreen-overlay {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bdFullscreenCanvas {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

.bd-fullscreen-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
}

.bd-fullscreen-close:hover {
    transform: rotate(90deg) scale(1.1);
}

.bd-fullscreen-tip {
    position: absolute;
    bottom: -32px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    text-align: center;
    width: 100%;
}


/* ==========================================================================
   TYPE BADGE & OVERLAY GENERATOR (ADMIN PANEL)
   ========================================================================== */

.tb-types-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 6px;
}

.tb-type-select-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-type-select-chip img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.tb-type-select-chip:hover {
    border-color: var(--t-color, #00cec9);
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.tb-type-select-chip.active {
    background: var(--t-color, #00cec9);
    border-color: #ffffff;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 12px var(--t-color, rgba(0, 206, 201, 0.5));
    font-weight: bold;
}

.tb-quick-combo-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 5px 9px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-quick-combo-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #ffffff;
}

.tb-canvas-checker-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(45deg, #1c2438 25%, transparent 25%),
                      linear-gradient(-45deg, #1c2438 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #1c2438 75%),
                      linear-gradient(-45deg, transparent 75%, #1c2438 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 24px 16px;
    min-height: 220px;
    overflow: auto;
}

#typeBadgePreviewCanvas {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px;
    display: block;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   HD SPRITE & ART DOWNLOAD DROPDOWN (DATABASE & STUDIO)
   ========================================================================== */
.db-hd-dl-dropdown {
    position: fixed;
    z-index: 999999 !important;
    width: 360px;
    background: #0f172a;
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 206, 201, 0.2);
    padding: 12px;
    font-family: 'Minecraft', monospace;
    animation: dbHdFadeIn 0.15s ease-out;
}

@keyframes dbHdFadeIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.db-hd-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: #ffffff;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.db-hd-menu-close {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.db-hd-menu-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.db-hd-menu-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 380px;
    overflow-y: auto;
}

.db-hd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.15s ease;
}

.db-hd-item:hover {
    background: rgba(0, 206, 201, 0.08);
    border-color: rgba(0, 206, 201, 0.3);
}

.db-hd-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.db-hd-item-title {
    font-size: 0.68rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-hd-item-sub {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.45);
}

.db-hd-item-btns {
    display: flex;
    gap: 5px;
}

.db-hd-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.db-hd-btn:hover {
    background: #00cec9;
    color: #000;
    border-color: #00cec9;
}

.db-hd-btn.copy:hover {
    background: #e94560;
    color: #fff;
    border-color: #e94560;
}

.db-hd-menu-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}


.hd-studio-type-btn.active {
    background: rgba(0, 206, 201, 0.25) !important;
    border-color: #00cec9 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3) !important;
}

#hdStudioShinyToggle.active {
    background: rgba(241, 196, 15, 0.25) !important;
    border-color: #f1c40f !important;
    color: #f1c40f !important;
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.4) !important;
}


/* ==========================================================================
   POKÉMON EVOLUTION CHAIN COMPONENT
   ========================================================================== */
.db-profile-evo-section {
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(10, 15, 28, 0.96) 100%);
    border: 1px solid rgba(0, 206, 201, 0.28);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.db-profile-evo-section:hover {
    border-color: rgba(0, 206, 201, 0.5);
    box-shadow: 0 12px 36px rgba(0, 206, 201, 0.15), 0 10px 30px rgba(0, 0, 0, 0.4);
}

.db-evo-collapse-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    margin: 0 !important;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(90deg, rgba(0, 206, 201, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    transition: all 0.25s ease;
}

.db-evo-collapse-title:hover {
    background: linear-gradient(90deg, rgba(0, 206, 201, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.db-evo-collapse-title.is-expanded {
    border-bottom: 1px solid rgba(0, 206, 201, 0.22);
}

.db-evo-collapse-title.is-expanded .db-evo-arrow {
    transform: rotate(180deg);
}

.db-evo-count-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 20px;
    color: #00cec9;
    text-shadow: 0 0 8px rgba(0, 206, 201, 0.3);
}

.db-evo-toggle-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    transition: color 0.2s ease;
}

.db-evo-collapse-title:hover .db-evo-toggle-hint {
    color: #00cec9;
}

.db-evo-arrow {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: #00cec9;
    font-size: 0.85rem;
}

.db-profile-evo-body {
    padding: 26px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    background: radial-gradient(ellipse at center, rgba(30, 41, 59, 0.35) 0%, rgba(8, 12, 22, 0.7) 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 206, 201, 0.4) transparent;
}

.db-profile-evo-body::-webkit-scrollbar {
    height: 6px;
}

.db-profile-evo-body::-webkit-scrollbar-thumb {
    background: rgba(0, 206, 201, 0.4);
    border-radius: 4px;
}

/* Linear & Branching Layouts */
.db-evo-linear-wrap,
.db-evo-branching-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: 100%;
}

.db-evo-branching-wrap {
    align-items: center;
}

.db-evo-branch-base {
    display: flex;
    align-items: center;
    position: relative;
}

.db-evo-branch-base::after {
    content: '';
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 6px rgba(0, 206, 201, 0.4);
    flex-shrink: 0;
}

.db-evo-branch-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    padding-left: 28px;
    border-left: none;
}

.db-evo-branch-row {
    display: flex;
    align-items: center;
    position: relative;
}

.db-evo-branch-row::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-branch-row::after {
    content: '';
    position: absolute;
    left: -28px;
    top: -7px;
    bottom: -7px;
    width: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-branch-row:first-child::after {
    top: 50%;
}

.db-evo-branch-row:last-child::after {
    bottom: 50%;
}

.db-evo-branch-row:only-child::after {
    display: none;
}

.db-evo-sub-branch {
    display: flex;
    align-items: center;
    position: relative;
}

.db-evo-sub-branch::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-sub-branch::after {
    content: '';
    position: absolute;
    left: -28px;
    top: -7px;
    bottom: -7px;
    width: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-sub-branch:first-child::after {
    top: 50%;
}

.db-evo-sub-branch:last-child::after {
    bottom: 50%;
}

.db-evo-sub-branch:only-child::after {
    display: none;
}

.db-evo-branches-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    padding-left: 28px;
    border-left: none;
}

.db-evo-card + .db-evo-branches-col::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

/* Card */
.db-evo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 126px;
    padding: 12px 8px 14px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
    user-select: none;
}

.db-evo-card:hover {
    transform: translateY(-4px);
    background: linear-gradient(180deg, rgba(40, 53, 76, 0.95) 0%, rgba(18, 28, 51, 0.98) 100%);
    border-color: rgba(0, 206, 201, 0.65);
    box-shadow: 0 10px 24px rgba(0, 206, 201, 0.25);
}

.db-evo-card:hover .db-evo-sprite {
    transform: scale(1.1);
}

.db-evo-card.is-current {
    background: linear-gradient(180deg, rgba(0, 206, 201, 0.18) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid #00cec9;
    box-shadow: 0 0 20px rgba(0, 206, 201, 0.4), inset 0 0 12px rgba(0, 206, 201, 0.12);
}

.db-evo-current-badge {
    position: absolute;
    top: -10px;
    background: linear-gradient(135deg, #00cec9, #0984e3);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 206, 201, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 5;
}

.db-evo-sprite-box {
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
}

.db-evo-sprite {
    max-width: 74px;
    max-height: 74px;
    object-fit: contain;
    image-rendering: auto !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.db-evo-name {
    font-size: 0.74rem;
    font-weight: 700;
    color: #f8fafc;
    text-align: center;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.15;
    height: 1.8rem;
    width: 100%;
    max-width: 120px;
    padding: 0 2px;
    box-sizing: border-box;
    margin-top: 3px;
    letter-spacing: 0.2px;
}

.db-evo-dex {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 1px;
    letter-spacing: 0.5px;
}

.db-evo-types {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.db-evo-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 6px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.2px;
}

.db-evo-type-chip img {
    width: 12px;
    height: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Step Arrow & Method Badge */
/* Step Arrow Container */
.db-evo-step-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 8px;
    min-width: 85px;
    max-width: 175px;
    width: auto;
    text-align: center;
    flex-shrink: 0;
    margin: 0 2px;
}

/* Method Badge (wrapping, multi-line, glow) */
.db-evo-method-badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.62rem;
    font-weight: 600;
    color: #fcd34d;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(252, 211, 77, 0.45);
    border-radius: 12px;
    padding: 4px 9px;
    line-height: 1.25;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 8px rgba(252, 211, 77, 0.15);
    margin-bottom: 7px;
    max-width: 155px;
    width: max-content;
    white-space: normal;
    text-align: center;
    word-break: normal;
    overflow-wrap: break-word;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.db-evo-method-badge:hover {
    border-color: rgba(252, 211, 77, 0.85);
    box-shadow: 0 4px 14px rgba(252, 211, 77, 0.35);
    transform: translateY(-1px);
    color: #fff;
}

.db-evo-method-badge i {
    flex-shrink: 0;
    font-size: 0.68rem;
    color: #fcd34d;
}

/* Elegant Directional Flow Track */
.db-evo-flow-track {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 55px;
    height: 18px;
}

.db-evo-flow-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 206, 201, 0.25) 0%, rgba(0, 206, 201, 0.85) 75%, #00cec9 100%);
    box-shadow: 0 0 6px rgba(0, 206, 201, 0.45);
    border-radius: 2px;
    position: relative;
}

.db-evo-flow-line::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 206, 201, 0.7);
    box-shadow: 0 0 6px rgba(0, 206, 201, 0.8);
}

.db-evo-flow-arrowhead {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -1px;
    color: #00cec9;
    font-size: 0.92rem;
    filter: drop-shadow(0 0 6px rgba(0, 206, 201, 0.85));
    transition: transform 0.2s ease;
    animation: evoArrowPulse 2.2s infinite ease-in-out;
}

.db-evo-arrow-icon {
    font-size: 0.9rem;
    color: #00cec9;
    filter: drop-shadow(0 0 4px rgba(0, 206, 201, 0.8));
}

@keyframes evoArrowPulse {
    0%, 100% {
        transform: translateX(0);
        filter: drop-shadow(0 0 5px rgba(0, 206, 201, 0.7));
    }
    50% {
        transform: translateX(4px);
        filter: drop-shadow(0 0 10px rgba(0, 206, 201, 1));
    }
}


/* ==========================================================================
   POKEMON SEARCH SPELL SUGGESTION & DROPDOWN STYLES
   ========================================================================== */
.hd-studio-search-wrap {
    position: relative;
    width: 100%;
}

.bd-panel-box:has(#hdStudioPokeSearchInp) {
    position: relative;
    z-index: 900 !important;
}

.hd-studio-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 999999 !important;
    background: #0b1329 !important;
    border: 1.5px solid #00cec9;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 206, 201, 0.3);
    max-height: 280px;
    overflow-y: auto;
    font-family: 'Minecraft', monospace;
    backdrop-filter: none !important;
}

.hd-drop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
}

.hd-drop-item:last-child {
    border-bottom: none;
}

.hd-drop-item:hover {
    background: rgba(0, 206, 201, 0.15);
}

.hd-drop-thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.hd-drop-text {
    flex: 1;
    overflow: hidden;
}

.hd-drop-name {
    font-size: 0.7rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-drop-sub {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.5);
}

.hd-drop-fuzzy-badge {
    color: #f1c40f;
    font-size: 0.6rem;
}

.db-search-suggest-box {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.3);
    border-radius: 8px;
    padding: 10px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffffff;
    margin-bottom: 16px;
}

.db-search-suggest-btn {
    background: rgba(241, 196, 15, 0.2);
    border: 1px solid #f1c40f;
    color: #f1c40f;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    transition: all 0.2s ease;
}

.db-search-suggest-btn:hover {
    background: #f1c40f;
    color: #000;
}


/* ==========================================================================
   VIDEO OVERLAY ELEMENTS GENERATOR STYLES
   ========================================================================== */
#adminSectionVideoElements {
    animation: fadeIn 0.3s ease;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.ve-recent-color-chip {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    cursor: pointer;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    display: inline-block;
    flex-shrink: 0;
}

.ve-recent-color-chip:hover {
    transform: scale(1.18);
    border-color: #00cec9;
    box-shadow: 0 4px 10px rgba(0, 206, 201, 0.4);
    z-index: 2;
}

.ve-recent-color-chip.active-c1 {
    border-color: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
}

.ve-recent-color-chip.active-c2 {
    border-color: #ffa502 !important;
    box-shadow: 0 0 8px rgba(255, 165, 2, 0.8) !important;
}

.ve-shape-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.ve-shape-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.18s ease;
    font-family: 'Minecraft', monospace;
}

.ve-shape-card:hover {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.12);
    transform: translateY(-2px);
}

.ve-shape-card.active {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.22);
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.4);
    color: #00cec9;
}

.ve-shape-name {
    font-size: 0.68rem;
    font-weight: bold;
    margin-top: 4px;
}

.ve-shape-desc {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
    line-height: 1.2;
}

.ve-color-preset-pill {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.ve-color-preset-pill:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.ve-preset-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ve-rot-quick-btn {
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ve-rot-quick-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #fff;
}

.ve-canvas-checker {
    background-color: #111827;
    background-image:
        linear-gradient(45deg, #1f293d 25%, transparent 25%),
        linear-gradient(-45deg, #1f293d 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1f293d 75%),
        linear-gradient(-45deg, transparent 75%, #1f293d 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
    border: 1.5px solid rgba(0, 206, 201, 0.3);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
}

#vePreviewCanvas {
    max-width: 100%;
    max-height: 520px;
    width: auto;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.6));
}

/* Download pills and matrix download buttons */
.db-chart-dl-pill {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.22), rgba(0, 206, 201, 0.22)) !important;
    border: 1px solid rgba(0, 206, 201, 0.45) !important;
    color: #00cec9 !important;
    font-weight: bold !important;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-chart-dl-pill:hover {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.38), rgba(0, 206, 201, 0.38)) !important;
    border-color: #00cec9 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.35) !important;
}

.db-matrix-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid rgba(0, 206, 201, 0.5);
    background: rgba(0, 206, 201, 0.12);
    color: #00cec9;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-matrix-dl-btn:hover {
    background: rgba(0, 206, 201, 0.28);
    border-color: #00cec9;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(0, 206, 201, 0.4);
    transform: translateY(-1px);
}



.db-table-name-cell {
    cursor: pointer;
    user-select: text;
    transition: color 0.15s ease;
}

.db-table-name-cell:hover .db-table-name-txt {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #00cec9;
}

.db-table-name-cell .db-title-copy-icon {
    font-size: 0.75em;
    opacity: 0.45;
    margin-left: 6px;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.db-table-name-cell:hover .db-title-copy-icon {
    opacity: 1;
    color: #00cec9;
    transform: scale(1.15);
}

.db-table-name-cell.copied {
    color: #2ed573 !important;
}

.db-table-name-cell.copied .db-table-name-txt {
    color: #2ed573 !important;
}


/* ==========================================================================
   TOP BAR DONATE & FRIENDS CHAT ENHANCEMENTS
   ========================================================================== */


/* Top Bar Actions Group */
.user-bar-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.top-bar-donate-btn {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(255, 107, 129, 0.25));
    border: 1px solid rgba(255, 107, 129, 0.5);
    border-radius: 20px;
    color: #ff6b81;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(255, 107, 129, 0.15);
}

.top-bar-donate-btn:hover {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.45), rgba(255, 107, 129, 0.45));
    border-color: #ff6b81;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 107, 129, 0.35);
}

.hosting-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 26, 0.85);
    backdrop-filter: blur(8px);
    z-index: 999999 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.hosting-modal-card {
    max-width: 480px;
    width: 100%;
    margin: 0;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(245, 200, 66, 0.2);
}

.hosting-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.hosting-modal-close:hover {
    color: #f5c842;
    transform: scale(1.1);
}

.friends-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 360px;
    max-height: 520px;
    overflow-y: auto;
    background: #16213e;
    border: 2px solid #e94560;
    border-radius: 14px;
    padding: 12px;
    z-index: 9999;
    box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 15px rgba(233,69,96,0.2);
    box-sizing: border-box;
}

.friends-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(233,69,96,0.25);
}

.friends-tabs-bar {
    display: flex;
    gap: 6px;
}

.friends-tab-btn {
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.friends-tab-btn:hover {
    color: #fff;
    border-color: rgba(233, 69, 96, 0.5);
}

.friends-tab-btn.active {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #fff;
}

.friends-dropdown-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.friends-dropdown-close:hover {
    color: #e94560;
}

.friends-item-actions button.chat-btn:hover {
    border-color: #4ecdc4;
    color: #4ecdc4;
}

#friendsChatsPanel {
    flex: 1;
    min-height: 0;
}


/* ========================================================================== */
/* NEW CLEAN NEWS & HUB SUBTABS (ОБНОВЛЕНИЯ, ПОМОЩЬ ПРОЕКТУ, СБОРКИ) */
/* ========================================================================== */
.news-subtabs-wrapper {
    margin-bottom: 22px;
}

.news-subtabs-nav {
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.news-subtabs-nav::-webkit-scrollbar {
    display: none;
}

.news-subtab-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
}

.news-subtab-btn:hover {
    background: rgba(30, 41, 59, 0.85);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.news-subtab-btn.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(198, 42, 71, 0.55));
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 0 24px rgba(233, 69, 96, 0.4), 0 4px 16px rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

.news-subtab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 15%;
    width: 70%;
    height: 3px;
    background: #e94560;
    border-radius: 3px;
    box-shadow: 0 0 10px #e94560;
}

.news-subtab-badge {
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid rgba(0, 206, 201, 0.5);
    color: #00cec9;
    font-size: 0.6rem;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 2px;
}

.news-support-pill-btn {
    background: linear-gradient(135deg, rgba(255, 107, 129, 0.15), rgba(233, 69, 96, 0.25));
    border: 1px solid rgba(255, 107, 129, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(255, 71, 87, 0.2);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-align: left;
}

.news-support-pill-btn:hover {
    background: linear-gradient(135deg, rgba(255, 107, 129, 0.25), rgba(233, 69, 96, 0.4));
    border-color: #ff6b81;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 71, 87, 0.35);
}

/* HELP SECTION HERO CARDS */
.news-help-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.news-help-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

.news-help-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.news-help-card.help-card-bug { border-color: rgba(233, 69, 96, 0.35); }
.news-help-card.help-card-bug:hover { border-color: #e94560; box-shadow: 0 8px 25px rgba(233, 69, 96, 0.25); }

.news-help-card.help-card-idea { border-color: rgba(245, 158, 11, 0.35); }
.news-help-card.help-card-idea:hover { border-color: #f59e0b; box-shadow: 0 8px 25px rgba(245, 158, 11, 0.25); }

.news-help-card.help-card-trans { border-color: rgba(0, 206, 201, 0.35); }
.news-help-card.help-card-trans:hover { border-color: #00cec9; box-shadow: 0 8px 25px rgba(0, 206, 201, 0.25); }

.news-help-card.help-card-donate { border-color: rgba(255, 107, 129, 0.35); }
.news-help-card.help-card-donate:hover { border-color: #ff6b81; box-shadow: 0 8px 25px rgba(255, 107, 129, 0.25); }

.news-help-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.help-card-bug .news-help-icon { background: rgba(233, 69, 96, 0.15); color: #e94560; }
.help-card-idea .news-help-icon { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.help-card-trans .news-help-icon { background: rgba(0, 206, 201, 0.15); color: #00cec9; }
.help-card-donate .news-help-icon { background: rgba(255, 107, 129, 0.15); color: #ff6b81; }

.news-help-title {
    font-size: 0.95rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.35;
}

.news-help-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin: 0 0 16px 0;
    font-family: 'Minecraft', monospace;
}

.news-help-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    width: 100%;
    transition: all 0.2s;
}

.btn-bug { background: linear-gradient(135deg, #e94560, #c0392b); box-shadow: 0 4px 14px rgba(233, 69, 96, 0.35); }
.btn-idea { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35); }
.btn-trans { background: linear-gradient(135deg, #00cec9, #0984e3); box-shadow: 0 4px 14px rgba(0, 206, 201, 0.35); }
.btn-donate { background: linear-gradient(135deg, #ff4757, #e84118); box-shadow: 0 4px 14px rgba(255, 71, 87, 0.35); }

.news-help-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

/* ROADMAP STYLES */
.news-roadmap-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.news-roadmap-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.news-roadmap-badge {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    padding: 3px 10px;
    border-radius: 12px;
}

.news-roadmap-title {
    font-size: 1.05rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0;
}

.news-roadmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.news-roadmap-item {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.news-roadmap-item .roadmap-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.news-roadmap-item.done .roadmap-dot { background: #10b981; box-shadow: 0 0 10px #10b981; }
.news-roadmap-item.in-progress .roadmap-dot { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; animation: pulse 1.5s infinite; }
.news-roadmap-item.planned .roadmap-dot { background: #00cec9; box-shadow: 0 0 10px #00cec9; }

.roadmap-status {
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}

.news-roadmap-item.done .roadmap-status { color: #10b981; }
.news-roadmap-item.in-progress .roadmap-status { color: #f59e0b; }
.news-roadmap-item.planned .roadmap-status { color: #00cec9; }

.roadmap-info h4 {
    margin: 0 0 4px 0;
    font-size: 0.82rem;
    color: #fff;
    font-family: 'Minecraft', monospace;
    line-height: 1.35;
}

.roadmap-info p {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
    font-family: 'Minecraft', monospace;
}

.news-section-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.news-section-heading {
    font-size: 1rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.news-empty-section-hint {
    background: rgba(15, 23, 42, 0.6);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}



/* Dedicated Modal Button Variants */
.comm-btn-submit-bug {
    background: linear-gradient(135deg, #e94560, #c0392b) !important;
    border-color: #e94560 !important;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4) !important;
}
.comm-btn-submit-bug:hover {
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.6) !important;
    filter: brightness(1.1) !important;
}
.comm-btn-submit-idea {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border-color: #f59e0b !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
}
.comm-btn-submit-idea:hover {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6) !important;
    filter: brightness(1.1) !important;
}
.comm-btn-submit-trans {
    background: linear-gradient(135deg, #00cec9, #0984e3) !important;
    border-color: #00cec9 !important;
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.4) !important;
}
.comm-btn-submit-trans:hover {
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.6) !important;
    filter: brightness(1.1) !important;
}



/* ==========================================================================
   GLOBAL FONT UNIFICATION - ALL UI ELEMENTS USE MINECRAFT FONT
   ========================================================================== */
button,
input,
select,
textarea,
optgroup,
option,
dialog {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace !important;
}

input::placeholder,
textarea::placeholder {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace !important;
}

/* Ensure Font Awesome icon glyphs are NEVER overridden by the font unification */
i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands,
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}


/* ==========================================================================
   MINI-GAMES SUITE STYLES (Poke DIV Game)
   ========================================================================== */

.mg-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 16px;
    font-family: 'Minecraft', monospace;
}

.mg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mg-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.4);
}

.mg-stats-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mg-stat-item {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mg-stat-label {
    color: rgba(255, 255, 255, 0.55);
}

.mg-stat-val {
    color: #fff;
    font-weight: bold;
}

.mg-stat-val.highlight {
    color: #ff6b81;
}

.mg-filters-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mg-filter-lbl {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 4px;
}

.mg-filter-btn {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s;
}

.mg-filter-btn:hover {
    border-color: #00cec9;
    color: #fff;
}

.mg-filter-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
}

/* TIMER */
.mg-timer-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.mg-timer-fill {
    height: 100%;
    background: #00cec9;
    transition: width 1s linear, background-color 0.3s;
}

/* ARENA / STAGE */
.mg-sil-arena, .mg-match-arena, .mg-evo-arena, .mg-cry-player-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.mg-sil-stage {
    position: relative;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 12px;
    background: radial-gradient(circle at center, rgba(0, 206, 201, 0.15) 0%, rgba(15, 23, 42, 0.4) 70%);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.mg-sil-spotlight {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 69, 96, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.mg-sil-img {
    max-height: 260px;
    max-width: 220px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: filter 0.4s ease, transform 0.4s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}

.mg-sil-img.silhouette {
    filter: brightness(0) drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));
    pointer-events: none;
}

.mg-sil-img.revealed {
    filter: drop-shadow(0 0 20px rgba(0, 206, 201, 0.6));
    animation: silFlash 0.5s ease-out;
    pointer-events: none;
}

@keyframes silFlash {
    0% { filter: brightness(4) drop-shadow(0 0 40px #fff); transform: scale(1.08); }
    100% { filter: drop-shadow(0 0 20px rgba(0, 206, 201, 0.6)); transform: scale(1); }
}

.mg-cry-replay-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 206, 201, 0.25);
    border: 1px solid #00cec9;
    color: #00cec9;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.2s;
}

.mg-cry-replay-btn:hover {
    background: #00cec9;
    color: #000;
    transform: scale(1.1);
}

/* 4 OPTIONS GRID */
.mg-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .mg-options-grid { grid-template-columns: 1fr; }
}

.mg-opt-btn {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
}

.mg-opt-btn:hover:not(:disabled) {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.15);
    transform: translateY(-2px);
}

.mg-opt-key {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.mg-opt-btn.correct {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}

.mg-opt-btn.wrong {
    background: rgba(233, 69, 96, 0.25) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
    opacity: 0.7;
}

/* RESULT BANNER */
.mg-sil-result-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-sil-result-banner.correct {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-sil-result-banner.wrong {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-result-icon {
    font-size: 2rem;
}

.mg-sil-result-banner.correct .mg-result-icon { color: #10b981; }
.mg-sil-result-banner.wrong .mg-result-icon { color: #e94560; }

.mg-result-status {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.mg-sil-result-banner.correct .mg-result-status { color: #10b981; }
.mg-sil-result-banner.wrong .mg-result-status { color: #e94560; }

.mg-result-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 6px;
}

.mg-result-types {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mg-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.65rem;
    border: 1px solid;
}

.mg-type-pill img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.mg-gen-badge {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
}

/* ACTIONS BAR */
.mg-actions-bar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.mg-btn-next {
    background: linear-gradient(135deg, #e94560 0%, #c0392b 100%);
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
}

.mg-btn-next:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

/* GAME 2: CRY QUIZ */
.mg-cry-player-box {
    text-align: center;
    padding: 30px;
    margin-bottom: 24px;
}

.mg-cry-big-btn {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%);
    border: none;
    border-radius: 50px;
    padding: 16px 36px;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.4);
    transition: all 0.25s;
    margin-bottom: 14px;
}

.mg-cry-big-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 206, 201, 0.6);
}

.mg-cry-hint {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.mg-audio-equalizer {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
}

.mg-audio-equalizer span {
    width: 3px;
    background: #fff;
    border-radius: 3px;
    height: 6px;
}

.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(1) { animation: eq 0.6s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(2) { animation: eq 0.4s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(3) { animation: eq 0.7s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(4) { animation: eq 0.5s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(5) { animation: eq 0.8s infinite ease-in-out; }

@keyframes eq {
    0%, 100% { height: 4px; }
    50% { height: 18px; }
}

.mg-cry-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

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

.mg-cry-card {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
}

.mg-cry-card:hover {
    border-color: #00cec9;
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 206, 201, 0.2);
}

.mg-cry-card-img-wrap {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.mg-cry-card-img {
    max-height: 100px;
    max-width: 100px;
    object-fit: contain;
}

.mg-cry-card-name {
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    min-height: 1.4em;
}

.mg-cry-card.correct {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.2) !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4) !important;
}

.mg-cry-card.wrong {
    border-color: #e94560 !important;
    background: rgba(233, 69, 96, 0.2) !important;
    opacity: 0.6;
}

/* GAME 3: POKÉDLE */
.mg-pokedle-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
}

.mg-pokedle-guide {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
}

.mg-pokedle-input-wrap {
    position: relative;
    max-width: 480px;
    margin: 0 auto 16px auto;
}

.mg-pokedle-input {
    width: 100%;
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 0.95rem;
    color: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.mg-pokedle-input:focus {
    border-color: #10b981;
}

.mg-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
}

.mg-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s;
}

.mg-ac-item:hover {
    background: rgba(16, 185, 129, 0.15);
}

.mg-ac-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.mg-ac-name {
    flex: 1;
    color: #fff;
    font-size: 0.85rem;
}

.mg-ac-num {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.mg-pokedle-status {
    text-align: center;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 18px;
}

.mg-pokedle-status span {
    color: #10b981;
    font-weight: bold;
}

.mg-pokedle-table-header {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: 8px;
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 8px;
    padding: 0 4px;
}

.mg-pokedle-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.mg-pokedle-row {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: 8px;
    animation: slideIn 0.3s ease;
}

.mg-pokedle-cell {
    border-radius: 8px;
    padding: 10px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: bold;
    text-align: center;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

.mg-pokedle-cell.poke-cell {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    justify-content: flex-start;
    padding-left: 10px;
    gap: 8px;
}

.mg-cell-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.mg-cell-name {
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mg-pokedle-cell.correct {
    background: #10b981;
    color: #fff;
}

.mg-pokedle-cell.partial {
    background: #f59e0b;
    color: #fff;
}

.mg-pokedle-cell.wrong {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

.mg-pokedle-result-modal {
    text-align: center;
    padding: 24px;
    border-radius: 14px;
    animation: fadeIn 0.4s ease;
}

.mg-pokedle-result-modal.won {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-pokedle-result-modal.lost {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-res-badge {
    font-size: 1.15rem;
    font-weight: bold;
    margin-bottom: 14px;
    letter-spacing: 1px;
}

.mg-pokedle-result-modal.won .mg-res-badge { color: #10b981; }
.mg-pokedle-result-modal.lost .mg-res-badge { color: #e94560; }

.mg-res-target-wrap {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: rgba(15, 23, 42, 0.8);
    padding: 12px 24px;
    border-radius: 12px;
    margin-bottom: 18px;
}

.mg-res-target-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.mg-res-target-name {
    font-size: 1.1rem;
    color: #fff;
    font-weight: bold;
}

.mg-res-target-dex {
    font-size: 0.75rem;
    color: #00cec9;
}

.mg-res-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.mg-btn-share {
    background: #10b981;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.mg-btn-share:hover {
    filter: brightness(1.1);
}

/* GAME 4: TYPE MATCHUP CLASH */
.mg-match-clash-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.mg-match-card {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    flex: 1;
    min-width: 220px;
}

.mg-match-lbl {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.mg-type-big-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 30px;
    border: 2px solid;
    font-size: 1.1rem;
    font-weight: bold;
}

.mg-type-big-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.mg-clash-vs {
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffbe26;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: pulse 1.5s infinite;
}

.mg-match-poke-img {
    height: 110px;
    object-fit: contain;
    margin-bottom: 8px;
}

.mg-match-poke-name {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 6px;
}

.mg-match-question {
    text-align: center;
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 18px;
}

.mg-mult-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

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

.mg-mult-btn {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 14px 8px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.mg-mult-sub {
    font-size: 0.55rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.5);
}

.mg-mult-btn:hover:not(:disabled) {
    border-color: #00cec9;
    transform: translateY(-2px);
}

.mg-mult-btn.correct {
    background: rgba(16, 185, 129, 0.3) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
}

.mg-mult-btn.wrong {
    background: rgba(233, 69, 96, 0.3) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
    opacity: 0.7;
}

.mg-match-expl {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-match-expl.correct {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-match-expl.wrong {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-expl-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.mg-match-expl.correct .mg-expl-head { color: #10b981; }
.mg-match-expl.wrong .mg-expl-head { color: #e94560; }

.mg-expl-ans {
    margin-left: auto;
    font-size: 0.9rem;
    color: #fff;
}

.mg-expl-calc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

/* GAME 5: EVOLUTION METHOD QUIZ */
.mg-evo-flow-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.mg-evo-card {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 18px 24px;
    text-align: center;
    min-width: 140px;
}

.mg-evo-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 8px;
}

.mg-evo-pname {
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
}

.mg-evo-arrow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.mg-evo-arrow-icon {
    font-size: 1.6rem;
    color: #a855f7;
    animation: bounceRight 1.5s infinite;
}

@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

.mg-evo-badge {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid #a855f7;
    color: #a855f7;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
}

.mg-evo-question {
    text-align: center;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 22px;
}

.mg-evo-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .mg-evo-options-grid { grid-template-columns: 1fr; }
}

.mg-evo-opt-btn {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
    text-align: left;
}

.mg-evo-opt-btn:hover:not(:disabled) {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.15);
    transform: translateY(-2px);
}

.mg-evo-opt-btn.correct {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}

.mg-evo-opt-btn.wrong {
    background: rgba(233, 69, 96, 0.25) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
    opacity: 0.7;
}

.mg-evo-expl {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-evo-expl.correct {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-evo-expl.wrong {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-evo-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #fff;
    margin-top: 6px;
}


/* ==========================================================================
   MINI-GAMES SUITE ENHANCEMENTS (Sound Controller, Silhouette Search, Font Awesome)
   ========================================================================== */

.mg-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Sound Controller Widget */
.mg-sound-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 5px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.mg-sound-toggle-btn {
    background: transparent;
    border: none;
    color: #00cec9;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, color 0.2s;
}

.mg-sound-toggle-btn:hover {
    transform: scale(1.15);
    color: #55efc4;
}

.mg-sound-toggle-btn.muted {
    color: #ff7675;
}

.mg-sound-slider-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mg-sound-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 68px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
}

.mg-sound-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00cec9;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.6);
    cursor: pointer;
    transition: transform 0.1s;
}

.mg-sound-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.mg-sound-val-lbl {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    min-width: 32px;
    text-align: right;
    font-family: 'Minecraft', monospace;
}

/* Fire and icons */
.mg-stat-fire {
    color: #ff6b81;
    margin-left: 2px;
    animation: flamePulse 1.8s infinite;
}

@keyframes flamePulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #ff6b81); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 6px #ff4757); }
}

/* Silhouette Search & Two-Phase UI */
.mg-sil-phase-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.82rem;
    padding: 8px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    flex-wrap: wrap;
    transition: all 0.3s ease;
}

.mg-sil-phase-hint.phase-1 {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.08);
}

.mg-sil-phase-hint.phase-2 {
    border-color: rgba(0, 206, 201, 0.4);
    background: rgba(0, 206, 201, 0.08);
}

.mg-sil-phase-hint b {
    color: #f59e0b;
    font-size: 0.95rem;
}

.mg-sil-bonus-tag {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #f59e0b;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mg-res-bonus-callout {
    margin-top: 8px;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #f59e0b;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: bounce 0.6s ease;
}

.mg-sil-search-wrap {
    position: relative;
    max-width: 520px;
    margin: 0 auto 20px auto;
    width: 100%;
}

.mg-sil-search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, 0.85);
    border: 2px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    padding: 0 16px;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.mg-sil-search-box:focus-within {
    border-color: #00cec9;
    box-shadow: 0 0 18px rgba(0, 206, 201, 0.35);
}

.mg-sil-search-box.shake {
    animation: shakeBox 0.4s ease;
    border-color: #e94560 !important;
    box-shadow: 0 0 18px rgba(233, 69, 96, 0.4) !important;
}

@keyframes shakeBox {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.mg-sil-search-icon {
    color: #00cec9;
    font-size: 1.05rem;
}

.mg-sil-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    padding: 13px 0;
}

.mg-sil-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Minecraft', monospace;
}

/* Animations */
.fadeInUp {
    animation: fadeInUp 0.35s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Poke-wordle arrows */
.mg-poke-arrow {
    font-size: 0.75rem;
    margin-left: 3px;
}

.mg-poke-arrow.up {
    color: #00cec9;
}

.mg-poke-arrow.down {
    color: #ff7675;
}

/* Matchup Clash calculation elements */
.mg-calc-part {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 4px 8px;
}

.mg-calc-times {
    opacity: 0.6;
    font-size: 0.7rem;
    margin: 0 4px;
}

.mg-calc-equals {
    opacity: 0.8;
    font-weight: bold;
    font-size: 1rem;
    margin: 0 6px;
}

.mg-calc-total {
    color: #00cec9;
    font-weight: bold;
    font-size: 1.1rem;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid #00cec9;
    border-radius: 6px;
    padding: 3px 8px;
}


/* ==========================================================================
   SILHOUETTE SEARCH MAXIMUM OVERLAY (z-index & floating layer)
   ========================================================================== */

.mg-sil-search-wrap {
    position: relative !important;
    max-width: 520px !important;
    margin: 0 auto 20px auto !important;
    width: 100% !important;
    z-index: 999999 !important;
}

.mg-sil-search-box {
    position: relative !important;
    z-index: 1000000 !important;
    background: rgba(15, 23, 42, 0.98) !important;
    border: 2px solid rgba(0, 206, 201, 0.6) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.75), 0 0 15px rgba(0, 206, 201, 0.2) !important;
}

.mg-sil-search-box:focus-within {
    border-color: #00cec9 !important;
    box-shadow: 0 0 25px rgba(0, 206, 201, 0.6), 0 10px 35px rgba(0, 0, 0, 0.9) !important;
}

.mg-sil-search-wrap .mg-autocomplete-dropdown,
#silDropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #0b132b !important;
    border: 2px solid #00cec9 !important;
    border-radius: 12px !important;
    max-height: 290px !important;
    overflow-y: auto !important;
    z-index: 9999999 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.98), 0 0 35px rgba(0, 206, 201, 0.45) !important;
}

.mg-options-grid {
    position: relative !important;
    z-index: 1 !important;
}

.mg-sil-result-banner {
    position: relative !important;
    z-index: 5 !important;
}

.mg-sil-stage {
    position: relative !important;
    z-index: 2 !important;
}

.mg-pokedle-input-wrap {
    position: relative !important;
    z-index: 999999 !important;
}

#pokedleDropdown {
    position: absolute !important;
    z-index: 9999999 !important;
    background: #0b132b !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.98), 0 0 35px rgba(16, 185, 129, 0.45) !important;
}


/* ==========================================================================
   GAME 6: SHINY HUNT STYLES
   ========================================================================== */
.mg-shiny-settings-card {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px 22px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.mg-shiny-setting-col {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mg-shiny-setting-col.actions-col {
    flex: 0 1 auto;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
}

.mg-shiny-setting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
}

.mg-shiny-setting-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mg-shiny-setting-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    color: #00cec9;
}

.mg-shiny-setting-val.highlight {
    color: #f59e0b;
}

/* Sliders */
.mg-shiny-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
}

.mg-shiny-range:hover {
    background: rgba(255, 255, 255, 0.25);
}

.mg-shiny-range.total::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.8);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mg-shiny-range.total::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px rgba(0, 206, 201, 1);
}

.mg-shiny-range.shiny::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mg-shiny-range.shiny::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px rgba(245, 158, 11, 1);
}

/* Preset Buttons */
.mg-shiny-presets {
    display: flex;
    gap: 6px;
}

.mg-shiny-preset-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.mg-shiny-preset-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.mg-shiny-preset-btn.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.mg-shiny-setting-col:nth-child(2) .mg-shiny-preset-btn.active {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

/* Mode toggle */
.mg-shiny-mode-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 4px;
}

.mg-shiny-mode-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}

.mg-shiny-mode-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.mg-shiny-mode-btn.active {
    background: #00cec9;
    color: #0b132b;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.5);
}

/* Start Button */
.mg-btn-start-hunt {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 9px 18px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.mg-btn-start-hunt:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
    background: linear-gradient(135deg, #34d399, #10b981);
}

.mg-btn-start-hunt:active {
    transform: translateY(1px);
}

/* Arena & HUD */
.mg-shiny-arena {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mg-shiny-hud {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: 'Minecraft', monospace;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.mg-hud-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.mg-hud-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    font-weight: bold;
    color: #00cec9;
}

.mg-hud-item.shiny-counter .mg-hud-val {
    color: #f59e0b;
}

.mg-hud-item.mistakes .mg-hud-val {
    color: #ff7675;
}

.mg-btn-reshuffle {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mg-btn-reshuffle:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
    transform: rotate(90deg);
}

/* Grid */
.mg-shiny-grid {
    --shiny-card-size: 90px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--shiny-card-size, 90px), 100%), 1fr));
    gap: 12px;
    padding: 18px;
    background: rgba(11, 19, 43, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    min-height: 250px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {
    .mg-shiny-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(var(--shiny-card-size, 72px), 100%), 1fr));
        gap: 8px;
        padding: 12px;
    }
}

/* Card */
.mg-shiny-card {
    position: relative;
    aspect-ratio: 1 / 1;
    background: rgba(26, 38, 57, 0.65);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    padding: 8px;
    overflow: hidden;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.mg-shiny-card:hover {
    transform: translateY(-4px) scale(1.05);
    background: rgba(36, 52, 78, 0.85);
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 14px rgba(245, 158, 11, 0.2);
}

.mg-shiny-card:active {
    transform: scale(0.95);
}

.mg-shiny-card-img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
    transition: transform 0.2s;
    pointer-events: none;
}

.mg-shiny-card:hover .mg-shiny-card-img {
    transform: scale(1.08);
}

/* Found Shiny Card State */
.mg-shiny-card.found-shiny {
    border-color: #f59e0b !important;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, rgba(20, 25, 42, 0.95) 100%) !important;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.65), inset 0 0 16px rgba(245, 158, 11, 0.35) !important;
    cursor: default !important;
    pointer-events: none !important;
    animation: shinyFoundGlow 2s infinite alternate ease-in-out;
}

@keyframes shinyFoundGlow {
    from { box-shadow: 0 0 20px rgba(245, 158, 11, 0.6), inset 0 0 12px rgba(245, 158, 11, 0.3); }
    to { box-shadow: 0 0 32px rgba(255, 215, 0, 0.85), inset 0 0 20px rgba(255, 215, 0, 0.5); }
}

.mg-shiny-sparkle-tag {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    color: #0b132b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.9);
    animation: shinyStarPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes shinyStarPop {
    0% { transform: scale(0) rotate(-60deg); }
    70% { transform: scale(1.3) rotate(20deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Shake Red Animation for mistakes */
.mg-shiny-card.shake-red {
    animation: shakeRed 0.45s cubic-bezier(.36,.07,.19,.97) both;
    border-color: #ff4757 !important;
    box-shadow: 0 0 18px rgba(255, 71, 87, 0.75) !important;
    background: rgba(255, 71, 87, 0.15) !important;
}

@keyframes shakeRed {
    10%, 90% { transform: translate3d(-3px, 0, 0); }
    20%, 80% { transform: translate3d(5px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* Victory Overlay Modal */
.mg-shiny-victory-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-victory-content {
    position: relative;
    background: #0f172a;
    border: 2px solid #f59e0b;
    border-radius: 20px;
    padding: 34px 38px;
    text-align: center;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 0 45px rgba(245, 158, 11, 0.45), 0 20px 40px rgba(0,0,0,0.8);
    animation: modalPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'Minecraft', monospace;
}

.mg-vic-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s;
}

.mg-vic-close:hover {
    background: rgba(255, 71, 87, 0.3);
    color: #ff7675;
}

.mg-victory-badge {
    font-size: 1.45rem;
    color: #ffd700;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.mg-victory-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}

.mg-vic-stat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mg-vic-stat .lbl {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.mg-vic-stat .val {
    font-size: 1.15rem;
    color: #fff;
    font-weight: bold;
}

.mg-record-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eab308;
    color: #0b132b;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
}

.mg-victory-actions {
    display: flex;
    justify-content: center;
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* Account badge and reset button in minigames */
.mg-stats-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mg-account-badge-wrap {
    display: inline-flex;
    align-items: center;
}

.mg-account-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
    user-select: none;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mg-account-badge.logged-in {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.mg-account-badge.guest {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.65);
}

.mg-stat-reset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 4px 6px;
    border-radius: 6px;
    margin-left: 2px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mg-stat-reset-btn:hover {
    background: rgba(255, 118, 117, 0.2);
    border-color: #ff7675;
    color: #ff7675;
    transform: rotate(-45deg);
}


/* ==========================================================================
   SHINY HUNT: MISTAKE LIMIT & FAIL STYLES
   ========================================================================== */
.mg-shiny-range.mistakes-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mg-shiny-range.mistakes-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px rgba(239, 68, 68, 1);
}

.mg-shiny-range.mistakes-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
    cursor: pointer;
    border: none;
}

.mg-shiny-setting-val.highlight-red {
    color: #ef4444;
}

.mg-shiny-mistake-presets .mg-shiny-preset-btn.active {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3) !important;
}

.mg-victory-content.fail {
    border-color: #ef4444 !important;
    box-shadow: 0 0 45px rgba(239, 68, 68, 0.45), 0 20px 40px rgba(0, 0, 0, 0.8) !important;
}

.mg-shiny-card.missed-shiny {
    border-color: #ef4444 !important;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, rgba(20, 25, 42, 0.95) 100%) !important;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.65), inset 0 0 16px rgba(239, 68, 68, 0.35) !important;
    cursor: default !important;
    pointer-events: none !important;
    animation: shinyMissedGlow 2s infinite alternate ease-in-out;
}

@keyframes shinyMissedGlow {
    from { box-shadow: 0 0 20px rgba(239, 68, 68, 0.6), inset 0 0 12px rgba(239, 68, 68, 0.3); }
    to { box-shadow: 0 0 32px rgba(248, 113, 113, 0.85), inset 0 0 20px rgba(248, 113, 113, 0.5); }
}

.mg-shiny-setting-col.actions-col {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mg-shiny-setting-col.actions-col .mg-btn-start-hunt {
    height: 48px !important;
    padding: 0 24px !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
}


/* ==========================================================================
   SILHOUETTE SEARCH MAXIMUM OVERLAY & BOUNDARY ESCAPE
   ========================================================================== */
#tabSilhouette,
.tab-content#tabSilhouette,
.games-mode-wrap,
.games-mode-wrap > .tab-content#tabSilhouette,
.mg-sil-arena,
.mg-container {
    overflow: visible !important;
}

.mg-sil-stage {
    height: 200px !important;
    margin-bottom: 12px !important;
}

.mg-sil-img {
    max-height: 175px !important;
    max-width: 195px !important;
}

.mg-sil-phase-hint {
    margin-bottom: 10px !important;
}

.mg-sil-search-wrap {
    position: relative !important;
    z-index: 9999999 !important;
}

.mg-sil-search-wrap .mg-autocomplete-dropdown,
#silDropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    background: #0b132b !important;
    border: 2px solid #00cec9 !important;
    border-radius: 12px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    z-index: 99999999 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.98), 0 0 40px rgba(0, 206, 201, 0.5) !important;
}

/* Avatar pokemon search sprite / shiny toggles */
.avatar-style-btn:hover {
    filter: brightness(1.25);
}


/* Avatar action buttons & icons alignment */
#avatarCropBtn,
#avatarSaveBtn,
.avatar-action-btn {
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
}

#avatarCropBtn i,
#avatarSaveBtn i,
.avatar-action-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.85em;
    position: relative;
    top: 1px;
}


/* Community Poll Voters & Friends display */
.comm-admin-btn.voters {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.comm-admin-btn.voters:hover {
    background: rgba(245, 158, 11, 0.28);
    border-color: #f59e0b;
}

.comm-poll-voters-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
}

.poll-voter-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    color: rgba(245, 158, 11, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
    cursor: default;
}

.poll-voter-label.friend {
    color: #00cec9;
}

.poll-voters-chips {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.poll-voter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 2px 7px 2px 3px;
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.15s ease;
}

.poll-voter-chip.admin-chip {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #f59e0b;
    cursor: pointer;
}

.poll-voter-chip.admin-chip:hover {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
}

.poll-voter-chip.friend-chip {
    background: rgba(0, 206, 201, 0.12);
    border-color: rgba(0, 206, 201, 0.35);
    color: #00cec9;
}

.poll-voter-chip.friend-chip:hover {
    background: rgba(0, 206, 201, 0.22);
    border-color: #00cec9;
}

.poll-voter-chip.more {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.55rem;
}

.poll-voter-avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.poll-voter-avatar.placeholder {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.5rem;
}

.poll-voter-name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   ADMIN NAME IMAGE SELECTOR MODAL
   ============================================ */
.admin-ni-tab-btn {
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s ease;
    line-height: 1;
}
.admin-ni-tab-btn:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.4);
    color: #fff;
}
.admin-ni-tab-btn.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.admin-ni-style-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}
.admin-ni-style-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.admin-ni-style-btn.active {
    background: rgba(0, 206, 201, 0.3);
    color: #00cec9;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.3);
}

.admin-ni-card {
    background: rgba(15, 52, 96, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
    position: relative;
    user-select: none;
    min-height: 64px;
    box-sizing: border-box;
}
.admin-ni-card:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.45);
    transform: translateY(-2px);
}
.admin-ni-card.selected {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.45);
}
.admin-ni-card img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    margin-bottom: 4px;
    pointer-events: none;
}
.admin-ni-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0 2px;
}
.admin-ni-card-sub {
    font-family: 'Minecraft', monospace;
    font-size: 0.46rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1px;
}

/* ============================================
   ADMIN BRAND ONLINE COUNTER
   ============================================ */
.admin-header-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    margin-left: 10px;
    padding: 3px 9px 3px 7px;
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.45);
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: normal;
    color: #2ecc71;
    text-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
    letter-spacing: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1;
}

.admin-header-online-badge:hover {
    background: rgba(46, 204, 113, 0.22);
    border-color: #2ecc71;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.4);
    transform: translateY(-1px);
}

.admin-online-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 6px #2ecc71;
    display: inline-block;
    animation: adminOnlinePulse 2s infinite ease-in-out;
    flex-shrink: 0;
}

@keyframes adminOnlinePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.35);
        opacity: 0.65;
    }
}

.admin-online-text {
    font-size: 0.55rem;
    opacity: 0.85;
}


/* ============================================
   ADMIN ACCOUNTS: MASKED FIELDS & CONTROLS
   ============================================ */
.admin-masked-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s ease;
    user-select: none;
    vertical-align: middle;
}

.admin-masked-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(233, 69, 96, 0.45);
    color: #ffffff;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.2);
}

.admin-masked-pill .admin-mask-text {
    letter-spacing: 1.5px;
    transition: color 0.2s;
}

.admin-masked-pill.is-revealed .admin-mask-text {
    letter-spacing: normal;
    color: #00cec9;
}

.admin-masked-pill-pass.is-revealed .admin-mask-text {
    color: #e94560;
}

.admin-masked-pill .admin-mask-eye {
    font-size: 0.5rem;
    margin-left: 2px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.admin-masked-pill:hover .admin-mask-eye {
    opacity: 1;
}

.admin-key-btn {
    background: rgba(233, 69, 96, 0.1);
    border: 1px solid rgba(233, 69, 96, 0.3);
    color: #e94560;
    font-size: 0.5rem;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.admin-key-btn:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
}


.db-profile-img.is-gen5 {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.db-profile-img.is-gen5:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.08));
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.85));
}

.db-scale-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}
.db-scale-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.4);
}


/* EN Toggle Button for Community Posts */
.comm-admin-btn.en-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1.2;
}
.comm-admin-btn.en-toggle.active {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
}
.comm-admin-btn.en-toggle.active:hover {
    background: rgba(16, 185, 129, 0.35);
    border-color: #34d399;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}
.comm-admin-btn.en-toggle.inactive {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.45);
}
.comm-admin-btn.en-toggle.inactive:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    transform: translateY(-1px);
}

.news-admin-preview-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
    margin-bottom: 12px;
    user-select: none;
}
.news-admin-preview-pill:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #ffffff;
}
.news-admin-preview-pill.active {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}


/* ==========================================================================
   Admin News & Changelog Publisher Studio (Redesigned 2-Column Suite)
   ========================================================================== */

.news-publisher-card {
    max-width: 1220px !important;
    width: 95vw !important;
    height: 90vh !important;
    max-height: 920px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0d1322 !important;
    border: 1px solid rgba(0, 206, 201, 0.45) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 206, 201, 0.12) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

.news-publisher-header {
    padding: 12px 20px !important;
    background: rgba(15, 23, 42, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.news-publisher-body {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 18px !important;
    padding: 16px 20px !important;
    overflow: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
}

@media (max-width: 980px) {
    .news-publisher-card {
        height: auto !important;
        max-height: 94vh !important;
    }
    .news-publisher-body {
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
    }
}

.news-publisher-form-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding-right: 12px;
    min-width: 0;
}

.news-publisher-form-col::-webkit-scrollbar {
    width: 6px;
}
.news-publisher-form-col::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
.news-publisher-form-col::-webkit-scrollbar-thumb {
    background: rgba(0, 206, 201, 0.3);
    border-radius: 3px;
}
.news-publisher-form-col::-webkit-scrollbar-thumb:hover {
    background: #00cec9;
}

.news-publisher-preview-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.news-form-section-box {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-section-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    font-weight: 700;
    color: #00cec9;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.news-form-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
}
@media (max-width: 768px) {
    .news-form-grid-4 {
        grid-template-columns: 1fr 1fr !important;
    }
}

.news-form-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
@media (max-width: 600px) {
    .news-form-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

.news-tag-presets-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.news-tag-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.news-tag-chip:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #ffffff;
    transform: translateY(-1px);
}

.news-color-row-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-color-swatches {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.news-swatch-btn {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.news-swatch-btn:hover {
    transform: scale(1.2);
}
.news-swatch-btn.active {
    border-color: #ffffff;
    box-shadow: 0 0 8px currentColor;
    transform: scale(1.15);
}

.news-toggle-box {
    background: rgba(0, 206, 201, 0.04);
    border: 1px solid rgba(0, 206, 201, 0.15);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
}

.news-switch-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    user-select: none !important;
    margin: 0 !important;
    width: 100%;
}
.news-switch-label input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none;
}
.news-switch-slider {
    position: relative;
    width: 38px;
    height: 22px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    transition: all 0.25s ease;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.news-switch-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.news-switch-label input:checked + .news-switch-slider {
    background: #10b981;
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}
.news-switch-label input:checked + .news-switch-slider::before {
    transform: translateX(16px);
}

.news-en-inputs-box {
    background: rgba(0, 206, 201, 0.03);
    border: 1px solid rgba(0, 206, 201, 0.2);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-highlights-builder-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-hl-builder-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s ease;
}
.news-hl-builder-card:hover {
    border-color: rgba(0, 206, 201, 0.35);
}

.news-hl-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.72rem;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.15s ease;
}
.news-hl-icon-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #00cec9;
}

.news-hl-del-btn {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.news-hl-del-btn:hover {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* EN disabled states inside builder */
.news-publisher-card.en-disabled .news-hl-en-col {
    display: none !important;
}
.news-publisher-card.en-disabled .news-hl-grid-responsive {
    grid-template-columns: 1fr !important;
}

.news-preview-wrapper {
    background: rgba(10, 15, 30, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.news-preview-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.news-preview-mode-switch {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    padding: 2px;
    gap: 2px;
}

.news-preview-mode-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.news-preview-mode-btn.active {
    background: #00cec9;
    color: #000;
    font-weight: bold;
}

.news-live-preview-card-wrap {
    overflow-y: auto;
    flex: 1;
    padding-right: 4px;
}

.news-live-preview-card-wrap::-webkit-scrollbar {
    width: 5px;
}
.news-live-preview-card-wrap::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
.news-live-preview-card-wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}


/* ==========================================================================
   PROCEDURAL TEAM GENERATOR STUDIO REDESIGN (2-COLUMN RESPONSIVE SUITE)
   ========================================================================== */

.tb-gen-modal-content {
    max-width: 1420px !important;
    width: 96vw !important;
    height: 92vh !important;
    max-height: 94vh !important;
    background: linear-gradient(155deg, #090e1a 0%, #111a2e 50%, #0d1527 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(16, 185, 129, 0.15) !important;
    overflow: hidden !important;
    color: #fff !important;
    box-sizing: border-box !important;
}

#tbTeamGenModalBody.tb-gen-studio-body,
#tbTeamGenModalBody,
.tb-gen-studio-body {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: 440px 1fr !important;
    gap: 18px !important;
    padding: 16px 20px !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 1100px) {
    .tb-gen-studio-body {
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Left Column: Control Panel */
.tb-gen-control-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    padding-right: 10px !important;
    min-height: 0 !important;
}

.tb-gen-control-panel::-webkit-scrollbar {
    width: 6px !important;
}
.tb-gen-control-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 4px !important;
}
.tb-gen-control-panel::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.4) !important;
    border-radius: 4px !important;
}
.tb-gen-control-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7) !important;
}

/* Right Column: Live Team Panel */
.tb-gen-team-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
    min-height: 0 !important;
}

.tb-gen-team-panel::-webkit-scrollbar {
    width: 6px !important;
}
.tb-gen-team-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 4px !important;
}
.tb-gen-team-panel::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.4) !important;
    border-radius: 4px !important;
}
.tb-gen-team-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7) !important;
}

/* Accordion for Advanced Settings */
.tb-gen-accordion-toggle {
    background: rgba(0, 206, 201, 0.08) !important;
    border: 1px solid rgba(0, 206, 201, 0.35) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    color: #00cec9 !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.82rem !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
}

.tb-gen-accordion-toggle:hover {
    background: rgba(0, 206, 201, 0.16) !important;
    border-color: #00cec9 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

.tb-gen-acc-icon {
    font-size: 0.8rem !important;
    color: #00cec9 !important;
    transition: transform 0.2s ease !important;
}

.tb-gen-accordion-content {
    display: none;
    flex-direction: column !important;
    gap: 12px !important;
    animation: tbFadeIn 0.2s ease !important;
}

/* Compact 2x2 Format Grid */
.tb-gen-format-grid-compact {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

/* 6 Pokemon Cards Grid in Right Column */
.tb-gen-squad-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 12px !important;
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(9, 132, 227, 0.12) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}


/* Pokemon Card Header & Action Buttons Fix (No Overflow) */
.tb-gen-poke-card {
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.tb-gen-poke-header {
    overflow: hidden !important;
    min-width: 0 !important;
}

.tb-gen-pin-btn {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
}

.tb-gen-pin-btn:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}

.tb-gen-pin-btn.pinned {
    background: rgba(245, 158, 11, 0.3) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.35) !important;
}

.tb-gen-reroll-btn {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
}

.tb-gen-reroll-btn:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    transform: rotate(90deg) !important;
}

.tb-gen-bring-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.62rem !important;
    font-family: 'Minecraft', monospace !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
}


/* Section Box Flex-Shrink & Sizing Fix (Never Collapse or Squish Blocks) */
.tb-gen-control-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.tb-gen-control-panel > * {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.tb-gen-section-box {
    flex-shrink: 0 !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.tb-gen-accordion-box {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tb-gen-accordion-content {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    display: none;
    flex-direction: column !important;
    gap: 12px !important;
}

.tb-gen-accordion-content > * {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tb-gen-section-title {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.tb-gen-section-title > span {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.tb-gen-preset-btn,
.tb-gen-chip-btn {
    box-sizing: border-box !important;
    max-width: 100% !important;
    white-space: nowrap !important;
}

.tb-gen-gimmick-toggle,
.tb-gen-arch-btn {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.tb-gen-format-grid,
.tb-gen-format-grid-compact,
.tb-gen-arch-grid {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tb-gen-format-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.tb-gen-format-card-title,
.tb-gen-format-card-desc {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    min-width: 0 !important;
}


/* ==========================================================================
   UNIVERSAL ZERO-OVERFLOW SHIELD & SAFE MOBILE RESPONSIVE SUITE
   Guarantees zero horizontal blowout, safe modals, and responsive layout
   without interfering with pointer events or click handling.
   ========================================================================== */

/* 1. Global Viewport & Box-Sizing Hard Defense */
html {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    -webkit-text-size-adjust: 100% !important;
}

body {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    position: relative !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

/* Universal Media Containment */
img, video, canvas, svg, iframe {
    max-width: 100% !important;
    height: auto;
}

/* Universal Word-Break & Overflow Wrap for all text nodes */
p, span, h1, h2, h3, h4, h5, h6, label, a, button, div, td, th {
    overflow-wrap: break-word;
}

/* Ensure empty mount containers never block pointer events */
#dbDetailModalContainer {
    pointer-events: none !important;
}
#dbDetailModalContainer > * {
    pointer-events: auto !important;
}

/* 2. Universal Table & Data Grid Safe Container */
.db-table-wrapper,
.db-table-container,
.table-responsive,
.table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.db-table,
.db-type-matrix-table,
.db-nature-matrix-table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 3. Safe Modal Content Responsive Sizing (Only scale cards, NEVER touch overlays) */
@media (max-width: 768px) {
    body {
        padding: 8px 6px !important;
    }

    .modal-content,
    .modal-large,
    .tb-modal-content,
    .tb-gen-modal-content,
    .calc-modal-content,
    .news-publisher-modal,
    .news-viewer-modal-card,
    .hosting-donate-card,
    .confirm-modal-content,
    .completion-modal-content {
        max-width: 96vw !important;
        box-sizing: border-box !important;
    }

    .modal-two-columns,
    .news-publisher-body,
    .news-hl-grid-responsive {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    .modal-filters,
    .modal-results {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* 4. Team Generator Studio Mobile Optimizations */
@media (max-width: 1100px) {
    .tb-gen-studio-body {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
    }
    .tb-gen-control-panel {
        max-width: 100% !important;
        width: 100% !important;
    }
    .tb-gen-team-panel {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .tb-gen-modal-content {
        height: 96vh !important;
        max-height: 96vh !important;
        width: 98vw !important;
        padding: 8px 10px !important;
    }
    .tb-gen-modal-header {
        padding: 8px 10px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .tb-gen-modal-title {
        font-size: 0.92rem !important;
    }
    .tb-gen-modal-subtitle {
        display: none !important;
    }
    .tb-gen-modal-footer {
        padding: 8px 10px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .tb-gen-modal-footer .tb-btn {
        font-size: 0.72rem !important;
        padding: 6px 12px !important;
    }
    .tb-gen-studio-body {
        padding: 6px 2px !important;
        gap: 12px !important;
    }
    .tb-gen-squad-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .tb-gen-active-squad-box {
        padding: 10px 12px !important;
    }
    .tb-gen-format-grid-compact {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .tb-gen-format-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .tb-gen-poke-card {
        padding: 10px !important;
    }
}

/* 5. Teambuilder Studio Mobile Optimizations */
@media (max-width: 768px) {
    .tb-slots-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .tb-slot-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .tb-hero-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .tb-hero-title-wrap {
        width: 100% !important;
    }
    .tb-hero-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .tb-hero-actions .tb-btn {
        flex: 1 1 auto !important;
        text-align: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        padding: 6px 10px !important;
    }
}

/* 6. Floating UI Shield (Notifications, Social, Lang) */
@media (max-width: 768px) {
    #notificationContainer {
        pointer-events: none !important;
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        max-width: calc(100vw - 20px) !important;
        box-sizing: border-box !important;
    }
    .notification {
        pointer-events: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .social-block {
        top: 10px !important;
        right: 10px !important;
    }
    .social-toggle {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    .lang-switch-floating {
        top: 10px !important;
        right: 52px !important;
    }
    .lang-switch-floating .lang-btn {
        font-size: 0.58rem !important;
        padding: 7px 9px !important;
    }
}

/* 7. Extra Small Phones (iPhone SE, Galaxy Fold, screens <= 400px) */
@media (max-width: 400px) {
    body {
        padding: 4px 2px !important;
    }
    .tb-gen-format-grid-compact {
        grid-template-columns: 1fr !important;
    }
    .tb-gen-arch-btn {
        font-size: 0.65rem !important;
        padding: 5px 8px !important;
    }
}


/* ==========================================================================
   TEAMBUILDER GENERATOR: MONOTYPE, ROLL HISTORY & POSTER ENHANCEMENTS
   ========================================================================== */

/* Monotype Grid & Chips */
.tb-gen-monotype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 6px;
    margin-top: 6px;
    box-sizing: border-box;
    max-width: 100%;
}

.tb-gen-monotype-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-monotype-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.tb-gen-monotype-chip.active {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.25) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

/* Roll History Controls */
.tb-gen-history-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.35);
    padding: 3px 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
    max-width: 100%;
}

.tb-gen-history-btn {
    background: transparent;
    border: none;
    color: #fff;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tb-gen-history-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    color: #10b981;
}

.tb-gen-history-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.tb-gen-history-counter {
    font-family: 'Minecraft', monospace, sans-serif;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    padding: 0 4px;
    user-select: none;
    white-space: nowrap;
}

/* Poster Modal & Preview */
.tb-poster-modal-content {
    max-width: 860px;
    width: 95%;
    background: #0d1322;
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(168, 85, 247, 0.2);
    border-radius: 16px;
    padding: 20px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    position: relative;
    animation: tbFadeIn 0.25s ease;
    box-sizing: border-box;
    max-height: 92vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tb-poster-preview-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #070a12;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    min-height: 220px;
    overflow: hidden;
}

.tb-poster-preview-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
    display: block;
}

.tb-poster-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 100%;
}

@media (max-width: 768px) {
    .tb-gen-monotype-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 4px;
    }
    .tb-gen-monotype-chip {
        font-size: 0.65rem;
        padding: 5px 6px;
    }
    .tb-poster-modal-content {
        padding: 14px;
        width: 98%;
        max-height: 96vh;
    }
    .tb-poster-actions {
        justify-content: stretch;
    }
    .tb-poster-actions .tb-btn {
        flex: 1 1 100%;
        text-align: center;
        justify-content: center;
    }
}


/* ==========================================================================
   Pokemon Species Biology, Physical Traits & Breeding Styles
   ========================================================================== */

/* Род / Категория покемона в заголовке профиля */
.db-profile-genus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffd166;
    background: rgba(255, 209, 102, 0.12);
    border: 1px solid rgba(255, 209, 102, 0.32);
    padding: 3px 10px;
    border-radius: 12px;
    margin: 4px 0 2px;
    box-shadow: 0 2px 8px rgba(255, 209, 102, 0.15);
    letter-spacing: 0.5px;
    width: fit-content;
}
.db-profile-genus i {
    font-size: 0.68rem;
    opacity: 0.85;
}

/* Физические параметры (Рост, Вес, Пол) в левой карточке */
.db-profile-physical-card {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.db-profile-physical-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.db-profile-physical-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: left;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.db-profile-physical-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}
.db-phys-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.db-phys-label i {
    color: #e94560;
    font-size: 0.7rem;
}
.db-phys-val {
    font-size: 0.88rem;
    color: #ffffff;
    font-weight: 500;
}
.db-phys-val b {
    color: #ffffff;
    font-weight: 700;
}
.db-phys-unit {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-phys-sub {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 2px;
}

/* Пол покемона (интерактивная шкала) */
.db-profile-gender-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.db-gender-genderless {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.74rem;
    font-family: 'Minecraft', monospace;
    padding: 6px 12px;
    border-radius: 8px;
    width: fit-content;
}
.db-gender-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.db-gender-bar {
    height: 8px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.db-gender-bar-m {
    background: linear-gradient(90deg, #38bdf8, #2563eb);
    height: 100%;
    transition: width 0.3s ease;
}
.db-gender-bar-f {
    background: linear-gradient(90deg, #f472b6, #e11d48);
    height: 100%;
    transition: width 0.3s ease;
}
.db-gender-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    padding: 0 2px;
}
.db-gender-label.male {
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 4px;
}
.db-gender-label.female {
    color: #f472b6;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Детальная секция биологии и разведения (Правая карточка) */
.db-bio-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.db-bio-detail-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-bio-detail-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.db-bio-detail-head {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-bio-detail-head i {
    color: #e94560;
    font-size: 0.72rem;
}
.db-bio-detail-value {
    font-size: 0.85rem;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}
.db-bio-detail-value b {
    color: #ffffff;
    font-weight: 700;
}
.db-bio-unit {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
}
.db-bio-sub-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    display: inline-flex;
    align-items: center;
}
.db-bio-egg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.db-bio-egg-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.35);
    color: #d8b4fe;
    padding: 3px 8px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 6px rgba(168, 85, 247, 0.15);
    transition: all 0.2s;
}
.db-bio-egg-chip:hover {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}
.db-bio-egg-chip i {
    font-size: 0.55rem;
    opacity: 0.8;
}
.db-bio-ev-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    background: rgba(233, 69, 96, 0.16);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #ff6b81;
    padding: 3px 9px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.2);
}
.db-bio-ev-badge i {
    font-size: 0.65rem;
}
.db-bio-exp-note {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 3px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
}
.db-bio-exp-note b {
    color: #f59e0b;
}
.db-bio-exp-note i {
    color: #f59e0b;
    font-size: 0.65rem;
}
.db-bio-dash {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .db-bio-details-grid {
        grid-template-columns: 1fr;
    }
    .db-profile-physical-row {
        grid-template-columns: 1fr 1fr;
    }
}


/* ========================================================================== */
/* NEWS & COMMUNITY: MUTED PLAYERS SYSTEM */
/* ========================================================================== */

.news-subtabs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.news-subtabs-nav {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.news-subtabs-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-manage-muted-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    padding: 9px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.news-manage-muted-btn:hover {
    background: rgba(233, 69, 96, 0.18);
    border-color: rgba(233, 69, 96, 0.5);
    color: #fff;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.25);
    transform: translateY(-1px);
}

.news-manage-muted-btn.has-muted {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.45);
    color: #fff;
}

.news-muted-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e94560;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 18px;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

/* Card Author Mute Button */
.comm-user-mute-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 8px;
    vertical-align: middle;
}

.comm-user-mute-btn:hover {
    background: rgba(233, 69, 96, 0.22);
    border-color: rgba(233, 69, 96, 0.6);
    color: #ff6b81;
    transform: translateY(-1px);
}

.comm-user-mute-btn.muted {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #ff6b81;
}

.comm-user-mute-btn i {
    font-size: 0.68rem;
}

/* Feed Banner for Hidden Muted Posts */
.news-muted-feed-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(233, 69, 96, 0.08);
    border: 1px dashed rgba(233, 69, 96, 0.35);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    animation: fadeIn 0.25s ease-out;
}

.news-muted-feed-banner i.fa-volume-xmark {
    color: #e94560;
    font-size: 0.9rem;
}

.news-muted-feed-banner button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.5);
    color: #ff8599;
    border-radius: 8px;
    padding: 4px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-muted-feed-banner button:hover {
    background: #e94560;
    color: #fff;
}

/* Modal for Muted Users */
.news-muted-modal-card {
    background: #121829 !important;
    border: 1px solid rgba(233, 69, 96, 0.3) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 24px rgba(233, 69, 96, 0.15) !important;
}

.news-muted-modal-desc {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

.news-muted-add-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.news-muted-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.news-muted-input-wrap i {
    position: absolute;
    left: 14px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.news-muted-input-wrap input {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 14px 10px 38px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    outline: none;
    transition: all 0.2s ease;
}

.news-muted-input-wrap input:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
}

.news-muted-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #e94560;
    border: none;
    color: #fff;
    border-radius: 10px;
    padding: 0 18px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease;
}

.news-muted-add-btn:hover {
    background: #ff5270;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4);
    transform: translateY(-1px);
}

.news-muted-list-wrap {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.news-muted-user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    transition: all 0.2s ease;
}

.news-muted-user-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(233, 69, 96, 0.3);
}

.news-muted-user-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.news-muted-avatar-box {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6b81;
    font-size: 0.85rem;
}

.news-muted-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.news-muted-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 700;
}

.news-muted-status-tag {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Minecraft', monospace;
}

.news-user-unmute-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #10b981;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-user-unmute-btn:hover {
    background: #10b981;
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.news-muted-empty-state {
    text-align: center;
    padding: 30px 16px;
    color: rgba(255, 255, 255, 0.4);
}

.news-muted-empty-icon {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 10px;
}

.news-muted-empty-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
}

.news-muted-empty-sub {
    font-size: 0.75rem;
    line-height: 1.4;
    max-width: 360px;
    margin: 0 auto;
}

.news-unmute-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(233, 69, 96, 0.12);
    border: 1px solid rgba(233, 69, 96, 0.35);
    color: #ff6b81;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-unmute-all-btn:hover {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #fff;
}

@media (max-width: 650px) {
    .news-subtabs-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    .news-subtabs-nav {
        width: 100%;
    }
    .news-manage-muted-btn {
        justify-content: center;
        width: 100%;
    }
}


/* ============================================
   ФИОЛЕТОВАЯ ПОДСВЕТКА УВЕДОМЛЕНИЙ АДМИНА
   ============================================ */

/* 1. Колокольчик в шапке (User Bar Bell) */
.notif-badge.has-admin-unread i {
    color: #c084fc !important;
    filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.95)) drop-shadow(0 0 14px rgba(168, 85, 247, 0.7)) !important;
    animation: adminBellPulse 1.8s infinite ease-in-out !important;
}

.notif-badge.has-admin-unread:hover i {
    color: #e9d5ff !important;
    filter: drop-shadow(0 0 8px rgba(233, 213, 255, 1)) drop-shadow(0 0 18px rgba(168, 85, 247, 0.9)) !important;
}

.notif-badge.has-admin-unread .notif-badge-count {
    background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.95), 0 0 14px rgba(147, 51, 234, 0.6) !important;
    border: 1px solid #d8b4fe !important;
    color: #ffffff !important;
}

@keyframes adminBellPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    15% {
        transform: scale(1.2) rotate(-14deg);
    }
    30% {
        transform: scale(1.2) rotate(14deg);
    }
    45% {
        transform: scale(1.1) rotate(-8deg);
    }
    60% {
        transform: scale(1.05) rotate(5deg);
    }
    75% {
        transform: scale(1) rotate(0deg);
    }
}

/* 2. Карточка прямого уведомления в дропдауне */
.notif-item.notif-item-admin {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(126, 34, 206, 0.28) 100%) !important;
    border: 1.5px solid rgba(192, 132, 252, 0.65) !important;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.35), inset 0 0 10px rgba(168, 85, 247, 0.15) !important;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    position: relative;
}

.notif-item.notif-item-admin.unread {
    border-color: #c084fc !important;
    box-shadow: 0 0 18px rgba(192, 132, 252, 0.55), inset 0 0 12px rgba(168, 85, 247, 0.25) !important;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.28) 0%, rgba(126, 34, 206, 0.45) 100%) !important;
}

.notif-item.notif-item-admin .notif-admin-title {
    color: #e9d5ff !important;
    font-weight: bold;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
}

.notif-item.notif-item-admin .notif-admin-title i {
    color: #c084fc;
    font-size: 0.75rem;
}

.notif-admin-tag {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.7);
    letter-spacing: 0.5px;
}

.notif-admin-body {
    color: #ffffff !important;
    font-size: 0.65rem;
    line-height: 1.5;
    margin-top: 6px;
    word-break: break-word;
    white-space: pre-wrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-family: 'Minecraft', monospace;
}

.notif-admin-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(192, 132, 252, 0.2);
}

.notif-admin-time {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(233, 213, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 4px;
}

.notif-admin-del-btn {
    background: transparent;
    border: none;
    color: rgba(233, 213, 255, 0.5);
    cursor: pointer;
    font-size: 0.6rem;
    padding: 2px 5px;
    border-radius: 4px;
    transition: all 0.2s;
}

.notif-admin-del-btn:hover {
    color: #ff6b81;
    background: rgba(255, 107, 129, 0.15);
}

/* 3. Кнопка отправки уведомления в строке пользователя */
.admin-send-user-notif-btn {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: #c084fc;
    font-size: 0.55rem;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 6px;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
}

.admin-send-user-notif-btn:hover {
    background: #a855f7;
    color: #fff;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.8);
}

/* 4. Модальное окно отправки */
.admin-notif-modal-content {
    max-width: 540px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    background: #151528;
    border: 2px solid #a855f7;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 20px rgba(168, 85, 247, 0.3);
}

.admin-notif-input,
.admin-notif-select,
.admin-notif-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: #0d0d1a;
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.2s;
}

.admin-notif-input:focus,
.admin-notif-select:focus,
.admin-notif-textarea:focus {
    border-color: #c084fc;
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.4);
}

/* ============================================
   СИНИЕ УВЕДОМЛЕНИЯ: ОТВЕТЫ ИГРОКОВ
   ============================================ */

.notif-item.notif-item-player-reply {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(37, 99, 235, 0.28) 100%) !important;
    border: 1.5px solid rgba(96, 165, 250, 0.65) !important;
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.35), inset 0 0 10px rgba(59, 130, 246, 0.1) !important;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    position: relative;
}

.notif-item.notif-item-player-reply.unread {
    border-color: #60a5fa !important;
    box-shadow: 0 0 18px rgba(96, 165, 250, 0.55), inset 0 0 12px rgba(59, 130, 246, 0.2) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.28) 0%, rgba(37, 99, 235, 0.42) 100%) !important;
}

.notif-player-reply-title {
    color: #bfdbfe !important;
    font-weight: bold;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
}

.notif-player-reply-title i {
    color: #60a5fa;
    font-size: 0.75rem;
}

.notif-player-reply-tag {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.7);
    letter-spacing: 0.5px;
}

.notif-player-reply-body {
    color: #93c5fd !important;
    font-size: 0.58rem;
    font-family: 'Minecraft', monospace;
    margin-top: 4px;
    opacity: 0.85;
}

.notif-player-reply-text {
    color: #ffffff !important;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    margin-top: 5px;
    padding: 5px 8px;
    background: rgba(59, 130, 246, 0.15);
    border-left: 2px solid #60a5fa;
    border-radius: 0 6px 6px 0;
    word-break: break-word;
    white-space: pre-wrap;
}


/* Approve & Apply Admin Button */
.comm-admin-btn.approve-apply {
    background: linear-gradient(135deg, #059669 0%, #00cec9 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 206, 201, 0.6) !important;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.35);
    font-weight: bold;
}
.comm-admin-btn.approve-apply:hover {
    filter: brightness(1.25);
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.6);
}


/* Translation comparison 3-box additions */
.comm-trans-box.cur .comm-trans-label {
    color: rgba(245, 158, 11, 0.8) !important;
}

.comm-trans-box.cur .comm-trans-value {
    color: #f59e0b !important;
}

.comm-trans-none {
    color: rgba(255, 255, 255, 0.35) !important;
    font-style: italic !important;
    font-weight: normal !important;
    font-size: 0.85rem !important;
}

.comm-trans-match-icon {
    font-size: 0.82rem !important;
    color: #10b981 !important;
    margin-left: 4px !important;
}

/* Real-time live highlight animation for new arrivals */
@keyframes commLivePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.85);
        transform: translateY(-4px) scale(1.01);
        border-color: rgba(16, 185, 129, 0.9) !important;
    }
    50% {
        box-shadow: 0 0 28px 6px rgba(16, 185, 129, 0.5);
        border-color: rgba(16, 185, 129, 0.75) !important;
    }
    100% {
        box-shadow: none;
        transform: translateY(0) scale(1);
    }
}

.comm-live-highlight {
    animation: commLivePulse 3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    position: relative;
    z-index: 5;
}

/* Unread live dot on modeBtnNews */
#modeBtnNews {
    position: relative;
}

.news-live-unread-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    animation: unreadPulse 1.8s infinite;
    pointer-events: none;
}

@keyframes unreadPulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 6px #10b981; }
    50% { transform: scale(1.35); opacity: 0.8; box-shadow: 0 0 14px #10b981; }
}

/* Translation Pokemon Sprite Card */
.comm-trans-poke-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(20, 24, 45, 0.75), rgba(10, 15, 30, 0.85));
    border: 1px solid rgba(0, 206, 201, 0.25);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.comm-trans-poke-card:hover {
    border-color: rgba(0, 206, 201, 0.45);
    transform: translateY(-1px);
}

.comm-trans-poke-avatar-box {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 10px;
    background: radial-gradient(circle, rgba(0, 206, 201, 0.15) 0%, rgba(10, 15, 30, 0.6) 80%);
    border: 1px solid rgba(0, 206, 201, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.comm-trans-poke-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
    transition: transform 0.25s ease;
}

.comm-trans-poke-card:hover .comm-trans-poke-img {
    transform: scale(1.1);
}

.comm-trans-poke-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.comm-trans-poke-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.comm-trans-poke-dex-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    color: #00cec9;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 6px;
    padding: 2px 7px;
    letter-spacing: 0.5px;
}

.comm-trans-poke-eng-name {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
}

.comm-trans-poke-cur-tag {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.comm-trans-poke-types-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.comm-trans-type-pill {
    font-size: 0.68rem;
    font-weight: bold;
    color: #fff;
    padding: 1px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}


/* Move Target Diagram (pokemondb style) */
.db-move-target-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 14px 14px;
    background: rgba(15, 52, 96, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    margin: 8px 0 6px;
}
.move-target {
    margin: 0 auto 12px;
    position: relative;
    width: 294px;
    height: 116px;
    box-sizing: border-box;
}
.move-target > .mt-pkmn {
    position: relative;
    z-index: 5;
    float: left;
    margin: 4px;
    width: 90px;
    height: 50px;
    border-radius: 20px / 44px;
    line-height: 44px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    box-sizing: border-box;
    transition: all 0.25s ease;
    user-select: none;
    letter-spacing: 0.3px;
    font-family: inherit;
}
.move-target > .mt-user {
    background-color: #13c2eb;
    border: 3px solid #13c2eb;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.move-target > .mt-foe {
    background-color: #e68929;
    border: 3px solid #e68929;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.move-target > .mt-selected {
    border-color: #2ecc71 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.55), inset 0 0 8px rgba(46, 204, 113, 0.25);
}
.move-target > .mt-unselected {
    opacity: 0.5;
}
.move-target > .mt-hspace,
.move-target > .mt-vspace {
    position: absolute;
    background: #2ecc71;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.9), 0 0 24px rgba(46, 204, 113, 0.5);
    z-index: 4;
    border-radius: 5px;
    pointer-events: none;
}

.move-target > .mt-hspace {
    width: 20px;
    height: 22px;
}
.move-target > .mt-hspace.tl { left: 88px; top: 18px; }
.move-target > .mt-hspace.tr { left: 186px; top: 18px; }
.move-target > .mt-hspace.bl { left: 88px; top: 76px; }
.move-target > .mt-hspace.br { left: 186px; top: 76px; }

.move-target > .mt-vspace {
    width: 22px;
    height: 20px;
}
.move-target > .mt-vspace.lt { left: 38px; top: 48px; }
.move-target > .mt-vspace.md { left: 136px; top: 48px; }
.move-target > .mt-vspace.rt { left: 234px; top: 48px; }

.mt-descr {
    color: #e2e8f0;
    font-style: italic;
    text-align: center;
    font-size: 0.92rem;
    margin: 4px 0 0;
    line-height: 1.45;
    max-width: 480px;
}


/* ==========================================================================
   MINI-GAMES SYNCHRONIZED DUEL HUD
   ========================================================================== */
.mg-duel-hud {
    position: sticky;
    top: 10px;
    z-index: 1500;
    width: calc(100% - 24px);
    max-width: 860px;
    margin: 10px auto 16px auto;
    animation: fadeInDown 0.3s ease;
    font-family: 'Minecraft', monospace !important;
}

.mg-duel-hud-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(22, 33, 62, 0.9));
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(233, 69, 96, 0.25);
    color: #fff;
    font-family: 'Minecraft', monospace !important;
}

.mg-duel-hud-col {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Minecraft', monospace !important;
}
.mg-duel-hud-col.left {
    justify-content: flex-start;
}
.mg-duel-hud-col.center {
    justify-content: center;
}
.mg-duel-hud-col.right {
    justify-content: flex-end;
}

.mg-duel-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #e94560, #ff6b81);
    color: #fff;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
}

.mg-duel-partner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem;
    font-weight: bold;
    color: #4ecdc4;
}

.mg-duel-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}
.mg-duel-pill.round {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffd700;
}
.mg-duel-pill.score {
    background: rgba(78, 205, 196, 0.15);
    border: 1px solid rgba(78, 205, 196, 0.4);
    color: #4ecdc4;
}

.mg-duel-quit-btn,
.mg-duel-surrender-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #ff6b81;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Minecraft', monospace !important;
}

.mg-duel-quit-btn:hover,
.mg-duel-surrender-btn:hover {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #fff;
    transform: translateY(-1px);
}

.mg-duel-opponent {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-family: 'Minecraft', monospace !important;
}

.mg-duel-label {
    color: #a0aec0;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace !important;
}

.mg-duel-name {
    color: #4ecdc4;
    font-weight: 700;
    font-family: 'Minecraft', monospace !important;
}

.mg-duel-progress,
.mg-duel-score {
    font-size: 0.75rem;
    color: #e2e8f0;
    font-family: 'Minecraft', monospace !important;
}

.mg-duel-progress strong,
.mg-duel-score strong {
    color: #ffd700;
    font-weight: 800;
    margin-left: 4px;
    font-family: 'Minecraft', monospace !important;
}

@media (max-width: 600px) {
    .mg-duel-hud-inner {
        flex-wrap: wrap;
        padding: 8px 12px;
        gap: 8px;
        font-size: 0.7rem;
    }
    .mg-duel-badge {
        font-size: 0.65rem;
        padding: 3px 8px;
    }
    .mg-duel-partner {
        font-size: 0.7rem;
    }
    .mg-duel-pill {
        padding: 3px 8px;
        font-size: 0.65rem;
    }
    .mg-duel-quit-btn,
    .mg-duel-surrender-btn {
        padding: 4px 8px;
        font-size: 0.65rem;
    }
}


/* ==========================================================================
   MINI-GAMES START SCREEN OVERLAY
   ========================================================================== */
.mg-start-overlay {
    position: relative;
    width: 100%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeInDown 0.3s ease;
    z-index: 10;
}

.mg-start-card {
    width: 100%;
    max-width: 540px;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.95), rgba(15, 23, 42, 0.98));
    border: 2px solid rgba(233, 69, 96, 0.4);
    border-radius: 20px;
    padding: 34px 26px;
    text-align: center;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.65), 0 0 25px rgba(233, 69, 96, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mg-start-icon-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px auto;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 70%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.mg-start-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
}

.mg-start-desc {
    color: #cbd5e1;
    font-size: 0.85rem;
    line-height: 1.65;
    margin: 0 0 22px 0;
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace !important;
    letter-spacing: 0.3px;
}

.mg-start-duel-badge {
    font-family: 'Minecraft', monospace !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(78, 205, 196, 0.25));
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 20px;
    padding: 8px 18px;
    margin-bottom: 22px;
    font-size: 0.9rem;
    color: #ffd700;
    font-weight: 700;
}

.mg-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 15px 42px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mg-start-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    background: linear-gradient(135deg, #34d399, #059669);
}

.mg-start-btn:active {
    transform: translateY(1px) scale(0.98);
}

.mg-start-btn.duel {
    background: linear-gradient(135deg, #e94560, #ff6b81);
    box-shadow: 0 6px 22px rgba(233, 69, 96, 0.45);
}

.mg-start-btn.duel:hover {
    background: linear-gradient(135deg, #ff4772, #e94560);
    box-shadow: 0 12px 30px rgba(233, 69, 96, 0.65);
}/* removed duplicate silDropdown *//* ============================================
   Poke DIV Game - Основные стили
   ============================================ */

/* ------------------- Шрифты ------------------- */
@font-face {
    font-family: 'Minecraft';
    src: url('Minecraft.woff2?v=glyphfix_1788792907') format('woff2'),
         url('Minecraft.otf?v=glyphfix_1788792907') format('opentype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ------------------- Базовые стили ------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
}

button, input, select, textarea, optgroup, option, dialog {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
}

input::placeholder, textarea::placeholder {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
}

body {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    color: #ffffff;
    min-height: 100vh;
    padding: 20px;
    font-size: 14px;
    position: relative;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
}

/* Анимированный фон */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(233, 69, 96, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ------------------- Анимации ------------------- */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes typesReveal {
    from { opacity: 0; transform: scale(0.9) translateY(-30px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cardReveal {
    from { opacity: 0; transform: translateY(30px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes presentationEnter {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes presentationExit {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes modalPop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes modalPopCenter {
    from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes slideEnter {
    from { opacity: 0; transform: translateX(100px) rotateY(10deg); }
    to { opacity: 1; transform: translateX(0) rotateY(0); }
}

@keyframes slideExit {
    from { opacity: 1; transform: translateX(0) rotateY(0); }
    to { opacity: 0; transform: translateX(-100px) rotateY(-10deg); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; visibility: hidden; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 20px rgba(233,69,96,0.2); }
    50% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(233,69,96,0.5); }
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes imageGlow {
    0%, 100% { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6)) brightness(1.05); }
    50% { filter: drop-shadow(0 20px 50px rgba(233, 69, 96, 0.4)) brightness(1.1); }
}

@keyframes completionPop {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}


/* ===== Плавающий переключатель языка (следует за скроллом) ===== */
.lang-switch-floating {
    position: fixed;
    top: 20px;
    right: 74px;
    z-index: 1000;
    display: inline-flex;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}
.lang-switch-floating:hover {
    border-color: rgba(233, 69, 96, 0.8);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.3);
}
.lang-switch-floating .lang-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: none;
    padding: 9px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.lang-switch-floating .lang-btn:hover {
    color: #fff;
    background: rgba(233, 69, 96, 0.2);
}
.lang-switch-floating .lang-btn.active {
    background: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.7);
}
@media (max-width: 768px) {
    .lang-switch-floating {
        top: 12px;
        right: 56px;
    }
    .lang-switch-floating .lang-btn {
        font-size: 0.55rem;
        padding: 7px 10px;
    }
}

/* ------------------- Социальный блок ------------------- */
.social-block {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.social-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(233,69,96,0.5);
    backdrop-filter: blur(10px);
    color: #e94560;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-toggle:hover {
    background: rgba(233,69,96,0.2);
    transform: scale(1.1);
}

.social-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.25s ease;
    background: rgba(0,0,0,0.7);
    padding: 12px 18px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233,69,96,0.4);
    text-align: center;
    margin-bottom: 8px;
    pointer-events: none;
}

.social-block.open .social-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 10px;
}

.social-link {
    font-size: 28px;
    transition: transform 0.3s;
}

.social-link.telegram { color: #26A5E4; }
.social-link.youtube { color: #FF0000; }
.social-link.twitch { color: #9146FF; }

.social-link:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px currentColor);
}

.social-credit {
    color: #aaa;
    font-size: 10px;
    letter-spacing: 1px;
    border-top: 1px solid rgba(233,69,96,0.3);
    padding-top: 8px;
    margin-top: 4px;
}

.social-credit i {
    color: #e94560;
    font-size: 8px;
}

.creator-name {
    color: #e94560;
    font-size: 11px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .social-block {
        top: 12px;
        right: 12px;
    }
    .social-toggle {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .social-panel {
        padding: 10px 14px;
    }
    .social-link {
        font-size: 22px;
    }
}

/* ------------------- Табы и контент ------------------- */
.tab-content {
    animation: pageFadeIn 0.4s ease-out;
}

.types-reveal-panel {
    display: none;
    gap: 60px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 45px;
    padding-top: 45px;
}

.types-reveal-panel.show {
    display: flex;
    animation: typesReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-type-card {
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    animation: cardReveal 0.4s ease-out backwards;
}

.reveal-type-card:nth-child(1) { animation-delay: 0.1s; }
.reveal-type-card:nth-child(2) { animation-delay: 0.2s; }

.reveal-type-card:hover {
    transform: scale(1.15);
}

.reveal-type-card img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
}

.reveal-type-card span {
    display: block;
    margin-top: 15px;
    font-size: 1rem;
    font-weight: bold;
    color: #e94560;
}

/* ------------------- Модальные окна ------------------- */
.modal {
    display: none;
    position: fixed;
    z-index: 20000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 700px;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    color: white;
    box-shadow: 0 0 40px rgba(233,69,96,0.3);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.modal-large {
    max-width: 1200px;
    width: 95%;
}

.modal-content h3 {
    color: #e94560;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-align: center;
}

.modal-content input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    background: #1a1a2e;
    border: 1px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.modal-content input:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233,69,96,0.3);
}

.modal-two-columns {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    margin-bottom: 20px;
}

.modal-filters {
    flex: 1;
    min-width: 250px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 20px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
    overflow-y: auto;
}

.modal-results {
    flex: 2;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-buttons {
    margin-top: auto;
    text-align: center;
    flex-shrink: 0;
}

/* Подтверждение удаления */
.confirm-modal {
    display: none;
    position: fixed;
    z-index: 20001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.confirm-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 400px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 50px rgba(233,69,96,0.4);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-modal-content h3 {
    color: #e94560;
    margin-bottom: 15px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.confirm-modal-content p {
    font-size: 0.7rem;
    line-height: 1.5;
    color: #ddd;
    margin-bottom: 5px;
}

.confirm-modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.confirm-modal-buttons button {
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.confirm-modal-buttons button:first-child {
    background: #e74c3c;
    color: white;
}

.confirm-modal-buttons button:first-child:hover {
    background: #c0392b;
    transform: scale(1.05);
}

.confirm-modal-buttons button:last-child {
    background: #2c3e50;
    color: white;
}

.confirm-modal-buttons button:last-child:hover {
    background: #1a252f;
    transform: scale(1.05);
}

/* Модальное окно завершения */
.completion-modal {
    display: none;
    position: fixed;
    z-index: 20002;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(233,69,96,0.3), rgba(0,0,0,0.95));
    backdrop-filter: blur(10px);
    font-family: 'Minecraft', monospace;
}

.completion-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 35px 50px;
    border: 2px solid #e94560;
    border-radius: 40px;
    width: 500px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 70px rgba(233,69,96,0.5);
    animation: completionPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.completion-modal-content i.fa-trophy {
    font-size: 2rem;
    color: #f39c12;
    margin-bottom: 15px;
}

.completion-modal-content h2 {
    color: #e94560;
    font-size: 1.2rem;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.completion-modal-content p {
    font-size: 0.7rem;
    color: #ddd;
}

.completion-modal-content button {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.completion-modal-content button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(233,69,96,0.5);
}

/* ------------------- Фильтры ------------------- */
.filter-section {
    margin-bottom: 20px;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(233, 69, 96, 0.2);
}

.filter-title {
    font-size: 0.7rem;
    color: #e94560;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.filter-buttons {
    display: flex;
    gap: 12px;
}

.filter-toggle {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px 16px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-toggle.active {
    background: #e94560;
    border-color: white;
    box-shadow: 0 0 8px rgba(233,69,96,0.5);
}

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

.filter-tag {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 5px 12px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-tag:hover {
    transform: scale(1.03);
    background: #e94560;
}

.filter-tag.active {
    background: #e94560;
    border-color: white;
}

.filter-gen-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.filter-gen {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    text-align: center;
    transition: all 0.2s;
}

.filter-gen.active {
    background: #e94560;
    border-color: white;
}

.filter-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.filter-stats {
    font-size: 0.6rem;
    color: #aaa;
    text-align: center;
    margin-top: 10px;
    padding: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
}

/* ------------------- Список покемонов ------------------- */
.pokemon-list-grid {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 15px;
    padding-right: 5px;
}

.template-pokemon-card {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 15px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.template-pokemon-card:hover {
    transform: scale(1.02);
    border-color: #fff;
    box-shadow: 0 5px 20px rgba(233,69,96,0.3);
}

.template-pokemon-card img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.template-pokemon-card .pokemon-name {
    font-weight: bold;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------- Уведомления (Poke DIV Toasts) ------------------- */
#notificationContainer {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999999 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 440px;
    width: calc(100vw - 48px);
}

.custom-notification {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.96) 0%, rgba(15, 23, 42, 0.96) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 5px solid #38bdf8;
    border-radius: 12px;
    padding: 14px 16px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    line-height: 1.4;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 206, 201, 0.15);
    animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: auto;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
}

.custom-notification:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 255, 255, 0.1);
}

.custom-notification.toast-fade-out {
    opacity: 0 !important;
    transform: translateX(40px) scale(0.95) !important;
}

.custom-notification.success {
    border-left-color: #00cec9;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 206, 201, 0.25);
}

.custom-notification.error {
    border-left-color: #e94560;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(233, 69, 96, 0.3);
}

.custom-notification.warning {
    border-left-color: #f59e0b;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.25);
}

.custom-notification.info {
    border-left-color: #38bdf8;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.25);
}

.toast-icon-wrap {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: rgba(255, 255, 255, 0.08);
}

.custom-notification.success .toast-icon-wrap {
    background: rgba(0, 206, 201, 0.15);
    color: #00cec9;
}

.custom-notification.error .toast-icon-wrap {
    background: rgba(233, 69, 96, 0.18);
    color: #e94560;
}

.custom-notification.warning .toast-icon-wrap {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}

.custom-notification.info .toast-icon-wrap {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
}

.toast-body {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    color: #ffffff;
}

.toast-title {
    font-weight: bold;
    font-size: 0.82rem;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.custom-notification.success .toast-title { color: #00cec9; }
.custom-notification.error .toast-title { color: #e94560; }
.custom-notification.warning .toast-title { color: #f59e0b; }
.custom-notification.info .toast-title { color: #38bdf8; }

.toast-message {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    line-height: 1.35;
}

.toast-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.toast-close-btn:hover {
    color: #ffffff;
    transform: scale(1.15);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
}

.toast-progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: left;
    transition: width linear;
}

.custom-notification.success .toast-progress-bar { background: #00cec9; }
.custom-notification.error .toast-progress-bar { background: #e94560; }
.custom-notification.warning .toast-progress-bar { background: #f59e0b; }
.custom-notification.info .toast-progress-bar { background: #38bdf8; }

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ------------------- Главное меню ------------------- */
.main-menu {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.6s ease;
}

.menu-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 40px;
    background: rgba(22, 33, 62, 0.6);
    border-radius: 60px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(233, 69, 96, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(233, 69, 96, 0.2);
    animation: glowPulse 3s infinite;
}

.menu-header h1 {
    color: #e94560;
    font-size: 2.2rem;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
    letter-spacing: 2px;
}

.menu-header p {
    color: #aaa;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

/* ------------------- Табы ------------------- */
.tabs {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.tab-btn {
    background: rgba(15, 52, 96, 0.7);
    border: 2px solid rgba(233, 69, 96, 0.5);
    padding: 15px 40px;
    font-size: 1rem;
    font-family: 'Minecraft', monospace;
    color: white;
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.tab-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(233, 69, 96, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.tab-btn:hover::before {
    width: 300px;
    height: 300px;
}

.tab-btn:hover {
    border-color: #e94560;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(233, 69, 96, 0.3);
}

.tab-btn.active {
    background: #e94560;
    border-color: #fff;
    box-shadow: 0 0 30px rgba(233, 69, 96, 0.6);
}

.tab-content {
    display: none;
    background: rgba(15, 52, 96, 0.5);
    border-radius: 40px;
    padding: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    height: auto !important;
    min-height: auto !important;
    overflow: hidden;
}

.tab-content.active {
    display: block;
}

/* ------------------- Игровые карточки ------------------- */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.game-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
    border-radius: 25px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(233, 69, 96, 0.3);
    position: relative;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(233,69,96,0.1), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.game-card:hover::before {
    opacity: 1;
}

.game-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #e94560;
    box-shadow: 0 20px 40px rgba(233, 69, 96, 0.3);
}

.game-card h3 {
    color: #e94560;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.game-card p {
    color: #aaa;
    font-size: 0.6rem;
}

.delete-collection-btn {
    background: rgba(231, 76, 60, 0.8);
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    margin-top: 15px;
    transition: all 0.3s;
    z-index: 10;
    position: relative;
}

.delete-collection-btn:hover {
    background: #e74c3c;
    transform: scale(1.05);
}

/* ============================================
   Poke DIV Game - Основные стили
   ============================================ */

/* ------------------- Шрифты ------------------- */
/* Duplicate Minecraft @font-face removed */

/* ------------------- Базовые стили ------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    min-height: 100vh;
    padding: 20px;
    font-size: 14px;
    position: relative;
    overflow-x: hidden;
}

/* Анимированный фон */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(233, 69, 96, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ------------------- Анимации ------------------- */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes typesReveal {
    from { opacity: 0; transform: scale(0.9) translateY(-30px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cardReveal {
    from { opacity: 0; transform: translateY(30px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes presentationEnter {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes presentationExit {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes modalPop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes modalPopCenter {
    from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes slideEnter {
    from { opacity: 0; transform: translateX(100px) rotateY(10deg); }
    to { opacity: 1; transform: translateX(0) rotateY(0); }
}

@keyframes slideExit {
    from { opacity: 1; transform: translateX(0) rotateY(0); }
    to { opacity: 0; transform: translateX(-100px) rotateY(-10deg); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; visibility: hidden; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 20px rgba(233,69,96,0.2); }
    50% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(233,69,96,0.5); }
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes imageGlow {
    0%, 100% { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6)) brightness(1.05); }
    50% { filter: drop-shadow(0 20px 50px rgba(233, 69, 96, 0.4)) brightness(1.1); }
}

@keyframes completionPop {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}


/* ===== Плавающий переключатель языка (следует за скроллом) ===== */
.lang-switch-floating {
    position: fixed;
    top: 20px;
    right: 74px;
    z-index: 1000;
    display: inline-flex;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}
.lang-switch-floating:hover {
    border-color: rgba(233, 69, 96, 0.8);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.3);
}
.lang-switch-floating .lang-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: none;
    padding: 9px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.lang-switch-floating .lang-btn:hover {
    color: #fff;
    background: rgba(233, 69, 96, 0.2);
}
.lang-switch-floating .lang-btn.active {
    background: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.7);
}
@media (max-width: 768px) {
    .lang-switch-floating {
        top: 12px;
        right: 56px;
    }
    .lang-switch-floating .lang-btn {
        font-size: 0.55rem;
        padding: 7px 10px;
    }
}

/* ------------------- Социальный блок ------------------- */
.social-block {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.social-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(233,69,96,0.5);
    backdrop-filter: blur(10px);
    color: #e94560;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-toggle:hover {
    background: rgba(233,69,96,0.2);
    transform: scale(1.1);
}

.social-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.25s ease;
    background: rgba(0,0,0,0.7);
    padding: 12px 18px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233,69,96,0.4);
    text-align: center;
    margin-bottom: 8px;
    pointer-events: none;
}

.social-block.open .social-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 10px;
}

.social-link {
    font-size: 28px;
    transition: transform 0.3s;
}

.social-link.telegram { color: #26A5E4; }
.social-link.youtube { color: #FF0000; }
.social-link.twitch { color: #9146FF; }

.social-link:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px currentColor);
}

.social-credit {
    color: #aaa;
    font-size: 10px;
    letter-spacing: 1px;
    border-top: 1px solid rgba(233,69,96,0.3);
    padding-top: 8px;
    margin-top: 4px;
}

.social-credit i {
    color: #e94560;
    font-size: 8px;
}

.creator-name {
    color: #e94560;
    font-size: 11px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .social-block {
        top: 12px;
        right: 12px;
    }
    .social-toggle {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .social-panel {
        padding: 10px 14px;
    }
    .social-link {
        font-size: 22px;
    }
}

/* ------------------- Табы и контент ------------------- */
.tab-content {
    animation: pageFadeIn 0.4s ease-out;
}

/* ------------------- Модальные окна ------------------- */
.modal {
    display: none;
    position: fixed;
    z-index: 20000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 700px;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    color: white;
    box-shadow: 0 0 40px rgba(233,69,96,0.3);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.modal-large {
    max-width: 1200px;
    width: 95%;
}

.modal-content h3 {
    color: #e94560;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-align: center;
}

.modal-content input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    background: #1a1a2e;
    border: 1px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.modal-content input:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233,69,96,0.3);
}

.modal-two-columns {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    margin-bottom: 20px;
}

.modal-filters {
    flex: 1;
    min-width: 250px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 20px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
    overflow-y: auto;
}

.modal-results {
    flex: 2;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-buttons {
    margin-top: auto;
    text-align: center;
    flex-shrink: 0;
}

/* Подтверждение удаления */
.confirm-modal {
    display: none;
    position: fixed;
    z-index: 20001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.confirm-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 400px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 50px rgba(233,69,96,0.4);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-modal-content h3 {
    color: #e94560;
    margin-bottom: 15px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.confirm-modal-content p {
    font-size: 0.7rem;
    line-height: 1.5;
    color: #ddd;
    margin-bottom: 5px;
}

.confirm-modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.confirm-modal-buttons button {
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.confirm-modal-buttons button:first-child {
    background: #e74c3c;
    color: white;
}

.confirm-modal-buttons button:first-child:hover {
    background: #c0392b;
    transform: scale(1.05);
}

.confirm-modal-buttons button:last-child {
    background: #2c3e50;
    color: white;
}

.confirm-modal-buttons button:last-child:hover {
    background: #1a252f;
    transform: scale(1.05);
}

/* Модальное окно завершения */
.completion-modal {
    display: none;
    position: fixed;
    z-index: 20002;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(233,69,96,0.3), rgba(0,0,0,0.95));
    backdrop-filter: blur(10px);
    font-family: 'Minecraft', monospace;
}

.completion-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 35px 50px;
    border: 2px solid #e94560;
    border-radius: 40px;
    width: 500px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 70px rgba(233,69,96,0.5);
    animation: completionPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.completion-modal-content i.fa-trophy {
    font-size: 2rem;
    color: #f39c12;
    margin-bottom: 15px;
}

.completion-modal-content h2 {
    color: #e94560;
    font-size: 1.2rem;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.completion-modal-content p {
    font-size: 0.7rem;
    color: #ddd;
}

.completion-modal-content button {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.completion-modal-content button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(233,69,96,0.5);
}

/* ------------------- Фильтры ------------------- */
.filter-section {
    margin-bottom: 20px;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(233, 69, 96, 0.2);
}

.filter-title {
    font-size: 0.7rem;
    color: #e94560;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.filter-buttons {
    display: flex;
    gap: 12px;
}

.filter-toggle {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px 16px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-toggle.active {
    background: #e94560;
    border-color: white;
    box-shadow: 0 0 8px rgba(233,69,96,0.5);
}

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

.filter-tag {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 5px 12px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.filter-tag:hover {
    transform: scale(1.03);
    background: #e94560;
}

.filter-tag.active {
    background: #e94560;
    border-color: white;
}

.filter-gen-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.filter-gen {
    background: #1a1a2e;
    border: 1px solid #e94560;
    padding: 6px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    text-align: center;
    transition: all 0.2s;
}

.filter-gen.active {
    background: #e94560;
    border-color: white;
}

.filter-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.filter-stats {
    font-size: 0.6rem;
    color: #aaa;
    text-align: center;
    margin-top: 10px;
    padding: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
}

/* ------------------- Список покемонов ------------------- */
.pokemon-list-grid {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 15px;
    padding-right: 5px;
}

.template-pokemon-card {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 15px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.template-pokemon-card:hover {
    transform: scale(1.02);
    border-color: #fff;
    box-shadow: 0 5px 20px rgba(233,69,96,0.3);
}

.template-pokemon-card img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.template-pokemon-card .pokemon-name {
    font-weight: bold;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ------------------- Главное меню ------------------- */
.main-menu {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.6s ease;
}

.menu-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 40px;
    background: rgba(22, 33, 62, 0.6);
    border-radius: 60px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(233, 69, 96, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(233, 69, 96, 0.2);
    animation: glowPulse 3s infinite;
}

.menu-header h1 {
    color: #e94560;
    font-size: 2.2rem;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
    letter-spacing: 2px;
}

.menu-header p {
    color: #aaa;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.tab-btn {
    background: rgba(20, 20, 40, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 32px;
    font-size: 0.85rem;
    font-family: 'Minecraft', monospace;
    color: #ccc;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn i {
    margin-right: 8px;
    opacity: 0.7;
}

.tab-btn:hover {
    border-color: rgba(233, 69, 96, 0.4);
    color: white;
    background: rgba(233, 69, 96, 0.1);
}

.tab-btn[data-tab="hosting"] {
    border-color: rgba(245, 200, 66, 0.4);
    color: #f5c842;
}

.tab-btn[data-tab="hosting"]:hover {
    border-color: rgba(245, 200, 66, 0.7);
    color: #f5c842;
    background: rgba(245, 200, 66, 0.15);
}

.tab-btn.active {
    border-color: #e94560;
    color: #e94560;
    background: rgba(233, 69, 96, 0.15);
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.2);
}

.tab-btn.active[data-tab="hosting"] {
    border-color: #f5c842;
    color: #f5c842;
    background: rgba(245, 200, 66, 0.15);
    box-shadow: 0 0 20px rgba(245, 200, 66, 0.2);
}
/* ------------------- Игровые карточки ------------------- */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.game-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
    border-radius: 25px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(233, 69, 96, 0.3);
    position: relative;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(233,69,96,0.1), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.game-card:hover::before {
    opacity: 1;
}

.game-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #e94560;
    box-shadow: 0 20px 40px rgba(233, 69, 96, 0.3);
}

.game-card h3 {
    color: #e94560;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.game-card p {
    color: #aaa;
    font-size: 0.6rem;
}

.delete-collection-btn {
    background: rgba(231, 76, 60, 0.8);
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    margin-top: 15px;
    transition: all 0.3s;
    z-index: 10;
    position: relative;
}

.delete-collection-btn:hover {
    background: #e74c3c;
    transform: scale(1.05);
}

/* ------------------- Режим презентации ------------------- */
.fullscreen-presentation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('background/Fon.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 99999 !important;
    display: none;
    flex-direction: column;
    animation: presentationEnter 0.5s ease-out;
    overflow-y: auto;
}

.fullscreen-presentation.active {
    display: flex;
}

.main-menu:has(.fullscreen-presentation.active) {
    z-index: 99999 !important;
}

/* Hide floating language and social widgets during presentation */
body.in-presentation .lang-switch-floating,
body.in-presentation .social-block,
body.in-presentation #floatingLangSwitch,
body.in-presentation #socialBlock,
body:has(.fullscreen-presentation.active) .lang-switch-floating,
body:has(.fullscreen-presentation.active) .social-block,
body:has(.fullscreen-presentation.active) #floatingLangSwitch,
body:has(.fullscreen-presentation.active) #socialBlock,
.fullscreen-presentation.active ~ .lang-switch-floating,
.fullscreen-presentation.active ~ .social-block {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    z-index: -1 !important;
}

.fullscreen-presentation.exit {
    animation: presentationExit 0.4s ease-in forwards;
}

.pres-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(233,69,96,0.3), rgba(0,0,0,0.8));
    z-index: 999999 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.pres-transition-overlay.active {
    opacity: 1;
}

.pres-header {
    background: rgba(0, 0, 0, 0.7);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(20px);
    border-bottom: 2px solid rgba(233, 69, 96, 0.5);
    z-index: 100002;
    position: sticky;
    top: 0;
    pointer-events: auto;
}

.pres-header h3 {
    color: #e94560;
    font-size: 1rem;
    text-shadow: 0 0 15px rgba(233,69,96,0.8);
}

.close-pres-btn, #closePresBtn {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 10px 28px !important;
    border-radius: 50px !important;
    color: white !important;
    cursor: pointer !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.8rem !important;
    position: relative !important;
    z-index: 100005 !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    user-select: none !important;
}

.close-pres-btn:hover, #closePresBtn:hover {
    background: linear-gradient(135deg, #ff5252, #d63031) !important;
    transform: scale(1.06) !important;
    box-shadow: 0 6px 25px rgba(231, 76, 60, 0.7) !important;
}

.close-pres-btn:active, #closePresBtn:active {
    transform: scale(0.96) !important;
}

.pres-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    position: relative;
    z-index: 5;
}

.pres-card-container {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    perspective: 1200px;
    transition: all 0.3s ease;
}

.pres-card {
    background: rgba(10, 20, 40, 0.75);
    backdrop-filter: blur(25px);
    border-radius: 60px;
    width: 95vw;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 60px;
    padding: 60px 60px;
    border: 2px solid rgba(233, 69, 96, 0.5);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 0 0 80px rgba(233, 69, 96, 0.2);
    animation: cardFloat 3s ease-in-out infinite;
}

.pres-card.slide-enter {
    animation: slideEnter 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

.pres-card.slide-exit {
    animation: slideExit 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

.pres-image-area {
    flex: 1;
    min-width: 400px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.pres-image-area img {
    width: 100%;
    max-height: 55vh;
    object-fit: contain;
    border-radius: 40px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
    animation: imageGlow 2s ease-in-out infinite;
}

.pres-info-area {
    flex: 1.5;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
}

.pres-pokemon-name {
    font-size: 3.6rem;
    margin-bottom: 30px;
    color: #e94560;
    text-shadow: 0 0 25px rgba(233, 69, 96, 0.7);
    letter-spacing: 4px;
}

/* Описание — нормальное состояние */
.pres-description {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 45px;
    color: #f0f0f0;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 30px;
    transition: all 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
    overflow: hidden;
}

/* Описание сжатое — когда карточка раскрыта */
.pres-card.types-expanded .pres-description {
    margin-bottom: 15px;
    padding: 10px 20px;
    font-size: 0.9rem;
    line-height: 1.3;
    max-height: 80px;
    overflow-y: auto;
}

.reveal-btn {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 20px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    border-radius: 60px;
    cursor: pointer;
    width: 100%;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s;
}

.reveal-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(233, 69, 96, 0.6);
}

.pres-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 45px;
}

.pres-nav-btn,
.pres-counter-wrapper {
    display: inline-flex;
    align-items: center;
    height: 52px;
}

.pres-nav-btn {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.9), rgba(198, 42, 71, 0.9));
    border: none;
    padding: 0 30px;
    border-radius: 60px;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    will-change: transform;
    line-height: 1;
}

.pres-counter-wrapper {
    margin: 0;
}

.pres-counter {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    padding: 0 30px;
    border-radius: 60px;
    color: #e94560;
    font-size: 1rem;
    border: 1px solid rgba(233, 69, 96, 0.5);
    line-height: 52px;
    white-space: nowrap;
    height: 52px;
    display: inline-block;
    box-sizing: border-box;
}
.pres-nav-btn:hover {
    background: #e94560;
}

.pres-nav-btn:active {
    transform: scale(0.96);
}

.pres-nav-btn:first-child:hover {
    transform: translateX(-5px);
}

.pres-nav-btn:last-child:hover {
    transform: translateX(5px);
}

/* ------------------- Режим разработчика ------------------- */
.back-to-play-btn {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    transition: all 0.3s;
    border: none;
    padding: 12px 25px;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    margin-bottom: 20px;
}

.back-to-play-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(243, 156, 18, 0.4);
}

.editor-panel, .slides-list-panel {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    transition: all 0.3s;
    border-radius: 16px;
    padding: 20px;
    color: white;
}

.editor-panel:hover, .slides-list-panel:hover {
    border-color: rgba(233, 69, 96, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.image-upload-area {
    border: 2px dashed #e94560;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: #1a1a2e;
    transition: all 0.3s;
}

.image-upload-area:hover {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.1);
}

.type-icons-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 15px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    padding: 5px !important;
}

.type-icon-item {
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    text-align: center;
    width: 85px;
    transition: all 0.2s;
}

.type-icon-item.selected {
    background: #e94560;
}

.type-icon-item:hover {
    transform: scale(1.05);
    border-color: white;
}

.type-icon-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.type-icon-item span {
    font-size: 9px;
    display: block;
    margin-top: 5px;
    color: white;
}

.save-btn {
    background: #2ecc71;
    border: none;
    padding: 12px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    flex: 1;
}

.delete-btn {
    background: #e74c3c;
    border: none;
    padding: 12px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    flex: 1;
}

.btn-confirm {
    background: #2ecc71;
    border: none;
    padding: 10px 30px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.btn-cancel {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border: none;
    padding: 10px 30px;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.btn-confirm:hover, .btn-cancel:hover {
    transform: translateY(-2px);
}

/* ------------------- Игра "Угадай тип" ------------------- */
.types-game-container {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.95));
    border-radius: 25px;
    padding: 20px;
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.types-game-layout {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.types-game-main {
    flex: 1;
    min-width: 300px;
}

.types-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: rgba(233, 69, 96, 0.1);
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.types-game-header span:first-child {
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: #e94560;
}

.types-game-score {
    font-size: 1.5rem;
    font-weight: bold;
    color: #f39c12;
    background: #1a1a2e;
    padding: 4px 18px;
    border-radius: 15px;
    border: 1px solid #e94560;
    font-family: 'Minecraft', monospace;
}

.types-game-section {
    background: rgba(15, 52, 96, 0.5);
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    overflow: hidden;
}

.types-game-section-header {
    background: rgba(233, 69, 96, 0.15);
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.types-game-section-header:hover {
    background: rgba(233, 69, 96, 0.25);
}

.types-game-section-title {
    font-size: 0.65rem;
    color: #e94560;
    letter-spacing: 1.5px;
}

.types-game-section-title i {
    margin-right: 6px;
}

.types-game-types-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 15px;
}

.types-game-type-btn {
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 10px 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
}

.types-game-type-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: white;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.3);
}

.types-game-type-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.types-game-type-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.types-game-type-btn img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.types-game-type-btn span {
    font-size: 0.55rem;
    font-weight: bold;
    color: white;
    text-transform: capitalize;
    text-align: center;
    word-break: break-word;
}

.types-game-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 15px;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(233,69,96,0.2);
    min-height: 50px;
}

.types-game-chip {
    background: linear-gradient(135deg, #e94560, #c62a47);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-family: 'Minecraft', monospace;
    border: 1px solid rgba(255,255,255,0.2);
}

.types-game-remove {
    background: rgba(0,0,0,0.4);
    border: none;
    color: white;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.types-game-remove:hover {
    background: rgba(0,0,0,0.6);
    transform: scale(1.05);
}

.types-game-note {
    font-size: 0.5rem;
    padding: 8px 15px;
    color: #aaa;
    border-top: 1px solid rgba(233,69,96,0.2);
}

.types-game-commit {
    width: 100%;
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    padding: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    margin-bottom: 20px;
    transition: 0.2s;
    font-family: 'Minecraft', monospace;
    letter-spacing: 2px;
}

.types-game-commit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(233,69,96,0.4);
}

.types-game-panel {
    background: rgba(233, 69, 96, 0.1);
    border-radius: 20px;
    padding: 15px;
    margin-bottom: 20px;
    display: none;
    border: 1px solid rgba(233,69,96,0.3);
}

.types-game-panel.visible {
    display: block;
}

.types-game-panel-title {
    text-align: center;
    font-size: 0.65rem;
    color: #e94560;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.types-game-real-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.types-game-real-btn {
    background: #1a1a2e;
    border: 2px solid #3498db;
    border-radius: 12px;
    padding: 10px 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
}

.types-game-real-btn:hover {
    transform: translateY(-3px);
    border-color: white;
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
}

.types-game-real-btn:active {
    transform: scale(0.97);
}

.types-game-real-btn img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.types-game-real-btn span {
    font-size: 0.55rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    text-align: center;
    word-break: break-word;
}

.types-game-status {
    text-align: center;
    font-size: 0.6rem;
    color: #f39c12;
    font-family: 'Minecraft', monospace;
}

.types-game-reset-area {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.types-game-reset-btn {
    background: rgba(15, 52, 96, 0.8);
    border: 1px solid #e94560;
    padding: 8px 20px;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
}

.types-game-reset-btn:hover {
    background: rgba(233, 69, 96, 0.3);
    transform: translateY(-2px);
}

.types-game-history-panel {
    background: rgba(15, 52, 96, 0.5);
    border-radius: 20px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
    flex: 0 0 280px;
}

.types-game-history-title {
    font-size: 0.6rem;
    color: #e94560;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(233,69,96,0.3);
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.types-game-history-item {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 0.55rem;
    color: #ccc;
    line-height: 1.5;
}

.types-game-history-item strong {
    color: #e94560;
}

/* ------------------- Менеджер фона и музыки ------------------- */
.bg-music-manager {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    min-height: 300px;
}

.bg-panel,
.music-panel {
    flex: 1;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-title {
    font-size: 0.8rem;
    color: #e94560;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e94560;
    flex-shrink: 0;
}

/* Сетка фонов */
.bg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    overflow-y: auto;
    flex: 1;
}

.bg-card {
    background: #1a1a2e;
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    position: relative;
}

.bg-card:hover {
    transform: translateY(-3px);
    border-color: #e94560;
    box-shadow: 0 5px 15px rgba(233, 69, 96, 0.3);
}

.bg-card.active {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.2);
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

.bg-card img {
    width: 100%;
    height: 123px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
}

.bg-card span {
    font-size: 0.55rem;
    color: white;
    display: block;
}

.bg-card .delete-bg-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #e74c3c;
    border: none;
    border-radius: 6px;
    color: white;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.bg-card .delete-bg-btn:nth-child(3) {
    right: 26px;
    background: #e94560;
}

.bg-card:hover .delete-bg-btn {
    opacity: 1;
}

.music-rename-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.music-rename-btn:hover {
    color: #e94560;
    border-color: #e94560;
}

/* Карточка текущего фона */
.bg-card--preview {
    cursor: default;
}
.bg-card--preview:hover {
    transform: none;
    border-color: rgba(233, 69, 96, 0.3);
    box-shadow: none;
}
.bg-preview-thumb {
    width: 100%;
    height: 123px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px;
    background: #111;
}
.bg-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0;
}

/* Карточка загрузки */
.bg-card--upload {
    border-style: dashed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

/* Список треков */
.music-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
}

.music-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(26, 26, 46, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.music-item:hover {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.1);
}

.music-item:has(.fa-plus) {
    border-style: dashed;
    border-color: rgba(233, 69, 96, 0.3);
}

.music-item.active {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.2);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

.music-item-info {
    flex: 1 1 auto;
    min-width: 0;
}

.music-item-name {
    font-size: 0.65rem;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-item-file {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-item-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(233, 69, 96, 0.4);
    background: rgba(26, 26, 46, 0.8);
    color: #e94560;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.music-item-btn:hover {
    background: rgba(233, 69, 96, 0.2);
    transform: scale(1.1);
}

.music-delete-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(231, 76, 60, 0.4);
    background: rgba(26, 26, 46, 0.8);
    color: #e74c3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    transition: all 0.2s;
    flex-shrink: 0;
    opacity: 1;
}

.music-delete-btn:hover {
    background: #e74c3c;
    color: white;
    transform: scale(1.1);
}

.music-volume-slider {
    flex: 0 1 120px;
    min-width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(233, 69, 96, 0.25);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.music-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

.music-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

.music-vol-val {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.5);
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.music-controls-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(233, 69, 96, 0.2);
    flex-shrink: 0;
}

.music-master-btn {
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid rgba(233, 69, 96, 0.4);
    background: rgba(26, 26, 46, 0.8);
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.music-master-btn:hover {
    background: rgba(233, 69, 96, 0.2);
}

.music-master-btn.active {
    background: #e94560;
    border-color: #e94560;
}

@media (max-width: 768px) {
    .bg-music-manager {
        flex-direction: column;
    }
}

/* ------------------- Селектор музыки в панели режимов ------------------- */
#gameMusicSelect {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e94560'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px !important;
    min-width: 130px;
}

#gameMusicSelect:hover {
    border-color: #ff6b81;
}

#gameMusicSelect option {
    background: #1a1a2e;
    color: white;
}

/* ------------------- Стилизация скроллбаров ------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff6b81;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #e94560 rgba(26, 26, 46, 0.5);
}
/* ============================================
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ ИСПРАВЛЕНИЙ
   ============================================ */

/* Стили для заголовков вкладок и текста */
.tab-content h2 {
    color: #e94560 !important;
    text-shadow: 0 0 5px rgba(233, 69, 96, 0.3);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* Стили для полей ввода в режиме разработчика */
#devMode input,
#devMode textarea,
#devMode select {
    background: #1a1a2e;
    border: 2px solid #e94560;
    color: white;
    padding: 12px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    width: 100%;
    transition: all 0.3s;
}

#devMode input:focus,
#devMode textarea:focus,
#devMode select:focus {
    outline: none;
    border-color: #ff6b81;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

#devMode input::placeholder,
#devMode textarea::placeholder {
    color: #666;
    font-size: 0.6rem;
}

#devMode textarea {
    resize: vertical;
    min-height: 80px;
}

/* Стили для меток в режиме разработчика */
#devMode label {
    color: #e94560;
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

/* Стили для заголовков панелей в режиме разработчика */
#devMode .editor-title {
    font-size: 0.8rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e94560;
    color: white;
}

#devMode .admin-header .logo {
    font-size: 0.9rem;
}

/* Стили для селектора коллекции */
#devMode .game-selector span {
    color: white !important;
}

/* Стили для списка покемонов в редакторе */
#devMode .pokemon-list {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Стилизация скроллбара для списка покемонов */
#devMode .pokemon-list::-webkit-scrollbar {
    width: 6px;
}

#devMode .pokemon-list::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
}

#devMode .pokemon-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

/* Улучшенные стили для карточек покемонов в редакторе */
#devMode .pokemon-card {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    gap: 12px;
    align-items: center;
}

#devMode .pokemon-card:hover {
    transform: translateX(5px);
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.2);
}

#devMode .pokemon-card.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border-color: white;
}

#devMode .pokemon-card .pokemon-name {
    font-weight: bold;
    color: white;
    font-size: 0.75rem;
}

/* Стили для кнопок в режиме разработчика */
#devMode .save-btn,
#devMode .delete-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    letter-spacing: 1px;
    transition: all 0.3s;
}

#devMode .save-btn:hover,
#devMode .delete-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* Стили для области загрузки изображения */
#devMode .image-upload-area {
    border: 2px dashed #e94560;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: #1a1a2e;
    transition: all 0.3s;
}

#devMode .image-upload-area:hover {
    border-color: #ff6b81;
    background: rgba(233, 69, 96, 0.1);
}

#devMode .image-upload-area p {
    color: #aaa;
    font-size: 0.6rem;
    margin-top: 10px;
}

#devMode .image-upload-area i {
    color: #e94560;
    font-size: 2rem;
}

/* Стили для превью изображения */
#devMode .image-preview {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    margin-top: 10px;
    border-radius: 12px;
    border: 2px solid #e94560;
    background: #1a1a2e;
}
.image-preview {
    max-height: 260px;
    width: auto;
    object-fit: contain;
}
/* ЗАГОЛОВКИ НЕ СЖИМАЮТСЯ */
.editor-panel .editor-title,
.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e94560 !important;
}

/* Стили для сетки типов */
#devMode .type-icons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
    max-height: 300px;
    overflow-y: auto;
    padding: 5px;
}

#devMode .type-icon-item {
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    text-align: center;
    width: 85px;
    transition: all 0.2s;
}

#devMode .type-icon-item.selected {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border-color: white;
    transform: scale(1.05);
}

#devMode .type-icon-item:hover {
    transform: scale(1.05);
    border-color: white;
}

#devMode .type-icon-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

#devMode .type-icon-item span {
    font-size: 9px;
    display: block;
    margin-top: 5px;
    color: white;
}

/* Стили для главной сетки игр */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

/* Стили для информационных сообщений */
#tabPlay h2 {
    color: #e94560 !important;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

/* Улучшенные стили для модального окна */
.modal-content input,
.modal-content textarea {
    background: #1a1a2e;
    border: 2px solid #e94560;
    color: white;
    padding: 12px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    width: 100%;
}

.modal-content input:focus,
.modal-content textarea:focus {
    outline: none;
    border-color: #ff6b81;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

.modal-content input::placeholder {
    color: #666;
}

/* Стили для статистики фильтров */
.filter-stats {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(233, 69, 96, 0.3);
}
/* Стили для селектора коллекции - фикс расположения элементов */
.game-selector {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    position: relative !important;
    z-index: 1001 !important;
}

.game-selector i,
.game-selector span,
.game-selector select,
.game-selector button {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.game-selector span {
    margin: 0 !important;
    padding: 0 !important;
}

/* Убираем лишние отступы */
.admin-header {
    gap: 15px !important;
}

.admin-header > div {
    margin: 0 !important;
}
/* ------------------- Адаптивность ------------------- */
@media (max-width: 768px) {
    body {
        padding: 8px;
    }
    
    .menu-header h1 {
        font-size: 1.2rem;
    }
    
    .tab-btn {
        padding: 6px 15px;
        font-size: 0.7rem;
    }
    
    .filter-gen-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .filter-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .modal-two-columns {
        flex-direction: column;
    }
    
    .modal-filters {
        max-height: 250px;
        overflow-y: auto;
    }
    
    .pokemon-list-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .pres-card {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    
    .pres-image-area {
        min-width: auto;
    }
    
    .pres-pokemon-name {
        font-size: 1.5rem;
    }
    
    .pres-description {
        font-size: 0.8rem;
    }
    
    .reveal-btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
    
    .pres-nav-btn {
        padding: 8px 20px;
        font-size: 0.7rem;
    }
    
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    #devMode .type-icons-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    #devMode .type-icon-item {
        width: 70px;
    }
    
    #devMode .type-icon-item img {
        width: 40px;
        height: 40px;
    }
    
    .games-grid {
        grid-template-columns: 1fr;
    }
/* Дополнительные стили для заголовков и текста */
#tabPlay h2,
#tabDev h2,
#tabTypes h2 {
    color: #e94560 !important;
    text-shadow: 0 0 5px rgba(233, 69, 96, 0.3);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* Стили для текста в селекторах */
.game-selector span {
    color: white !important;
}

/* Улучшенные стили для полей ввода в редакторе */
#pokemonNameDev,
#pokemonDescriptionDev {
    resize: vertical;
    min-height: 80px;
}

#pokemonNameDev:focus,
#pokemonDescriptionDev:focus {
    outline: none !important;
    border-color: #ff6b81 !important;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5) !important;
}

#pokemonNameDev::placeholder,
#pokemonDescriptionDev::placeholder {
    color: #666 !important;
    font-size: 0.6rem !important;
}

/* Стили для меток в редакторе */
#devMode label {
    color: #e94560 !important;
    font-size: 0.75rem !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
    display: block !important;
}
    .game-selector {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
/* Исправление для панели списка покемонов в режиме разработчика */
.slides-list-panel {
    flex: 1 !important;
    min-width: 280px !important;
}

.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
}

.pokemon-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-right: 5px !important;
    min-height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Для главной сетки в режиме разработчика */
.main-grid {
    align-items: stretch !important;
    min-height: 600px !important;
    flex: 1 !important;
}

.editor-panel,
.slides-list-panel {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 550px !important;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .slides-list-panel {
        min-height: 400px !important;
    }
    
    .pokemon-list {
        min-height: 300px !important;
    }
}

/* ЗАГОЛОВОК ПАНЕЛИ - НЕ СЖИМАЕТСЯ */
.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e94560 !important;
}

.pokemon-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-right: 5px !important;
    min-height: 400px !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

/* ЛЕВАЯ ПАНЕЛЬ */
.editor-panel {
    flex: 2 !important;
    min-width: 350px !important;
}

/* КОНТЕНТ ЛЕВОЙ ПАНЕЛИ */
.editor-panel .form-group {
    flex-shrink: 0;
}

.editor-panel .action-buttons {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

//* ОСНОВНОЙ КОНТЕЙНЕР РАЗРАБОТЧИКА - УБИРАЕМ ОГРАНИЧЕНИЯ */
#devMode {
    height: auto !important;
    min-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ГЛАВНАЯ СЕТКА - РОДИТЕЛЬСКИЙ КОНТЕЙНЕР */
.main-grid {
    display: flex !important;
    gap: 25px !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;  /* ← ЗАСТАВЛЯЕТ ДОЧЕРНИЕ ЭЛЕМЕНТЫ РАСТЯГИВАТЬСЯ */
    min-height: 500px !important;
}

/* ОБЕ ПАНЕЛИ - ОДИНАКОВАЯ ВЫСОТА */
.editor-panel, 
.slides-list-panel {
    display: flex !important;
    flex-direction: column !important;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    transition: all 0.3s;
    border-radius: 16px;
    padding: 20px;
    color: white;
    height: auto !important;  /* ← АВТОМАТИЧЕСКАЯ ВЫСОТА */
    min-height: 100% !important;  /* ← ЗАНИМАЮТ ВСЮ ВЫСОТУ РОДИТЕЛЯ */
}
/* Адаптив для мобильных */
@media (max-width: 768px) {
    .slides-list-panel {
        min-height: 350px !important;
    }
    
    .pokemon-list {
        min-height: 300px !important;
    }
}
/* ФИНАЛЬНЫЙ ФИКС - ЗАСТАВЛЯЕМ СПИСОК РАСТЯНУТЬСЯ */
body {
    min-height: 100vh;
}

#mainMenu {
    min-height: auto;
    display: flex;
    flex-direction: column;
}

#tabDev.active {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 500px !important;
}

#devMode {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

#tabDevNew {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 500px !important;
}

#devModeNew {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
}

.main-grid {
    flex: 1 !important;
    display: flex !important;
}

/* Карточки покемонов на всю ширину */
#pokemonListDev > div {
    width: 100% !important;
    box-sizing: border-box !important;
}
.action-buttons {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* АДАПТИВ */
@media (max-width: 768px) {
    .main-grid {
        min-height: 400px !important;
    }
    
    .pokemon-list {
        min-height: 150px !important;
    }
}
/* ФИКС ДЛЯ РОДИТЕЛЬСКИХ КОНТЕЙНЕРОВ */
#tabDev.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

#devMode {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

.main-grid {
    flex: 1 !important;
}
/* Замените существующий стиль для .pokemon-list на этот */

#devMode .pokemon-list {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Добавьте эти стили для лучшей работы скролла */

.slides-list-panel {
    flex: 1;
    min-width: 280px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: 80vh;
}

.slides-list-panel .editor-title {
    flex-shrink: 0;
}

#devMode .pokemon-list {
    flex: 1;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Стилизация скроллбара */
#devMode .pokemon-list::-webkit-scrollbar {
    width: 6px;
}

#devMode .pokemon-list::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
}

#devMode .pokemon-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

#devMode .pokemon-list::-webkit-scrollbar-thumb:hover {
    background: #ff6b81;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .slides-list-panel {
        max-height: 400px;
    }
    
    #devMode .pokemon-list {
        max-height: 300px;
    }
}
/* Дополнительный фикс для списка покемонов */
.main-grid {
    align-items: stretch !important;
}

.slides-list-panel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.slides-list-panel .editor-title {
    flex-shrink: 0 !important;
    margin-bottom: 20px !important;
}

#devMode .pokemon-list {
    flex: 1 1 auto !important;
    min-height: 200px !important;
    max-height: calc(80vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
@media (max-width: 768px) {
    .pres-content {
        flex-direction: column !important;
    }
    .pres-card {
        padding: 20px !important;
    }
    .pres-pokemon-name {
        font-size: 1.5rem !important;
    }
}
}
/* ============================================
   ОБЫЧНАЯ ПРЕЗЕНТАЦИЯ (БЕЗ САЙДБАРА)
   ============================================ */

/* Обычная презентация: карточка по центру, колонка */
.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-card-container {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-card {
    width: 95vw !important;
    max-width: 1400px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 60px !important;
    padding: 60px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-image-area {
    flex: 1 !important;
    min-width: 400px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-image-area img {
    width: 100% !important;
    max-height: 55vh !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-info-area {
    flex: 1.5 !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-pokemon-name {
    font-size: 3.6rem !important;
    margin-bottom: 30px !important;
    text-align: left !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .reveal-btn {
    padding: 20px 40px !important;
    font-size: 1.2rem !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-nav {
    margin-top: 45px !important;
    gap: 40px !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-nav-btn {
    padding: 15px 45px !important;
    font-size: 1rem !important;
}

.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-counter-wrapper {
    margin-top: 30px !important;
}

/* Адаптив обычной презентации на мобильных */
@media (max-width: 768px) {
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-card {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 20px !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-image-area {
        min-width: auto !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-pokemon-name {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-description {
        font-size: 0.8rem !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .reveal-btn {
        padding: 10px 20px !important;
        font-size: 0.8rem !important;
    }
    .fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-nav-btn {
        padding: 8px 20px !important;
        font-size: 0.7rem !important;
    }
}

/* ============================================
   РЕЖИМ "ОДИН ИГРОК" — САЙДБАР ВНУТРИ .pres-content
   Левая часть = карточка (~70%), Правая = пульт (~30%)
   ============================================ */

/* Сайдбара нет — скрыт по умолчанию */
#gameSidebar {
    display: none;
}

/* Когда сайдбар виден — переключаем pres-content на строку */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 20px !important;
}

/* Карточка покемона — левая часть ~62% */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card-container {
    flex: 1 1 62% !important;
    min-width: 0 !important;
    max-width: 62% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Карточка растягивается на всю ширину контейнера */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card {
    width: 100% !important;
    padding: 25px !important;
    gap: 30px !important;
    flex: 1 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-image-area {
    order: 2 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-info-area {
    order: 1 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-pokemon-name {
    text-align: right !important;
    font-size: 1.8rem !important;
    margin-bottom: 15px !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-description {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    padding: 14px !important;
    margin-bottom: 15px !important;
}

/* Навигация под карточкой */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-nav {
    margin-top: 15px !important;
    gap: 20px !important;
    flex-shrink: 0 !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-nav-btn {
    padding: 10px 25px !important;
    font-size: 0.8rem !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-counter-wrapper {
    margin-top: 0 !important;
}

/* Скрыть кнопку "Раскрыть тип" и навигацию в режиме один игрок */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .reveal-types-container {
    display: none !important;
}

.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-nav {
    display: none !important;
}

/* В комнате (room-mode) — показать раскрытие типов в карточке, скрыть навигацию */
.fullscreen-presentation.room-mode:has(#gameSidebar[style*="display: block"]) .reveal-types-container {
    display: flex !important;
}

.fullscreen-presentation.room-mode:has(#gameSidebar[style*="display: block"]) .pres-nav {
    display: none !important;
}

/* Кнопки управления комнатой в sidebar */
#roomPresPrevBtn, #roomPresNextBtn {
    background: rgba(15,52,96,0.5) !important;
}

#roomPresPrevBtn:hover, #roomPresNextBtn:hover {
    background: rgba(233,69,96,0.3) !important;
}

/* Пульт — правая часть ~30% */
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 38% !important;
    max-width: 38% !important;
    min-width: 260px !important;
    background: rgba(10, 20, 40, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 30px !important;
    padding: 20px !important;
    border: 1px solid rgba(233, 69, 96, 0.4) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}

/* Стили элементов пульта */
#gameSidebar h3 {
    color: #e94560 !important;
    font-size: 1rem !important;
    margin-bottom: 15px !important;
    text-align: center !important;
}

#gameSidebar .types-game-section {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    margin-bottom: 15px !important;
    border: 1px solid rgba(233, 69, 96, 0.2) !important;
    overflow: hidden !important;
    flex: none !important;
}

#gameSidebar .types-game-section.section-active {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#gameSidebar .types-game-section-header {
    background: rgba(233, 69, 96, 0.15) !important;
    padding: 10px 15px !important;
    font-size: 0.65rem !important;
    color: #e94560 !important;
    flex-shrink: 0 !important;
}

#gameSidebar #singleMainContent,
#gameSidebar #singleExtraContent {
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#gameSidebar .types-game-types-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    align-content: stretch !important;
}

#gameSidebar .types-game-type-btn,
#gameSidebar .types-game-real-btn {
    background: #1a1a2e !important;
    border: 2px solid #e94560 !important;
    border-radius: 10px !important;
    padding: 10px 4px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

#gameSidebar .types-game-type-btn img,
#gameSidebar .types-game-real-btn img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
}

#gameSidebar .types-game-type-btn.type-selected {
    background: rgba(233, 69, 96, 0.4) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4) !important;
}

#gameSidebar .types-game-type-btn span,
#gameSidebar .types-game-real-btn span {
    font-size: 0.5rem !important;
    color: white !important;
}

#gameSidebar .types-game-selected-list {
    padding: 8px 12px !important;
    display: none !important;
}

#gameSidebar #singleCommitBtn {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

#gameSidebar .types-game-chip {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    padding: 3px 8px !important;
    border-radius: 15px !important;
    font-size: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: white !important;
}

#gameSidebar .types-game-remove {
    background: rgba(0,0,0,0.4) !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
    padding: 1px 5px !important;
    border-radius: 10px !important;
    font-size: 0.5rem !important;
}

#gameSidebar .types-game-real-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
}

#gameSidebar .types-game-status {
    font-size: 0.55rem !important;
    text-align: center !important;
    color: #f39c12 !important;
    padding: 8px !important;
}

#singleCommitBtn {
    width: 100% !important;
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border: none !important;
    padding: 10px !important;
    font-size: 0.65rem !important;
    border-radius: 25px !important;
    color: white !important;
    cursor: pointer !important;
    margin-bottom: 15px !important;
    font-family: 'Minecraft', monospace !important;
    letter-spacing: 1px !important;
}

#singleCommitBtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 20px rgba(233,69,96,0.4) !important;
}

#singleResetBtn {
    background: rgba(15, 52, 96, 0.8) !important;
    border: 1px solid #e94560 !important;
    padding: 6px 15px !important;
    border-radius: 20px !important;
    color: white !important;
    cursor: pointer !important;
    font-size: 0.55rem !important;
    font-family: 'Minecraft', monospace !important;
}

#singleRealPanel {
    background: rgba(233, 69, 96, 0.1) !important;
    border-radius: 15px !important;
    padding: 10px !important;
    margin-top: 10px !important;
    border: 1px solid rgba(233,69,96,0.3) !important;
}

#singleGameScore {
    font-size: 1rem !important;
    font-weight: bold !important;
    color: #f39c12 !important;
    text-align: center !important;
    margin-bottom: 15px !important;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-content {
        flex-direction: column !important;
    }
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card-container {
        flex: none !important;
        max-width: 100% !important;
    }
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
        flex: none !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}
/* ============================================
   ПУЛЬТ ИГРОКА КОМНАТЫ (room.html) — точная копия #gameSidebar
   ============================================ */
#roomSidebarArea {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 38% !important;
    max-width: 38% !important;
    min-width: 280px !important;
    background: rgba(10, 20, 40, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 30px !important;
    padding: 20px !important;
    border: 1px solid rgba(233, 69, 96, 0.4) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

#roomSidebarArea h3 {
    color: #e94560 !important;
    font-size: 1rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-family: 'Minecraft', monospace !important;
}

#roomSidebarArea .types-game-section {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    margin-bottom: 15px !important;
    border: 1px solid rgba(233, 69, 96, 0.2) !important;
    overflow: hidden !important;
    flex: none !important;
}

#roomSidebarArea .types-game-section.section-active {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#roomSidebarArea .types-game-section-header {
    background: rgba(233, 69, 96, 0.15) !important;
    padding: 10px 15px !important;
    font-size: 0.65rem !important;
    color: #e94560 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    user-select: none !important;
    font-family: 'Minecraft', monospace !important;
}

#roomSidebarArea #roomMainContent,
#roomSidebarArea #roomExtraContent {
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#roomSidebarArea .types-game-types-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    align-content: stretch !important;
}

#roomSidebarArea .types-game-type-btn {
    background: #1a1a2e !important;
    border: 2px solid #e94560 !important;
    border-radius: 10px !important;
    padding: 10px 4px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 100% !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#roomSidebarArea .types-game-type-btn img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
}

#roomSidebarArea .types-game-type-btn span {
    font-size: 0.5rem !important;
    color: white !important;
    font-family: 'Minecraft', monospace !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

#roomSidebarArea .types-game-type-btn.type-selected {
    background: rgba(233, 69, 96, 0.4) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4) !important;
    transform: translateY(-2px) !important;
}

#roomSidebarArea .types-game-type-btn:hover:not(:disabled) {
    border-color: #ff6b81 !important;
    background: #252542 !important;
    transform: translateY(-1px) !important;
}

#roomSidebarArea .types-game-type-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

#roomSidebarArea .types-game-selected-list {
    display: none !important;
}

#roomSidebarArea .types-game-commit {
    width: 100% !important;
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border: none !important;
    padding: 14px 20px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
    color: white !important;
    cursor: pointer !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    font-family: 'Minecraft', monospace !important;
    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4) !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

#roomSidebarArea .types-game-commit:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.6) !important;
    transform: translateY(-1px) !important;
}

#roomSidebarArea .types-game-commit:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

#roomSidebarArea .types-game-reset-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 6px 18px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#roomSidebarArea .types-game-reset-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* Стили презентации для комнаты room.html */
.room-fullscreen {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 100vh !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

.room-fullscreen .pres-header {
    background: rgba(10, 20, 40, 0.75) !important;
    backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(233, 69, 96, 0.25) !important;
    padding: 10px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
}

.room-fullscreen .pres-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 20px !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
}

.room-fullscreen .pres-card-container {
    flex: 1 1 62% !important;
    min-width: 0 !important;
    max-width: 62% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.room-fullscreen .pres-card {
    width: 100% !important;
    background: rgba(10, 20, 40, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 30px !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 25px !important;
    gap: 30px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.room-fullscreen .pres-image-area {
    order: 2 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.room-fullscreen .pres-image-area img {
    max-width: 100% !important;
    max-height: 50vh !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6)) !important;
}

.room-fullscreen .pres-info-area {
    order: 1 !important;
    flex: 1.2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.room-fullscreen .pres-pokemon-name {
    text-align: right !important;
    font-size: 1.8rem !important;
    margin-bottom: 15px !important;
    color: #e94560 !important;
    font-family: 'Minecraft', monospace !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.6) !important;
    word-break: break-word !important;
}

.room-fullscreen .pres-description {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    padding: 16px !important;
    margin-bottom: 15px !important;
    background: rgba(15, 30, 55, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: 'Minecraft', monospace !important;
    backdrop-filter: blur(10px) !important;
    max-height: 250px !important;
    overflow-y: auto !important;
}

@media (max-width: 992px) {
    .room-fullscreen .pres-content {
        flex-direction: column !important;
        padding: 12px !important;
        gap: 16px !important;
    }
    .room-fullscreen .pres-card-container {
        max-width: 100% !important;
        flex: none !important;
    }
    .room-fullscreen .pres-card {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 16px !important;
    }
    .room-fullscreen .pres-image-area {
        order: 1 !important;
    }
    .room-fullscreen .pres-image-area img {
        max-height: 200px !important;
    }
    .room-fullscreen .pres-info-area {
        order: 2 !important;
        width: 100% !important;
    }
    .room-fullscreen .pres-pokemon-name {
        text-align: center !important;
        font-size: 1.5rem !important;
    }
    #roomSidebarArea {
        flex: none !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
    }
}

@media (max-width: 540px) {
    #roomSidebarArea .types-game-types-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    #roomSidebarArea .types-game-type-btn {
        min-height: 52px !important;
        padding: 6px 2px !important;
    }
    #roomSidebarArea .types-game-type-btn img {
        width: 28px !important;
        height: 28px !important;
    }
    #roomSidebarArea .types-game-type-btn span {
        font-size: 0.42rem !important;
    }
}

/* ============================================
   РАСКРЫТИЕ ТИПОВ
   ============================================ */

/* Контейнер-обёртка — красивая последовательная анимация */
.reveal-types-container {
    position: relative;
    width: 100%;
    border-radius: 60px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    background: linear-gradient(90deg, 
        /* Красные/Оранжевые */
        #F08030, #F85888, #C03028, #EE99AC,
        /* Жёлтые/Золотые */
        #F8D030, #E0C068, #B8A038,
        /* Зелёные/Травяные */
        #78C850, #A8B820, #98D8D8,
        /* Синие/Водные */
        #6890F0, #7038F8, #705898, #A890F0,
        /* Нейтральные/Тёмные */
        #A8A878, #705848, #A040A0, #B8B8D0,
        /* Замыкание */
        #F08030
    );
    background-size: 400% auto;
    animation: pokemonRainbow 18s linear infinite;
}

@keyframes pokemonRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* Контейнер раскрыт — увеличиваем высоту с плавной анимацией */
.reveal-types-container.types-expanded {
    padding-bottom: 250px;
    transition: padding-bottom 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* Кнопка — прозрачная */
#revealPresBtn {
    width: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    border: none;
    padding: 20px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #FFD700;
    border-radius: 60px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    text-shadow: 
        -1px -1px 0 rgba(0,0,0,0.5),
        1px -1px 0 rgba(0,0,0,0.5),
        -1px 1px 0 rgba(0,0,0,0.5),
        1px 1px 0 rgba(0,0,0,0.5),
        0 0 5px rgba(0,0,0,0.5);
}

/* Кнопка раскрыта */
#revealPresBtn.types-expanded {
    opacity: 0.7;
    font-size: 0.8rem;
    padding-top: 10px;
    padding-bottom: 10px;
    text-shadow: 
        -1px -1px 0 rgba(0,0,0,0.6),
        1px -1px 0 rgba(0,0,0,0.6),
        -1px 1px 0 rgba(0,0,0,0.6),
        1px 1px 0 rgba(0,0,0,0.6);
}


/* Панель типов — плавное появление */
.types-reveal-panel {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1), visibility 0.4s;
    z-index: 3;
}

.types-reveal-panel.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1) 0.1s, visibility 0.4s;
}

/* Карточки типов — анимация появления с задержкой */
.types-reveal-panel .reveal-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px 35px;
    border-radius: 35px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.types-reveal-panel.show .reveal-type-card {
    opacity: 1;
    transform: translateY(0);
}

.types-reveal-panel.show .reveal-type-card:nth-child(1) { transition-delay: 0.05s; }
.types-reveal-panel.show .reveal-type-card:nth-child(2) { transition-delay: 0.1s; }

.types-reveal-panel .reveal-type-card:hover {
    transform: scale(1.05);
    background: rgba(233, 69, 96, 0.4);
    border-color: #e94560;
}

.types-reveal-panel .reveal-type-card img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.types-reveal-panel .reveal-type-card span {
    font-size: 1.1rem;
    color: white;
    font-weight: bold;
}
/* ============================================
   СЖАТИЕ ОПИСАНИЯ
   ============================================ */

/* Описание — нормальное состояние */
.pres-description {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 45px;
    color: #f0f0f0;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 30px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

/* Описание сжатое — когда карточка раскрыта */
.pres-card.types-expanded .pres-description {
    margin-bottom: 15px;
    padding: 10px 20px;
    font-size: 0.9rem;
    line-height: 1.3;
    max-height: 80px;
    overflow-y: auto;
    transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
/* ============================================
   ЦВЕТНЫЕ РАМКИ ДЛЯ КАРТОЧЕК ПОКЕМОНОВ
   ============================================ */

/* Анимация мерцания для рамок */
@keyframes borderPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);
        border-color: rgba(233, 69, 96, 0.6);
    }
    70% {
        box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1);
        border-color: rgba(233, 69, 96, 1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
        border-color: rgba(233, 69, 96, 0.6);
    }
}

/* Базовый стиль карточки */
#devMode .pokemon-card {
    position: relative;
    transition: all 0.3s ease;
}

/* Цвета типов для рамок */
.border-type-normal { border-color: #A8A878; }
.border-type-fire { border-color: #F08030; }
.border-type-water { border-color: #6890F0; }
.border-type-electric { border-color: #F8D030; }
.border-type-grass { border-color: #78C850; }
.border-type-ice { border-color: #98D8D8; }
.border-type-fighting { border-color: #C03028; }
.border-type-poison { border-color: #A040A0; }
.border-type-ground { border-color: #E0C068; }
.border-type-flying { border-color: #A890F0; }
.border-type-psychic { border-color: #F85888; }
.border-type-bug { border-color: #A8B820; }
.border-type-rock { border-color: #B8A038; }
.border-type-ghost { border-color: #705898; }
.border-type-dragon { border-color: #7038F8; }
.border-type-dark { border-color: #705848; }
.border-type-steel { border-color: #B8B8D0; }
.border-type-fairy { border-color: #EE99AC; }

/* Один тип — сплошная рамка */
#devMode .pokemon-card[data-type-count="1"] {
    border: 2px solid;
    transition: all 0.3s ease;
}

/* Два типа — градиентная рамка (по диагонали) */
#devMode .pokemon-card[data-type-count="2"] {
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.3s ease;
}

/* Анимация мерцания для всех карточек */
#devMode .pokemon-card {
    animation: borderPulse 2s ease-in-out infinite;
}

/* Замедляем анимацию для карточек без типов */
#devMode .pokemon-card[data-type-count="0"] {
    animation: borderPulse 3s ease-in-out infinite;
    border-color: rgba(233, 69, 96, 0.4);
}

/* У карточек с градиентом убираем стандартную анимацию border, добавляем свою */
#devMode .pokemon-card[data-type-count="2"] {
    animation: none;
    position: relative;
    background-clip: padding-box;
}

#devMode .pokemon-card[data-type-count="2"]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--color1), var(--color2));
    border-radius: 15px;
    z-index: -1;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

#devMode .pokemon-card[data-type-count="2"]:hover::before {
    opacity: 1;
}

/* Для градиентных карточек своя анимация */
#devMode .pokemon-card[data-type-count="2"] {
    animation: borderGradientPulse 2s ease-in-out infinite;
}

@keyframes borderGradientPulse {
    0% { box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.3); }
    50% { box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(233, 69, 96, 0); }
}
/* ============================================
   ЦВЕТНЫЕ РАМКИ ДЛЯ КАРТОЧЕК ПОКЕМОНОВ
   ============================================ */

/* Анимация мерцания */
@keyframes borderPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

/* Базовый стиль карточки */
#devMode .pokemon-card {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 74px;
}

/* Контейнер списка — убираем горизонтальный скролл */
#devMode .pokemon-list,
#devMode .slides-list-panel {
    overflow-x: hidden !important;
}

/* Подсветка при наведении для всех карточек — только сдвиг и лёгкое свечение */
#devMode .pokemon-card:hover {
    transform: translateX(5px);
    filter: brightness(1.03);
    box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.2);
}

/* Карточка с одним типом */
#devMode .pokemon-card[data-type-count="1"] {
    border: 2px solid var(--card-color);
    animation: borderPulse 2s ease-in-out infinite;
}

/* Карточка с двумя типами — градиентная рамка */
#devMode .pokemon-card[data-type-count="2"] {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: none;
    position: relative;
    z-index: 0;
}

#devMode .pokemon-card[data-type-count="2"]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--color1), var(--color2));
    border-radius: 17px;
    z-index: -2;
    transition: opacity 0.3s ease;
    opacity: 0.8;
    animation: borderPulse 2s ease-in-out infinite;
}

#devMode .pokemon-card[data-type-count="2"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border-radius: 13px;
    z-index: -1;
}

/* Карточка без типов */
#devMode .pokemon-card[data-type-count="0"] {
    border: 2px solid rgba(233, 69, 96, 0.5);
    animation: borderPulse 3s ease-in-out infinite;
}

/* Активная карточка */
#devMode .pokemon-card.active {
    border: 2px solid white !important;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
}

/* У активной карточки с двумя типами отключаем псевдоэлементы */
#devMode .pokemon-card.active[data-type-count="2"]::before,
#devMode .pokemon-card.active[data-type-count="2"]::after {
    display: none;
}

/* ============================================
   ФОН ДЛЯ ОБЛАСТИ ЗАГРУЗКИ ФОТО
   ============================================ */

/* Фон для области загрузки фото покемона */
#uploadAreaDev {
    background-image: url('background/PhotoFon.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

/* Затемнение фона, чтобы фото покемона было лучше видно */
#uploadAreaDev::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 16px;
    pointer-events: none;
    z-index: 0;
}

/* Само фото покемона поверх фона */
#imagePreviewDev {
    position: relative;
    z-index: 2;
    background: transparent !important;
}

/* Плейсхолдер тоже поверх фона */
#imagePlaceholder {
    position: relative;
    z-index: 2;
}
/* ============================================
   ТЕНЬ ДЛЯ ФОТО ПОКЕМОНА
   ============================================ */

/* Тень для фото покемона */
#imagePreviewDev {
    filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.9));
    transition: filter 0.3s ease;
}

#imagePreviewDev:hover {
    filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 1));
}
/* ============================================
   СТИЛИ ДЛЯ АКТИВНОЙ КАРТОЧКИ
   ============================================ */

#devMode .pokemon-card.active .pokemon-name,
#devMode .pokemon-card.active > div div:last-child {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: bold;
}
/* ============================================
   ФИКС ОБРЕЗАНИЯ ИМЕНИ ПОКЕМОНА
   ============================================ */

#devMode .pokemon-card .pokemon-name {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.3;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 0.7rem !important;
}

#devMode .pokemon-card {
    min-height: 74px;
    height: auto;
}

#devMode .pokemon-card > div {
    min-width: 0;
    flex: 1;
}
/* ============================================
   ЭФФЕКТ БЛИКА ДЛЯ АКТИВНОЙ КАРТОЧКИ
   ============================================ */

/* Общий контейнер для всех карточек - обеспечиваем overflow hidden */
#devMode .pokemon-card.active {
    position: relative;
    overflow: hidden;
}

/* Анимация блика - используем отдельный класс, который будет добавляться через JS */
#devMode .pokemon-card.active .shine-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.7), 
        transparent
    );
    animation: shineSimple 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 9999;
}

@keyframes shineSimple {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}



/* Фикс для занавески — чтобы доходила до краёв */
.tab-btn {
    overflow: hidden;
}

.tab-btn:hover::before {
    width: 1000px;
    height: 1000px;
}

/* Кнопки действий в режиме разработчика — яркие, но приятные глазу */
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev) {
    transition: all 0.2s ease !important;
    font-weight: normal !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    color: white !important;
    border: none !important;
}

/* Вернуться к игре — ярко-жёлтый */
.back-to-play-btn {
    background: #e67e22 !important;
}
.back-to-play-btn:hover {
    background: #f39c12 !important;
    transform: translateY(-2px);
}

/* Добавить покемона — синий */
#addPokemonBtnDev {
    background: #2980b9 !important;
}
#addPokemonBtnDev:hover {
    background: #3498db !important;
    transform: translateY(-2px);
}

/* По шаблону — фиолетовый */
#templateBtn {
    background: #8e44ad !important;
}
#templateBtn:hover {
    background: #9b59b6 !important;
    transform: translateY(-2px);
}

/* Случайный — оранжевый */
#randomPokemonBtn {
    background: #d35400 !important;
}
#randomPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}

/* Сохранить — зелёный */
#savePokemonBtnDev {
    background: #27ae60 !important;
}
#savePokemonBtnDev:hover {
    background: #2ecc71 !important;
    transform: translateY(-2px);
}

/* Удалить — красный */
#deletePokemonBtnDev {
    background: #c0392b !important;
}
#deletePokemonBtnDev:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Новая коллекция — бирюзовый */
#createGameBtnDev {
    background: #16a085 !important;
}
#createGameBtnDev:hover {
    background: #1abc9c !important;
    transform: translateY(-2px);
}

/* Экспорт — тёмно-синий */
#exportCollectionBtn {
    background: #2c3e50 !important;
}
#exportCollectionBtn:hover {
    background: #34495e !important;
    transform: translateY(-2px);
}

/* Импорт — серо-синий */
#importCollectionBtn {
    background: #3a6a7a !important;
}
#importCollectionBtn:hover {
    background: #4a8a9a !important;
    transform: translateY(-2px);
}

/* Удалить коллекцию */
#deleteCurrentGameBtn {
    background: #c0392b !important;
}
#deleteCurrentGameBtn:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Очистить пустые записи */
#clearEmptyPokemonBtn {
    background: #d35400 !important;
}
#clearEmptyPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}
/* ============================================
   ГЛОБАЛЬНОЕ ЕДИНООБРАЗИЕ СКРУГЛЕНИЙ
   ============================================ */

/* Основные контейнеры */
.main-menu,
.menu-header,
.tab-content,
.game-card,
.modal-content,
.confirm-modal-content,
.completion-modal-content,
.pres-card,
.editor-panel,
.slides-list-panel,
.bg-manager,
.bg-card,
.types-game-container,
.types-game-section,
.types-game-history-panel {
    border-radius: 20px !important;
}

/* Кнопки */
.tab-btn,
.pres-nav-btn,
.close-pres-btn,
.reveal-btn,
.back-to-play-btn,
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev),
.save-btn,
.delete-btn,
.btn-confirm,
.btn-cancel,
.types-game-commit,
.types-game-reset-btn,
#singleCommitBtn,
#singleResetBtn,
.filter-toggle,
.filter-tag,
.filter-gen {
    border-radius: 30px !important;
}

/* Карточки и маленькие блоки */
.pokemon-card,
.template-pokemon-card,
.type-icon-item,
.bg-card img,
.pres-image-area img,
#uploadAreaDev,
.modal-content input,
.modal-content textarea,
#devMode input,
#devMode textarea,
#devMode select {
    border-radius: 12px !important;
}

/* Мелкие элементы */
.types-game-chip,
.types-game-remove,
.social-block,
.custom-notification,
.pres-counter,
.filter-section {
    border-radius: 16px !important;
}

/* Иконки типов и их контейнеры */
.reveal-type-card,
.types-game-type-btn,
.types-game-real-btn {
    border-radius: 14px !important;
}

/* Убираем лишние скругления у внутренних элементов */
.pres-card .reveal-types-container {
    border-radius: 40px !important;
}

/* Полоски и разделители оставляем без скруглений */
.filter-title,
.editor-title,
.bg-title,
.types-game-history-title {
    border-radius: 0 !important;
}
/* ============================================
   АНИМАЦИИ ДЛЯ КАРТОЧЕК КОЛЛЕКЦИЙ
   ============================================ */

/* Появление карточек при загрузке */
.game-card {
    opacity: 0;
    transform: translateY(30px);
    animation: collectionCardReveal 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

@keyframes collectionCardReveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Задержки для каждой карточки */
.games-grid .game-card:nth-child(1) { animation-delay: 0.05s; }
.games-grid .game-card:nth-child(2) { animation-delay: 0.10s; }
.games-grid .game-card:nth-child(3) { animation-delay: 0.15s; }
.games-grid .game-card:nth-child(4) { animation-delay: 0.20s; }
.games-grid .game-card:nth-child(5) { animation-delay: 0.25s; }
.games-grid .game-card:nth-child(6) { animation-delay: 0.30s; }

/* При наведении — плавный подъём и увеличение тени */
.game-card {
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.2);
}

.game-card:hover {
    transform: translateY(-10px) scale(1.02);
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.2);
}

/* Иконка папки внутри карточки — небольшой акцент при наведении */
.game-card:hover h3 i {
    animation: iconPop 0.3s ease-out;
}

@keyframes iconPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Кнопка удаления — появляется с небольшой задержкой при наведении */
.delete-collection-btn {
    opacity: 0.7;
    transition: all 0.2s ease;
}

.game-card:hover .delete-collection-btn {
    opacity: 1;
}

/* Подсветка краёв карточки при наведении */
.game-card {
    position: relative;
    overflow: hidden;
}

.game-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(233, 69, 96, 0.15), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.game-card:hover::after {
    left: 100%;
}
/* Кнопки действий в режиме разработчика — яркие, но приятные глазу */
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev) {
    transition: all 0.2s ease !important;
    font-weight: normal !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    color: white !important;
    border: none !important;
}

/* Вернуться к игре — ярко-жёлтый */
.back-to-play-btn {
    background: #e67e22 !important;
}
.back-to-play-btn:hover {
    background: #f39c12 !important;
    transform: translateY(-2px);
}

/* Добавить покемона — синий */
#addPokemonBtnDev {
    background: #2980b9 !important;
}
#addPokemonBtnDev:hover {
    background: #3498db !important;
    transform: translateY(-2px);
}

/* По шаблону — фиолетовый */
#templateBtn {
    background: #8e44ad !important;
}
#templateBtn:hover {
    background: #9b59b6 !important;
    transform: translateY(-2px);
}

/* Случайный — оранжевый */
#randomPokemonBtn {
    background: #d35400 !important;
}
#randomPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}

/* Сохранить — зелёный */
#savePokemonBtnDev {
    background: #27ae60 !important;
}
#savePokemonBtnDev:hover {
    background: #2ecc71 !important;
    transform: translateY(-2px);
}

/* Удалить — красный */
#deletePokemonBtnDev {
    background: #c0392b !important;
}
#deletePokemonBtnDev:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Новая коллекция — бирюзовый */
#createGameBtnDev {
    background: #16a085 !important;
}
#createGameBtnDev:hover {
    background: #1abc9c !important;
    transform: translateY(-2px);
}

/* Экспорт — тёмно-синий */
#exportCollectionBtn {
    background: #2c3e50 !important;
}
#exportCollectionBtn:hover {
    background: #34495e !important;
    transform: translateY(-2px);
}

/* Импорт — серо-синий */
#importCollectionBtn {
    background: #3a6a7a !important;
}
#importCollectionBtn:hover {
    background: #4a8a9a !important;
    transform: translateY(-2px);
}

/* Удалить коллекцию */
#deleteCurrentGameBtn {
    background: #c0392b !important;
}
#deleteCurrentGameBtn:hover {
    background: #e74c3c !important;
    transform: translateY(-2px);
}

/* Очистить пустые записи */
#clearEmptyPokemonBtn {
    background: #d35400 !important;
}
#clearEmptyPokemonBtn:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}
/* ============================================
   ГЛОБАЛЬНОЕ ЕДИНООБРАЗИЕ СКРУГЛЕНИЙ
   ============================================ */

/* Основные контейнеры */
.main-menu,
.menu-header,
.tab-content,
.game-card,
.modal-content,
.confirm-modal-content,
.completion-modal-content,
.pres-card,
.editor-panel,
.slides-list-panel,
.bg-manager,
.bg-card,
.types-game-container,
.types-game-section,
.types-game-history-panel {
    border-radius: 20px !important;
}

/* Кнопки */
.tab-btn,
.pres-nav-btn,
.close-pres-btn,
.reveal-btn,
.back-to-play-btn,
#devMode .action-buttons button,
#devMode .admin-header button:not(#gameSelectDev),
.save-btn,
.delete-btn,
.btn-confirm,
.btn-cancel,
.types-game-commit,
.types-game-reset-btn,
#singleCommitBtn,
#singleResetBtn,
.filter-toggle,
.filter-tag,
.filter-gen {
    border-radius: 30px !important;
}

/* Карточки и маленькие блоки */
.pokemon-card,
.template-pokemon-card,
.type-icon-item,
.bg-card img,
.pres-image-area img,
#uploadAreaDev,
.modal-content input,
.modal-content textarea,
#devMode input,
#devMode textarea,
#devMode select {
    border-radius: 12px !important;
}

/* Мелкие элементы */
.types-game-chip,
.types-game-remove,
.social-block,
.custom-notification,
.pres-counter,
.filter-section {
    border-radius: 16px !important;
}

/* Иконки типов и их контейнеры */
.reveal-type-card,
.types-game-type-btn,
.types-game-real-btn {
    border-radius: 14px !important;
}

/* Убираем лишние скругления у внутренних элементов */
.pres-card .reveal-types-container {
    border-radius: 40px !important;
}

/* Полоски и разделители оставляем без скруглений */
.filter-title,
.editor-title,
.bg-title,
.types-game-history-title {
    border-radius: 0 !important;
}
/* Просто красим обычный select */
#gameSelectDev {
    display: inline-block !important;
    cursor: pointer;
    transition: all 0.25s ease !important;
    background: #1a1a2e !important;
    border: 2px solid #e94560 !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.7rem !important;
    min-width: 180px !important;
}

#gameSelectDev:hover {
    background: #2a2a4e !important;
    border-color: #ff6b81 !important;
    transform: translateY(-2px);
}

#gameSelectDev:focus {
    outline: none;
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.3);
}
/* ============================================
   АНИМАЦИЯ СМЕНЫ КОЛЛЕКЦИИ
   ============================================ */

/* Анимация сжатия каждой карточки */
.card-collapsing {
    animation: cardCollapse 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes cardCollapse {
    0% {
        opacity: 1;
        transform: scale(1);
        margin-bottom: 12px;
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
        margin-bottom: 0;
        height: 0;
        padding: 0;
    }
}

/* Анимация появления карточек - каждая со своим сдвигом */
.pokemon-card {
    opacity: 1;
}

.pokemon-card.card-enter {
    animation: cardEnter 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

@keyframes cardEnter {
    0% {
        opacity: 0;
        transform: translateX(60px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
/* Анимация смены коллекции - простая версия */
@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.pokemon-card.slide-out {
    animation: slideOut 0.2s ease forwards !important;
}

.pokemon-card.slide-in {
    animation: slideIn 0.3s ease forwards !important;
}
/* Анимация смены коллекции */
.slide-out {
    animation: slideOutAnim 0.2s ease forwards !important;
}

.slide-in {
    animation: slideInAnim 0.3s ease forwards !important;
}

@keyframes slideOutAnim {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes slideInAnim {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ============================================
   АНИМАЦИЯ СМЕНЫ ВЫБРАННОГО ПОКЕМОНА
   ============================================ */

/* Анимация для имени */
.pokemon-name-changing {
    animation: namePulse 0.25s ease-out;
}

@keyframes namePulse {
    0% {
        transform: scale(1);
        color: #e94560;
    }
    40% {
        transform: scale(1.02);
        color: #ff6b81;
    }
    100% {
        transform: scale(1);
        color: #e94560;
    }
}

/* Анимация для описания */
.pokemon-desc-changing {
    animation: descFade 0.25s ease-out;
}

@keyframes descFade {
    0% {
        opacity: 0.5;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Анимация для картинки */
.pokemon-image-changing {
    animation: imagePop 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

@keyframes imagePop {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Анимация для поля загрузки фото */
.upload-area-changing {
    animation: uploadAreaPulse 0.25s ease-out;
}

@keyframes uploadAreaPulse {
    0% {
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);
    }
    50% {
        border-color: #ff6b81;
        box-shadow: 0 0 0 5px rgba(233, 69, 96, 0.2);
    }
    100% {
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

/* Анимация для сетки типов */
.types-grid-changing {
    animation: typesSlide 0.25s ease-out;
}

@keyframes typesSlide {
    0% {
        opacity: 0;
        transform: translateX(-8px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ============================================
   АНИМАЦИЯ ЗАЛИВКИ ВЫБРАННОГО ТИПА
   ============================================ */

/* Базовый стиль иконки типа */
.type-icon-item {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Анимация появления выбранного состояния */
.type-icon-item.selected {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border-color: white !important;
    transform: scale(1.02);
    animation: selectGlow 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

/* Анимация снятия выбора */
.type-icon-item.deselecting {
    animation: deselectShrink 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes selectGlow {
    0% {
        transform: scale(0.95);
        background: #1a1a2e;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.7);
    }
    50% {
        transform: scale(1.05);
        background: linear-gradient(135deg, #e94560, #c62a47);
        box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.3);
    }
    100% {
        transform: scale(1.02);
        background: linear-gradient(135deg, #e94560, #c62a47);
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

@keyframes deselectShrink {
    0% {
        transform: scale(1.02);
        background: linear-gradient(135deg, #e94560, #c62a47);
        opacity: 1;
    }
    50% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        background: #1a1a2e;
        opacity: 1;
    }
}

/* Пульсация при добавлении нового типа */
.type-icon-item.adding {
    animation: typeAddedPulse 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes typeAddedPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #2ecc71;
    }
    30% {
        transform: scale(1.1);
        box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.5);
        border-color: #2ecc71;
    }
    70% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #2ecc71;
        border-color: #e94560;
    }
}

/* Пульсация при удалении типа */
.type-icon-item.removing {
    animation: typeRemovedPulse 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes typeRemovedPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #e74c3c;
    }
    40% {
        transform: scale(0.92);
        box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.4);
        border-color: #e74c3c;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #e74c3c;
        border-color: #e94560;
    }
}
/* ============================================
   ЗАКРУЧЕННАЯ АНИМАЦИЯ ДЛЯ СЛУЧАЙНОГО ПОКЕМОНА
   ============================================ */

/* Анимация для имени - закручивается сверху */
.random-name-animate {
    animation: randomNameTwist 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards !important;
}

@keyframes randomNameTwist {
    0% {
        opacity: 0;
        transform: translateY(-30px) rotateX(-90deg);
        letter-spacing: 8px;
    }
    50% {
        opacity: 0.7;
        transform: translateY(5px) rotateX(10deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
        letter-spacing: normal;
    }
}

/* Анимация для описания - закручивается изнутри */
.random-desc-animate {
    animation: randomDescTwist 0.45s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards !important;
}

@keyframes randomDescTwist {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
        filter: blur(4px);
    }
    40% {
        transform: scale(1.02) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
        filter: blur(0);
    }
}

/* Анимация для картинки - вылетает с вращением */
.random-image-animate {
    animation: randomImageTwist 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards !important;
}

@keyframes randomImageTwist {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-180deg);
    }
    40% {
        transform: scale(1.05) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* Анимация для области загрузки */
.random-upload-animate {
    animation: randomUploadPulse 0.4s ease-out forwards !important;
}

@keyframes randomUploadPulse {
    0% {
        transform: scale(0.95);
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.5);
    }
    50% {
        transform: scale(1.02);
        border-color: #ff6b81;
        box-shadow: 0 0 0 8px rgba(233, 69, 96, 0.2);
    }
    100% {
        transform: scale(1);
        border-color: #e94560;
        box-shadow: 0 0 0 0 rgba(233, 69, 96, 0);
    }
}

/* Анимация для типов - закрученная */
.type-icon-item.random-type-animate {
    animation: randomTypeTwist 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards !important;
}

@keyframes randomTypeTwist {
    0% {
        opacity: 0;
        transform: rotate(-180deg) scale(0.2);
        filter: blur(4px);
    }
    40% {
        transform: rotate(10deg) scale(1.1);
        filter: blur(0);
    }
    70% {
        transform: rotate(-5deg) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
        filter: blur(0);
    }
}
/* ============================================
   РЕГУЛЯТОР МАСШТАБА ПРЕЗЕНТАЦИИ
   ============================================ */

.pres-zoom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 14px;
    border-radius: 40px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.pres-zoom-btn {
    background: rgba(233, 69, 96, 0.8);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .pres-zoom-btn:hover {
        background: #e94560;
        transform: scale(1.1);
        box-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
    }

    .pres-zoom-btn:active {
        transform: scale(0.95);
    }

.pres-zoom-reset {
    width: auto;
    padding: 0 12px;
    border-radius: 20px;
    font-size: 0.6rem;
}

.pres-zoom-value {
    color: #e94560;
    font-size: 0.7rem;
    font-family: 'Minecraft', monospace;
    min-width: 42px;
    text-align: center;
    font-weight: bold;
}

.pres-volume-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(233, 69, 96, 0.3);
}

.pres-volume-controls i {
    color: #e94560;
    font-size: 0.8rem;
}

.pres-volume-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(233, 69, 96, 0.25);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.pres-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

.pres-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    cursor: pointer;
}

/* ============================================
   ОКНО РАСКРЫТИЯ ТИПОВ (Один игрок)
   ============================================ */
.type-reveal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.92);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

.type-reveal-overlay.active {
    display: flex !important;
}

.type-reveal-overlay .reveal-title {
    font-family: 'Minecraft', monospace;
    color: #f0f0f0;
    font-size: 2.2rem;
    margin-bottom: 80px;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.6);
    transition: margin-bottom 0.5s ease;
}

.type-reveal-overlay .reveal-title.shrink {
    margin-bottom: 15px;
}

.type-reveal-overlay .reveal-types-row {
    display: flex;
    gap: 30px;
    align-items: center;
    transform: scale(1.5);
    margin-bottom: 20px;
    transition: transform 0.5s ease, margin-bottom 0.5s ease;
}

.type-reveal-overlay .reveal-types-row.shrink {
    transform: scale(0.7);
    margin-bottom: 0;
}

.type-reveal-overlay .reveal-type-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 30px;
    border-radius: 20px;
    background: rgba(15, 52, 96, 0.6);
    border: 2px solid rgba(233, 69, 96, 0.5);
    animation: typePopIn 0.4s ease backwards;
}

.type-reveal-overlay .reveal-type-item:nth-child(2) {
    animation-delay: 0.15s;
}

.type-reveal-overlay .reveal-type-item img {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 10px rgba(233, 69, 96, 0.5));
}

.type-reveal-overlay .reveal-type-item span {
    font-family: 'Minecraft', monospace;
    color: #e0e0e0;
    font-size: 1.1rem;
    text-transform: capitalize;
}

@keyframes typePopIn {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.reveal-pokemon-container {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
}

.reveal-pokemon-container.show {
    opacity: 1;
    transform: translateY(0);
}

.reveal-pokemon-container img {
    width: 360px;
    height: 360px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(233, 69, 96, 0.5));
    animation: typePopIn 0.5s ease;
}

.reveal-pokemon-name {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 1.5rem;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.4);
    text-transform: capitalize;
}

.reveal-next-btn {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    padding: 14px 40px;
    background: linear-gradient(135deg, #e94560, #c23152);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    margin-top: 30px;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.4s ease 0.8s forwards;
}

.reveal-next-btn:hover {
    background: linear-gradient(135deg, #ff6b81, #e94560);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
}

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

/* ============================================
   МОДАЛЬНОЕ ОКНО ЗАВЕРШЕНИЯ РАУНДА (Один игрок)
   ============================================ */
.completion-single {
    width: 620px !important;
    max-height: 85vh;
    overflow-y: auto;
    padding: 30px 35px !important;
}

.completion-single::-webkit-scrollbar {
    width: 6px;
}
.completion-single::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

.completion-trophy {
    font-size: 2.2rem !important;
    color: #f39c12 !important;
    margin-bottom: 10px !important;
}

.completion-collection {
    font-size: 0.7rem;
    color: #ccc;
    margin-bottom: 15px !important;
}

.completion-mode-label {
    font-size: 0.6rem;
    color: #e94560;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px !important;
}
.completion-collection strong {
    color: #e94560;
}

.completion-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 18px;
    padding: 12px 0;
    background: rgba(233, 69, 96, 0.1);
    border-radius: 15px;
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.completion-score-label {
    font-size: 0.6rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.completion-score-value {
    font-size: 2rem;
    color: #f39c12;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(243, 156, 18, 0.4);
}

.completion-history-list {
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 18px;
    padding-right: 5px;
}
.completion-history-list::-webkit-scrollbar {
    width: 4px;
}
.completion-history-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 2px;
}

.completion-history-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 10px;
    margin-bottom: 6px;
    font-size: 0.65rem;
    border: 1px solid rgba(233, 69, 96, 0.15);
}

.completion-history-num {
    color: #888;
    font-size: 0.6rem;
    min-width: 18px;
    text-align: center;
}

.completion-history-img img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(233, 69, 96, 0.4);
}
.completion-history-img .no-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(233, 69, 96, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 0.8rem;
}

.completion-history-info {
    flex: 1;
    min-width: 0;
}

.completion-history-name {
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.completion-history-types,
.completion-history-guess {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.completion-history-types .label,
.completion-history-guess .label {
    color: #999;
    font-size: 0.55rem;
}

.type-icon-sm {
    width: 20px;
    height: 20px;
}
.type-icon-sm.guessed {
    filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.6));
}
.type-icon-sm.guessed-extra {
    filter: drop-shadow(0 0 4px rgba(241, 196, 15, 0.6));
}

.no-guess {
    color: #777;
    font-style: italic;
    font-size: 0.55rem;
}

.completion-history-earned {
    font-weight: bold;
    font-size: 0.7rem;
    min-width: 35px;
    text-align: right;
}
.completion-history-earned.positive { color: #2ecc71; }
.completion-history-earned.negative { color: #e74c3c; }

.completion-save-block {
    margin-bottom: 12px;
}

.completion-save-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.completion-name-input {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.3s;
    margin-top: 0 !important;
}
.completion-name-input:focus {
    border-color: #e94560;
}
.completion-name-input::placeholder {
    color: #777;
}

.completion-name-clear {
    flex: 0 0 auto;
    background: none !important;
    border: none !important;
    color: #888 !important;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    line-height: 1;
    transition: color 0.2s;
    transform: none !important;
    box-shadow: none !important;
}
.completion-name-clear:hover {
    color: #e94560 !important;
    transform: none !important;
    box-shadow: none !important;
}

.completion-remember {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #aaa;
    font-size: 0.6rem;
    cursor: pointer;
    white-space: nowrap;
    margin-top: 0 !important;
}
.completion-remember input[type="checkbox"] {
    accent-color: #e94560;
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin-top: 0 !important;
}

.completion-desc-input {
    width: 100%;
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.3s;
    margin-top: 10px;
    box-sizing: border-box;
}
.completion-desc-input:focus {
    border-color: #e94560;
}
.completion-desc-input::placeholder {
    color: #777;
}

.completion-save-btn {
    width: 100%;
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    font-size: 0.7rem !important;
}
.completion-save-btn:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4) !important;
}
.completion-save-btn:disabled {
    cursor: default;
}

.completion-close-btn {
    background: linear-gradient(135deg, #1a1a2e, #0f3460) !important;
    border: 1px solid #e94560 !important;
    padding: 8px 25px !important;
    border-radius: 12px !important;
    font-size: 0.65rem !important;
}

/* ============================================
   ВКЛАДКА "ИСТОРИИ РАУНДОВ"
   ============================================ */
.histories-section {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

.hist-mode-switcher {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.hist-mode-btn {
    background: rgba(15, 52, 96, 0.3);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 50px;
    color: rgba(255,255,255,0.6);
    padding: 8px 16px;
    font-size: 0.7rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hist-mode-btn.active {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #e94560;
}

.hist-mode-count {
    font-size: 0.55rem;
    opacity: 0.7;
}

.histories-mode-block {
    display: none;
    background: rgba(15, 52, 96, 0.3);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 20px;
    padding: 20px;
    width: 100%;
}

.histories-mode-block.hist-active {
    display: block;
}

.histories-mode-title {
    color: #e94560;
    font-size: 0.85rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.histories-mode-chevron {
    font-size: 0.6rem;
    color: #888;
    transition: transform 0.3s ease;
}

.histories-mode-block.collapsed .histories-mode-chevron {
    transform: rotate(-90deg);
}

.histories-mode-block.collapsed .history-empty,
.histories-mode-block.collapsed .history-card {
    display: none;
}

.histories-mode-count {
    color: #888;
    font-size: 0.55rem;
    font-style: italic;
}

.history-card {
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 15px;
    margin-bottom: 12px;
    transition: all 0.3s;
    overflow: hidden;
}
.history-card:hover {
    border-color: #e94560;
    box-shadow: 0 4px 20px rgba(233, 69, 96, 0.2);
}

.history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.history-card-header:hover {
    background: rgba(233, 69, 96, 0.05);
}

.history-card-toggle {
    color: #888;
    font-size: 0.6rem;
    margin-left: 8px;
    transition: transform 0.3s;
}
.history-card.expanded .history-card-toggle {
    transform: rotate(180deg);
}

.history-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 15px;
}
.history-card.expanded .history-card-body {
    max-height: 600px;
    padding: 0 15px 15px 15px;
}

.history-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.history-card-name {
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}
.history-card-name:hover {
    color: #e94560;
}

.history-card-desc {
    color: #ccc;
    font-size: 0.6rem;
    font-style: italic;
    cursor: pointer;
    transition: color 0.2s;
    margin-top: 2px;
}
.history-card-desc:hover {
    color: #e94560;
}
.history-card-desc-empty {
    color: #666;
}
.history-card-desc-empty:hover {
    color: #888;
}

.history-edit-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #e94560;
    border-radius: 6px;
    padding: 4px 8px;
    color: #fff;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    outline: none;
    margin-top: 2px;
    box-sizing: border-box;
}

.history-card-collection {
    color: #aaa;
    font-size: 0.6rem;
}

.history-card-date {
    color: #777;
    font-size: 0.55rem;
}

.history-card-score {
    font-size: 1.1rem;
    color: #f39c12;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

.history-card-rounds {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.history-round-pokemon {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 52, 96, 0.5);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.55rem;
    color: #ccc;
}

.history-round-pokemon img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.history-round-types {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.history-round-arrow {
    color: #666;
    font-size: 0.55rem;
    margin: 0 2px;
}

.history-round-guessed .type-icon-sm {
    filter: drop-shadow(0 0 3px rgba(46, 204, 113, 0.5));
}

.history-round-skipped {
    color: #666;
    font-size: 0.5rem;
    font-style: italic;
}

.history-card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.history-card-btn {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #e94560;
    padding: 5px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.3s;
}
.history-card-btn:hover {
    background: #e94560;
    color: #fff;
}
.history-card-btn.delete-btn:hover {
    background: #c0392b;
    border-color: #c0392b;
}

.history-empty {
    color: #666;
    font-size: 0.65rem;
    text-align: center;
    padding: 30px;
    font-style: italic;
}

/* ============================================
   ТАБЛИЦА ЛИДЕРОВ — СТИЛЬ РЕЖИМА РАЗРАБОТЧИКА
   ============================================ */

@keyframes lbPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes lbGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(233,69,96,0.15); }
    50% { box-shadow: 0 0 30px rgba(233,69,96,0.3); }
}

@keyframes lbFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes lbScaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes lbFadeSlide {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.lb-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}

/* ---- Header (dev panel style) ---- */
.lb-header {
    text-align: center;
    padding: 28px 20px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    animation: lbGlow 3s ease-in-out infinite;
}

.lb-header-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(233,69,96,0.06) 0%, transparent 60%);
    animation: lbPulse 4s ease-in-out infinite;
    pointer-events: none;
}

.lb-header i:first-child {
    font-size: 2.2rem;
    color: #e94560;
    margin-bottom: 8px;
    display: block;
    filter: drop-shadow(0 0 10px rgba(233,69,96,0.4));
    animation: lbFloat 3s ease-in-out infinite;
}

.lb-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    color: white;
    margin: 0 0 6px;
    letter-spacing: 1px;
}

.lb-header p {
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
    margin: 0;
}

/* ---- Tabs (dev toggle style) ---- */
.lb-tabs {
    display: flex;
    gap: 4px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 4px;
}

.lb-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.lb-tab:hover {
    color: rgba(255,255,255,0.7);
    background: rgba(233, 69, 96, 0.1);
}

.lb-tab.active {
    color: white;
    background: linear-gradient(135deg, #e94560, #c62a47);
    box-shadow: 0 2px 12px rgba(233, 69, 96, 0.4);
}

.lb-tab i {
    font-size: 0.7rem;
}

/* ---- Tab Content ---- */
.lb-tab-content {
    display: none;
    animation: lbFadeSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lb-tab-content.active {
    display: block;
}

/* ---- Sub-tabs ---- */
.lb-tabs .lb-subtab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.35);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.lb-tabs .lb-subtab:hover {
    color: rgba(255,255,255,0.6);
    background: rgba(233, 69, 96, 0.08);
}

.lb-tabs .lb-subtab.active {
    color: white;
    background: rgba(233, 69, 96, 0.3);
    box-shadow: inset 0 0 10px rgba(233, 69, 96, 0.2);
}

.lb-tabs .lb-subtab i {
    font-size: 0.6rem;
}

.lb-subtab-content {
    animation: lbFadeSlide 0.3s ease;
}

/* ---- Stats Row ---- */
.lb-stats-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.lb-stat-card {
    flex: 1;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 14px 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.lb-stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    transition: left 0.5s;
}

.lb-stat-card:hover::after {
    left: 200%;
}

.lb-stat-card:hover {
    transform: translateY(-3px);
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.25);
}

.lb-stat-card--rounds {
    border-color: rgba(99,144,240,0.4);
}

.lb-stat-card--rounds:hover {
    box-shadow: 0 5px 20px rgba(99,144,240,0.25);
    border-color: #6390f0;
}

.lb-stat-card--perfect {
    border-color: rgba(46,204,113,0.4);
}

.lb-stat-card--perfect:hover {
    box-shadow: 0 5px 20px rgba(46,204,113,0.25);
    border-color: #2ecc71;
}

.lb-stat-card--best {
    border-color: rgba(255,215,0,0.4);
}

.lb-stat-card--best:hover {
    box-shadow: 0 5px 20px rgba(255,215,0,0.25);
    border-color: #ffd700;
}

.lb-stat-icon {
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.lb-stat-card--rounds .lb-stat-icon { color: #6390f0; }
.lb-stat-card--perfect .lb-stat-icon { color: #2ecc71; }
.lb-stat-card--best .lb-stat-icon { color: #ffd700; }

.lb-stat-value {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: white;
    font-weight: bold;
}

.lb-stat-label {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    margin-top: 3px;
}

/* ---- Mode Block ---- */
.lb-mode-block {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    padding: 22px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
}

.lb-mode-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
}

.lb-mode-block--speed::before { background: linear-gradient(90deg, #f7d02c, #ee8130); }
.lb-mode-block--check::before { background: linear-gradient(90deg, #2ecc71, #3498db); }
.lb-mode-block--single::before { background: linear-gradient(90deg, #e94560, #d63384); }

.lb-mode-block:hover {
    border-color: rgba(233, 69, 96, 0.35);
}

/* ---- Podium ---- */
.lb-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 0 0;
}

.lb-podium-item {
    text-align: center;
    padding: 14px 10px 10px;
    border-radius: 16px 16px 0 0;
    position: relative;
    min-width: 80px;
    animation: lbScaleIn 0.5s ease backwards;
    transition: all 0.3s;
}

.lb-podium-item:hover {
    transform: translateY(-4px);
}

.lb-podium-first {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(255,215,0,0.5);
    border-bottom: none;
    padding-top: 18px;
    order: 2;
    animation-delay: 0.1s;
}

.lb-podium-first:hover {
    box-shadow: 0 5px 20px rgba(255,215,0,0.25);
    border-color: #ffd700;
}

.lb-podium-second {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(192,192,192,0.4);
    border-bottom: none;
    order: 1;
    animation-delay: 0.2s;
}

.lb-podium-second:hover {
    box-shadow: 0 5px 20px rgba(192,192,192,0.2);
    border-color: #c0c0c0;
}

.lb-podium-third {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(205,127,50,0.4);
    border-bottom: none;
    order: 3;
    animation-delay: 0.3s;
}

.lb-podium-third:hover {
    box-shadow: 0 5px 20px rgba(205,127,50,0.2);
    border-color: #cd7f32;
}

.lb-podium-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    border: 2px solid rgba(233,69,96,0.3);
}

.lb-podium-first .lb-podium-avatar { background: linear-gradient(135deg, #ffd700, #ffaa00); box-shadow: 0 0 12px rgba(255,215,0,0.5); border-color: #ffd700; }
.lb-podium-second .lb-podium-avatar { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); box-shadow: 0 0 12px rgba(192,192,192,0.4); border-color: #c0c0c0; }
.lb-podium-third .lb-podium-avatar { background: linear-gradient(135deg, #cd7f32, #b87333); box-shadow: 0 0 12px rgba(205,127,50,0.4); border-color: #cd7f32; }

.lb-podium-medal {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.lb-podium-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    margin: 0 auto;
    letter-spacing: 0.5px;
}

.lb-podium-score {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #e94560;
    font-weight: bold;
    margin-top: 4px;
}

.lb-guest-tag {
    display: inline-block;
    font-size: 0.5rem;
    background: rgba(255,255,255,0.15);
    color: #ccc;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 1px 4px;
    margin-left: 3px;
    vertical-align: middle;
    font-family: 'Minecraft', monospace;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.lb-guest-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: #666;
    border: 1px solid #444;
    border-radius: 50%;
    font-size: 8px;
    line-height: 14px;
    text-align: center;
    color: #ccc;
    font-weight: bold;
}

/* ---- Category ---- */
.lb-category {
    background: #1a1a2e;
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 14px;
    margin-bottom: 12px;
    transition: all 0.3s;
}

.lb-category:hover {
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.15);
}

.lb-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e94560;
}

.lb-category-label {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 0.7rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 1px;
}

.lb-category-label i {
    font-size: 0.6rem;
    opacity: 0.7;
}

.lb-category-count {
    color: rgba(255,255,255,0.3);
    font-size: 0.5rem;
    font-family: 'Minecraft', monospace;
}

/* ---- Rows ---- */
.lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    margin-bottom: 4px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.lb-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background 0.3s;
}

.lb-row:hover {
    background: rgba(233, 69, 96, 0.08);
    border-color: rgba(233, 69, 96, 0.2);
    transform: translateX(3px);
}

.lb-row:hover::before {
    background: #e94560;
}

.lb-medal {
    font-size: 1.1rem;
    min-width: 30px;
    text-align: center;
    animation: lbFloat 2s ease-in-out infinite;
}

.lb-rank {
    color: rgba(255,255,255,0.3);
    font-size: 0.65rem;
    min-width: 30px;
    text-align: center;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
}

.lb-row-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lb-row-name {
    color: white;
    font-size: 0.68rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Minecraft', monospace;
}

.lb-row-meta {
    color: rgba(255,255,255,0.3);
    font-size: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-row-score {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 0.8rem;
    font-weight: bold;
    min-width: 50px;
    text-align: right;
    text-shadow: 0 0 8px rgba(233,69,96,0.3);
}

/* ---- Best ---- */
.lb-category-best {
    margin-top: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 1px solid rgba(255,165,0,0.3);
    border-radius: 10px;
    color: #ffa500;
    font-size: 0.55rem;
    text-align: center;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s;
}

.lb-category-best:hover {
    border-color: #ffa500;
    box-shadow: 0 3px 12px rgba(255,165,0,0.2);
}

.lb-category-best i {
    margin-right: 4px;
    filter: drop-shadow(0 0 4px rgba(255,165,0,0.4));
}

/* ---- Horizontal Scroll Row ---- */
.lb-scroll-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 2px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.lb-scroll-row::-webkit-scrollbar { height: 5px; }
.lb-scroll-row::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.lb-scroll-row::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.3); border-radius: 4px; }
.lb-scroll-row::-webkit-scrollbar-thumb:hover { background: rgba(233,69,96,0.6); }

.lb-scroll-card {
    flex: 0 0 130px;
    scroll-snap-align: start;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    transition: all 0.3s;
    position: relative;
}
.lb-scroll-card:first-child {
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
}
.lb-scroll-card:nth-child(2) {
    border-color: rgba(192, 192, 192, 0.4);
}
.lb-scroll-card:nth-child(3) {
    border-color: rgba(205, 127, 50, 0.4);
}
.lb-scroll-card:hover {
    transform: translateY(-3px);
    border-color: rgba(233, 69, 96, 0.5);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.2);
}

.lb-scroll-medal {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.5));
}
.lb-scroll-rank {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    font-weight: 700;
}

.lb-scroll-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e94560, #c23152);
    border: 2px solid rgba(233, 69, 96, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    position: relative;
}
.lb-scroll-card:first-child .lb-scroll-avatar {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255,215,0,0.5);
}
.lb-scroll-card:nth-child(2) .lb-scroll-avatar {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    border-color: #c0c0c0;
    box-shadow: 0 0 12px rgba(192,192,192,0.4);
}
.lb-scroll-card:nth-child(3) .lb-scroll-avatar {
    background: linear-gradient(135deg, #cd7f32, #b87333);
    border-color: #cd7f32;
    box-shadow: 0 0 12px rgba(205,127,50,0.4);
}

.lb-scroll-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: visible !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}
.lb-scroll-meta {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
}
.lb-scroll-score {
    font-size: 1.1rem;
    font-weight: 900;
    color: #e94560;
    text-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

/* ---- Empty ---- */
.lb-empty {
    color: rgba(255,255,255,0.2);
    font-size: 0.6rem;
    text-align: center;
    padding: 15px;
    font-style: italic;
}

.lb-empty-full {
    text-align: center;
    padding: 50px 20px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px dashed rgba(233, 69, 96, 0.3);
    color: rgba(255,255,255,0.3);
    font-size: 0.7rem;
    line-height: 1.6;
}

.lb-empty-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    color: rgba(233,69,96,0.25);
    animation: lbFloat 3s ease-in-out infinite;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .lb-podium {
        gap: 6px;
    }
    .lb-podium-item {
        min-width: 60px;
        padding: 10px 6px;
    }
    .lb-podium-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
    .lb-scroll-card {
        flex: 0 0 110px;
        padding: 10px 8px;
    }
    .lb-scroll-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }
    .lb-scroll-score {
        font-size: 0.95rem;
    }
    .lb-stats-row {
        gap: 6px;
    }
    .lb-stat-card {
        padding: 10px 6px;
    }
}

/* ============================================
   МОДАЛЬНЫЕ ОКНА НАСТРОЙКИ РЕЖИМОВ
   ============================================ */
.mode-setup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.92);
    z-index: 1000002 !important;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}
.mode-setup-overlay.active {
    display: flex !important;
}

.mode-setup-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 30px;
    padding: 35px 40px;
    text-align: center;
    color: white;
    width: 420px;
    max-width: 90%;
    box-shadow: 0 0 70px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}

.mode-setup-modal h2 {
    color: #e94560;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.mode-setup-desc {
    font-size: 0.65rem;
    color: #bbb;
    margin-bottom: 20px;
    line-height: 1.5;
}

.mode-setup-options {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mode-setup-btn {
    background: rgba(15, 52, 96, 0.6);
    border: 2px solid rgba(233, 69, 96, 0.4);
    color: white;
    padding: 12px 20px;
    border-radius: 15px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 70px;
}
.mode-setup-btn:hover {
    background: #e94560;
    border-color: #e94560;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
}

.mode-setup-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.mode-setup-custom label {
    color: #aaa;
    font-size: 0.6rem;
}

.mode-setup-input {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    width: 100px;
    text-align: center;
    outline: none;
}
.mode-setup-input:focus {
    border-color: #e94560;
}

.mode-setup-go-btn {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s;
}
.mode-setup-go-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(233, 69, 96, 0.4);
}

.mode-setup-cancel {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #999;
    padding: 8px 20px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s;
}
.mode-setup-cancel:hover {
    border-color: #e94560;
    color: #e94560;
}

/* ============================================
   ТАЙМЕР "НА СКОРОСТЬ!"
   ============================================ */
.speed-timer-overlay {
    display: none;
}
.speed-timer-overlay.active {
    display: block !important;
}

.speed-timer-inline {
    display: none;
}
.speed-timer-inline.active {
    display: inline-flex !important;
    align-items: center;
}

.speed-timer-value {
    background: rgba(15, 52, 96, 0.85);
    backdrop-filter: blur(15px);
    border: 2px solid #e94560;
    border-radius: 40px;
    padding: 4px 16px;
    font-size: 0.85rem;
    color: #fff;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.6);
    box-shadow: 0 0 30px rgba(233, 69, 96, 0.3);
    transition: all 0.3s;
    white-space: nowrap;
}

.speed-timer-value.warning {
    border-color: #f39c12;
    color: #f39c12;
    text-shadow: 0 0 15px rgba(243, 156, 18, 0.6);
    box-shadow: 0 0 30px rgba(243, 156, 18, 0.3);
    animation: timerPulse 1s infinite;
}

.speed-timer-value.danger {
    border-color: #e74c3c;
    color: #e74c3c;
    text-shadow: 0 0 15px rgba(231, 76, 60, 0.6);
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.3);
    animation: timerPulse 0.5s infinite;
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   СКРОЛЛ-БАРЫ ДЛЯ МОДАЛОК
   ============================================ */
.mode-setup-modal::-webkit-scrollbar {
    width: 5px;
}
.mode-setup-modal::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

/* ============================================
   УВЕДОМЛЕНИЕ ТИПОВ "НА СКОРОСТЬ!" (сверху по центру)
   ============================================ */
.speed-type-notification {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(-30px);
    z-index: 1000003 !important;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    backdrop-filter: blur(20px);
    border: 2px solid #e94560;
    border-radius: 20px;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Minecraft', monospace;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 30px rgba(233, 69, 96, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.speed-type-notification.active {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

.speed-type-label {
    color: #ccc;
    font-size: 0.65rem;
    white-space: nowrap;
}

.speed-type-icons {
    display: flex;
    gap: 10px;
}

.speed-type-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 5px 10px;
    animation: speedTypePop 0.3s ease backwards;
}

.speed-type-item:nth-child(2) {
    animation-delay: 0.1s;
}

.speed-type-item img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 6px rgba(233, 69, 96, 0.4));
}

.speed-type-item span {
    color: #fff;
    font-size: 0.6rem;
    text-transform: capitalize;
}

@keyframes speedTypePop {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* ============================================
   МОДАЛЬНОЕ ОКНО ПОДТВЕРЖДЕНИЯ ВЫХОДА
   ============================================ */
.exit-confirm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.85);
    z-index: 1000002 !important;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}

.exit-confirm-overlay.active {
    display: flex !important;
}

.exit-confirm-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    text-align: center;
    color: white;
    width: 380px;
    max-width: 90%;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}

.exit-confirm-modal i {
    font-size: 2rem;
    color: #f39c12;
    margin-bottom: 12px;
}

.exit-confirm-modal h3 {
    color: #e94560;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.exit-confirm-modal p {
    color: #bbb;
    font-size: 0.6rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.exit-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.exit-confirm-btn {
    padding: 10px 22px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.exit-confirm-btn.yes {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}
.exit-confirm-btn.yes:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.5);
}

.exit-confirm-btn.no {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: white;
}
.exit-confirm-btn.no:hover {
    background: #e94560;
    transform: scale(1.05);
}

/* ============================================
   МОДАЛЬНОЕ ОКНО ОЧИСТКИ СЛУЧАЙНЫХ КОЛЛЕКЦИЙ
   ============================================ */
.clear-random-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 1000002 !important;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}

.clear-random-overlay.active {
    display: flex !important;
}

.clear-random-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    text-align: center;
    color: white;
    width: 500px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}

.clear-random-modal h2 {
    color: #e94560;
    font-size: 1rem;
    margin-bottom: 8px;
}

.clear-random-modal p {
    color: #bbb;
    font-size: 0.6rem;
    margin-bottom: 18px;
}

.clear-random-list {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 18px;
    text-align: left;
}

.clear-random-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 10px;
    margin-bottom: 6px;
    border: 1px solid rgba(233, 69, 96, 0.15);
    cursor: pointer;
    transition: all 0.3s;
}

.clear-random-item:hover {
    border-color: #e94560;
}

.clear-random-item.excluded {
    opacity: 0.4;
    border-color: rgba(46, 204, 113, 0.4);
}

.clear-random-item input[type="checkbox"] {
    accent-color: #2ecc71;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.clear-random-item-name {
    flex: 1;
    font-size: 0.65rem;
    color: #ddd;
}

.clear-random-item-count {
    font-size: 0.55rem;
    color: #888;
}

.clear-random-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.clear-random-btn {
    padding: 10px 20px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.clear-random-btn.delete {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}
.clear-random-btn.delete:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.5);
}

.clear-random-btn.cancel {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: white;
}
.clear-random-btn.cancel:hover {
    background: #e94560;
    transform: scale(1.05);
}

.clear-random-modal::-webkit-scrollbar {
    width: 5px;
}
.clear-random-modal::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

.collection-picker-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    font-family: 'Minecraft', monospace;
}
.collection-picker-overlay.active {
    display: flex !important;
}
.collection-picker-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    text-align: center;
    color: white;
    width: 420px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}
.collection-picker-modal h2 {
    color: #e94560;
    font-size: 1rem;
    margin-bottom: 18px;
}
.collection-picker-list {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 18px;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: #e94560 transparent;
}
.collection-picker-list::-webkit-scrollbar {
    width: 5px;
}
.collection-picker-list::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}
.collection-picker-list::-webkit-scrollbar-track {
    background: transparent;
}
.collection-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.collection-picker-item:hover {
    background: rgba(15, 52, 96, 0.7);
    border-color: rgba(233, 69, 96, 0.3);
    transform: translateX(4px);
}
.collection-picker-item.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
}
.collection-picker-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: all 0.2s;
}
.collection-picker-item.active .dot {
    background: #e94560;
}
.collection-picker-item .name {
    flex: 1;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.collection-picker-item.active .name {
    color: #e94560;
}
.collection-picker-item .count {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.6rem;
    flex-shrink: 0;
}
.collection-picker-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.collection-picker-btn {
    padding: 10px 20px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.collection-picker-btn.cancel {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    width: 100%;
}
.collection-picker-btn.cancel:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
    color: #e94560;
}
.collection-picker-modal::-webkit-scrollbar {
    width: 5px;
}
.collection-picker-modal::-webkit-scrollbar-thumb {
    background: #e94560;
    border-radius: 3px;
}

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.leaderboard-launch-section {
    grid-column: 1 / -1;
    text-align: center;
    padding: 28px 20px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
}

.leaderboard-launch-title {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 0.85rem;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.leaderboard-launch-subtitle {
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
    margin-bottom: 20px;
}

.leaderboard-launch-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.leaderboard-launch-btn {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 25px 35px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.3s;
    min-width: 140px;
}

.leaderboard-launch-btn:hover {
    border-color: #e94560;
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.25);
    transform: translateY(-3px);
}

.leaderboard-launch-count {
    font-size: 1.8rem;
    color: #e94560;
    font-weight: bold;
}

.leaderboard-launch-label {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    margin-top: 5px;
}

.leaderboard-launch-custom {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.leaderboard-launch-custom-label {
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
}

.leaderboard-launch-custom-input {
    width: 80px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 8px 12px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    text-align: center;
    outline: none;
    transition: all 0.3s;
}

.leaderboard-launch-custom-input:focus {
    border-color: #ff6b81;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
}

.leaderboard-launch-custom-input::placeholder {
    color: #555;
}

.leaderboard-launch-custom-btn {
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    border-radius: 12px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.leaderboard-launch-custom-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 12px rgba(233, 69, 96, 0.4);
}

@keyframes modalZoomIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== DATABASE TAB ===== */

/* Анимации для базы данных */
@keyframes dbCardIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dbHeaderGlow {
    0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 20px rgba(233,69,96,0.1); }
    50% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 40px rgba(233,69,96,0.25); }
}

@keyframes dbStatCount {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes dbDetailIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes dbOverlayIn {
    from { opacity: 0; backdrop-filter: blur(0px); }
    to { opacity: 1; backdrop-filter: blur(6px); }
}

@keyframes dbShine {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes dbStatBarGrow {
    from { width: 0; }
}

@keyframes dbPillPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233,69,96,0.4); }
    50% { box-shadow: 0 0 0 4px rgba(233,69,96,0); }
}

/* Заголовок базы данных */
.db-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding: 24px 30px;
    background: linear-gradient(135deg, rgba(15,52,96,0.6), rgba(26,26,46,0.6));
    border-radius: 20px;
    border: 1px solid rgba(233,69,96,0.2);
    backdrop-filter: blur(12px);
    animation: dbHeaderGlow 4s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.db-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(233,69,96,0.08), transparent);
    animation: dbShine 6s ease-in-out infinite;
}

.db-header-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(233,69,96,0.4);
}

.db-header-text {
    flex: 1;
}

.db-header-text h2 {
    font-family: 'Minecraft', monospace;
    color: #e94560;
    font-size: 1.2rem;
    margin-bottom: 4px;
    text-shadow: 0 0 15px rgba(233,69,96,0.4);
    letter-spacing: 1px;
}

.db-header-text p {
    font-family: 'Minecraft', monospace;
    color: rgba(255,255,255,0.5);
    font-size: 0.6rem;
    letter-spacing: 0.5px;
}

.db-header-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    margin-right: 4px;
}

.db-chart-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.6);
    color: rgba(255,255,255,0.85);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.db-chart-btn i {
    color: #e94560;
    font-size: 0.8rem;
}

.db-chart-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: white;
    box-shadow: 0 4px 12px rgba(233,69,96,0.25);
}

.db-header-stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.db-header-stat {
    text-align: center;
    padding: 10px 18px;
    background: rgba(0,0,0,0.3);
    border-radius: 14px;
    border: 1px solid rgba(233,69,96,0.15);
    min-width: 80px;
}

.db-header-stat-value {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 1.3rem;
    color: #e94560;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(233,69,96,0.4);
    animation: dbStatCount 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.db-header-stat-label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
    letter-spacing: 1px;
}
.db-autoscroll-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}
.db-autoscroll-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(233,69,96,0.4);
    background: rgba(15,52,96,0.6);
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.db-autoscroll-btn:hover {
    background: rgba(233,69,96,0.3);
    border-color: #e94560;
}
.db-autoscroll-btn.active {
    background: #e94560;
    border-color: #e94560;
    animation: autoScrollPulse 1.5s infinite;
}
@keyframes autoScrollPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233,69,96,0.4); }
    50% { box-shadow: 0 0 12px 4px rgba(233,69,96,0.3); }
}
.db-autoscroll-speed {
    display: flex;
    align-items: center;
    gap: 4px;
}
.db-autoscroll-speed input[type="range"] {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    outline: none;
}
.db-autoscroll-speed input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    cursor: pointer;
}
.db-autoscroll-speed span {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    min-width: 12px;
    text-align: center;
}

/* Панель управления */
.db-controls {
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(15,52,96,0.3);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
}

.db-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.db-search-wrapper {
    flex: 1;
    min-width: 220px;
    position: relative;
}

.db-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
    transition: color 0.3s;
    pointer-events: none;
}

.db-search-wrapper:focus-within .db-search-icon {
    color: #e94560;
}

.db-search-input {
    width: 100%;
    padding: 12px 40px 12px 40px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.5);
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.db-search-input:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.15), 0 4px 12px rgba(0,0,0,0.2);
    background: rgba(15,52,96,0.7);
}

.db-search-input::placeholder { color: rgba(255,255,255,0.3); }

.db-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.5);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.db-search-clear:hover {
    background: rgba(233,69,96,0.4);
    color: white;
}

.db-sort-select {
    padding: 12px 18px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.5);
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    outline: none;
    transition: all 0.3s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.db-sort-select:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.15);
}

.db-sort-select option { background: #1a1a2e; color: white; }

.db-view-toggle { display: flex; gap: 4px; }

.db-view-btn {
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.5);
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.db-view-btn:hover {
    color: white;
    border-color: rgba(233,69,96,0.4);
    background: rgba(233,69,96,0.1);
}

.db-view-btn.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: white;
    border-color: #e94560;
    box-shadow: 0 4px 12px rgba(233,69,96,0.3);
}

/* Подвкладки БД */
.db-subtabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 16px;
    padding: 8px;
    background: rgba(15,52,96,0.25);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}
.db-subtabs .db-view-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    font-size: 0.85rem;
    font-family: 'Minecraft', monospace;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.db-subtabs .db-view-btn i { font-size: 0.95rem; }

/* Сетка способностей */
.db-abil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.db-abil-card {
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 18px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: dbCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
    cursor: default;
}
.db-abil-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e94560, #ff6b9d);
    opacity: 0.5;
}
.db-abil-card:hover {
    transform: translateY(-3px);
    border-color: rgba(233,69,96,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.db-abil-names {
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
    width: fit-content;
    transition: all 0.2s ease;
}
.db-abil-names:hover .db-abil-name-ru {
    color: #e94560;
    text-decoration: underline;
}
.db-abil-name-ru {
    color: #fff;
    font-size: 0.95rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
}
.db-abil-name-en {
    color: rgba(255,255,255,0.4);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.db-abil-desc { margin-top: 10px; color: rgba(255,255,255,0.85); font-size: 0.72rem; line-height: 1.6; }
.db-abil-holders { margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.06); }
.db-abil-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    margin: -2px -8px 0;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.45);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-align: left;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.db-abil-toggle i { font-size: 0.5rem; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
.db-abil-toggle .db-abil-count {
    margin-left: auto;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(233,69,96,0.15);
    color: #ff8ba0;
    font-size: 0.55rem;
}
.db-abil-toggle:hover { color: #fff; background: rgba(233,69,96,0.08); }
.db-abil-holders.open .db-abil-toggle { color: #fff; }
.db-abil-holders.open .db-abil-toggle i { transform: rotate(90deg); }
.db-abil-collapse {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.db-abil-holders.open .db-abil-collapse { display: grid; animation: dbCardIn 0.3s ease backwards; }
.db-abil-holders-modal {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(72px, 86px)) !important;
    gap: 8px !important;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px 4px;
}
.db-abil-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 6px 4px 6px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.6);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.db-abil-holder:hover {
    border-color: #ff4757;
    background: rgba(255, 71, 87, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.25);
}
.db-abil-holder-img {
    width: 52px;
    height: 52px;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    padding: 2px;
    flex-shrink: 0;
}
.db-abil-holder-dex {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.52rem;
    font-family: 'Minecraft', monospace;
    line-height: 1;
}
.db-abil-holder-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.56rem;
    font-family: 'Minecraft', monospace;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Сетка движений (Компактный вид по умолчанию + Режим постера) */
.db-moves-view-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}
.db-moves-view-modes {
    display: inline-flex;
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 3px;
    gap: 4px;
}
.db-view-mode-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 5px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-view-mode-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.db-view-mode-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #e94560, #c23152);
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
}

.db-moves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.db-moves-grid.db-moves-grid-poster {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

/* 1. Классическая компактная карточка (Основной вид) */
.db-move-card {
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 18px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: dbCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
    cursor: default;
    display: flex;
    flex-direction: column;
}
.db-move-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--card-accent, #888), transparent);
    opacity: 0.6;
}
.db-move-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.db-move-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}
.db-move-typecat {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.08);
}
.db-move-tc-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.db-move-type-img, .db-move-cat-img { width: 26px; height: 26px; object-fit: contain; }
.db-move-type-name {
    color: rgba(255,255,255,0.9);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.db-move-names {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-move-names:hover .db-move-name-ru {
    color: #e94560;
    text-decoration: underline;
}
.db-move-name-ru {
    color: #fff;
    font-size: 0.95rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    text-align: center;
    white-space: normal;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
    line-height: 1.25;
    max-width: 100%;
}
.db-move-name-en {
    color: rgba(255,255,255,0.4);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
}
.db-move-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.db-move-cat-label {
    color: rgba(255,255,255,0.55);
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.db-move-gen {
    margin-left: auto;
    color: rgba(255,255,255,0.35);
    font-size: 0.58rem;
    font-family: 'Minecraft', monospace;
}
.db-move-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
}
.db-move-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
.db-move-stat i { color: var(--card-accent, #888); font-size: 0.7rem; opacity: 0.8; }
.db-move-stat b { color: #fff !important; font-size: 0.85rem; font-family: 'Minecraft', monospace; }
.db-move-stat b .db-move-pp-max {
    font-size: 0.52rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.65);
    margin-left: 2px;
}
.db-move-stat span { color: rgba(255,255,255,0.35); font-size: 0.52rem; font-family: 'Minecraft', monospace; text-transform: uppercase; letter-spacing: 0.03em; }

/* 2. Карточка-постер (Вид по шаблону) */
.db-moves-grid.db-moves-grid-poster {
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 24px;
}
@media (max-width: 540px) {
    .db-moves-grid.db-moves-grid-poster {
        grid-template-columns: 1fr;
    }
}
.db-move-card.db-move-card-poster {
    background-color: var(--card-accent, #777);
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.15) 100%), var(--card-accent, #777);
    border: 4px solid #ffffff;
    border-radius: 26px;
    padding: 16px 20px 20px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.45), inset 0 2px 6px rgba(255,255,255,0.75);
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}
.db-move-card.db-move-card-poster::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--type-icon-url);
    background-repeat: repeat;
    background-size: 52px 52px;
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
    height: auto;
}
.db-move-card.db-move-card-poster:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 14px 34px rgba(0,0,0,0.55), inset 0 2px 6px rgba(255,255,255,0.9);
}
.db-mcard-title-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
}
.db-mcard-title {
    position: relative;
    z-index: 1;
    font-family: 'Minecraft', monospace;
    font-size: 1.45rem;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
    cursor: pointer;
    transition: transform 0.2s ease, text-shadow 0.2s ease;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        0 2.5px 0 #000,
        0 -2px 0 #000,
        2px 0 0 #000,
        -2px 0 0 #000,
        0 4px 6px rgba(0,0,0,0.8);
}
.db-mcard-title:hover {
    transform: scale(1.03);
    text-shadow:
        -2px -2px 0 #e94560,
        2px -2px 0 #e94560,
        -2px 2px 0 #e94560,
        2px 2px 0 #e94560,
        0 3px 8px rgba(233, 69, 96, 0.85);
}
.db-mcard-tags {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
.db-mcard-body {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 14px;
    align-items: stretch;
    justify-content: space-between;
    flex: 1;
}
.db-mcard-info-box {
    flex: 1;
    min-width: 0;
    background: var(--card-dark-accent-grad, linear-gradient(180deg, #2b1218 0%, #1e0a0f 100%));
    border: 3px solid #ffffff;
    border-radius: 18px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 3px 10px rgba(0,0,0,0.3);
    overflow: hidden;
}
.db-mcard-stats-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.2fr;
    gap: 6px;
    align-items: flex-start;
}
.db-mcard-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    min-width: 0;
}
.db-mcard-stat-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: var(--card-stat-lbl-color, #ffb3b8);
    white-space: nowrap;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.db-mcard-stat-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        0 2px 0 #000,
        0 -2px 0 #000,
        2px 0 0 #000,
        -2px 0 0 #000,
        0 3px 5px rgba(0,0,0,0.85);
}
.db-mcard-pp-max {
    font-size: 0.52rem;
    font-weight: normal;
    color: #ffffff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    margin-left: 2px;
}
.db-mcard-desc-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.db-mcard-desc {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: #ffffff;
    text-align: center;
    line-height: 1.38;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px rgba(0,0,0,0.9);
}
.db-mcard-extras {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.db-mcard-extra-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 1px 6px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
}
.db-mcard-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-shrink: 0;
    width: 148px;
}
.db-mcard-type-pill {
    border-radius: 999px;
    border: 3.5px solid #ffffff;
    padding: 6px 12px;
    background: var(--card-accent, #777);
    box-shadow: 0 4px 10px rgba(0,0,0,0.22), inset 0 2px 4px rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-mcard-type-txt {
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow:
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px 1.5px 0 #000,
        1.5px 1.5px 0 #000,
        0 1.5px 0 #000,
        0 -1.5px 0 #000,
        1.5px 0 0 #000,
        -1.5px 0 0 #000,
        0 2px 4px rgba(0,0,0,0.85);
    white-space: nowrap;
    display: block;
    letter-spacing: 0.02em;
    line-height: 1;
}
.db-mcard-cat-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 46px;
}
.db-mcard-cat-img {
    width: 70px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}
.db-mcard-side-extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-top: 2px;
}
.db-mcard-extra-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    padding: 2px 7px;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
}
.db-mcard-extra-pill.tag {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    padding: 2.5px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.7);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 18%, rgba(15, 23, 42, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 55%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--pill-color, #FF0045) 20%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    transition: all 0.2s ease;
}
.db-mcard-extra-pill.tag i {
    font-size: 0.6rem;
    color: var(--pill-color, #ffffff);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--pill-color, #ffffff) 80%, transparent));
}
.db-mcard-extra-pill.tag:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 28%, rgba(15, 23, 42, 0.85));
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 80%, transparent);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--pill-color, #FF0045) 40%, transparent);
}

/* Модалка движения */
.db-move-detail-table { display: flex; flex-direction: column; gap: 6px; }
.db-move-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(15,52,96,0.3);
}
.db-move-detail-label {
    color: rgba(255,255,255,0.5);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    white-space: nowrap;
}
.db-move-detail-value {
    color: #fff;
    font-size: 0.78rem;
    font-family: 'Minecraft', monospace;
    text-align: right;
    margin-left: auto;
    word-break: break-word;
}

/* Фильтры */
.db-filters-section {
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-filter-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.db-mode-toggle {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.db-mode-btn {
    padding: 4px 12px;
    border: none;
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.db-mode-btn:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.06);
}

.db-mode-btn.active {
    background: #e94560;
    color: white;
}

.db-mode-btn:hover:not(.active) {
    background: rgba(233,69,96,0.2);
    color: rgba(255,255,255,0.7);
}

.db-pill.active.multi {
    background: rgba(233,69,96,0.6);
    border-color: #e94560;
}

.db-filters-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.db-filters-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-filters-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-filter-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-filter-label {
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    white-space: nowrap;
    letter-spacing: 0.5px;
    min-width: 110px;
    flex-shrink: 0;
}

.db-filter-label i {
    color: #e94560;
    margin-right: 3px;
    font-size: 0.55rem;
}

.db-filter-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.db-type-pills {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.db-type-pills .db-pill {
    padding: 6px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-transform: capitalize;
    aspect-ratio: 3/2;
}

.db-type-pills .db-pill img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    border-radius: 50%;
}

.db-pill {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.db-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(233,69,96,0.2), transparent);
    opacity: 0;
    transition: opacity 0.25s;
}

.db-pill:hover {
    background: rgba(233,69,96,0.2);
    color: white;
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-1px);
}

.db-pill:hover::after { opacity: 1; }

.db-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: white;
    border-color: #e94560;
    box-shadow: 0 2px 10px rgba(233,69,96,0.3);
    animation: dbPillPulse 2s ease-in-out infinite;
}

/* Контент */
.db-content {
    min-height: 200px;
}

/* Карточки */
.db-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.db-card {
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 18px;
    cursor: default;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: dbCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.db-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--card-accent, #e94560), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.db-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    transition: left 0.6s;
    pointer-events: none;
}

.db-card:hover {
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3), 0 0 20px rgba(233,69,96,0.1);
}

.db-card:hover::before { opacity: 1; }
.db-card:hover::after { left: 200%; }

.db-card-top {
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
}

.db-card-img {
    width: 75px;
    height: 75px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
    flex-shrink: 0;
    transition: all 0.3s;
}

.db-card:hover .db-card-img {
    transform: scale(1.08);
    filter: drop-shadow(0 5px 12px rgba(233,69,96,0.3));
}

.db-card-info { flex: 1; min-width: 0; }

.db-card-id {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1px;
}

.db-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: white;
    margin: 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
.db-card-name:hover {
    color: #e94560;
    text-decoration: underline;
}
.db-card-img {
    cursor: pointer;
    transition: transform 0.2s ease;
}
.db-card-img:hover {
    transform: scale(1.08);
}

.db-card-engname {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.3);
    margin-bottom: 5px;
    font-style: italic;
}

.db-card-types {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.db-card-type-badge {
    padding: 3px 10px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: white;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: transform 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.1);
}

.db-card-type-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
    border-radius: 3px;
}

.db-card:hover .db-card-type-badge {
    transform: scale(1.05);
}

.db-card-stats-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 10px;
    margin-bottom: 8px;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}

.db-stat-item {
    display: flex;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: rgba(255,255,255,0.5);
}

.db-stat-item span:last-child {
    color: white;
    font-weight: bold;
}

.db-stat-total {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 4px;
    margin-top: 2px;
}

.db-stat-total span:last-child {
    color: #e94560 !important;
}

.db-card-abilities {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.5;
    margin-bottom: 6px;
}

.db-card-abilities b { color: rgba(255,255,255,0.6); }

.db-abil-mini {
    cursor: pointer;
    color: inherit;
    transition: color .15s;
}

.db-abil-mini:hover {
    color: #ff8ba0;
}

.db-card-tags {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.db-tag {
    padding: 2px 7px;
    border-radius: 5px;
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
    transition: all 0.2s;
}

.db-card:hover .db-tag {
    background: rgba(233,69,96,0.1);
    color: rgba(255,255,255,0.6);
}

/* Таблица */
.db-table-wrapper {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(15,52,96,0.2);
}

.db-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: white;
    table-layout: fixed;
}

.db-table th {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, #1a1a2e, rgba(26,26,46,0.95));
    padding: 12px 8px;
    text-align: left;
    color: #e94560;
    border-bottom: 2px solid rgba(233,69,96,0.3);
    white-space: nowrap;
    z-index: 2;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}

/* Ширина колонок */
.th-id { width: 60px; }
.th-img { width: 48px; }
.th-name { width: 140px; }
.th-types { width: 70px; }
.th-stat { width: 44px; text-align: center; }
.th-total { width: 50px; text-align: center; }
.th-abilities { width: 200px; }
.th-tags { width: 110px; }

.db-table th:hover {
    color: white;
    background: rgba(233,69,96,0.15);
}

.db-table td {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
    transition: background 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-table .td-id {
    color: rgba(255,255,255,0.4);
    text-align: center;
    padding-left: 8px;
}

.db-table .td-stat {
    text-align: center;
    font-size: 0.56rem;
    padding: 8px 4px;
}

.db-table .td-total {
    text-align: center;
    color: #e94560;
    font-weight: bold;
    padding: 8px 4px;
}

.db-table .td-abilities {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.5);
    overflow: hidden;
}

.db-abs-grid {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.db-abs-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.db-abs-col span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.db-abs-sep {
    color: rgba(255,255,255,0.15);
    flex-shrink: 0;
}

.db-abs-empty {
    color: rgba(255,255,255,0.15);
}

.db-table .td-tags {
    max-width: 0;
}

.db-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.db-tags-grid .db-move-meta-tag {
    font-size: 0.58rem;
    padding: 1.5px 6px;
    gap: 3.5px;
}
.db-tags-grid .db-move-meta-tag i {
    font-size: 0.55rem;
}

.db-table .db-tag {
    display: block;
    padding: 1px 4px;
    border-radius: 3px;
    font-family: 'Minecraft', monospace;
    font-size: 0.42rem;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.4;
    max-width: 44px;
}

.db-table tr {
    transition: all 0.2s;
}

.db-table tbody tr:hover td {
    background: rgba(15,52,96,0.3);
}

.db-table tbody tr:hover {
    box-shadow: inset 3px 0 0 #e94560;
}

.db-table-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
    border-radius: 8px;
    transition: transform 0.2s;
}

.db-table tbody tr:hover .db-table-img {
    transform: scale(1.15);
}

.db-table-types {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.db-table-type-wrap {
    position: relative;
    display: inline-flex;
    cursor: help;
}

.db-table-type-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
    border-radius: 4px;
    transition: transform 0.2s;
}

.db-table-type-wrap:hover .db-table-type-icon {
    transform: scale(1.3);
}

.db-floating-tip {
    display: none;
    position: absolute;
    background: #16213e;
    color: white;
    font-size: 0.55rem;
    padding: 3px 10px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 999999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    border: 1px solid rgba(233,69,96,0.4);
    text-transform: capitalize;
    font-family: 'Minecraft', monospace;
}

.cstm-confirm-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Minecraft', monospace;
}
.cstm-confirm-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    min-width: 320px;
    max-width: 420px;
    text-align: center;
    color: white;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
}
.cstm-confirm-icon {
    font-size: 1.5rem;
    color: #e94560;
    margin-bottom: 10px;
}
.cstm-confirm-msg {
    color: #bbb;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    line-height: 1.5;
    margin-bottom: 22px;
}
.cstm-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.cstm-confirm-btn {
    padding: 10px 24px;
    border-radius: 12px;
    border: none;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}
.cstm-confirm-yes {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}
.cstm-confirm-yes:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.5);
}
.cstm-confirm-no {
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: white;
}
.cstm-confirm-no:hover {
    background: #e94560;
    transform: scale(1.05);
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.db-table-name-cell {
    white-space: nowrap;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-table-desc {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255,255,255,0.35);
    font-size: 0.55rem;
}

/* Детальное модальное окно */
.db-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: dbOverlayIn 0.3s ease-out;
    backdrop-filter: blur(6px);
}

.db-detail-modal {
    background: linear-gradient(145deg, #16213e, #1a1a2e);
    border: 1px solid var(--modal-border, rgba(233,69,96,0.3));
    border-radius: 22px;
    padding: 32px;
    max-width: 620px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    animation: dbDetailIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 40px var(--modal-glow, rgba(233,69,96,0.15));
    scrollbar-color: var(--modal-accent, rgba(255, 255, 255, 0.25)) rgba(26, 26, 46, 0.5);
}

.db-detail-modal::-webkit-scrollbar {
    width: 6px;
}
.db-detail-modal::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 3px;
    margin: 12px 0;
}
.db-detail-modal::-webkit-scrollbar-thumb {
    background: var(--modal-accent, rgba(255, 255, 255, 0.25));
    border-radius: 3px;
    transition: background 0.2s ease;
}
.db-detail-modal::-webkit-scrollbar-thumb:hover {
    background: var(--modal-accent-hover, var(--modal-accent, rgba(255, 255, 255, 0.45)));
}

.db-status-detail-modal,
.db-field-detail-modal,
.db-gimmick-detail-modal,
.db-type-detail-modal,
.db-adv-detail-modal {
    border: 1px solid var(--modal-border, rgba(255, 255, 255, 0.15)) !important;
    border-top: 4px solid var(--modal-accent, #9c88ff) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px var(--modal-glow, rgba(255, 255, 255, 0.1)) !important;
}

.db-status-detail-modal .db-detail-section-title,
.db-field-detail-modal .db-detail-section-title,
.db-gimmick-detail-modal .db-detail-section-title,
.db-type-detail-modal .db-detail-section-title,
.db-adv-detail-modal .db-detail-section-title {
    color: var(--modal-accent, #00cec9) !important;
    border-bottom: 1px solid var(--modal-border, rgba(255, 255, 255, 0.12)) !important;
}

.db-status-detail-modal .db-detail-close:hover,
.db-field-detail-modal .db-detail-close:hover,
.db-gimmick-detail-modal .db-detail-close:hover,
.db-type-detail-modal .db-detail-close:hover,
.db-adv-detail-modal .db-detail-close:hover {
    color: white !important;
    background: var(--modal-border, rgba(255, 255, 255, 0.15)) !important;
    border-color: var(--modal-accent, #00cec9) !important;
}

.db-detail-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.db-detail-close:hover {
    color: white;
    background: rgba(233,69,96,0.4);
    border-color: #e94560;
    transform: rotate(90deg);
}

.db-detail-top {
    display: flex;
    gap: 22px;
    margin-bottom: 22px;
    align-items: flex-start;
}

.db-detail-img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
    border-radius: 20px;
    background: rgba(0,0,0,0.2);
    padding: 10px;
    transition: transform 0.3s;
}

.db-detail-img:hover {
    transform: scale(1.05);
}

.db-detail-info { flex: 1; }

.db-detail-id {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1px;
}

.db-detail-name {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    color: white;
    margin: 5px 0;
    text-shadow: 0 0 10px rgba(233,69,96,0.3);
}

.db-detail-engname {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    margin-bottom: 10px;
    font-style: italic;
}

.db-detail-types {
    display: flex;
    gap: 7px;
    margin-bottom: 10px;
}

.db-detail-type-badge {
    padding: 5px 14px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: white;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: transform 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.1);
}

.db-detail-type-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
    border-radius: 4px;
}

.db-detail-type-badge:hover {
    transform: scale(1.08);
}

.db-detail-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.db-detail-section {
    margin-bottom: 16px;
    padding: 14px;
    background: rgba(0,0,0,0.15);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.04);
}

.db-detail-section-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(233,69,96,0.15);
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}

.db-detail-section-title i {
    font-size: 0.6rem;
}

.db-detail-desc {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.6;
}

.db-detail-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-detail-stat {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 12px;
    background: rgba(15,52,96,0.4);
    border-radius: 8px;
    transition: all 0.2s;
    gap: 8px;
}

.db-detail-stat:hover {
    background: rgba(15,52,96,0.6);
}

.db-detail-stat .label { color: rgba(255,255,255,0.45); text-align: right; }

.stat-bar-wrap {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}

.stat-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.db-detail-stat .value { color: white; font-weight: bold; min-width: 30px; text-align: right; }

.db-detail-stat.total {
    grid-column: 1 / -1;
    text-align: center;
    background: linear-gradient(135deg, rgba(233,69,96,0.15), rgba(233,69,96,0.08));
    border: 1px solid rgba(233,69,96,0.2);
    padding: 8px;
}

.db-detail-stat.total .value {
    color: #e94560;
    font-size: 0.85rem;
    text-shadow: 0 0 8px rgba(233,69,96,0.4);
}

.db-detail-abilities { line-height: 1.9; }

.db-detail-efx { display: flex; flex-direction: column; gap: 6px; }
.efx-grid { display: flex; flex-direction: column; gap: 6px; }
.efx-group { display: flex; align-items: center; gap: 8px; }
.efx-label {
    min-width: 32px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    font-weight: bold;
    flex-shrink: 0;
}
.efx-types {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.efx-type-chip {
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    white-space: nowrap;
}

.db-detail-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 12px 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.25s;
}
.db-detail-download:hover {
    background: rgba(233,69,96,0.15);
    border-color: rgba(233,69,96,0.4);
    color: white;
}

.db-detail-ability {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.65);
    padding: 3px 0;
}

.db-detail-ability .db-abil-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: color .15s;
}

.db-detail-ability .db-abil-link:hover {
    color: #ff8ba0;
}

.db-detail-ability b { color: white; }
.db-detail-ability .hidden-label {
    color: #e94560;
    font-size: 0.52rem;
    font-style: italic;
}

.db-detail-holders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 12px;
    max-height: 330px;
    overflow-y: auto;
    padding-right: 4px;
}

.db-abil-scale-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.45);
    margin-right: 2px;
}

.db-abil-scale {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.85);
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    transition: all .15s;
}

.db-abil-scale:hover {
    background: rgba(255,255,255,0.12);
}

.db-abil-scale.active {
    border-color: #e94560;
    background: rgba(233,69,96,0.18);
    color: #ff8ba0;
}

.db-loading {
    text-align: center;
    padding: 60px;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
}

.db-loading i {
    margin-right: 8px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.db-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.3);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
}

.db-empty i {
    display: block;
    font-size: 2rem;
    margin-bottom: 15px;
    color: rgba(233,69,96,0.3);
}

/* Адаптив для базы данных */
@media (max-width: 768px) {
    .db-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px;
    }

    .db-header-stats {
        width: 100%;
        justify-content: center;
    }

    .db-header-text h2 {
        font-size: 1rem;
    }

    .db-cards {
        grid-template-columns: 1fr;
    }

    .db-search-row {
        flex-direction: column;
    }

    .db-search-wrapper {
        min-width: auto;
    }

    .db-sort-select {
        width: 100%;
    }

    .db-filter-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .db-filters-columns {
        grid-template-columns: 1fr;
    }

    .db-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .db-table {
        table-layout: auto;
        min-width: 700px;
    }

    .db-detail-modal {
        padding: 20px;
        border-radius: 18px;
    }

    .db-detail-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .db-detail-types,
    .db-detail-tags {
        justify-content: center;
    }
}

/* ============================================
   ВКЛАДКА: ПОМОЩЬ С ПРОЕКТОМ
   ============================================ */

#tabHelp h2 {
    font-family: 'Minecraft', monospace;
    color: white;
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

/* ========================================
   HELP TAB — SUPER DESIGN
   ======================================== */

/* Hero */
.help-hero {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 15px 25px;
    background: rgba(15, 52, 96, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 20px;
    margin-bottom: 16px;
}

.help-hero-icon {
    font-size: 1.2rem;
    color: #e94560;
    flex-shrink: 0;
}

.help-hero h2 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    color: white;
    margin: 0;
}

.help-hero p {
    color: rgba(255,255,255,0.4);
    font-size: 0.65rem;
    margin: 0 0 0 auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
    flex: 1 1 100%;
}

/* Cards */
.help-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 900px;
    margin: 0 auto 24px;
}

.help-card {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    padding: 24px 18px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.help-card:nth-child(1) { animation-delay: 0.1s; }
.help-card:nth-child(2) { animation-delay: 0.2s; }
.help-card:nth-child(3) { animation-delay: 0.3s; }

.help-card-shine {
    display: none;
}

.help-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #e94560, #c62a47);
    opacity: 0.6;
    transition: opacity 0.3s;
}

.help-card:hover::before {
    opacity: 1;
}

.help-card:hover {
    transform: translateY(-3px);
    border-color: rgba(233, 69, 96, 0.4);
    box-shadow: 0 8px 25px rgba(233, 69, 96, 0.1);
}

.help-card-icon {
    font-size: 1.8rem;
    margin-bottom: 12px;
    position: relative;
    transition: transform 0.3s;
    color: #e94560;
    filter: drop-shadow(0 0 8px rgba(233,69,96,0.3));
}

.help-card:hover .help-card-icon {
    transform: scale(1.1);
}

.help-card-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: white;
    margin-bottom: 6px;
    position: relative;
}

.help-card-desc {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.5;
    position: relative;
}

.help-card-arrow {
    margin-top: 12px;
    color: rgba(255,255,255,0.15);
    font-size: 0.7rem;
    transition: all 0.3s;
    position: relative;
}

.help-card:hover .help-card-arrow {
    color: #e94560;
    transform: translateX(4px);
}

/* Submissions Button */
.help-submissions-wrap {
    text-align: center;
    margin-bottom: 20px;
}

.help-submissions-btn {
    padding: 10px 24px;
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.help-submissions-btn:hover {
    border-color: #e94560;
    color: white;
    box-shadow: 0 4px 20px rgba(233,69,96,0.15);
    transform: translateY(-2px);
}

/* Submissions Tabs */
.help-sub-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    padding: 4px;
}

.help-sub-tab {
    flex: 1;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.help-sub-tab:hover {
    color: rgba(255,255,255,0.7);
    background: rgba(233,69,96,0.08);
}

.help-sub-tab.active {
    background: rgba(233,69,96,0.2);
    color: white;
}

.help-sub-tab i {
    font-size: 0.5rem;
}

/* Submission Items */
.help-submission-item {
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.15);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    position: relative;
    transition: border-color 0.2s;
}

.help-submission-item:hover {
    border-color: rgba(233,69,96,0.3);
}

.help-submission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.help-submission-type {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

.help-submission-date {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.25);
}

.help-submission-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
}

.help-submission-details b {
    color: white;
}

.help-submission-reply {
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.7);
}

.help-submission-reply i {
    color: #3498db;
    margin-right: 4px;
}

.help-submission-reply b {
    color: #3498db;
}

.help-submission-delete {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.15);
    cursor: pointer;
    font-size: 0.6rem;
    padding: 4px;
    transition: color 0.2s;
    border-radius: 6px;
}

.help-submission-delete:hover {
    color: #e74c3c;
    background: rgba(231,76,60,0.1);
}

/* Forms */
.help-form {
    max-width: 700px;
    margin: 0 auto;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 16px;
    overflow: hidden;
}

.help-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 2px solid #e94560;
}

.help-form-header h3 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-form-header h3 i {
    color: #e94560;
}

.help-close-btn {
    background: #c0392b;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 0.7rem;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.help-close-btn:hover {
    background: #e74c3c;
    transform: translateY(-2px);
}

.help-form-body {
    padding: 22px;
}

.help-form-body label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #e94560;
    margin-bottom: 6px;
    margin-top: 16px;
}

.help-form-body label:first-child {
    margin-top: 0;
}

.help-input,
.help-textarea,
.help-select {
    width: 100%;
    padding: 10px 14px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    transition: all 0.25s;
    box-sizing: border-box;
}

.help-input:focus,
.help-textarea:focus,
.help-select:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.15);
}

.help-textarea {
    resize: vertical;
    min-height: 80px;
}

.help-select {
    cursor: pointer;
}

.help-select option {
    background: #1a1a2e;
    color: white;
}

/* Фильтры в форме идеи */
.help-filters-section {
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 12px;
    padding: 15px;
    margin-top: 6px;
}

.help-filter-group {
    margin-bottom: 12px;
}

.help-filter-group:last-child {
    margin-bottom: 0;
}

.help-filter-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-bottom: 8px;
}

.help-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.help-filter-tag {
    padding: 5px 12px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
}

.help-filter-tag:hover {
    border-color: #e94560;
    color: white;
}

.help-filter-tag.selected {
    background: #e94560;
    border-color: #e94560;
    color: white;
}

/* Чипсы покемонов */
.help-pokemon-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.help-pokemon-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
}

.help-pokemon-chip .remove-chip {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
}

.help-pokemon-chip .remove-chip:hover {
    color: #e94560;
}

.help-add-pokemon-btn {
    background: rgba(233, 69, 96, 0.1);
    border: 1px dashed rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
}

.help-add-pokemon-btn:hover {
    border-color: #e94560;
    color: white;
}

/* Mechanics Grid */
.help-mechanics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}

.help-mech-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0 !important;
}

.help-mech-check:hover {
    border-color: rgba(233,69,96,0.5);
    background: rgba(233,69,96,0.08);
    color: rgba(255,255,255,0.8);
}

.help-mech-check input {
    display: none;
}

.help-mech-box {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(233,69,96,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    background: rgba(233,69,96,0.05);
    transition: all 0.25s;
    flex-shrink: 0;
    position: relative;
}

.help-mech-check input:checked ~ .help-mech-box {
    background: rgba(233,69,96,0.25);
    border-color: #e94560;
    color: #e94560;
}

.help-mech-check input:checked ~ .help-mech-box i {
    display: none;
}

.help-mech-check input:checked ~ .help-mech-box::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: #e94560;
}

.help-mech-check input:checked ~ *:last-child {
    color: white;
}

.help-mech-check--other {
    grid-column: 1 / -1;
}

/* Submit Button */
.help-submit-btn {
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    background: #2ecc71;
    border: none;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.help-submit-btn:hover {
    background: #27ae60;
    transform: translateY(-2px);
}

/* Селектор покемона */
.help-pokemon-selector {
    position: relative;
}

.help-pokemon-list {
    max-height: 260px;
    overflow-y: auto;
    background: #1a1a2e;
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 10px;
    margin-top: 6px;
}

.help-pokemon-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.help-pokemon-item:hover {
    background: rgba(233, 69, 96, 0.15);
}

.help-pokemon-item img {
    width: 30px;
    height: 30px;
}

.help-pokemon-item .name {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: white;
}

.help-pokemon-item .engname {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

.help-selected-pokemon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 10px;
    margin-top: 6px;
}

.help-selected-pokemon img {
    width: 40px;
    height: 40px;
}

/* Чекбоксы */
.help-replace-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.help-replace-options .help-check-label {
    margin: 0 !important;
    min-height: 36px;
    font-size: 0.62rem;
}

.help-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0;
    min-height: 36px;
    box-sizing: border-box;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s;
}

.help-check-label:hover {
    border-color: rgba(233,69,96,0.5);
    background: rgba(233,69,96,0.08);
    color: white;
}

.help-check-label:has(input:checked) {
    border-color: #e94560;
    background: rgba(233,69,96,0.15);
    color: white;
}

.help-check-label input[type="checkbox"] {
    accent-color: #e94560;
    width: 14px;
    height: 14px;
}

/* Модалка выбора покемона для идеи */
.help-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-picker-modal {
    background: rgba(15, 52, 96, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 16px;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.help-picker-modal h3 {
    font-family: 'Minecraft', monospace;
    color: white;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* Секции редактирования */
.help-edit-section {
    margin-top: 10px;
    padding: 10px 12px;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    animation: helpFadeIn 0.25s ease;
}

.help-edit-section label {
    margin-top: 0 !important;
    font-size: 0.6rem !important;
    margin-bottom: 4px !important;
}

.help-edit-section .help-input,
.help-edit-section .help-textarea {
    padding: 7px 10px;
    font-size: 0.65rem;
}

.help-name-row {
    display: flex;
    gap: 8px;
}

.help-name-field {
    flex: 1;
}

.help-name-field label {
    display: block;
    margin-bottom: 3px !important;
}

/* Сетка иконок типов */
.help-type-icons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.help-type-icons-grid .type-icon-item {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 30, 60, 0.5);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0.5;
}

.help-type-icons-grid .type-icon-item:hover {
    opacity: 0.8;
    transform: scale(1.08);
}

.help-type-icons-grid .type-icon-item.selected {
    opacity: 1;
    border-color: white;
    background: linear-gradient(135deg, #e94560, #c62a47);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.4);
}

.help-type-icons-grid .type-icon-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.help-selected-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.help-selected-type-tag {
    padding: 4px 12px;
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(233, 69, 96, 0.3);
    border: 1px solid rgba(233, 69, 96, 0.4);
}

.help-selected-type-tag .remove-type {
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.7rem;
}

.help-selected-type-tag .remove-type:hover {
    opacity: 1;
}

/* Сетка статов */
.help-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
}

.help-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.help-stat-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.5);
    min-width: 45px;
}

.help-stat-input {
    flex: 1;
    padding: 5px 8px;
    background: rgba(10,30,60,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    outline: none;
    width: 50px;
}

.help-stat-input:focus {
    border-color: rgba(233,69,96,0.5);
}

/* Abilities grid */
.help-abs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.help-abs-item label {
    font-size: 0.55rem !important;
    margin-bottom: 3px !important;
}

.help-abs-item .help-input {
    padding: 5px 8px;
    font-size: 0.6rem;
}

/* ==================== НОВЫЙ РЕЖИМ РАЗРАБОТЧИКА ==================== */

@keyframes devnewGlow {
    0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 20px rgba(233,69,96,0.1); }
    50% { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 40px rgba(233,69,96,0.25); }
}

@keyframes devnewShine {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes devnewFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes devnewCardIn {
    from { opacity: 0; transform: translateY(15px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes devnewPillPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233,69,96,0.3); }
    50% { box-shadow: 0 0 0 4px rgba(233,69,96,0); }
}

@keyframes devnewStatPop {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes devnewFadeSlide {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes devnewTypeGlow {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46,204,113,0.6); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(46,204,113,0.2); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}

@keyframes devnewTypeRemove {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231,76,60,0.5); }
    40% { transform: scale(0.88); box-shadow: 0 0 0 4px rgba(231,76,60,0.3); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231,76,60,0); }
}

/* ===== Hero Header ===== */
.dn-hero {
    text-align: center;
    padding: 30px 20px 24px;
    background: linear-gradient(135deg, rgba(15,52,96,0.6), rgba(26,26,46,0.7));
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.2);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    animation: devnewGlow 4s ease-in-out infinite;
}

.dn-hero::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(233,69,96,0.06), transparent);
    animation: devnewShine 6s ease-in-out infinite;
}

.dn-hero-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: white;
    box-shadow: 0 6px 20px rgba(233,69,96,0.4);
    margin-bottom: 12px;
    animation: devnewFloat 3s ease-in-out infinite;
    position: relative; z-index: 1;
}

.dn-hero h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem; color: white;
    text-shadow: 0 0 20px rgba(233,69,96,0.4);
    margin-bottom: 4px;
    position: relative; z-index: 1;
}

.dn-hero p {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: rgba(255,255,255,0.4);
    position: relative; z-index: 1;
}

.dn-hero-stats {
    display: flex; gap: 12px; justify-content: center;
    margin-top: 16px;
    position: relative; z-index: 1;
}

.dn-hero-stat {
    text-align: center;
    padding: 8px 16px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    border: 1px solid rgba(233,69,96,0.12);
    min-width: 70px;
}

.dn-hero-stat-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem; color: #e94560; font-weight: bold;
    text-shadow: 0 0 8px rgba(233,69,96,0.3);
    animation: devnewStatPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dn-hero-stat-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem; color: rgba(255,255,255,0.35);
    letter-spacing: 0.5px;
}

/* ===== Toolbar ===== */
.dn-toolbar {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    padding: 14px 18px;
    background: rgba(15,52,96,0.3);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
}

.dn-toolbar-group {
    display: flex; gap: 6px; align-items: center;
}

.dn-toolbar-sep {
    width: 1px; height: 24px;
    background: rgba(233,69,96,0.2);
    margin: 0 4px;
}

.dn-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(15,52,96,0.4);
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
    white-space: nowrap;
}

.dn-pill:hover {
    background: rgba(233,69,96,0.15);
    color: white;
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-1px);
}

.dn-pill i { font-size: 0.6rem; }

.dn-pill--accent {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: white;
    border-color: #e94560;
}
.dn-pill--accent:hover {
    box-shadow: 0 4px 14px rgba(233,69,96,0.35);
    transform: translateY(-2px);
}

.dn-pill--green { border-color: rgba(46,204,113,0.3); }
.dn-pill--green:hover { background: rgba(46,204,113,0.15); border-color: rgba(46,204,113,0.5); }

.dn-pill--purple { border-color: rgba(155,89,182,0.3); }
.dn-pill--purple:hover { background: rgba(155,89,182,0.15); border-color: rgba(155,89,182,0.5); }

.dn-pill--orange { border-color: rgba(243,156,18,0.3); }
.dn-pill--orange:hover { background: rgba(243,156,18,0.15); border-color: rgba(243,156,18,0.5); }

.dn-pill--blue { border-color: rgba(52,152,219,0.3); }
.dn-pill--blue:hover { background: rgba(52,152,219,0.15); border-color: rgba(52,152,219,0.5); }

.dn-pill--red { border-color: rgba(231,76,60,0.3); }
.dn-pill--red:hover { background: rgba(231,76,60,0.15); border-color: rgba(231,76,60,0.5); }

.dn-pill--teal { border-color: rgba(22,160,133,0.3); }
.dn-pill--teal:hover { background: rgba(22,160,133,0.15); border-color: rgba(22,160,133,0.5); }

.dn-select {
    padding: 7px 12px;
    background: rgba(26,26,46,0.8);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 10px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    min-width: 160px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.dn-select:focus {
    border-color: #e94560;
    outline: none;
}

/* ===== Main Layout ===== */
.dn-main {
    display: flex; gap: 20px; align-items: stretch;
    flex-wrap: wrap;
}

/* ===== Editor Panel ===== */
.dn-editor {
    flex: 2; min-width: 340px;
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px;
    padding: 22px;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    transition: border-color 0.3s;
}

.dn-editor:hover {
    border-color: rgba(233,69,96,0.2);
}

.dn-editor-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem; color: white;
    padding-bottom: 12px; margin-bottom: 18px;
    border-bottom: 2px solid rgba(233,69,96,0.3);
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}

.dn-editor-title i { color: #e94560; }

/* Upload area */
.dn-upload {
    width: 200px; min-height: 200px;
    background: #1a1a2e;
    border: 2px dashed rgba(233,69,96,0.35);
    border-radius: 16px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative; overflow: hidden;
    flex-shrink: 0;
}

.dn-upload:hover {
    border-color: #e94560;
    background: rgba(26,26,46,0.9);
    box-shadow: 0 0 20px rgba(233,69,96,0.1);
}

.dn-upload-icon {
    font-size: 2rem; color: #e94560;
    margin-bottom: 8px;
    transition: transform 0.3s;
}

.dn-upload:hover .dn-upload-icon { transform: scale(1.1); }

.dn-upload-text {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.4);
}

.dn-upload-img {
    width: 100%; max-height: 180px;
    object-fit: contain; border-radius: 12px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
    transition: filter 0.3s;
}

.dn-upload-img:hover {
    filter: drop-shadow(0 6px 18px rgba(233,69,96,0.3));
}

/* Editor form fields */
.dn-editor-body {
    display: flex; gap: 20px; margin-bottom: 20px;
}

.dn-editor-fields { flex: 1; }

.dn-field-label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.dn-field-label i { color: #e94560; margin-right: 4px; }

.dn-input {
    width: 100%;
    padding: 9px 14px;
    background: rgba(10,20,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    transition: all 0.25s;
    box-sizing: border-box;
}

.dn-input:focus {
    border-color: rgba(233,69,96,0.5);
    box-shadow: 0 0 0 3px rgba(233,69,96,0.1), 0 2px 8px rgba(0,0,0,0.2);
    outline: none;
}

.dn-input::placeholder { color: rgba(255,255,255,0.2); }

.dn-textarea {
    width: 100%;
    padding: 9px 14px;
    background: rgba(10,20,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    resize: vertical;
    min-height: 80px;
    transition: all 0.25s;
    box-sizing: border-box;
}

.dn-textarea:focus {
    border-color: rgba(233,69,96,0.5);
    box-shadow: 0 0 0 3px rgba(233,69,96,0.1), 0 2px 8px rgba(0,0,0,0.2);
    outline: none;
}

.dn-textarea::placeholder { color: rgba(255,255,255,0.2); }

/* Type grid */
.dn-types-section {
    margin-bottom: 20px;
}

.dn-types-grid {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 4px 0;
}

.dn-type-item {
    width: 80px;
    text-align: center;
    padding: 8px 4px 6px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10,20,40,0.4);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
}

.dn-type-item:hover {
    border-color: rgba(233,69,96,0.3);
    transform: translateY(-2px);
    background: rgba(233,69,96,0.08);
}

.dn-type-item img {
    width: 42px; height: 42px; object-fit: contain;
    transition: transform 0.2s;
}

.dn-type-item:hover img { transform: scale(1.1); }

.dn-type-item span {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.45rem;
    color: rgba(255,255,255,0.5);
    margin-top: 3px;
}

.dn-type-item.selected {
    border-color: rgba(46,204,113,0.5);
    background: rgba(46,204,113,0.12);
    animation: devnewTypeGlow 0.35s ease;
}

.dn-type-item.selected span { color: #2ecc71; }

.dn-type-item.removing {
    animation: devnewTypeRemove 0.3s ease;
}

/* Action buttons row */
.dn-actions {
    display: flex; gap: 12px;
    margin-top: auto; padding-top: 14px;
}

.dn-btn {
    flex: 1;
    padding: 11px 16px;
    border: none; border-radius: 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: white;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

.dn-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

.dn-btn--save {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    box-shadow: 0 4px 12px rgba(46,204,113,0.25);
}
.dn-btn--save:hover { box-shadow: 0 6px 18px rgba(46,204,113,0.35); }

.dn-btn--delete {
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    box-shadow: 0 4px 12px rgba(231,76,60,0.25);
}
.dn-btn--delete:hover { box-shadow: 0 6px 18px rgba(231,76,60,0.35); }

/* ===== List Panel ===== */
.dn-list {
    flex: 1; min-width: 260px;
    background: linear-gradient(145deg, rgba(15,52,96,0.5), rgba(26,26,46,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px;
    padding: 22px;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    transition: border-color 0.3s;
}

.dn-list:hover {
    border-color: rgba(233,69,96,0.2);
}

.dn-list-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem; color: white;
    padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 2px solid rgba(233,69,96,0.3);
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}

.dn-list-title i { color: #e94560; }

.dn-list-scroll {
    flex: 1;
    display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
}

.dn-list-scroll::-webkit-scrollbar { width: 5px; }
.dn-list-scroll::-webkit-scrollbar-track { background: transparent; }
.dn-list-scroll::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.3); border-radius: 10px; }

/* Pokemon cards in list */
.dn-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(15,52,96,0.4), rgba(26,26,46,0.5));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
    animation: devnewCardIn 0.35s ease backwards;
}

.dn-card::before {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    transition: left 0.5s;
}

.dn-card:hover {
    border-color: rgba(233,69,96,0.3);
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.dn-card:hover::before { left: 200%; }

.dn-card.active {
    border-color: rgba(233,69,96,0.5);
    background: linear-gradient(135deg, rgba(233,69,96,0.12), rgba(26,26,46,0.5));
    box-shadow: 0 0 15px rgba(233,69,96,0.1);
}

.dn-card-img {
    width: 46px; height: 46px;
    object-fit: cover; border-radius: 10px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.dn-card-placeholder {
    width: 46px; height: 46px;
    background: rgba(26,26,46,0.8);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.dn-card-placeholder i { font-size: 1.2rem; color: #e94560; }

.dn-card-info { flex: 1; min-width: 0; }

.dn-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem; color: white; font-weight: bold;
    white-space: normal; word-break: break-word;
    line-height: 1.3;
    transition: color 0.2s;
}

.dn-card.active .dn-card-name {
    background: linear-gradient(135deg, #ffd700, #f39c12);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dn-card-types {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem; color: rgba(233,69,96,0.7);
    margin-top: 3px;
}

/* Clear empty button */
.dn-clear-btn {
    margin-top: 14px;
    padding: 9px 14px;
    background: rgba(243,156,18,0.15);
    border: 1px solid rgba(243,156,18,0.25);
    border-radius: 12px;
    color: rgba(243,156,18,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.25s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

.dn-clear-btn:hover {
    background: rgba(243,156,18,0.25);
    border-color: rgba(243,156,18,0.4);
    color: #f39c12;
}

/* ===== Background Manager ===== */
.dn-bg-manager {
    margin-top: 20px;
    padding: 18px;
    background: linear-gradient(145deg, rgba(15,52,96,0.4), rgba(26,26,46,0.5));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
}

.dn-bg-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem; color: #e94560;
    padding-bottom: 8px; margin-bottom: 12px;
    border-bottom: 1px solid rgba(233,69,96,0.2);
    display: flex; align-items: center; gap: 6px;
}

.dn-bg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.dn-bg-card {
    position: relative; border-radius: 12px; overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.06);
    aspect-ratio: 16/9;
    transition: all 0.3s;
}

.dn-bg-card:hover {
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.dn-bg-card.active {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233,69,96,0.3);
}

.dn-bg-card img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.dn-bg-card .dn-bg-delete {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px;
    background: rgba(231,76,60,0.8);
    border: none; border-radius: 50%;
    color: white; font-size: 0.6rem;
    cursor: pointer;
    display: none; align-items: center; justify-content: center;
    transition: background 0.2s;
}

.dn-bg-card .dn-bg-rename {
    position: absolute; top: 4px; right: 30px;
    width: 22px; height: 22px;
    background: rgba(233,69,96,0.8);
    border: none; border-radius: 50%;
    color: white; font-size: 0.55rem;
    cursor: pointer;
    display: none; align-items: center; justify-content: center;
    transition: background 0.2s;
}

.dn-bg-card:hover .dn-bg-delete { display: flex; }
.dn-bg-card:hover .dn-bg-rename { display: flex; }
.dn-bg-card .dn-bg-delete:hover { background: #e74c3c; }
.dn-bg-card .dn-bg-rename:hover { background: #e94560; }

.dn-bg-upload {
    border: 2px dashed rgba(233,69,96,0.25);
    border-radius: 12px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    aspect-ratio: 16/9;
    cursor: pointer;
    transition: all 0.3s;
    color: rgba(255,255,255,0.3);
}

.dn-bg-upload:hover {
    border-color: rgba(233,69,96,0.5);
    color: rgba(233,69,96,0.7);
}

.dn-bg-upload i { font-size: 1.3rem; margin-bottom: 4px; }
.dn-bg-upload span { font-family: 'Minecraft', monospace; font-size: 0.48rem; }

.dn-bg-current {
    margin-top: 10px;
    text-align: center;
}

.dn-bg-current-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
}

.dn-bg-current img {
    max-width: 200px; max-height: 100px;
    object-fit: cover; border-radius: 10px;
    border: 1px solid rgba(233,69,96,0.2);
}

/* ===== Modal (new style) ===== */
.dn-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 20000;
    backdrop-filter: blur(6px);
    animation: devnewFadeSlide 0.25s ease;
}

.dn-modal {
    background: linear-gradient(145deg, #16213e, #1a1a2e);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 22px;
    padding: 28px;
    max-width: 500px; width: 92%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 30px rgba(233,69,96,0.1);
    animation: devnewCardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dn-modal h3 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem; color: white;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}

.dn-modal h3 i { color: #e94560; }

.dn-modal-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(10,20,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    margin-bottom: 18px;
    box-sizing: border-box;
}

.dn-modal-input:focus {
    border-color: rgba(233,69,96,0.5);
    outline: none;
}

.dn-modal-actions {
    display: flex; gap: 10px; justify-content: flex-end;
}

.dn-modal-btn {
    padding: 9px 20px;
    border: none; border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: white;
    cursor: pointer;
    transition: all 0.25s;
    display: flex; align-items: center; gap: 6px;
}

.dn-modal-btn:hover { transform: translateY(-2px); }

.dn-modal-btn--confirm {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}
.dn-modal-btn--cancel {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
}
.dn-modal-btn--cancel:hover {
    background: rgba(255,255,255,0.12);
}

/* Template modal (new style) */
.dn-template-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 20000;
    backdrop-filter: blur(6px);
    animation: devnewFadeSlide 0.25s ease;
}

.dn-template-modal {
    background: linear-gradient(145deg, #16213e, #1a1a2e);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 22px;
    padding: 28px;
    max-width: 800px; width: 95%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 30px rgba(233,69,96,0.1);
    animation: devnewCardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dn-template-modal::-webkit-scrollbar { width: 5px; }
.dn-template-modal::-webkit-scrollbar-track { background: transparent; }
.dn-template-modal::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.3); border-radius: 10px; }

.dn-template-modal h3 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem; color: white;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}

.dn-template-modal h3 i { color: #e94560; }

.dn-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 14px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 4px;
}

.dn-template-grid::-webkit-scrollbar { width: 4px; }
.dn-template-grid::-webkit-scrollbar-track { background: transparent; }
.dn-template-grid::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.2); border-radius: 10px; }

.dn-template-card {
    background: linear-gradient(135deg, rgba(15,52,96,0.4), rgba(26,26,46,0.5));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative; overflow: hidden;
}

.dn-template-card:hover {
    border-color: rgba(233,69,96,0.4);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.dn-template-card img {
    width: 60px; height: 60px;
    object-fit: contain;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.dn-template-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: white;
}

.dn-template-card-types {
    font-family: 'Minecraft', monospace;
    font-size: 0.45rem; color: rgba(233,69,96,0.6);
    margin-top: 2px;
}

/* ===== Back to Play Button ===== */
.dn-back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: rgba(243,156,18,0.15);
    border: 1px solid rgba(243,156,18,0.3);
    border-radius: 30px;
    color: #f39c12;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.25s;
    margin-bottom: 16px;
}

.dn-back-btn:hover {
    background: rgba(243,156,18,0.25);
    border-color: rgba(243,156,18,0.5);
    transform: translateX(-3px);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .dn-main { flex-direction: column; }
    .dn-editor, .dn-list { min-width: 100%; }
    .dn-hero-stats { flex-wrap: wrap; }
    .dn-toolbar { gap: 6px; }
    .dn-card { padding: 8px 10px; }
    .dn-type-item { width: 65px; }
    .dn-type-item img { width: 36px; height: 36px; }
}

/* ==================== НОВАЯ ТАБЛИЦА ЛИДЕРОВ (СТИЛЬ РЕЖИМА РАЗРАБОТЧИКА) ==================== */

/* Back button */
.lbn-back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: #e67e22;
    border: none; border-radius: 30px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 16px;
}
.lbn-back-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(230,126,34,0.4); }

/* Header */
.lbn-header {
    display: flex; align-items: center; gap: 20px;
    padding: 20px 28px;
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    margin-bottom: 20px;
}
.lbn-header-icon {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(233,69,96,0.3);
    flex-shrink: 0;
}
.lbn-header-text h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1rem; color: white;
    margin-bottom: 2px;
    letter-spacing: 1px;
}
.lbn-header-text p {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: rgba(255,255,255,0.4);
}

/* Toolbar (tab switcher) */
.lbn-toolbar {
    display: flex; gap: 4px; margin-bottom: 20px;
    background: #1a1a2e;
    padding: 4px;
    border-radius: 12px;
    border: 2px solid #e94560;
    flex-wrap: wrap;
}
.lbn-tab {
    flex: 1;
    padding: 8px 16px;
    border: none; border-radius: 10px;
    background: transparent;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.3s;
}
.lbn-tab:hover { color: rgba(255,255,255,0.7); background: rgba(233, 69, 96, 0.1); }
.lbn-tab.active { color: white; box-shadow: 0 2px 12px rgba(233, 69, 96, 0.4); }
.lbn-tab[data-lbn-tab="speed"].active { background: linear-gradient(135deg, #f39c12, #e67e22); }
.lbn-tab[data-lbn-tab="speed"]:not(.active) { background: rgba(243,156,18,0.15); border: 1px solid rgba(243,156,18,0.3); }
.lbn-tab[data-lbn-tab="check"].active { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.lbn-tab[data-lbn-tab="check"]:not(.active) { background: rgba(46,204,113,0.15); border: 1px solid rgba(46,204,113,0.3); }
.lbn-tab[data-lbn-tab="single"].active { background: linear-gradient(135deg, #e94560, #c62a47); }
.lbn-tab[data-lbn-tab="single"]:not(.active) { background: rgba(233,69,96,0.15); border: 1px solid rgba(233,69,96,0.3); }

/* Tab content */
.lbn-tab-content { display: none; }
.lbn-tab-content.active { display: block; }

/* Mode block */
.lbn-mode-block {
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(233, 69, 96, 0.2);
    transition: border-color 0.3s;
}
.lbn-mode-block:hover { border-color: rgba(233, 69, 96, 0.35); }

/* Stats row */
.lbn-stats-row {
    display: flex; gap: 10px; margin-bottom: 16px;
    flex-wrap: wrap;
}
.lbn-stat-card {
    flex: 1; min-width: 100px;
    text-align: center;
    padding: 14px 10px;
    border-radius: 15px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid rgba(233, 69, 96, 0.3);
    transition: all 0.3s;
}
.lbn-stat-card:hover { transform: translateY(-3px); border-color: #e94560; box-shadow: 0 5px 20px rgba(233, 69, 96, 0.2); }
.lbn-stat-card--rounds { border-color: rgba(99,144,240,0.4); }
.lbn-stat-card--rounds:hover { box-shadow: 0 5px 20px rgba(99,144,240,0.2); border-color: #6390f0; }
.lbn-stat-card--perfect { border-color: rgba(46,204,113,0.4); }
.lbn-stat-card--perfect:hover { box-shadow: 0 5px 20px rgba(46,204,113,0.2); border-color: #2ecc71; }
.lbn-stat-card--best { border-color: rgba(255,215,0,0.4); }
.lbn-stat-card--best:hover { box-shadow: 0 5px 20px rgba(255,215,0,0.2); border-color: #ffd700; }
.lbn-stat-icon { font-size: 1.1rem; margin-bottom: 6px; }
.lbn-stat-card--rounds .lbn-stat-icon { color: #6390f0; }
.lbn-stat-card--perfect .lbn-stat-icon { color: #2ecc71; }
.lbn-stat-card--best .lbn-stat-icon { color: #ffd700; }
.lbn-stat-value {
    font-family: 'Minecraft', monospace;
    font-size: 1rem; color: white; font-weight: bold;
}
.lbn-stat-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem; color: rgba(255,255,255,0.4);
    margin-top: 3px;
}

/* Category */
.lbn-category {
    background: #1a1a2e;
    border: 2px solid rgba(233, 69, 96, 0.3);
    border-radius: 15px;
    padding: 16px;
    margin-bottom: 14px;
    transition: all 0.3s;
}
.lbn-category:last-child { margin-bottom: 0; }
.lbn-category:hover { border-color: #e94560; box-shadow: 0 5px 20px rgba(233, 69, 96, 0.15); }
.lbn-category-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e94560;
}
.lbn-category-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem; color: #e94560; font-weight: bold;
    display: flex; align-items: center; gap: 8px;
    letter-spacing: 1px;
}
.lbn-category-label i { color: #e94560; }
.lbn-category-count {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.35);
}

/* Podium */
.lbn-podium {
    display: flex; justify-content: center; align-items: flex-end;
    gap: 12px; margin-bottom: 16px; padding: 10px 0 0;
}
.lbn-podium-item {
    text-align: center;
    padding: 14px 10px 10px;
    border-radius: 16px 16px 0 0;
    min-width: 80px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    transition: all 0.3s;
}
.lbn-podium-item:hover { transform: translateY(-4px); }
.lbn-podium-first {
    border: 2px solid rgba(255,215,0,0.5); border-bottom: none;
    padding-top: 18px; order: 2;
}
.lbn-podium-first:hover { box-shadow: 0 5px 20px rgba(255,215,0,0.2); border-color: #ffd700; }
.lbn-podium-second {
    border: 2px solid rgba(192,192,192,0.4); border-bottom: none;
    order: 1;
}
.lbn-podium-second:hover { box-shadow: 0 5px 20px rgba(192,192,192,0.15); border-color: #c0c0c0; }
.lbn-podium-third {
    border: 2px solid rgba(205,127,50,0.4); border-bottom: none;
    order: 3;
}
.lbn-podium-third:hover { box-shadow: 0 5px 20px rgba(205,127,50,0.15); border-color: #cd7f32; }
.lbn-podium-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    margin: 0 auto 6px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem; font-weight: bold; color: white;
    border: 2px solid rgba(233,69,96,0.3);
}
.lbn-podium-first .lbn-podium-avatar { background: linear-gradient(135deg, #ffd700, #ffaa00); box-shadow: 0 0 10px rgba(255,215,0,0.4); border-color: #ffd700; }
.lbn-podium-second .lbn-podium-avatar { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); border-color: #c0c0c0; }
.lbn-podium-third .lbn-podium-avatar { background: linear-gradient(135deg, #cd7f32, #b87333); border-color: #cd7f32; }
.lbn-podium-medal { font-size: 1.3rem; margin-bottom: 4px; }
.lbn-podium-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: white; font-weight: bold;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px;
    letter-spacing: 0.5px;
}
.lbn-podium-score {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem; color: #e94560; font-weight: bold;
}

/* Player rows */
.lbn-rows { display: flex; flex-direction: column; gap: 6px; }
.lbn-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: all 0.3s;
}
.lbn-row:hover {
    background: rgba(233, 69, 96, 0.08);
    border-color: rgba(233, 69, 96, 0.2);
    transform: translateX(3px);
}
.lbn-medal { font-size: 1rem; min-width: 28px; text-align: center; }
.lbn-rank {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem; color: rgba(255,255,255,0.35);
    min-width: 28px; text-align: center;
}
.lbn-row-info { flex: 1; min-width: 0; }
.lbn-row-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem; color: white; display: block;
}
.lbn-row-meta {
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem; color: rgba(255,255,255,0.3);
    display: block; margin-top: 2px;
}
.lbn-row-score {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem; color: #e94560; font-weight: bold;
}

/* Best player highlight */
.lbn-best {
    margin-top: 12px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem; color: #ffd700;
    display: flex; align-items: center; gap: 6px;
}
.lbn-best:hover { border-color: #ffd700; box-shadow: 0 3px 12px rgba(255,215,0,0.2); }
.lbn-best i { color: #ffd700; }

/* Empty state */
.lbn-empty {
    text-align: center;
    padding: 50px 20px;
    color: rgba(255,255,255,0.3);
    background: rgba(15, 52, 96, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px dashed rgba(233, 69, 96, 0.3);
}
.lbn-empty i { font-size: 2rem; color: #e94560; margin-bottom: 12px; display: block; }
.lbn-empty span {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem; display: block;
}
.lbn-empty-sub {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem; color: rgba(255,255,255,0.2); display: block; margin-top: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .lbn-stats-row { flex-direction: column; }
    .lbn-podium { flex-wrap: wrap; }
    .lbn-toolbar { justify-content: center; }
}

/* ============================================
   ИСПРАВЛЕНИЯ ХАРДКОДИРОВАННЫХ ШИРИН
   ============================================ */
.completion-single {
    max-width: 95vw;
}

.reveal-pokemon-container img {
    width: 360px;
    height: 360px;
    max-width: 90vw;
    max-height: 90vw;
    object-fit: contain;
}

/* ============================================
   ПЛАНШЕТЫ (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .menu-header {
        padding: 30px 20px;
        border-radius: 40px;
    }

    .menu-header h1 {
        font-size: 1.8rem;
    }

    .tab-btn {
        padding: 10px 25px;
        font-size: 0.8rem;
    }

    .tab-content {
        padding: 20px;
    }

    .pres-card {
        padding: 30px;
        gap: 30px;
    }

    .pres-image-area {
        min-width: 300px;
    }

    .pres-pokemon-name {
        font-size: 2.5rem;
    }

    .pres-description {
        font-size: 1.1rem;
    }

    .filter-buttons {
        flex-wrap: wrap;
    }

    .help-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
        flex: 0 0 35% !important;
        max-width: 35% !important;
        min-width: 220px !important;
    }

    .completion-single {
        width: 550px !important;
    }

    .dn-editor {
        min-width: 280px;
    }

    .editor-panel {
        min-width: 280px !important;
    }

    .custom-notification {
        max-width: 300px;
        bottom: 20px;
        right: 20px;
    }
}

/* ============================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    body {
        padding: 6px;
        font-size: 14px;
    }

    .menu-header {
        padding: 20px 12px;
        margin-bottom: 30px;
        border-radius: 30px;
    }

    .menu-header h1 {
        font-size: 1.1rem;
    }

    .tab-btn {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    .tab-content {
        padding: 12px;
    }

    /* Фильтры */
    .filter-section {
        padding: 8px;
        margin-bottom: 12px;
    }

    .filter-buttons {
        gap: 6px;
    }

    .filter-toggle {
        padding: 5px 10px;
        font-size: 0.55rem;
    }

    .filter-gen-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .filter-types-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Модальные окна */
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 15px !important;
    }

    .modal-large {
        max-height: 85vh;
    }

    .modal-two-columns {
        flex-direction: column !important;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .modal-filters {
        max-height: 28vh;
        flex: none;
        max-width: 100%;
        overflow-y: auto;
        padding: 10px;
    }

    .modal-filters .filter-section {
        margin-bottom: 8px;
        padding: 8px;
    }

    .modal-filters .filter-title {
        margin-bottom: 6px;
        font-size: 0.6rem;
    }

    .filter-type-icon {
        width: 18px;
        height: 18px;
        object-fit: contain;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
        border-radius: 3px;
        vertical-align: middle;
        margin-right: 4px;
    }

    .filter-tags {
        gap: 6px;
    }

    .filter-tag {
        padding: 4px 8px;
    }

    .modal-results {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 10px;
    }

    .modal-results .filter-section {
        margin-bottom: 4px;
        padding: 6px 8px;
    }

    .modal-results .filter-title {
        margin-bottom: 2px;
    }

    .pokemon-list-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .completion-single {
        width: 95vw !important;
        padding: 15px !important;
        max-height: 80vh;
    }

    .completion-trophy {
        font-size: 2rem;
    }

    .exit-confirm-modal,
    .clear-random-modal,
    .mode-setup-modal {
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* Презентация */
    .pres-card {
        padding: 15px;
        gap: 15px;
        border-radius: 16px;
    }

    .pres-image-area {
        min-width: auto !important;
    }

    .pres-pokemon-name {
        font-size: 1.2rem;
    }

    .pres-description {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .reveal-btn {
        padding: 8px 16px;
        font-size: 0.7rem;
    }

    .pres-nav {
        gap: 10px;
    }

    .pres-nav-btn {
        padding: 6px 14px;
        font-size: 0.65rem;
    }

    /* Fullscreen presentation */
    .fullscreen-presentation .pres-card {
        padding: 12px;
        gap: 12px;
    }

    .fullscreen-presentation .pres-pokemon-name {
        font-size: 1.1rem;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-content {
        min-width: 0 !important;
        flex-direction: column !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card-container {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        gap: 8px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-info-area {
        text-align: center !important;
        order: 1 !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-image-area {
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-image-area img {
        max-height: 15vh !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-pokemon-name {
        text-align: center !important;
        font-size: 1rem !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-description {
        font-size: 0.5rem !important;
        line-height: 1.3 !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        display: block !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar {
        flex: 1 1 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 16px !important;
        padding: 12px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-section {
        overflow: visible !important;
        flex: none !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-section.section-active {
        flex: none !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar #singleMainContent,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar #singleExtraContent {
        flex: none !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-types-grid,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-grid {
        flex: none !important;
        min-height: auto !important;
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-type-btn,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-btn {
        padding: 6px 2px !important;
        gap: 3px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-type-btn img,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-btn img {
        width: 32px !important;
        height: 32px !important;
    }

    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-type-btn span,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) #gameSidebar .types-game-real-btn span {
        font-size: 0.4rem !important;
    }

    /* Side-by-side: stack on mobile */
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-card {
        flex-direction: column !important;
    }

    /* Reveal типов */
    .type-reveal-overlay .reveal-title {
        font-size: 1.2rem !important;
        margin-bottom: 40px !important;
    }

    .type-reveal-overlay .reveal-title.shrink {
        margin-bottom: 10px !important;
    }

    .type-reveal-overlay .reveal-types-row {
        transform: scale(1) !important;
        gap: 15px !important;
    }

    .type-reveal-overlay .reveal-types-row.shrink {
        transform: scale(0.6) !important;
    }

    .type-reveal-overlay .reveal-type-item {
        padding: 12px 18px !important;
        gap: 8px !important;
    }

    .type-reveal-overlay .reveal-type-item img {
        width: 50px !important;
        height: 50px !important;
    }

    .type-reveal-overlay .reveal-type-item span {
        font-size: 0.7rem !important;
    }

    .reveal-pokemon-name {
        font-size: 1rem;
    }

    .reveal-next-btn {
        font-size: 0.9rem;
        padding: 10px 24px;
    }

    /* Типы */
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #devMode .type-icons-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #devMode .type-icon-item {
        width: 55px !important;
    }

    #devMode .type-icon-item img {
        width: 30px !important;
        height: 30px !important;
    }

    /* Dev mode */
    .editor-panel {
        min-width: 0 !important;
    }

    .slides-list-panel {
        min-width: 0 !important;
    }

    .dn-editor {
        min-width: 0 !important;
    }

    .dn-list {
        min-width: 0 !important;
    }

    .dn-upload {
        width: 140px !important;
        min-height: 140px !important;
    }

    .dn-card {
        padding: 10px !important;
    }

    .dn-type-item {
        width: 45px !important;
    }

    .dn-hero-stats {
        gap: 8px !important;
    }

    /* Games grid */
    .games-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .game-card {
        padding: 12px !important;
    }

    /* Help tab */
    .help-cards {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .help-card {
        padding: 20px 14px 18px !important;
    }

    .help-form {
        max-width: 100% !important;
        padding: 0 8px;
    }

    /* Уведомления */
    .custom-notification {
        left: 10px;
        right: 10px;
        bottom: 15px;
        max-width: none;
        font-size: 0.7rem;
        padding: 12px 16px;
    }

    /* Database tab */
    .db-header {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .db-search-row {
        flex-direction: column !important;
    }

    .db-cards {
        grid-template-columns: 1fr !important;
    }
    .db-pill-name {
        display: none;
    }
    .db-type-pills .db-pill {
        padding: 4px;
        aspect-ratio: 1;
    }
    .db-type-pills {
        grid-template-columns: repeat(9, 1fr);
    }

    .db-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .db-table {
        min-width: 600px;
    }

    /* Leaderboard */
    .lb-podium {
        gap: 8px !important;
    }

    .lb-podium-item {
        padding: 12px 8px !important;
    }

    .lb-podium-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .lb-scroll-row {
        gap: 8px !important;
    }
    .lb-scroll-card {
        flex: 0 0 100px !important;
        padding: 10px 6px !important;
    }

    .lb-stats-row {
        flex-direction: column !important;
    }

    .lbn-stats-row {
        flex-direction: column !important;
    }

    .lbn-podium {
        gap: 8px !important;
    }

    /* Speed timer */
    .speed-timer-value {
        font-size: 0.75rem !important;
        padding: 3px 10px !important;
    }

    /* Music manager */
    .bg-music-manager {
        flex-direction: column;
    }

    .music-item {
        flex-wrap: wrap;
    }

    /* Game selector */
    .game-selector {
        padding: 8px;
        gap: 6px;
    }

    .game-selector select {
        font-size: 0.65rem;
        padding: 6px 8px;
    }
}

/* ===== Custom Number Input +/- ===== */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

.num-input-group {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(233, 69, 96, 0.4);
    background: rgba(15, 52, 96, 0.6);
}

.num-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 32px;
    background: rgba(233, 69, 96, 0.25);
    border: none;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
    flex-shrink: 0;
}

.num-btn:hover {
    background: rgba(233, 69, 96, 0.5);
}

.num-btn:active {
    background: rgba(233, 69, 96, 0.7);
    transform: scale(0.92);
}

.num-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.num-input-group input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    -webkit-appearance: textfield;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(15, 52, 96, 0.6);
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    text-align: center;
    outline: none;
    width: 50px;
    height: 32px;
    padding: 0 4px;
}

.num-input-group input[type="number"]::-webkit-inner-spin-button,
.num-input-group input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.num-input-group input[type="number"]:focus {
    background: rgba(20, 60, 110, 0.8);
}

/* Stat inputs variant */
.num-input-group.help-stat-num input[type="number"] {
    width: 40px;
    font-size: 0.6rem;
    background: rgba(10, 30, 60, 0.5);
}

.num-input-group.help-stat-num .num-btn {
    width: 24px;
    height: 26px;
    font-size: 0.7rem;
    background: rgba(233, 69, 96, 0.15);
}

/* Модальное окно ввода (prompt) */
.prompt-modal {
    display: none;
    position: fixed;
    z-index: 20001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
    font-family: 'Minecraft', monospace;
}

.prompt-modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border: 2px solid #e94560;
    border-radius: 25px;
    width: 400px;
    max-width: 90%;
    color: white;
    text-align: center;
    box-shadow: 0 0 50px rgba(233,69,96,0.4);
    animation: modalPopCenter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.prompt-modal-content h3 {
    color: #e94560;
    margin-bottom: 15px;
    font-size: 1rem;
    letter-spacing: 1px;
}

.prompt-modal-content input {
    width: 100%;
    padding: 10px 15px;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    margin-bottom: 5px;
    box-sizing: border-box;
}

.prompt-modal-content input:focus {
    border-color: #ff6b81;
    box-shadow: 0 0 12px rgba(233,69,96,0.3);
}

.prompt-modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.prompt-modal-buttons button {
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.prompt-modal-buttons button:first-child {
    background: #2ecc71;
    color: white;
}

.prompt-modal-buttons button:first-child:hover {
    background: #27ae60;
    transform: scale(1.05);
}

.prompt-modal-buttons button:last-child {
    background: #2c3e50;
    color: white;
}

.prompt-modal-buttons button:last-child:hover {
    background: #1a252f;
    transform: scale(1.05);
}

/* Подрежим "Усложняющийся" */
.progressive-mode-toggle {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(233,69,96,0.2);
}

.progressive-toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.progressive-toggle-label input[type="checkbox"] {
    display: none;
}

.progressive-toggle-slider {
    width: 44px;
    height: 24px;
    background: #2c3e50;
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
}

.progressive-toggle-slider::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
}

.progressive-toggle-label input:checked + .progressive-toggle-slider {
    background: #2ecc71;
}

.progressive-toggle-label input:checked + .progressive-toggle-slider::after {
    transform: translateX(20px);
}

.progressive-toggle-text {
    display: flex;
    flex-direction: column;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: white;
    line-height: 1.4;
}

.progressive-toggle-text i {
    color: #2ecc71;
    margin-right: 4px;
}

.progressive-toggle-hint {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
}

.progressive-guessed-count {
    margin-top: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 8px;
}

.progressive-guessed-count strong {
    color: #2ecc71;
}

.progressive-reset-btn {
    background: rgba(231,76,60,0.2);
    border: 1px solid rgba(231,76,60,0.3);
    color: #e74c3c;
    padding: 3px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    transition: all 0.2s;
}

.progressive-reset-btn:hover {
    background: rgba(231,76,60,0.4);
}

.progressive-view-btn {
    background: rgba(52,152,219,0.2);
    border: 1px solid rgba(52,152,219,0.3);
    color: #3498db;
    padding: 3px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    transition: all 0.2s;
}

.progressive-view-btn:hover {
    background: rgba(52,152,219,0.4);
}

.guessed-pokemon-modal {
    max-width: 90vw !important;
    width: 700px !important;
}

.guessed-pokemon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0;
    margin: 15px 0;
}

.guessed-pokemon-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    transition: all 0.2s;
}

.guessed-pokemon-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(233,69,96,0.3);
    transform: translateY(-2px);
}

.guessed-pokemon-card img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.guessed-pokemon-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: white;
    margin-top: 6px;
    font-weight: bold;
}

.guessed-pokemon-types {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.guessed-pokemon-types .type-chip {
    font-size: 0.4rem;
    padding: 2px 6px;
    border-radius: 6px;
}

.guessed-pokemon-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0;
    margin: 15px 0;
}

.guessed-round-group {
    margin-bottom: 15px;
}

.guessed-round-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    padding: 5px 10px;
    border-bottom: 1px solid rgba(233,69,96,0.2);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================
   Лекция: стили
   ============================================ */

.lecture-container {
    max-width: 900px;
    margin: 0 auto;
}

.lecture-hero {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(233,69,96,0.15), rgba(15,52,96,0.3));
    border-radius: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(233,69,96,0.3);
}

.lecture-hero-icon {
    font-size: 3rem;
    color: #e94560;
    margin-bottom: 15px;
}

.lecture-hero h2 {
    font-size: 1.3rem;
    color: white;
    margin-bottom: 10px;
}

.lecture-hero p {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
}

.lecture-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.lecture-meta span {
    color: rgba(255,255,255,0.6);
    font-size: 0.7rem;
    background: rgba(0,0,0,0.3);
    padding: 5px 12px;
    border-radius: 20px;
}

.lecture-meta i {
    color: #e94560;
    margin-right: 5px;
}

/* Навигация по блокам */
.lecture-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    justify-content: center;
}

.lecture-nav-btn {
    background: rgba(15,52,96,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s;
}

.lecture-nav-btn:hover {
    border-color: #e94560;
    transform: translateY(-2px);
}

.lecture-nav-btn.active {
    background: #e94560;
    border-color: #fff;
}

/* Блоки лекции */
.lecture-block {
    background: rgba(15,52,96,0.4);
    border-radius: 25px;
    margin-bottom: 20px;
    border: 1px solid rgba(233,69,96,0.2);
    overflow: hidden;
}

.lecture-block-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 25px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(233,69,96,0.2);
}

.lecture-block-num {
    width: 40px;
    height: 40px;
    background: #e94560;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    flex-shrink: 0;
}

.lecture-block-header h3 {
    font-size: 0.9rem;
    color: white;
    margin: 0;
}

.lecture-time {
    color: rgba(255,255,255,0.5);
    font-size: 0.65rem;
}

.lecture-time i {
    color: #e94560;
    margin-right: 4px;
}

.lecture-block-content {
    padding: 20px 25px;
}

/* Слайды */
.lecture-slide {
    background: rgba(0,0,0,0.2);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.05);
}

.lecture-slide:last-child {
    margin-bottom: 0;
}

.lecture-slide-title {
    font-size: 0.8rem;
    color: #e94560;
    margin-bottom: 12px;
    font-weight: bold;
}

.lecture-slide-title i {
    margin-right: 6px;
}

.lecture-slide p {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.lecture-slide p:last-child {
    margin-bottom: 0;
}

.lecture-slide ul {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    line-height: 1.6;
    margin: 10px 0;
    padding-left: 20px;
}

.lecture-slide li {
    margin-bottom: 5px;
}

/* Таблицы */
.lecture-table-wrap {
    overflow-x: auto;
    margin: 12px 0;
}

.lecture-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}

.lecture-table th {
    background: rgba(233,69,96,0.2);
    color: white;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid rgba(233,69,96,0.4);
}

.lecture-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}

.lecture-table tbody tr:hover {
    background: rgba(233,69,96,0.1);
}

/* Бейджи типов */
.type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

.type-fire { background: linear-gradient(135deg, #F08030, #DD4A1C); }
.type-water { background: linear-gradient(135deg, #6890F0, #4070C8); }
.type-grass { background: linear-gradient(135deg, #78C850, #50A030); }
.type-electric { background: linear-gradient(135deg, #F8D030, #E0A000); }
.type-ice { background: linear-gradient(135deg, #98D8D8, #70B8B8); }
.type-fighting { background: linear-gradient(135deg, #C03028, #982820); }
.type-poison { background: linear-gradient(135deg, #A040A0, #803080); }
.type-ground { background: linear-gradient(135deg, #E0C068, #C0A050); }
.type-flying { background: linear-gradient(135deg, #A890F0, #8870D0); }
.type-psychic { background: linear-gradient(135deg, #F85888, #D83868); }
.type-bug { background: linear-gradient(135deg, #A8B820, #889818); }
.type-rock { background: linear-gradient(135deg, #B8A038, #988028); }
.type-ghost { background: linear-gradient(135deg, #705898, #584078); }
.type-dragon { background: linear-gradient(135deg, #7038F8, #5028C8); }
.type-dark { background: linear-gradient(135deg, #705848, #584038); }
.type-steel { background: linear-gradient(135deg, #B8B8D0, #9898B0); }
.type-fairy { background: linear-gradient(135deg, #EE99AC, #CC7788); }

/* Цитаты */
.lecture-quote {
    background: linear-gradient(135deg, rgba(233,69,96,0.15), rgba(233,69,96,0.05));
    border-left: 4px solid #e94560;
    padding: 15px 20px;
    border-radius: 0 12px 12px 0;
    margin: 15px 0;
    color: rgba(255,255,255,0.9);
    font-size: 0.75rem;
    line-height: 1.6;
    font-style: italic;
}

.lecture-quote-main {
    background: linear-gradient(135deg, rgba(233,69,96,0.25), rgba(233,69,96,0.1));
    border-left-width: 6px;
    font-size: 0.85rem;
    padding: 20px 25px;
}

/* Карточки */
.lecture-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.lecture-card {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(233,69,96,0.2);
}

.lecture-card-title {
    color: #e94560;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.lecture-card p {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

.lecture-card-info {
    background: rgba(15,52,96,0.4);
}

.lecture-card-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lecture-card-info li {
    padding: 4px 0;
    color: rgba(255,255,255,0.7);
    font-size: 0.7rem;
}

.lecture-card-info li::before {
    content: '•';
    color: #e94560;
    margin-right: 8px;
}

/* Интерактив */
.lecture-interactive {
    background: linear-gradient(135deg, rgba(15,52,96,0.5), rgba(0,0,0,0.3));
    border: 2px solid rgba(233,69,96,0.4);
    border-radius: 20px;
    overflow: hidden;
    margin: 15px 0;
}

.lecture-interactive-header {
    background: rgba(233,69,96,0.2);
    padding: 12px 20px;
    color: #e94560;
    font-size: 0.8rem;
    font-weight: bold;
    border-bottom: 1px solid rgba(233,69,96,0.3);
}

.lecture-interactive-header i {
    margin-right: 8px;
}

.lecture-interactive-content {
    padding: 20px;
}

.lecture-interactive-content p {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    line-height: 1.6;
}

.lecture-interactive-content ul {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    margin: 10px 0;
    padding-left: 20px;
}

.lecture-interactive-answer {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
    border: 1px solid rgba(76,175,80,0.3);
}

.lecture-interactive-answer-title {
    color: #4CAF50;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.lecture-interactive-answer-title i {
    margin-right: 6px;
}

.lecture-interactive-answer p {
    color: rgba(255,255,255,0.8);
}

.lecture-interactive-answer ul {
    color: rgba(255,255,255,0.8);
}

.lecture-interactive-small {
    border-color: rgba(255,193,7,0.4);
}

.lecture-interactive-small .lecture-interactive-header {
    background: rgba(255,193,7,0.15);
    color: #FFC107;
    border-bottom-color: rgba(255,193,7,0.3);
}

/* Да/Нет бейджи */
.lecture-no {
    background: rgba(76,175,80,0.2);
    color: #4CAF50;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.65rem;
}

.lecture-yes {
    background: rgba(255,193,7,0.2);
    color: #FFC107;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.65rem;
}

/* Финальный слайд */
.lecture-slide-final {
    text-align: center;
    background: linear-gradient(135deg, rgba(233,69,96,0.1), rgba(15,52,96,0.3));
    border: 1px solid rgba(233,69,96,0.3);
}

/* Дополнительные материалы */
.lecture-extras {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(233,69,96,0.2);
}

.lecture-extras h3 {
    color: white;
    font-size: 0.9rem;
    margin-bottom: 15px;
    text-align: center;
}

.lecture-extras h3 i {
    color: #e94560;
    margin-right: 8px;
}

/* Скрытие блоков при фильтрации */
.lecture-block.hidden {
    display: none;
}

/* ------------------- Помощь с хостингом (золотая тема) ------------------- */
.hosting-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 25px;
    background: rgba(30, 25, 10, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 200, 50, 0.2);
    border-radius: 20px;
    margin-bottom: 24px;
}

.hosting-hero-icon {
    font-size: 1.2rem;
    color: #f5c842;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(245, 200, 66, 0.4));
}

.hosting-hero h2 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    color: #f5c842;
    margin: 0;
}

.hosting-hero p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
    margin: 0 0 0 auto;
    white-space: nowrap;
}

.hosting-donate-card {
    background: linear-gradient(135deg, rgba(30, 25, 10, 0.7), rgba(20, 18, 8, 0.8));
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 200, 50, 0.5);
    border-radius: 20px;
    padding: 35px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(245, 200, 66, 0.1);
}

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

.hosting-donate-shine {
    display: none;
}

.hosting-donate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #f5c842, transparent);
    opacity: 0.6;
}

.hosting-donate-icon {
    font-size: 2.5rem;
    color: #f5c842;
    margin-bottom: 14px;
    filter: drop-shadow(0 0 15px rgba(245, 200, 66, 0.4));
    animation: cardFloat 3s ease-in-out infinite;
}

.hosting-donate-card h3 {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    color: #f5c842;
    margin-bottom: 10px;
}

.hosting-donate-card p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

.hosting-donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: linear-gradient(135deg, #f5c842, #d4a520);
    border: none;
    border-radius: 50px;
    color: #1a1a2e;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(245, 200, 66, 0.3);
}

.hosting-donate-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 30px rgba(245, 200, 66, 0.5);
    color: #1a1a2e;
}

.hosting-donate-btn:active {
    transform: translateY(0) scale(0.98);
}

.hosting-donate-note {
    margin-top: 14px;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.hosting-donate-note i {
    color: rgba(255, 200, 50, 0.4);
}

/* Адаптив для хостинга */
@media (max-width: 768px) {
    .hosting-hero {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .hosting-hero p {
        margin: 0;
    }
    .hosting-donate-card {
        padding: 25px 18px;
    }
    .hosting-donate-btn {
        padding: 12px 28px;
        font-size: 0.7rem;
    }
}

/* Адаптив */
@media (max-width: 768px) {
    .lecture-hero h2 {
        font-size: 1rem;
    }
    
    .lecture-meta {
        flex-direction: column;
        align-items: center;
    }
    
    .lecture-nav {
        gap: 6px;
    }
    
    .lecture-nav-btn {
        padding: 6px 12px;
        font-size: 0.6rem;
    }
    
    .lecture-block-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .lecture-cards-row {
        grid-template-columns: 1fr;
    }
    
    .lecture-table {
        font-size: 0.6rem;
    }
    
    .lecture-table th,
    .lecture-table td {
        padding: 6px 8px;
    }
}

/* ------------------- Авторизация ------------------- */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 40%, rgba(233, 69, 96, 0.08) 0%, transparent 50%),
                linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    z-index: 50000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInUp 0.6s ease;
}

.auth-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(15, 52, 96, 0.95));
    border: 2px solid #e94560;
    border-radius: 30px;
    padding: 24px 35px 30px 35px;
    width: 420px;
    max-width: 92%;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(233, 69, 96, 0.2);
    animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.auth-card-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 12px;
}

.auth-lang-switch {
    display: inline-flex;
    background: rgba(10, 10, 26, 0.85);
    border: 1.5px solid rgba(233, 69, 96, 0.45);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
    transition: all 0.2s ease;
}

.auth-lang-switch:hover {
    border-color: rgba(233, 69, 96, 0.85);
    box-shadow: 0 3px 15px rgba(233, 69, 96, 0.3);
}

.auth-lang-switch .lang-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: none;
    padding: 6px 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.auth-lang-switch .lang-btn:hover {
    color: #fff;
    background: rgba(233, 69, 96, 0.2);
}

.auth-lang-switch .lang-btn.active {
    background: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

.auth-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -6px;
    margin-bottom: 12px;
}

.auth-forgot-link {
    color: #e94560;
    font-size: 0.62rem;
    text-decoration: none;
    transition: opacity 0.2s;
    font-family: 'Minecraft', monospace;
}

.auth-forgot-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.auth-subtitle {
    color: #aaa;
    font-size: 0.65rem;
    margin-bottom: 18px;
    line-height: 1.4;
}

.auth-back-link {
    margin-top: 16px;
    color: #aaa;
    font-size: 0.65rem;
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
    text-align: center;
}

.auth-back-link:hover {
    color: #e94560;
}

.auth-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    background: rgba(20, 20, 40, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-tab:hover {
    border-color: rgba(233, 69, 96, 0.5);
    color: white;
}

.auth-tab.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: #e94560;
    color: #e94560;
}

.auth-form {
    text-align: center;
}

.auth-icon {
    font-size: 2.5rem;
    color: #e94560;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 15px rgba(233, 69, 96, 0.4));
}

.auth-form h2 {
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    color: white;
    margin-bottom: 20px;
}

.auth-field {
    text-align: left;
    margin-bottom: 14px;
}

.auth-field label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
}

.auth-field label i {
    margin-right: 6px;
    color: #e94560;
    width: 14px;
    text-align: center;
}

.auth-field input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(10, 10, 30, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 12px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
}

.auth-field input:focus {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.2);
}

.auth-field input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.auth-error {
    color: #e74c3c;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    min-height: 18px;
    margin-bottom: 10px;
}

.auth-submit-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #e94560, #c62a47);
    border: none;
    border-radius: 14px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(233, 69, 96, 0.4);
}

.auth-submit-btn:active {
    transform: translateY(0);
}

.auth-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.auth-skip {
    text-align: center;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: color 0.2s;
}

.auth-skip:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* Панель пользователя */
.user-bar {
    position: relative;
    z-index: 10000;
    max-width: 1200px;
    margin: 0 auto 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background: rgba(15, 52, 96, 0.4);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 69, 96, 0.2);
}

.user-bar-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.user-bar-info i {
    color: #e94560;
    font-size: 1.1rem;
}

.user-avatar-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #e94560;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
}
.user-avatar-wrap:hover {
    border-color: #f39c12;
    box-shadow: 0 0 10px rgba(243,156,18,0.4);
}
.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-name-image {
    height: 40px;
    width: 40px;
    object-fit: contain;
    margin-left: 6px;
    vertical-align: middle;
    border-radius: 4px;
    flex-shrink: 0;
}

.admin-badge {
    background: #e94560;
    color: #fff;
    font-size: 0.55rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    padding: 0 4px;
    cursor: pointer;
    animation: badgePulse 2s infinite;
    flex-shrink: 0;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.notif-badge {
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    transition: all 0.2s;
}

.notif-badge:hover {
    background: transparent;
    opacity: 0.8;
}

.notif-badge:hover i {
    color: #ff6b81;
}

.notif-badge.has-unread {
    background: transparent;
    border: none;
    animation: badgePulse 2s infinite;
}

.notif-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e94560;
    color: #fff;
    font-size: 0.45rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    min-width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    border-radius: 50%;
    padding: 0 2px;
}

.notif-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: rgba(15, 20, 40, 0.97);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 16px;
    padding: 12px;
    min-width: 280px;
    max-width: 350px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 9999;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.notif-dropdown-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #e94560;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 8px;
}

.notif-dropdown-title i {
    margin-right: 6px;
}

.notif-item {
    padding: 8px 10px;
    border-radius: 10px;
    margin-bottom: 6px;
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.2);
    cursor: default;
}

.notif-item.unread {
    background: rgba(52, 152, 219, 0.15);
    border-color: rgba(52, 152, 219, 0.4);
}

.notif-item-header {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notif-item-header span {
    color: #3498db;
}

.notif-item-text {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
}

.notif-empty {
    text-align: center;
    color: rgba(255,255,255,0.25);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 16px 0;
}

.notif-item-user-reply {
    background: rgba(233, 69, 96, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.6);
}

.notif-item-user-reply i {
    color: #e94560;
    margin-right: 4px;
}

.notif-item-user-reply b {
    color: #e94560;
}

.notif-reply-box {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.notif-reply-input {
    flex: 1;
    background: rgba(10, 10, 30, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    outline: none;
}

.notif-reply-input:focus {
    border-color: rgba(233, 69, 96, 0.5);
}

.notif-reply-send {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 8px;
    padding: 4px 10px;
    color: #e94560;
    cursor: pointer;
    transition: all 0.2s;
}

.notif-reply-send:hover {
    background: rgba(233, 69, 96, 0.4);
    color: white;
}

.user-bar-logout {
    background: rgba(231, 76, 60, 0.2);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 20px;
    color: #e74c3c;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.user-bar-logout:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
}

.guest-bar-login {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.guest-bar-login:hover {
    background: rgba(46, 204, 113, 0.3);
    border-color: #2ecc71;
}

/* ------------------- Админ-панель ------------------- */
.admin-controls {
    margin-bottom: 20px;
}

.admin-filter-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.admin-filter-btn {
    background: rgba(20, 20, 40, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 10px;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-filter-btn:hover {
    border-color: rgba(233, 69, 96, 0.5);
    color: white;
}

.admin-filter-btn.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: #e94560;
    color: #e94560;
}

.admin-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

.admin-stat b {
    margin-right: 3px;
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-item {
    background: rgba(15, 52, 96, 0.5);
    border: 1px solid rgba(233, 69, 96, 0.15);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color 0.2s;
}

.admin-item:hover {
    border-color: rgba(233, 69, 96, 0.35);
}

.admin-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.admin-item-type {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
}

.admin-item-user {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
}

.admin-item-user i { margin-right: 4px; }

.admin-item-status {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    margin-left: auto;
}

.admin-item-date {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.25);
}

.admin-item-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin-bottom: 10px;
}

.admin-item-details b {
    color: white;
}

.admin-item-actions {
    display: flex;
    gap: 8px;
}

.admin-item-actions button {
    background: rgba(20, 20, 40, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-item-actions button:hover {
    border-color: rgba(233, 69, 96, 0.5);
    color: white;
    background: rgba(233, 69, 96, 0.15);
}

.admin-delete-btn:hover {
    border-color: #e74c3c !important;
    color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.15) !important;
}

.admin-item-reply {
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
    font-family: 'Minecraft', monospace;
}

.admin-item-reply i {
    color: #3498db;
    margin-right: 4px;
}

.admin-item-user-reply {
    background: rgba(233, 69, 96, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
    font-family: 'Minecraft', monospace;
}

.admin-item-user-reply i {
    color: #e94560;
    margin-right: 4px;
}

.admin-item-user-reply b {
    color: #e94560;
}

.admin-mark-read-btn {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: 6px;
    padding: 2px 8px;
    color: #2ecc71;
    cursor: pointer;
    font-size: 0.55rem;
    margin-left: 8px;
    transition: all 0.2s;
    vertical-align: middle;
}

.admin-mark-read-btn:hover {
    background: rgba(46, 204, 113, 0.3);
    color: white;
}

.admin-sub-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.admin-sub-tab {
    background: rgba(15, 52, 96, 0.6);
    border: 2px solid rgba(233, 69, 96, 0.4);
    border-radius: 50px;
    color: rgba(255,255,255,0.7);
    padding: 8px 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-sub-tab:hover {
    border-color: rgba(233, 69, 96, 0.4);
    color: rgba(255,255,255,0.8);
}

.admin-sub-tab.active {
    background: rgba(233, 69, 96, 0.2);
    border-color: #e94560;
    color: #e94560;
}

.admin-item-reply-box {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.admin-reply-input {
    flex: 1;
    background: rgba(10, 10, 30, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 8px;
    padding: 6px 10px;
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
}

.admin-reply-input:focus {
    border-color: rgba(233, 69, 96, 0.6);
}

.admin-reply-send {
    background: rgba(233, 69, 96, 0.25);
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 8px;
    padding: 6px 12px;
    color: #e94560;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-reply-send:hover {
    background: rgba(233, 69, 96, 0.4);
    color: white;
}

@media (max-width: 480px) {
    .auth-card { padding: 22px 18px; }
    .auth-tab { font-size: 0.6rem; padding: 8px; }
    .admin-filter-btns { gap: 5px; }
    .admin-item-header { gap: 6px; }
}

/* ============================================
   ПОЛНАЯ АДАПТИВНОСТЬ ДЛЯ ТЕЛЕФОНОВ
   ============================================ */

/* --- Табы: перенос на мобильных --- */
.tabs {
    gap: 10px;
    justify-content: center;
}

.tab-btn {
    white-space: nowrap;
    flex-shrink: 1;
}

/* --- Мобильный: <=768px --- */
@media (max-width: 768px) {
    body { padding: 6px; }

    .main-menu { max-width: 100%; }

    .menu-header {
        padding: 20px 15px;
        margin-bottom: 20px;
        border-radius: 30px !important;
    }
    .menu-header h1 {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }
    .menu-header p {
        font-size: 0.6rem;
        line-height: 1.4;
    }

    .tab-btn {
        padding: 8px 16px;
        font-size: 0.65rem;
    }

    .tab-content {
        padding: 15px;
        border-radius: 20px !important;
    }

    /* Переключатель режимов — перенос */
    .mode-switcher,
    [style*="display: flex"][style*="justify-content: space-between"][style*="border-radius: 20px"] {
        flex-direction: column !important;
        align-items: stretch !important;
        border-radius: 20px !important;
        padding: 10px !important;
        gap: 10px !important;
    }
    [style*="display: flex"][style*="justify-content: space-between"][style*="border-radius: 20px"] > div {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    /* Модалки */
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 15px !important;
        border-radius: 20px !important;
    }
    .modal-two-columns {
        flex-direction: column !important;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    .modal-filters {
        max-height: 28vh;
        flex: none;
        max-width: 100%;
        overflow-y: auto;
        padding: 8px;
    }
    .modal-filters .filter-section {
        margin-bottom: 6px;
        padding: 6px;
    }
    .modal-filters .filter-title {
        margin-bottom: 4px;
        font-size: 0.55rem;
    }
    .filter-type-icon {
        width: 16px;
        height: 16px;
        margin-right: 3px;
    }
    .filter-tags {
        gap: 5px;
    }
    .filter-tag {
        padding: 3px 6px;
    }
    .modal-results {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 8px;
    }
    .modal-results .filter-section {
        margin-bottom: 3px;
        padding: 5px 6px;
    }
    .modal-results .filter-title {
        margin-bottom: 1px;
    }
    .modal-buttons {
        flex-direction: column;
        gap: 8px;
    }
    .modal-buttons button {
        width: 100%;
        padding: 12px;
    }

    .confirm-modal-content,
    .completion-modal-content,
    .exit-confirm-modal,
    .clear-random-modal,
    .mode-setup-modal {
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* Презентация */
    .pres-card {
        flex-direction: column !important;
        padding: 15px !important;
        gap: 15px !important;
    }
    .pres-image-area {
        min-width: auto !important;
        width: 100% !important;
    }
    .pres-pokemon-name {
        font-size: 1.3rem;
    }
    .pres-description {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    /* Карточки игр */
    .games-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .game-card {
        padding: 12px !important;
    }

    /* Фильтры */
    .filter-section {
        padding: 8px;
        margin-bottom: 10px;
    }
    .filter-buttons {
        gap: 6px;
    }
    .filter-toggle {
        padding: 5px 10px;
        font-size: 0.55rem;
    }
    .filter-gen-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .filter-types-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Список покемонов */
    .pokemon-list-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* Один игрок / Speed */
    .completion-single {
        width: 95vw !important;
        padding: 15px !important;
        max-height: 80vh;
    }
    .speed-timer-value {
        padding: 3px 10px !important;
        font-size: 0.75rem !important;
    }

    /* Типы */
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .reveal-type-card img {
        width: 80px;
        height: 80px;
    }
    .types-reveal-panel {
        gap: 30px;
    }

    /* Reveal покемон */
    .reveal-pokemon-container img {
        width: 180px;
        height: 180px;
    }
    .reveal-pokemon-name {
        font-size: 1rem;
    }

    /* Dev mode */
    .editor-panel,
    .slides-list-panel,
    .dn-editor,
    .dn-list {
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    .dev-main-grid {
        flex-direction: column !important;
    }
    .back-to-play-btn {
        width: 100%;
    }
    .admin-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .admin-header > div {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .game-selector {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .game-selector select {
        min-width: 0 !important;
        flex: 1 !important;
    }
    #uploadAreaDev {
        min-height: 150px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #tabDev .editor-panel > div:nth-child(2) {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    #tabDev .editor-panel > div:nth-child(2) > div {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    #typeIconsGridDev {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        flex-wrap: unset !important;
        padding: 5px !important;
    }
    #typeIconsGridDev .type-icon-item {
        width: auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        max-width: none !important;
        flex: none !important;
        justify-self: stretch !important;
        align-self: stretch !important;
    }
    #tabDev .action-buttons {
        flex-direction: column !important;
    }
    #tabDev .action-buttons button {
        width: 100%;
    }
    .dn-upload {
        width: 120px !important;
        min-height: 120px !important;
    }
    .dn-card {
        padding: 8px !important;
    }
    .dn-type-item {
        width: 40px !important;
    }
    #devMode .type-icons-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #devMode .type-icon-item {
        width: auto !important;
    }
    #devMode .type-icon-item img {
        width: 28px !important;
        height: 28px !important;
    }

    /* Помощь */
    .help-cards {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .help-card {
        padding: 15px 12px !important;
    }
    .help-form {
        max-width: 100% !important;
        padding: 0;
    }

    /* Leaderboard */
    .lbn-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .lbn-toolbar {
        flex-wrap: wrap;
        justify-content: center;
    }
    .lbn-tab {
        padding: 6px 12px;
        font-size: 0.6rem;
    }
    .lbn-stats-row {
        flex-direction: column !important;
    }
    .lbn-podium {
        gap: 8px !important;
        flex-wrap: wrap;
    }
    .lbn-podium-item {
        padding: 10px 6px !important;
        min-width: 90px;
    }
    .lbn-podium-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    .lbn-row {
        padding: 8px 10px;
        gap: 6px;
    }

    /* Database */
    .db-header {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .db-search-row {
        flex-direction: column !important;
    }
    .db-cards {
        grid-template-columns: 1fr !important;
    }
    .db-pill-name {
        display: none;
    }
    .db-type-pills .db-pill {
        padding: 3px;
        aspect-ratio: 1;
    }
    .db-type-pills {
        grid-template-columns: repeat(9, 1fr) !important;
    }
    .db-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* User bar */
    .user-bar {
        top: 8px;
        right: 8px;
        left: 8px;
        padding: 8px 12px;
    }
    .user-bar-info {
        font-size: 0.65rem;
    }

    /* Уведомления */
    .custom-notification {
        left: 8px;
        right: 8px;
        bottom: 10px;
        max-width: none;
        font-size: 0.7rem;
        padding: 10px 14px;
    }

    /* Lecture table */
    .lecture-table {
        font-size: 0.6rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .lecture-table th,
    .lecture-table td {
        padding: 5px 6px;
        white-space: nowrap;
    }

    /* Music manager */
    .bg-music-manager {
        flex-direction: column;
    }
    .music-item {
        flex-wrap: wrap;
    }

    /* Auth overlay */
    .auth-overlay {
        padding: 15px;
    }
    .auth-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        border-radius: 20px !important;
    }

    /* Game selector */
    .game-selector {
        padding: 8px;
        gap: 6px;
    }
    .game-selector select {
        font-size: 0.65rem;
        padding: 6px 8px;
    }
}

/* --- Маленькие телефоны: <=400px --- */
@media (max-width: 400px) {
    .menu-header h1 {
        font-size: 0.95rem;
    }
    .tab-btn {
        padding: 6px 10px;
        font-size: 0.58rem;
    }
    .pres-pokemon-name {
        font-size: 1.1rem;
    }
    .lbn-podium-item {
        min-width: 80px;
    }
    .reveal-pokemon-container img {
        width: 140px;
        height: 140px;
    }
}

/* ============================================
   СИСТЕМА ДРУЗЕЙ
   ============================================ */

.friends-badge,
.invites-badge {
    display: none;
    position: relative;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    transition: color 0.3s;
    z-index: 10000;
}
.friends-badge:hover,
.invites-badge:hover {
    color: #e94560;
}
.friends-badge.has-requests {
    color: #3498db;
}
.invites-badge.has-invites {
    color: #fff;
    background: #f39c12;
    border-radius: 50%;
    padding: 2px 5px;
}
.friends-badge .friends-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e94560;
    color: #fff;
    font-size: 0.5rem;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-family: 'Minecraft', monospace;
}
.invites-badge .invites-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e94560;
    color: #fff;
    font-size: 0.5rem;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-family: 'Minecraft', monospace;
}

/* Friends Dropdown */
.friends-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 340px;
    max-height: 450px;
    overflow-y: auto;
    background: #16213e;
    border: 2px solid #e94560;
    border-radius: 12px;
    padding: 12px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.friends-dropdown-title {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(233,69,96,0.3);
}
.friends-search-box {
    position: relative;
    margin-bottom: 10px;
}
.friends-search-box input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(15,52,96,0.5);
    border: 1px solid rgba(233,69,96,0.3);
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    box-sizing: border-box;
}
.friends-search-box input:focus {
    border-color: #e94560;
}
.friends-search-box input::placeholder {
    color: rgba(255,255,255,0.3);
}
.friends-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1a2e;
    border: 1px solid rgba(233,69,96,0.3);
    border-radius: 8px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 10;
    display: none;
}
.friends-search-results.has-results {
    display: block;
}
.friends-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.8);
    cursor: default;
}
.friends-search-item:last-child {
    border-bottom: none;
}
.friends-search-item button {
    background: rgba(233,69,96,0.3);
    border: 1px solid #e94560;
    border-radius: 6px;
    color: #e94560;
    padding: 3px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.2s;
}
.friends-search-item button:hover {
    background: #e94560;
    color: #fff;
}
.friends-search-item button.friend-pending {
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.4);
    cursor: default;
}
.friends-section {
    margin-top: 8px;
}
.friends-section-title {
    color: rgba(255,255,255,0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.friends-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: background 0.2s;
}
.friends-item:hover {
    background: rgba(233,69,96,0.1);
}
.friends-item .online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}
.friends-item .online-dot.online {
    background: #2ecc71;
}
.friends-item-name {
    flex: 1;
    color: rgba(255,255,255,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.friends-item-actions {
    display: flex;
    gap: 4px;
}
.friends-item-actions button {
    background: none;
    border: 1px solid rgba(233,69,96,0.3);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    padding: 2px 6px;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
}
.friends-item-actions button:hover {
    border-color: #e94560;
    color: #e94560;
}
.friends-item-actions button.invite-btn:hover {
    border-color: #f39c12;
    color: #f39c12;
}
.friends-item-actions button.accept-btn {
    border-color: #2ecc71;
    color: #2ecc71;
}
.friends-item-actions button.accept-btn:hover {
    background: #2ecc71;
    color: #fff;
}
.friends-item-actions button.reject-btn {
    border-color: #e74c3c;
    color: #e74c3c;
}
.friends-item-actions button.reject-btn:hover {
    background: #e74c3c;
    color: #fff;
}
.friends-empty {
    text-align: center;
    color: rgba(255,255,255,0.25);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 12px;
}

/* Invites Dropdown */
.invites-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: #16213e;
    border: 2px solid #f39c12;
    border-radius: 12px;
    padding: 12px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.invites-dropdown-title {
    color: #f39c12;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(243,156,18,0.3);
}
.invites-list {
    margin-bottom: 8px;
}
.invites-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(15,52,96,0.3);
    border-radius: 8px;
    margin-bottom: 6px;
}
.invites-item-info {
    flex: 1;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.8);
}
.invites-item-info .mode-label {
    color: #f39c12;
    font-size: 0.55rem;
}
.invites-item-actions {
    display: flex;
    gap: 4px;
}
.invites-item-actions button {
    background: none;
    border: 1px solid rgba(243,156,18,0.3);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    padding: 3px 8px;
    font-size: 0.55rem;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
}
.invites-item-actions button.accept-btn {
    border-color: #2ecc71;
    color: #2ecc71;
}
.invites-item-actions button.accept-btn:hover {
    background: #2ecc71;
    color: #fff;
}
.invites-item-actions button.reject-btn {
    border-color: #e74c3c;
    color: #e74c3c;
}
.invites-item-actions button.reject-btn:hover {
    background: #e74c3c;
    color: #fff;
}

/* Invite Modal */
.invite-mode-btn {
    flex: 1;
    padding: 10px;
    background: rgba(15,52,96,0.3);
    border: 2px solid rgba(233,69,96,0.2);
    border-radius: 10px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}
.invite-mode-btn:hover {
    border-color: rgba(233,69,96,0.5);
    color: rgba(255,255,255,0.9);
}
.invite-mode-btn.active {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}
.invite-setting-btn {
    padding: 8px 16px;
    background: rgba(15,52,96,0.3);
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
}
.invite-setting-btn:hover {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.9);
}
.invite-setting-btn.active {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}
.invite-send-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #e94560, #c0392b);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s;
}
.invite-send-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(233,69,96,0.4);
}

/* Waiting dots animation */
.invite-wait-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.wait-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f39c12;
    animation: waitPulse 1.4s infinite ease-in-out both;
}
.wait-dot:nth-child(1) { animation-delay: -0.32s; }
.wait-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes waitPulse {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* ============================================
   МОБИЛЬНАЯ АДАПТАЦИЯ ИГРОВОГО ИНТЕРФЕЙСА
   ============================================ */

/* --- pres-header на мобильных --- */
@media (max-width: 768px) {
    .pres-header {
        padding: 10px 12px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .pres-header h3 {
        font-size: 0.65rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }
    .pres-zoom-controls {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 4px 8px !important;
        order: 3;
        width: 100%;
        justify-content: center;
    }
    .pres-zoom-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.65rem !important;
    }
    .pres-zoom-value {
        font-size: 0.6rem !important;
        min-width: 30px !important;
    }
    .pres-volume-controls {
        margin-left: 0 !important;
        padding-left: 8px !important;
        border-left: 1px solid rgba(233,69,96,0.3) !important;
    }
    .pres-volume-slider {
        width: 100px !important;
    }
    .pres-zoom-reset {
        padding: 0 22px !important;
        font-size: 0.6rem !important;
    }
    .close-pres-btn, #closePresBtn {
        padding: 6px 16px !important;
        font-size: 0.6rem !important;
        order: 2;
        flex-shrink: 0;
    }
    /* Карточка покемона */
    .pres-card {
        padding: 12px !important;
        gap: 12px !important;
        border-radius: 20px !important;
        width: 100% !important;
        animation: none !important;
    }
    /* Пульт участника - сетка типов */
    .types-game-section {
        overflow: visible !important;
    }
    .types-game-types-grid,
    .types-game-real-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .pres-image-area {
        min-width: auto !important;
        width: 100%;
    }
    .pres-image-area img {
        max-height: 35vh !important;
    }
    .pres-pokemon-name {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
        text-align: center;
    }
    .pres-description {
        font-size: 0.6rem !important;
        line-height: 1.3 !important;
        padding: 10px !important;
    }
    .reveal-btn {
        padding: 10px 20px !important;
        font-size: 0.75rem !important;
    }
    .pres-nav {
        gap: 10px !important;
        margin-top: 20px !important;
    }
    .pres-nav-btn {
        padding: 8px 16px !important;
        font-size: 0.7rem !important;
    }
    .pres-counter {
        padding: 0 16px !important;
        font-size: 0.7rem !important;
        line-height: 36px !important;
        height: 36px !important;
    }
    .pres-content {
        padding: 12px !important;
    }
}

/* --- Маленькие телефоны --- */
@media (max-width: 480px) {
    .pres-header {
        padding: 8px 10px !important;
    }
    .pres-header h3 {
        font-size: 0.55rem !important;
    }
    .pres-zoom-controls {
        gap: 3px !important;
        padding: 3px 6px !important;
    }
    .pres-zoom-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.55rem !important;
    }
    .pres-zoom-reset {
        padding: 0 18px !important;
        font-size: 0.55rem !important;
    }
    .pres-volume-slider {
        width: 80px !important;
    }
    #closePresBtn {
        padding: 5px 10px !important;
        font-size: 0.55rem !important;
        border-radius: 20px !important;
    }
    #closePresBtn i {
        font-size: 0.6rem;
    }
    .pres-card {
        padding: 10px !important;
        gap: 10px !important;
        border-radius: 14px !important;
    }
    .pres-image-area img {
        max-height: 28vh !important;
    }
    .pres-pokemon-name {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }
    .pres-description {
        font-size: 0.6rem !important;
        padding: 8px !important;
    }
    .reveal-btn {
        padding: 8px 14px !important;
        font-size: 0.65rem !important;
    }
    .pres-nav-btn {
        padding: 6px 12px !important;
        font-size: 0.6rem !important;
    }
    .pres-counter {
        padding: 0 12px !important;
        font-size: 0.6rem !important;
        line-height: 30px !important;
        height: 30px !important;
    }
    /* Модалка завершения */
    .completion-single {
        width: 95vw !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }
    .completion-score-value {
        font-size: 1.5rem !important;
    }
    .completion-history-row {
    padding: 3px 6px !important;
        font-size: 0.55rem !important;
    }
    .completion-history-img img {
        width: 28px !important;
        height: 28px !important;
    }
    /* Speed timer */
    .speed-timer-value {
        padding: 4px 12px !important;
        font-size: 0.8rem !important;
    }
    /* Mode setup modal */
    .mode-setup-modal {
        padding: 20px 16px !important;
        border-radius: 20px !important;
    }
    .mode-setup-btn {
        padding: 8px 14px !important;
        font-size: 0.6rem !important;
    }
    /* Exit confirm */
    .exit-confirm-modal {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }
}

.chat-conversation-item {
    transition: background 0.2s !important;
}
.chat-conversation-item:hover {
    background: rgba(233, 69, 96, 0.1) !important;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.duel-results-container {
    display: flex;
    gap: 15px;
    margin: 15px 0;
    align-items: stretch;
}

.duel-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
}

@media (max-width: 600px) {
    .duel-results-container {
        flex-direction: column;
        gap: 0;
    }
    .duel-vs {
        padding: 8px 0;
        font-size: 1.2rem;
    }
}

.duels-friend-list {
    display: flex;
    gap: 8px;
    padding: 10px 0;
    overflow-x: auto;
    flex-wrap: wrap;
}

.duels-friend-item {
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Minecraft', monospace;
}

.duels-friend-item:hover,
.duels-friend-item.active {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    color: #e94560;
}

.duels-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.duel-history-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.2s;
}

.duel-history-card:hover {
    background: rgba(233, 69, 96, 0.08);
    border-color: rgba(233, 69, 96, 0.2);
}

.duel-history-icon {
    font-size: 1.2rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.duel-history-info {
    flex: 1;
    min-width: 0;
}

.duel-history-names {
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
}

.duel-history-mode {
    color: #888;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    margin-top: 2px;
}

.duel-history-scores {
    display: flex;
    gap: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* ===== ROOM ANIMATIONS ===== */
@keyframes roomFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes roomSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes roomCodeGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(233,69,96,0.4), 0 0 40px rgba(233,69,96,0.2); }
    50% { text-shadow: 0 0 30px rgba(233,69,96,0.7), 0 0 60px rgba(233,69,96,0.4), 0 0 90px rgba(233,69,96,0.2); }
}

@keyframes roomPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

#roomRoleSelectOverlay[style*="display: flex"],
#roomSetupOverlay[style*="display: flex"],
#roomResultsOverlay[style*="display: flex"] {
    animation: roomFadeIn 0.25s ease-out;
}

#roomRoleSelectOverlay[style*="display: flex"] > div,
#roomSetupOverlay[style*="display: flex"] > div,
#roomResultsOverlay[style*="display: flex"] > div {
    animation: roomSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#roomWaitingOverlay[style*="display: flex"] {
    animation: roomFadeIn 0.3s ease-out;
}

#roomWaitingOverlay[style*="display: flex"] > div {
    animation: roomSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#roomCodeDisplay {
    animation: roomCodeGlow 2s ease-in-out infinite;
    transition: letter-spacing 0.3s ease;
}

#roomRoleSelectOverlay button[onclick*="selectRoomRole"],
#roomSetupOverlay button[onclick*="createRoom"],
#roomWaitingOverlay button[onclick*="startRoomGame"],
#roomResultsOverlay button[onclick*="closeRoom"] {
    transition: all 0.2s ease;
}

#roomRoleSelectOverlay button[onclick*="selectRoomRole"]:hover,
#roomSetupOverlay button[onclick*="createRoom"]:hover,
#roomWaitingOverlay button[onclick*="startRoomGame"]:hover:not([style*="opacity: 0.5"]) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(233,69,96,0.4);
}

#roomRoleSelectOverlay button[onclick*="selectRoomRole"]:active,
#roomSetupOverlay button[onclick*="createRoom"]:active,
#roomWaitingOverlay button[onclick*="startRoomGame"]:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(233,69,96,0.3);
}

#roomRoleSelectOverlay button[onclick*="closeRoomRoleSelect"],
#roomSetupOverlay button[onclick*="closeRoomSetup"],
#roomWaitingOverlay button[onclick*="closeRoom"]:not(#roomStartBtn),
#roomResultsOverlay button[onclick*="closeRoom"] {
    transition: all 0.2s ease;
}

#roomRoleSelectOverlay button[onclick*="closeRoomRoleSelect"]:hover,
#roomSetupOverlay button[onclick*="closeRoomSetup"]:hover,
#roomWaitingOverlay button[onclick*="closeRoom"]:hover:not(#roomStartBtn),
#roomResultsOverlay button[onclick*="closeRoom"]:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

#roomRoleSelectOverlay button[onclick*="closeRoomRoleSelect"]:active,
#roomSetupOverlay button[onclick*="closeRoomSetup"]:active,
#roomWaitingOverlay button[onclick*="closeRoom"]:active:not(#roomStartBtn),
#roomResultsOverlay button[onclick*="closeRoom"]:active {
    transform: translateY(1px);
}

#roomPlayersList > div {
    animation: roomSlideUp 0.3s ease-out;
    animation-fill-mode: both;
}

#roomPlayersList > div:nth-child(1) { animation-delay: 0.05s; }
#roomPlayersList > div:nth-child(2) { animation-delay: 0.1s; }
#roomPlayersList > div:nth-child(3) { animation-delay: 0.15s; }
#roomPlayersList > div:nth-child(4) { animation-delay: 0.2s; }
#roomPlayersList > div:nth-child(5) { animation-delay: 0.25s; }
#roomPlayersList > div:nth-child(6) { animation-delay: 0.3s; }

#roomResultsTable > div {
    animation: roomSlideUp 0.3s ease-out;
    animation-fill-mode: both;
}

#roomResultsTable > div:nth-child(1) { animation-delay: 0.05s; }
#roomResultsTable > div:nth-child(2) { animation-delay: 0.1s; }
#roomResultsTable > div:nth-child(3) { animation-delay: 0.15s; }
#roomResultsTable > div:nth-child(4) { animation-delay: 0.2s; }
#roomResultsTable > div:nth-child(5) { animation-delay: 0.25s; }
#roomResultsTable > div:nth-child(6) { animation-delay: 0.3s; }

@keyframes roomCodePopIn {
    0% { opacity: 0; transform: scale(0.5); }
    70% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

#roomCodeDisplay.animate-in {
    animation: roomCodePopIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== CHAT ANIMATIONS ===== */
@keyframes chatItemSlideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes chatMsgSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes chatWindowOpen {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes chatReplySlide {
    from { opacity: 0; max-height: 0; padding: 0 15px; }
    to { opacity: 1; max-height: 60px; padding: 8px 15px; }
}

#tabChat .chat-conversation-item {
    animation: chatItemSlideIn 0.3s ease-out;
    animation-fill-mode: both;
}

#tabChat .chat-conversation-item:nth-child(2) { animation-delay: 0.03s; }
#tabChat .chat-conversation-item:nth-child(3) { animation-delay: 0.06s; }
#tabChat .chat-conversation-item:nth-child(4) { animation-delay: 0.09s; }
#tabChat .chat-conversation-item:nth-child(5) { animation-delay: 0.12s; }
#tabChat .chat-conversation-item:nth-child(6) { animation-delay: 0.15s; }
#tabChat .chat-conversation-item:nth-child(7) { animation-delay: 0.18s; }
#tabChat .chat-conversation-item:nth-child(8) { animation-delay: 0.21s; }

#tabChat .chat-conversation-item:hover {
    transform: translateX(4px);
    background: rgba(233,69,96,0.08);
}

#chatWindow[style*="display: flex"] {
    animation: chatWindowOpen 0.25s ease-out;
}



#chatReplyPreview[style*="display: flex"] {
    animation: chatReplySlide 0.2s ease-out;
}

#chatSendBtn {
    transition: all 0.2s ease;
}

#chatSendBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233,69,96,0.4);
}

#chatSendBtn:active {
    transform: translateY(1px) scale(0.97);
}

#chatInput:focus {
    border-color: #e94560 !important;
    box-shadow: 0 0 0 2px rgba(233,69,96,0.2);
}

/* ===== ADMIN ANIMATIONS ===== */
@keyframes adminCardSlideIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes adminSubTabPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.admin-sub-tab {
    transition: all 0.2s ease;
}

.admin-sub-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233,69,96,0.3);
}

.admin-sub-tab.active {
    animation: adminSubTabPulse 0.3s ease-out;
}

.admin-filter-btn {
    transition: all 0.2s ease;
}

.admin-filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(233,69,96,0.25);
}

.admin-filter-btn:active {
    transform: translateY(0) scale(0.97);
}

#adminSubmissionsList > div,
#adminSubmissionsList > .admin-card {
    animation: adminCardSlideIn 0.3s ease-out;
    animation-fill-mode: both;
}

#adminSubmissionsList > div:nth-child(1),
#adminSubmissionsList > .admin-card:nth-child(1) { animation-delay: 0.03s; }
#adminSubmissionsList > div:nth-child(2),
#adminSubmissionsList > .admin-card:nth-child(2) { animation-delay: 0.06s; }
#adminSubmissionsList > div:nth-child(3),
#adminSubmissionsList > .admin-card:nth-child(3) { animation-delay: 0.09s; }
#adminSubmissionsList > div:nth-child(4),
#adminSubmissionsList > .admin-card:nth-child(4) { animation-delay: 0.12s; }
#adminSubmissionsList > div:nth-child(5),
#adminSubmissionsList > .admin-card:nth-child(5) { animation-delay: 0.15s; }
#adminSubmissionsList > div:nth-child(6),
#adminSubmissionsList > .admin-card:nth-child(6) { animation-delay: 0.18s; }
#adminSubmissionsList > div:nth-child(7),
#adminSubmissionsList > .admin-card:nth-child(7) { animation-delay: 0.21s; }
#adminSubmissionsList > div:nth-child(8),
#adminSubmissionsList > .admin-card:nth-child(8) { animation-delay: 0.24s; }
#adminSubmissionsList > div:nth-child(9),
#adminSubmissionsList > .admin-card:nth-child(9) { animation-delay: 0.27s; }
#adminSubmissionsList > div:nth-child(10),
#adminSubmissionsList > .admin-card:nth-child(10) { animation-delay: 0.3s; }

#tabAdmin .admin-sub-tabs {
    animation: chatItemSlideIn 0.3s ease-out;
}

#tabAdmin .admin-controls {
    animation: chatMsgSlideUp 0.3s ease-out 0.1s both;
}

.hosting-hero {
    animation: chatMsgSlideUp 0.4s ease-out;
}

/* ===== CHAT CONTEXT MENU ===== */
@keyframes ctxMenuIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes ctxMenuOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.92); }
}

#chatContextMenu {
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#chatContextMenu.ctx-menu-hiding {
    animation: ctxMenuOut 0.15s ease forwards;
    pointer-events: none;
}

#chatContextMenu button:hover {
    background: rgba(233,69,96,0.15);
}

#chatContextMenu button:active {
    background: rgba(233,69,96,0.25);
}

#chatContextMenu #ctxDelete:hover {
    background: rgba(233,69,96,0.15);
}

#chatContextMenu hr {
    border: none;
    border-top: 1px solid rgba(233,69,96,0.15);
    margin: 4px 0;
}

/* ===== UNIFIED MODAL SYSTEM ===== */
.confirm-modal,
.prompt-modal,
.mode-setup-overlay,
.exit-confirm-overlay,
.clear-random-overlay {
    background: rgba(5, 10, 25, 0.92);
    backdrop-filter: blur(10px);
    z-index: 1000002 !important;
}

.completion-modal {
    background: radial-gradient(circle, rgba(233,69,96,0.15), rgba(5,10,25,0.95));
    backdrop-filter: blur(10px);
}

.confirm-modal-content,
.completion-modal-content,
.prompt-modal-content,
.mode-setup-modal,
.exit-confirm-modal,
.clear-random-modal {
    background: linear-gradient(145deg, #0f0f23, #1a1a2e) !important;
    border: 2px solid #e94560 !important;
    border-radius: 20px !important;
    box-shadow: 0 0 40px rgba(233,69,96,0.3), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.confirm-modal-content h3,
.completion-modal-content h2,
.prompt-modal-content h3,
.mode-setup-modal h2,
.exit-confirm-modal h3,
.clear-random-modal h2 {
    color: #e94560 !important;
    letter-spacing: 1px;
}

.confirm-modal-content p,
.completion-modal-content p,
.prompt-modal-content p,
.mode-setup-desc,
.exit-confirm-modal p,
.clear-random-modal p {
    color: rgba(255,255,255,0.6) !important;
}

.confirm-modal-buttons button,
.prompt-modal-buttons button,
.completion-modal-content button,
.exit-confirm-btn,
.mode-setup-start-btn {
    font-family: 'Minecraft', monospace;
    border-radius: 12px !important;
    padding: 10px 24px !important;
    border: none !important;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.2s ease;
}

.confirm-modal-buttons button:first-child,
.mode-setup-start-btn {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    color: white !important;
}

.confirm-modal-buttons button:first-child:hover,
.mode-setup-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233,69,96,0.4);
}

.confirm-modal-buttons button:last-child,
.prompt-modal-buttons button:last-child,
.exit-confirm-btn {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.7) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

.confirm-modal-buttons button:last-child:hover,
.prompt-modal-buttons button:last-child:hover,
.exit-confirm-btn:hover {
    background: rgba(255,255,255,0.15) !important;
    transform: translateY(-2px);
}

.prompt-modal-buttons button:first-child {
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    color: white !important;
}

.prompt-modal-buttons button:first-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46,204,113,0.4);
}

.completion-modal-content button {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    color: white !important;
    padding: 12px 30px !important;
    margin-top: 20px;
}

.completion-modal-content button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(233,69,96,0.5);
}

.exit-confirm-btn.yes {
    background: linear-gradient(135deg, #e94560, #c62a47) !important;
    color: white !important;
}

.exit-confirm-btn.yes:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233,69,96,0.4);
}

@keyframes modalPopCenter {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes modalZoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes completionPop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    70% { transform: translate(-50%, -50%) scale(1.02); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Type icons in filter tags */
.filter-type-icon {
    width: 12px !important;
    height: 12px !important;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 3px;
}

.filter-tag {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* ============================================
   ТИР-ЛИСТ
   ============================================ */
.tl-header {
    text-align: center;
    margin-bottom: 24px;
}
.tl-header h2 {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    margin-bottom: 8px;
}
.tl-header p {
    color: rgba(255,255,255,0.5);
    font-size: 0.65rem;
    margin-bottom: 16px;
}
.tl-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.tl-btn {
    background: rgba(15,52,96,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.tl-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
}
.tl-btn-save { border-color: rgba(76,175,80,0.5); }
.tl-btn-save:hover { background: rgba(76,175,80,0.2); border-color: #4caf50; }
.tl-btn-reset { border-color: rgba(244,67,54,0.5); }
.tl-btn-reset:hover { background: rgba(244,67,54,0.2); border-color: #f44336; }
.tl-btn-export { border-color: rgba(33,150,243,0.5); }
.tl-btn-export:hover { background: rgba(33,150,243,0.2); border-color: #2196f3; }
.tl-btn-add { border-color: rgba(233,69,96,0.5); }
.tl-btn-add:hover { background: rgba(233,69,96,0.2); border-color: #e94560; }
.tl-btn-saves { border-color: rgba(255,193,7,0.5); }
.tl-btn-saves:hover { background: rgba(255,193,7,0.2); border-color: #ffc107; }
.tl-save-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); margin-bottom:6px; cursor:pointer; transition:all 0.2s; }
.tl-save-item:hover { background:rgba(255,255,255,0.08); border-color:rgba(233,69,96,0.4); }
.tl-save-del { background:none; border:1px solid rgba(233,69,96,0.3); color:#e94560; width:28px; height:28px; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.6rem; transition:all 0.2s; flex-shrink:0; }
.tl-save-del:hover { background:rgba(233,69,96,0.2); border-color:#e94560; }

#tabTierlist {
    overflow: visible;
}
.tl-board {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}
.tl-tier-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 64px;
    border-radius: 10px;
    overflow: visible;
    background: rgba(15,15,35,0.5);
    border: 1px solid rgba(255,255,255,0.06);
}
.tl-tier-label {
    width: 48px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 1.1rem;
    flex-shrink: 0;
    border-radius: 10px 0 0 10px;
    user-select: none;
}
.tl-tier-drop {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 0 0 8px;
    min-height: 64px;
    align-items: center;
    transition: background 0.2s;
}
.tl-drop-hover {
    background: rgba(233,69,96,0.15) !important;
    outline: 2px dashed rgba(233,69,96,0.5);
    outline-offset: -2px;
}
.tl-tier-controls {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}
.tl-tier-row:hover .tl-tier-controls {
    opacity: 1;
}
.tl-ctrl-btn {
    background: rgba(255,255,255,0.06);
    border: none;
    color: rgba(255,255,255,0.4);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    transition: all 0.15s;
}
.tl-ctrl-btn:hover {
    background: rgba(233,69,96,0.2);
    color: #e94560;
}
.tl-ctrl-btn--del:hover {
    background: rgba(244,67,54,0.2);
    color: #f44336;
}
.tl-tier-arrows {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 4px 4px 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.tl-tier-row:hover .tl-tier-arrows {
    opacity: 1;
}
.tl-arrow-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.5rem;
    transition: color 0.15s;
}
.tl-arrow-btn:hover {
    color: #e94560;
}
.tl-add-tier-row {
    display: flex;
    justify-content: center;
    padding: 8px;
}
.tl-add-tier-btn {
    background: rgba(233,69,96,0.1);
    border: 1px dashed rgba(233,69,96,0.4);
    color: rgba(233,69,96,0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.tl-add-tier-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}

.tl-pool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: rgba(15,52,96,0.3);
    border-radius: 10px;
    border: 1px solid rgba(233,69,96,0.15);
}
.tl-pool-header span {
    color: rgba(255,255,255,0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
}
.tl-search {
    background: rgba(10,10,26,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    padding: 5px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    outline: none;
    width: 200px;
    transition: border-color 0.2s;
}
.tl-search:focus {
    border-color: #e94560;
}
.tl-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
    background: rgba(10,10,26,0.3);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}
.tl-pool::-webkit-scrollbar {
    width: 6px;
}
.tl-pool::-webkit-scrollbar-track {
    background: transparent;
}
.tl-pool::-webkit-scrollbar-thumb {
    background: rgba(233,69,96,0.3);
    border-radius: 3px;
}

.tl-poke-card {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    cursor: grab;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.15s;
    flex-shrink: 0;
}
.tl-poke-card:hover {
    border-color: #e94560;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(233,69,96,0.3);
}
.tl-poke-card:active {
    cursor: grabbing;
}
.tl-poke-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tl-poke-card--placed {
    height: 64px;
    width: unset;
    aspect-ratio: 1;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 4px;
    flex-shrink: 0;
}
.tl-poke-card--placed img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}
.tl-poke-card--placed:hover {
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
}
.tl-poke-card--placed img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tl-poke-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e94560;
    color: white;
    font-size: 0.45rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    border: 1px solid rgba(0,0,0,0.3);
}
.tl-poke-card--placed:hover .tl-poke-remove {
    display: flex;
}

.tl-zoom-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 4px 12px;
}
.tl-zoom-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.tl-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    cursor: pointer;
    border: none;
}
.tl-zoom-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e94560;
    cursor: pointer;
    border: none;
}
.tl-zoom-reset {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    transition: all 0.15s;
}
.tl-zoom-reset:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}

/* Edit modal */
.tl-edit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.9);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Minecraft', monospace;
}
.tl-edit-modal {
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 2px solid #e94560;
    border-radius: 25px;
    padding: 30px 35px;
    min-width: 320px;
    max-width: 90vw;
    box-shadow: 0 0 60px rgba(233, 69, 96, 0.4);
    animation: modalZoomIn 0.3s ease;
    color: white;
    text-align: center;
}
.tl-edit-modal h3 {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    margin: 0 0 16px 0;
    text-align: center;
}
.tl-edit-field {
    margin-bottom: 14px;
}
.tl-edit-field label {
    color: rgba(255,255,255,0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    display: block;
    margin-bottom: 6px;
}
.tl-edit-input {
    width: 100%;
    background: rgba(10,10,26,0.6);
    border: 1px solid rgba(233,69,96,0.3);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    outline: none;
    box-sizing: border-box;
}
.tl-edit-input:focus {
    border-color: #e94560;
}
.tl-edit-colors {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.tl-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}
.tl-color-swatch:hover {
    transform: scale(1.15);
}
.tl-color-active {
    border-color: white;
    box-shadow: 0 0 8px rgba(255,255,255,0.4);
}
.tl-color-picker {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: none;
    padding: 0;
}
.tl-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}
.tl-export-modal {
    background: #0a0a1a;
    border: 2px solid #e94560;
    border-radius: 16px;
    padding: 24px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

/* Pool settings */
.tl-pool-settings-btn {
    background: rgba(233,69,96,0.1);
    border: 1px solid rgba(233,69,96,0.3);
    color: rgba(233,69,96,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.tl-pool-settings-btn:hover {
    background: rgba(233,69,96,0.2);
    border-color: #e94560;
    color: #e94560;
}

/* Pool modal */
.tl-pool-modal {
    background: linear-gradient(135deg, #0d1b30, #0a1628);
    border: 1px solid rgba(233,69,96,0.25);
    border-radius: 16px;
    padding: 0;
    width: 560px;
    max-width: 94vw;
    max-height: 88vh;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 40px rgba(233,69,96,0.08);
    display: flex;
    flex-direction: column;
}
.tl-pool-modal-header {
    padding: 20px 24px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tl-pool-modal-header h3 {
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    margin: 0 0 14px 0;
}
.tl-pool-mode-toggle {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.tl-pool-mode-btn {
    background: rgba(15,52,96,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 7px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tl-pool-mode-btn:hover {
    background: rgba(233,69,96,0.1);
    border-color: rgba(233,69,96,0.3);
    color: white;
}
.tl-pool-mode-btn.active {
    background: rgba(233,69,96,0.15);
    border-color: #e94560;
    color: #e94560;
}

/* Tag sections */
#tlPoolTagSection {
    padding: 14px 24px;
    overflow-y: auto;
    flex: 1;
}
.tl-pool-hint {
    text-align: center;
    color: rgba(255,255,255,0.35);
    font-size: 0.5rem;
    font-family: 'Minecraft', monospace;
    margin-bottom: 14px;
}
.tl-hint-include {
    color: #4caf50;
}
.tl-hint-exclude {
    color: #f44336;
}
.tl-pool-section {
    margin-bottom: 14px;
}
.tl-pool-section-title {
    color: rgba(255,255,255,0.45);
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tl-pool-section-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.tl-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(15,25,50,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.5);
    user-select: none;
}
.tl-tag-pill:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
}
.tl-tag-none {
    color: rgba(255,255,255,0.45);
    border-color: rgba(255,255,255,0.08);
    background: rgba(15,25,50,0.4);
}
.tl-tag-include {
    color: #66bb6a;
    border-color: rgba(76,175,80,0.35);
    background: rgba(76,175,80,0.1);
}
.tl-tag-include:hover {
    background: rgba(76,175,80,0.18);
}
.tl-tag-exclude {
    color: #ef5350;
    border-color: rgba(244,67,54,0.35);
    background: rgba(244,67,54,0.1);
}
.tl-tag-exclude:hover {
    background: rgba(244,67,54,0.18);
}
.tl-tag-state {
    width: 13px;
    text-align: center;
    font-size: 0.5rem;
    flex-shrink: 0;
}
.tl-tag-label {
    white-space: nowrap;
}

/* Footer */
.tl-pool-modal-footer {
    padding: 14px 24px;
    display: flex;
    gap: 8px;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.tl-pool-action-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 7px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tl-pool-action-btn.save {
    background: rgba(76,175,80,0.15);
    border-color: rgba(76,175,80,0.4);
    color: #66bb6a;
}
.tl-pool-action-btn.save:hover {
    background: rgba(76,175,80,0.25);
}
.tl-pool-action-btn.reset {
    background: rgba(255,152,0,0.1);
    border-color: rgba(255,152,0,0.3);
    color: #ffa726;
}
.tl-pool-action-btn.reset:hover {
    background: rgba(255,152,0,0.2);
}
.tl-pool-action-btn.cancel {
    background: rgba(244,67,54,0.08);
    border-color: rgba(244,67,54,0.25);
    color: rgba(255,255,255,0.4);
}
.tl-pool-action-btn.cancel:hover {
    background: rgba(244,67,54,0.15);
    color: rgba(255,255,255,0.7);
}

/* ===== TAP-TO-SELECT (mobile drag alternative) ===== */
.tl-poke-selected {
    outline: 3px solid #ffeb3b !important;
    box-shadow: 0 0 14px rgba(255,235,59,0.5) !important;
    transform: scale(1.15) !important;
    z-index: 50;
}
.tl-board-selecting .tl-tier-drop {
    outline: 2px dashed rgba(255,235,59,0.35);
    outline-offset: -2px;
    min-height: 80px;
}
.tl-board-selecting .tl-tier-row {
    cursor: pointer;
}
.tl-board-selecting .tl-tier-row:hover .tl-tier-drop {
    background: rgba(255,235,59,0.1);
}
.tl-pool-selecting {
    outline: 2px dashed rgba(255,235,59,0.35);
    outline-offset: -2px;
    cursor: pointer;
}

/* ===== MOBILE TIER LIST ===== */
@media (max-width: 768px) {
    #tabTierlist {
        padding: 12px !important;
    }
    .tl-header h2 {
        font-size: 0.75rem !important;
    }
    .tl-header p {
        font-size: 0.55rem !important;
        margin-bottom: 10px !important;
    }
    .tl-actions {
        gap: 6px !important;
        justify-content: center !important;
    }
    .tl-btn {
        font-size: 0.5rem !important;
        padding: 5px 8px !important;
    }
    .tl-btn i {
        display: none;
    }
    .tl-zoom-wrap {
        padding: 3px 8px !important;
        gap: 4px !important;
    }
    .tl-zoom-slider {
        width: 55px !important;
    }
    .tl-zoom-reset {
        padding: 2px 6px !important;
        font-size: 0.5rem !important;
    }

    /* Tier rows: stack vertically */
    .tl-tier-row {
        flex-direction: column !important;
        min-height: auto !important;
        border-radius: 8px !important;
        overflow: visible !important;
    }
    .tl-tier-label {
        width: 100% !important;
        min-height: 32px !important;
        height: 32px !important;
        font-size: 0.7rem !important;
        border-radius: 8px 8px 0 0 !important;
        flex-direction: row !important;
    }
    .tl-tier-drop {
        min-height: 48px !important;
        padding: 6px !important;
        gap: 4px !important;
        border-top: none !important;
        border-radius: 0 0 8px 8px !important;
    }
    .tl-poke-card--placed {
        height: 48px !important;
        width: 48px !important;
        aspect-ratio: 1 !important;
    }

    /* Controls always visible on mobile */
    .tl-tier-controls {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        opacity: 1 !important;
        flex-direction: row !important;
        gap: 4px !important;
        z-index: 5;
    }
    .tl-tier-row {
        position: relative !important;
    }
    .tl-tier-arrows {
        opacity: 1 !important;
        position: absolute !important;
        bottom: 4px !important;
        right: 4px !important;
        flex-direction: row !important;
        gap: 3px !important;
    }
    .tl-arrow-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.5rem !important;
    }
    .tl-ctrl-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.5rem !important;
    }

    /* Pool */
    .tl-pool-header {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    .tl-pool-header > div {
        width: 100% !important;
        justify-content: space-between !important;
    }
    .tl-search {
        width: 100% !important;
        font-size: 0.55rem !important;
    }
    .tl-pool {
        max-height: 300px !important;
        gap: 4px !important;
        padding: 6px !important;
    }
    .tl-pool .tl-poke-card {
        width: 42px !important;
        height: 42px !important;
    }
    .tl-pool-settings-btn {
        font-size: 0.5rem !important;
        padding: 4px 8px !important;
    }

    /* Pool return bar when selecting */
    .tl-pool-selecting::before {
        content: 'Нажмите сюда чтобы вернуть в пул';
        display: block;
        width: 100%;
        text-align: center;
        font-family: 'Minecraft', monospace;
        font-size: 0.5rem;
        color: #ffeb3b;
        padding: 6px;
        margin-bottom: 4px;
        border-radius: 6px;
        background: rgba(255,235,59,0.08);
    }
}

@media (max-width: 480px) {
    .tl-actions .tl-btn span,
    .tl-actions .tl-btn:not(.tl-zoom-wrap) {
        font-size: 0.45rem !important;
        padding: 4px 6px !important;
    }
    .tl-pool .tl-poke-card {
        width: 36px !important;
        height: 36px !important;
    }
    .tl-poke-card--placed {
        height: 42px !important;
        width: 42px !important;
    }
}

/* DexID Game */
.dexid-mode-btn {
    padding: 10px 24px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.dexid-mode-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.dexid-mode-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
.dexid-num-input {
    width: 100%;
    padding: 20px 24px;
    border-radius: 14px;
    border: 2px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.4);
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.dexid-num-input::-webkit-inner-spin-button,
.dexid-num-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.dexid-rounds-btn {
    padding: 12px 28px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.dexid-rounds-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.dexid-rounds-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
.better-mode-btn {
    padding: 10px 24px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.better-mode-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.better-mode-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
.better-rounds-btn {
    padding: 12px 28px;
    border-radius: 24px;
    border: 1px solid rgba(233,69,96,0.3);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.better-rounds-btn:hover {
    border-color: #e94560;
    color: #fff;
}
.better-rounds-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
}
#dexidSuggestions .dexid-sugg-item {
    padding: 14px 20px;
    color: rgba(255,255,255,0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.15s;
}
#dexidSuggestions .dexid-sugg-item:hover,
#dexidSuggestions .dexid-sugg-item.active {
    background: rgba(233,69,96,0.2);
}
#dexidSuggestions .dexid-sugg-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
}
.dexid-result-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}
.dexid-result-row img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}
/* ============================================
   РАЗДЕЛЕНИЕ ВКЛАДОК: ИГРЫ / ОСТАЛЬНОЕ
   ============================================ */

/* 1. Контейнер табов — без подложки, просто флекс-колонка */
.tabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

/* 2. Строки — флекс с переносом */
.tabs-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* 3. Разделитель между строками */
.tabs-row--other {
    border-top: 1px solid rgba(233, 69, 96, 0.15);
    padding-top: 12px;
}

/* 4. Игровые вкладки — выделенные, крупные */
.tab-btn.game-tab {
    font-size: 0.9rem !important;
    padding: 14px 32px !important;
    background: linear-gradient(145deg, rgba(15, 52, 96, 0.4), rgba(26, 26, 46, 0.6)) !important;
    border: 2px solid rgba(233, 69, 96, 0.25) !important;
    border-radius: 16px !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

    /* 5. Неоновое свечение при наведении */
    .tab-btn.game-tab:hover {
        transform: translateY(-3px) scale(1.03) !important;
        border-color: #e94560 !important;
        box-shadow: 0 8px 30px rgba(233, 69, 96, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }

    /* 6. Активная игровая вкладка */
    .tab-btn.game-tab.active {
        background: linear-gradient(135deg, rgba(233, 69, 96, 0.3), rgba(198, 42, 71, 0.5)) !important;
        border-color: #e94560 !important;
        box-shadow: 0 0 35px rgba(233, 69, 96, 0.4), 0 0 70px rgba(233, 69, 96, 0.15) !important;
        color: #fff !important;
        text-shadow: 0 0 15px rgba(233, 69, 96, 0.8);
    }

        /* 7. Неоновая линия под активной вкладкой */
        .tab-btn.game-tab.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 20%;
            width: 60%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #e94560, transparent);
            border-radius: 2px;
            box-shadow: 0 0 15px #e94560, 0 0 30px rgba(233, 69, 96, 0.3);
            animation: gameTabGlow 1.8s ease-in-out infinite;
        }

@keyframes gameTabGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scaleX(0.8);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* 8. Анимация иконок игровых вкладок */
.tab-btn.game-tab i {
    font-size: 1.1rem !important;
    margin-right: 10px !important;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 0 4px rgba(233, 69, 96, 0.2));
}

.tab-btn.game-tab:hover i {
    transform: scale(1.3) rotate(-8deg) !important;
    filter: drop-shadow(0 0 15px rgba(233, 69, 96, 0.8));
}

.tab-btn.game-tab.active i {
    filter: drop-shadow(0 0 20px rgba(233, 69, 96, 0.9));
}

/* 9. ТИР-ЛИСТ — ЗОЛОТАЯ ТЕМА */
.tab-btn.game-tab[data-tab="tierlist"] {
    border-color: rgba(255, 215, 0, 0.3) !important;
    background: linear-gradient(145deg, rgba(40, 30, 10, 0.5), rgba(60, 40, 10, 0.4)) !important;
}

    .tab-btn.game-tab[data-tab="tierlist"]:hover {
        border-color: #ffd700 !important;
        box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 215, 0, 0.1) !important;
    }

    .tab-btn.game-tab[data-tab="tierlist"].active {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(200, 150, 0, 0.4)) !important;
        border-color: #ffd700 !important;
        box-shadow: 0 0 35px rgba(255, 215, 0, 0.4), 0 0 70px rgba(255, 215, 0, 0.15) !important;
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
    }

        .tab-btn.game-tab[data-tab="tierlist"].active::after {
            background: linear-gradient(90deg, transparent, #ffd700, transparent);
            box-shadow: 0 0 15px #ffd700, 0 0 30px rgba(255, 215, 0, 0.3);
        }

    .tab-btn.game-tab[data-tab="tierlist"]:hover i {
        color: #ffd700 !important;
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
    }

    .tab-btn.game-tab[data-tab="tierlist"].active i {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.9));
    }

/* 10. Обычные вкладки (вторая строка) — скромные, чистые */
.tabs-row--other .tab-btn {
    background: rgba(20, 20, 40, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 30px !important;
    padding: 10px 22px !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.2s ease !important;
}

    .tabs-row--other .tab-btn:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        transform: translateY(-2px) !important;
    }

    .tabs-row--other .tab-btn.active {
        background: rgba(233, 69, 96, 0.15) !important;
        border-color: rgba(233, 69, 96, 0.4) !important;
        color: #e94560 !important;
    }
/* ============================================
   АНИМАЦИЯ ДЛЯ DEXID
   ============================================ */

/* Анимация входа */
@keyframes dexidModalIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }

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

/* Анимация выхода */
@keyframes dexidModalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
}

/* Анимация фона */
@keyframes dexidOverlayIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

@keyframes dexidOverlayOut {
    from {
        opacity: 1;
        backdrop-filter: blur(8px);
    }

    to {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

/* Контейнер оверлея */
#dexidOverlay {
    animation: dexidOverlayIn 0.3s ease forwards;
}

    /* Контент модалки */
    #dexidOverlay > div {
        animation: dexidModalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* ===== КЛАССЫ ДЛЯ АНИМАЦИИ ВЫХОДА ===== */

    /* Оверлей исчезает */
    #dexidOverlay.overlay-out {
        animation: dexidOverlayOut 0.3s ease forwards !important;
    }

        /* Контент вылетает */
        #dexidOverlay.overlay-out > div {
            animation: dexidModalOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        }
/* Кнопка закрытия в DexID */
#dexidOverlay button[onclick*="dexidClose"] {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

#dexidOverlay button[onclick*="dexidClose"]:hover {
    transform: rotate(25deg) scale(1.1) !important;
    background: rgba(233, 69, 96, 0.3) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
}

#dexidOverlay button[onclick*="dexidClose"]:active {
    transform: rotate(25deg) scale(0.9) !important;
}
/* ============================================
   АНИМАЦИЯ ДЛЯ НАСТРОЙКИ ПУЛА ПОКЕМОНОВ
   ============================================ */

/* Анимация входа */
@keyframes tlPoolModalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

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

/* Анимация выхода */
@keyframes tlPoolModalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

/* Анимация фона */
@keyframes tlPoolOverlayIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

@keyframes tlPoolOverlayOut {
    from {
        opacity: 1;
        backdrop-filter: blur(4px);
    }

    to {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

/* Оверлей */
.tl-edit-overlay {
    animation: tlPoolOverlayIn 0.25s ease forwards;
}

    /* Модалка */
    .tl-edit-overlay .tl-pool-modal {
        animation: tlPoolModalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* ===== КЛАССЫ ДЛЯ АНИМАЦИИ ВЫХОДА ===== */

    /* Оверлей исчезает */
    .tl-edit-overlay.overlay-out {
        animation: tlPoolOverlayOut 0.25s ease forwards !important;
    }

        /* Модалка вылетает */
        .tl-edit-overlay.overlay-out .tl-pool-modal {
            animation: tlPoolModalOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        }

/* ============================================
   ГЕНЕРАТОР КАРТОЧЕК АТАК (НОВЫЙ СТИЛЬ)
   ============================================ */

.move-generator-modal {
    max-width: 560px !important;
    padding: 28px !important;
}

.move-gen-field {
    margin-bottom: 14px;
}

    .move-gen-field label {
        display: block;
        color: rgba(255,255,255,0.5);
        font-family: 'Minecraft', monospace;
        font-size: 0.6rem;
        margin-bottom: 5px;
        letter-spacing: 0.5px;
    }

.move-cat-btn-gen {
    padding: 6px 14px;
    border-radius: 20px;
    border: 2px solid rgba(255,255,255,0.15);
    background: rgba(15,52,96,0.3);
    color: rgba(255,255,255,0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.25s;
}

    .move-cat-btn-gen:hover {
        border-color: rgba(255,255,255,0.3);
        color: rgba(255,255,255,0.8);
    }

    .move-cat-btn-gen.active {
        border-color: #e94560;
        background: rgba(233,69,96,0.2);
        color: #e94560;
    }

.move-type-btn {
    padding: 4px 10px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.6;
}

    .move-type-btn:hover {
        transform: scale(1.05);
        opacity: 0.9;
    }

    .move-type-btn.active {
        border-color: white !important;
        opacity: 1;
        transform: scale(1.05);
        box-shadow: 0 0 12px rgba(255,255,255,0.2);
    }

    .lang-switch {
        display: inline-flex;
        border: 2px solid rgba(233,69,96,0.5);
        border-radius: 30px;
        overflow: hidden;
        margin-right: 10px;
        background: rgba(15,52,96,0.7);
    }
    .lang-btn {
        font-family: 'Minecraft', monospace;
        font-size: 0.55rem;
        color: #fff;
        background: transparent;
        border: none;
        padding: 9px 14px;
        cursor: pointer;
        transition: all 0.15s;
    }
    .lang-btn:hover { color: #e94560; }
    .lang-btn.active {
        background: #e94560;
        color: #fff;
        box-shadow: 0 0 14px rgba(233,69,96,0.5);
    }
    .user-bar .lang-switch { align-self: center; }

/* ============================================
   ИГРА «У КОГО ЛУЧШЕ» — оформлена как DexID
   ============================================ */

#betterOverlay { animation: dexidOverlayIn 0.3s ease forwards; }
#betterOverlay > div { animation: dexidModalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
#betterOverlay.overlay-out { animation: dexidOverlayOut 0.3s ease forwards !important; }
#betterOverlay.overlay-out > div { animation: dexidModalOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; }
#betterOverlay button[onclick*="betterClose"] {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}
#betterOverlay button[onclick*="betterClose"]:hover {
    transform: rotate(25deg) scale(1.1) !important;
    background: rgba(233, 69, 96, 0.3) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
}
#betterOverlay button[onclick*="betterClose"]:active {
    transform: rotate(25deg) scale(0.9) !important;
}

.better-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.better-card {
    background: rgba(15,52,96,0.3); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 14px; text-align: center; cursor: pointer; color: #fff;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; position: relative;
}
.better-card:hover:not(.answered) { transform: translateY(-4px); border-color: #e94560; box-shadow: 0 6px 20px rgba(233,69,96,0.3); }
.better-card.answered { cursor: default; }
.better-card.correct { border-color: #2ecc71; box-shadow: 0 0 22px rgba(46,204,113,0.5); }
.better-card.wrong { border-color: #e74c3c; box-shadow: 0 0 22px rgba(231,76,60,0.4); }
.better-card img { width: 100%; max-width: 120px; height: 110px; object-fit: contain; image-rendering: pixelated; }
.better-card-name { font-size: 0.55rem; line-height: 1.5; margin: 8px 0 6px; min-height: 2.2em; display: flex; align-items: center; justify-content: center; }
.better-stat-reveal { display: none; margin-top: 8px; }
.better-card.answered .better-stat-reveal { display: block; }
.better-stat-line { font-size: 0.5rem; color: rgba(255,255,255,0.8); margin-bottom: 5px; }
.better-stat-bar-wrap { height: 7px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.better-stat-bar { height: 100%; background: #4ecdc4; border-radius: 4px; }
.better-card.correct .better-stat-bar { background: #2ecc71; }
.better-verdict { position: absolute; top: 8px; right: 8px; font-size: 0.8rem; display: none; }
.better-card.answered .better-verdict { display: block; }
.better-card.correct .better-verdict { color: #2ecc71; }
.better-card.wrong .better-verdict { color: #e74c3c; }
.better-prompt { text-align: center; font-size: 0.9rem; line-height: 1.8; padding: 24px; background: rgba(15,52,96,0.3); border: 1px solid rgba(233,69,96,0.2); border-radius: 16px; margin-bottom: 20px; color: #fff; }
.better-prompt b { color: #e94560; }
.better-prompt .mode { color: #4ecdc4; }
.better-timerbar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin-bottom: 20px; }
.better-timerbar > div { height: 100%; width: 100%; background: linear-gradient(90deg, #2ecc71, #e94560); transition: width 1s linear; }
.better-feedback { text-align: center; font-size: 0.7rem; line-height: 1.8; min-height: 2.2em; margin-bottom: 20px; }
.better-feedback.ok { color: #2ecc71; }
.better-feedback.bad { color: #e74c3c; }

/* Кнопка открытия детальной карточки */
.db-card-open-btn {
    margin-top: 12px;
    width: 100%;
    background: rgba(233, 69, 96, 0.14);
    border: 1px solid rgba(233, 69, 96, 0.45);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 8px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-shadow: 1px 1px 0 #000;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
.db-card-open-btn:hover {
    background: linear-gradient(135deg, #e94560, #c23152);
    border-color: #e94560;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.5);
    transform: translateY(-2px);
    color: #ffffff;
}
.db-card-open-btn:active {
    transform: translateY(0);
}
.db-mcard-open-btn {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.db-mcard-open-btn:hover {
    background: #ffffff;
    color: #111122;
    text-shadow: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Иконка открытия рядом с заголовком */
.db-title-open-icon {
    font-size: 0.65em;
    opacity: 0.45;
    margin-left: 5px;
    vertical-align: middle;
    transition: all 0.2s ease;
}
.db-card-name:hover .db-title-open-icon,
.db-abil-names:hover .db-title-open-icon,
.db-move-names:hover .db-title-open-icon,
.db-mcard-title:hover .db-title-open-icon {
    opacity: 1;
    color: #e94560;
    transform: translate(1px, -1px);
}

.db-table-abil-item, .db-abil-mini {
    cursor: pointer;
    transition: color 0.2s ease, text-decoration 0.2s ease;
    user-select: text;
    display: inline-block;
}
.db-table-abil-item:hover, .db-abil-mini:hover {
    color: #e94560;
    text-decoration: underline;
}

/* Двойная категория Z-приёмов (Физ + Спец) */
.db-move-tc-dual {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.db-move-cat-slash {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    font-weight: bold;
    margin: 0 1px;
}
.db-mcard-cat-badge.dual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 105px;
    height: 52px;
}
.db-mcard-cat-badge.dual .db-mcard-cat-img {
    width: 48px;
    height: 32px;
    object-fit: contain;
}

/* Градиентные рамки для всех рамок (карточка, инфо-бокс, плашка типа) */
.db-move-card.db-move-card-poster.db-card-grad-gmax {
    border-color: transparent;
    background: 
        radial-gradient(circle at 50% 30%, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.15) 100%) padding-box,
        linear-gradient(180deg, var(--card-accent, #777) 0%, #FF0045 100%) border-box,
        var(--card-accent, #777);
    box-shadow: 0 10px 28px rgba(255, 0, 69, 0.25), inset 0 2px 6px rgba(255,255,255,0.75);
}
.db-move-card.db-move-card-poster.db-card-grad-gmax .db-mcard-info-box {
    border-color: transparent;
    background: 
        linear-gradient(180deg, #44264e 0%, #2b1433 100%) padding-box,
        linear-gradient(180deg, var(--card-accent, #777) 0%, #FF0045 100%) border-box;
}
.db-move-card.db-move-card-poster.db-card-grad-gmax .db-mcard-type-pill {
    border-radius: 999px;
    border: 3.5px solid #ffffff;
    padding: 6px 12px;
    background: var(--card-accent, #777);
    box-shadow: 0 4px 10px rgba(0,0,0,0.22), inset 0 2px 4px rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-mcard-type-txt {
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow:
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px 1.5px 0 #000,
        1.5px 1.5px 0 #000,
        0 1.5px 0 #000,
        0 -1.5px 0 #000,
        1.5px 0 0 #000,
        -1.5px 0 0 #000,
        0 2px 4px rgba(0,0,0,0.85);
    white-space: nowrap;
    display: block;
    letter-spacing: 0.02em;
    line-height: 1;
}

.db-move-card.db-move-card-poster.db-card-grad-zmove .db-mcard-type-pill {
    border-radius: 999px;
    border: 3.5px solid #ffffff;
    padding: 6px 12px;
    background: var(--card-accent, #777);
    box-shadow: 0 4px 10px rgba(0,0,0,0.22), inset 0 2px 4px rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-mcard-type-txt {
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow:
        -1.5px -1.5px 0 #000,
        1.5px -1.5px 0 #000,
        -1.5px 1.5px 0 #000,
        1.5px 1.5px 0 #000,
        0 1.5px 0 #000,
        0 -1.5px 0 #000,
        1.5px 0 0 #000,
        -1.5px 0 0 #000,
        0 2px 4px rgba(0,0,0,0.85);
    white-space: nowrap;
    display: block;
    letter-spacing: 0.02em;
    line-height: 1;
}

.db-mcard-extra-pill.tag {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    padding: 2.5px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.7);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 18%, rgba(15, 23, 42, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 55%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--pill-color, #FF0045) 20%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    transition: all 0.2s ease;
}
.db-mcard-extra-pill.tag i {
    font-size: 0.6rem;
    color: var(--pill-color, #ffffff);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--pill-color, #ffffff) 80%, transparent));
}
.db-mcard-extra-pill.tag:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--pill-color, #FF0045) 28%, rgba(15, 23, 42, 0.85));
    border-color: color-mix(in srgb, var(--pill-color, #FF0045) 80%, transparent);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--pill-color, #FF0045) 40%, transparent);
}

.db-move-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.db-move-cats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.db-move-cats-row .db-move-cat-img {
    width: 22px;
    height: 14px;
    object-fit: contain;
}

.db-move-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
/* Sleek Glassmorphic Move Tags & Gen Pill */
.db-move-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.db-move-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2.5px 8px;
    border-radius: 999px;
    font-size: 0.63rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    font-family: 'Minecraft', monospace;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.7);
    background: color-mix(in srgb, var(--tag-bg, #FF0045) 18%, rgba(15, 23, 42, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-color: color-mix(in srgb, var(--tag-bg, #FF0045) 55%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--tag-bg, #FF0045) 20%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}
.db-move-meta-tag i {
    font-size: 0.62rem;
    color: var(--tag-bg, #ffffff);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tag-bg, #ffffff) 80%, transparent));
    display: inline-block;
    vertical-align: middle;
}
.db-move-meta-tag:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--tag-bg, #FF0045) 30%, rgba(15, 23, 42, 0.85));
    border-color: color-mix(in srgb, var(--tag-bg, #FF0045) 80%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tag-bg, #FF0045) 45%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.db-move-gen {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    padding: 2.5px 7px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.db-move-pp-max {
    font-size: 0.52rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.65);
    margin-left: 2px;
}

/* Таблицы для Способностей и Движений */
.db-table-abilities .th-id { width: 45px; text-align: center; }
.db-table-abilities .th-name { width: 170px; text-align: left; }
.db-table-abilities .th-desc { min-width: 260px; text-align: left; }
.db-table-abilities .th-holders { min-width: 200px; text-align: left; }
.db-table-abilities .th-count { width: 65px; text-align: center; }

.db-table-desc-full {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.35;
    word-break: break-word;
    max-width: 420px;
}
.db-table-holders-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    max-width: 520px;
}
.db-table-mini-holder {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.db-table-mini-holder:hover {
    transform: scale(1.25);
    background: rgba(233, 69, 96, 0.3);
    z-index: 2;
}
.db-table-holders-more {
    font-size: 0.55rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.5);
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
}
.db-table-subname {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: normal;
    display: block;
    margin-top: 1px;
}

.db-table-moves .th-id { width: 55px; text-align: center; }
.db-table-moves .th-name { min-width: 150px; text-align: left; }
.db-table-moves .th-type { width: 110px; text-align: left; }
.db-table-moves .th-cat { width: 120px; text-align: left; }
.db-table-moves .th-gen { width: 55px; text-align: center; }
.db-table-moves .th-tags { min-width: 100px; text-align: center; }

.db-table-type-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: bold;
}
.db-table-cats-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.db-table-cat-icon {
    width: 20px;
    height: 14px;
    object-fit: contain;
}
.db-table-cat-lbl {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
}

/* Move Numeric & Range Filter Controls */
.db-filter-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.db-num-input {
    width: 76px;
    height: 32px;
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    text-align: center;
    padding: 0 6px;
    outline: none;
    transition: all 0.2s ease;
}
.db-num-input:focus {
    border-color: #e94560;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
    background: rgba(15, 52, 96, 0.7);
}
.db-num-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
}
.db-range-sep {
    color: rgba(255, 255, 255, 0.4);
    font-weight: bold;
    font-size: 0.8rem;
}
.db-reset-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.18), rgba(233, 69, 96, 0.08));
    border: 1px solid rgba(233, 69, 96, 0.45);
    color: #ff6b81;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}
.db-reset-filters-btn i {
    font-size: 0.65rem;
    transition: transform 0.35s ease;
}
.db-reset-filters-btn:hover {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4);
}
.db-reset-filters-btn:hover i {
    transform: rotate(-180deg);
}
.db-reset-filters-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(233, 69, 96, 0.25);
}



/* ===== Режим «Страница / Профиль Покемона» (Dossier View) ===== */
.db-pokemon-profile-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0 40px;
    animation: fadeIn 0.3s ease;
}

/* Навигационная панель профиля */
.db-profile-nav-bar {
    position: relative;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 16px;
    backdrop-filter: blur(12px);
}
.db-profile-nav-left, .db-profile-nav-right, .db-profile-nav-center {
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-profile-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.db-profile-btn:hover {
    background: rgba(233, 69, 96, 0.35);
    border-color: #e94560;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233, 69, 96, 0.3);
}
.db-profile-btn.primary {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.4), rgba(194, 49, 82, 0.5));
    border-color: #e94560;
    color: #ffffff;
    font-weight: bold;
}
.db-profile-btn.primary:hover {
    background: linear-gradient(135deg, #e94560, #c62a47);
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.45);
}

/* Главная сетка профиля */

/* Переключатель форм покемона с одинаковым DexID */
.db-profile-forms-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-profile-forms-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-profile-forms-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.db-profile-form-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-profile-form-pill:hover {
    background: rgba(233, 69, 96, 0.25);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.5);
    transform: translateY(-1px);
}
.db-profile-form-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(233, 69, 96, 0.4);
}

.db-profile-hero-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
}
@media (max-width: 900px) {
    
/* Переключатель форм покемона с одинаковым DexID */
.db-profile-forms-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-profile-forms-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-profile-forms-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.db-profile-form-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-profile-form-pill:hover {
    background: rgba(233, 69, 96, 0.25);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.5);
    transform: translateY(-1px);
}
.db-profile-form-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(233, 69, 96, 0.4);
}

.db-profile-hero-grid {
        grid-template-columns: 1fr;
    }
}

/* Левая колонка: Арт, Типы, Описание */
.db-profile-card-left {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
}
.db-profile-card-left::before {
    content: '';
    position: absolute;
    top: -50px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: var(--poke-glow, rgba(233, 69, 96, 0.25));
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}
.db-profile-img-wrap {
    position: relative;
    z-index: 1;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-profile-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.65));
    transform: scale(var(--sprite-scale, 1));
    transform-origin: center center;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.db-profile-img:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.07));
}
.db-profile-img.is-pixel-sprite {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: auto;
    height: auto;
    max-width: 96px;
    max-height: 96px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.db-profile-img.is-pixel-sprite:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.08));
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.85));
}
.db-profile-img.is-gif {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.db-profile-img.is-gif:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.08));
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.85));
}
.db-profile-media-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.db-profile-toggle-group {
    display: inline-flex;
    gap: 2px;
    background: rgba(0, 0, 0, 0.45);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
}
.db-view-mode-btn,
.db-shiny-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    padding: 4px 8px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.db-view-mode-btn:hover,
.db-shiny-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}
.db-view-mode-btn.active,
.db-shiny-btn.active {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.db-profile-shiny-toggle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.db-profile-identity {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.db-profile-dex {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #e94560;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.db-profile-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    word-break: break-word;
}
.db-profile-name-en {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}
.db-profile-types {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.db-profile-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    min-width: 110px;
    max-width: 135px;
    box-sizing: border-box;
    white-space: nowrap;
    letter-spacing: 0.4px;
    backdrop-filter: blur(8px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.db-profile-type-badge:hover {
    transform: translateY(-2px);
}
.db-profile-type-badge img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}
.db-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}
.db-profile-desc-box {
    position: relative;
    z-index: 1;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}

/* Правая колонка: Характеристики, Способности, Защита типов */
.db-profile-card-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.db-profile-section {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 18px 22px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.db-profile-sec-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #e94560;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

/* Характеристики */
.db-profile-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-profile-stat-row {
    display: grid;
    grid-template-columns: 80px 120px 1fr;
    align-items: center;
    gap: 12px;
}
.db-profile-stat-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-profile-stat-num {
    white-space: nowrap;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    font-weight: bold;
    color: #ffffff;
    text-align: right;
}
.db-profile-bar-bg {
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.db-profile-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-profile-stat-total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #ffffff;
}

/* Способности */
.db-profile-abilities-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-profile-ability-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.db-profile-ability-item:hover {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    transform: translateX(3px);
}
.db-profile-ability-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffffff;
}
.db-profile-ability-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Эффективность типов */
.db-profile-efx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 6px;
}
.db-profile-efx-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 4px;
}
.db-profile-efx-type {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.db-profile-efx-val {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
}
.db-efx-super { color: #ff4757; }
.db-efx-resist { color: #2ed573; }
.db-efx-immune { color: #a4b0be; }
.db-efx-norm { color: rgba(255, 255, 255, 0.6); }

/* Нижний блок: Изучаемые приёмы (Movepool) */
.db-profile-learnsets-section {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.db-learnset-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}
.db-learnset-tab-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-learnset-tab-btn:hover {
    background: rgba(233, 69, 96, 0.2);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.4);
}
.db-learnset-tab-btn.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4);
    font-weight: bold;
}
.db-learnset-tab-count {
    background: rgba(0, 0, 0, 0.35);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.55rem;
}

/* Фильтры и поиск внутри таблицы приёмов */
.db-learnset-filter-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.db-learnset-search {
    flex: 1;
    min-width: 200px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.2s;
}
.db-learnset-search:focus {
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.25);
}
.db-learnset-select {
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    outline: none;
}

/* Таблица приёмов */
.db-learnset-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}
.db-learnset-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: left;
}

/* Стили интерактивной 3-позиционной сортировки таблицы приёмов */
.db-learnset-table th.db-sortable-th {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}
.db-learnset-table th.db-sortable-th:hover {
    background: rgba(233, 69, 96, 0.25) !important;
    color: #ffffff !important;
}
.db-learnset-table th.db-sortable-th.active {
    background: rgba(233, 69, 96, 0.35) !important;
    color: #ff6b81 !important;
    border-bottom: 2px solid #ff4757 !important;
}
.db-sort-arrows {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.25);
    vertical-align: middle;
    transition: all 0.2s ease;
}
.db-learnset-table th.db-sortable-th:hover .db-sort-arrows {
    color: rgba(255, 255, 255, 0.85);
}
.db-sort-arrows.active {
    color: #ff4757 !important;
    font-size: 0.8rem;
    filter: drop-shadow(0 0 6px rgba(255, 71, 87, 0.8));
}

.db-learnset-table th {
    background: rgba(15, 23, 42, 0.95);
    padding: 10px 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    user-select: none;
}
.db-learnset-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #ffffff;
    vertical-align: middle;
}
.db-learnset-row {
    cursor: pointer;
    transition: background 0.15s ease;
}
.db-learnset-row:hover {
    background: rgba(233, 69, 96, 0.12);
}
.db-learnset-lvl-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    display: inline-block;
    min-width: 44px;
    text-align: center;
}
.db-learnset-move-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.db-learnset-move-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-learnset-move-name-en {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
}
.db-learnset-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    width: auto;
    min-width: 92px;
    max-width: 130px;
    box-sizing: border-box;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.db-learnset-type-badge img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}

.db-learnset-table th.th-desc,
.db-learnset-table td.td-desc {
    min-width: 240px;
    max-width: 380px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    white-space: normal;
}
.db-learnset-table td.td-prio {
    text-align: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-learnset-table td.td-contact {
    text-align: center;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
}

.db-learnset-cat-img {
    width: 32px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}


/* Стили эффективности типов с учётом способностей */
.efx-ability-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.efx-ability-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 4px;
}
.efx-ability-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.efx-ability-pill:hover {
    background: rgba(233, 69, 96, 0.2);
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.4);
}
.efx-ability-pill.active {
    background: linear-gradient(135deg, #e94560, #c62a47);
    color: #ffffff;
    border-color: #e94560;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.35);
}
.efx-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
}
.efx-type-chip.has-ability-mod {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.6) !important;
}
.efx-ability-note-badge {
    font-size: 0.52rem;
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    padding: 1px 4px;
    border-radius: 4px;
    margin-left: 2px;
}


/* Стили интерактивного уровня Динамакса / Гигантамакса */


.db-dmax-pill-candy {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 2px;
    filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.8));
    display: inline-block;
}

.db-dmax-candy-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(0 0 6px rgba(255, 0, 127, 0.8));
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.db-dmax-level-switcher:hover 
.db-dmax-pill-candy {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 2px;
    filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.8));
    display: inline-block;
}

.db-dmax-candy-icon {
    transform: scale(1.15) rotate(10deg);
}

.db-dmax-level-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(255, 0, 127, 0.15), rgba(233, 69, 96, 0.1));
    border: 1px solid rgba(255, 0, 127, 0.35);
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(255, 0, 127, 0.2);
}
.db-dmax-level-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #ff007f;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
}
.db-dmax-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.db-dmax-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-dmax-pill:hover {
    background: rgba(255, 0, 127, 0.3);
    color: #ffffff;
    border-color: #ff007f;
    transform: translateY(-1px);
}
.db-dmax-pill.active {
    background: linear-gradient(135deg, #ff007f, #e94560);
    color: #ffffff;
    border-color: #ff007f;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(255, 0, 127, 0.6);
}
.db-profile-bar-fill.dmax-hp-glow {
    background: linear-gradient(90deg, #ff007f, #e94560, #ff4757) !important;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.db-dmax-badge-hp {
    white-space: nowrap;
    font-size: 0.58rem;
    color: #ff007f;
    font-weight: bold;
    margin-left: 4px;
    text-shadow: 0 0 6px rgba(255, 0, 127, 0.5);
}


/* ===== Модальное окно предпросмотра и настройки карточки покемона ===== */
.db-card-customizer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    animation: fadeIn 0.25s ease;
}
.db-card-customizer-modal {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    width: 100%;
    max-width: 960px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.db-card-customizer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.95);
}
.db-card-customizer-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-card-customizer-body {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
@media (max-width: 850px) {
    .db-card-customizer-body {
        grid-template-columns: 1fr;
    }
}
.db-card-preview-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px;
    overflow: auto;
    max-height: 68vh;
}
.db-card-preview-canvas {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
.db-card-settings-pane {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.db-card-setting-group {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-card-setting-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #e94560;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-card-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    user-select: none;
}
.db-card-customizer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.95);
}


.db-profile-nav-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}


/* ==========================================================================
   ITEMS DATABASE STYLES
   ========================================================================== */
.db-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    width: 100%;
}
.db-item-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 165px;
}
.db-item-card:hover {
    border-color: #ff4757;
    background: rgba(233, 69, 96, 0.12);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255, 71, 87, 0.2);
}
.db-item-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.db-item-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.db-item-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.db-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.db-item-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-item-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-item-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: fit-content;
}
.db-item-cat-badge.competitive { background: rgba(233, 69, 96, 0.2); color: #ff6b81; border: 1px solid rgba(233, 69, 96, 0.4); }
.db-item-cat-badge.type_boost { background: rgba(52, 152, 219, 0.2); color: #74b9ff; border: 1px solid rgba(52, 152, 219, 0.4); }
.db-item-cat-badge.plates_memories { background: rgba(0, 206, 201, 0.2); color: #00cec9; border: 1px solid rgba(0, 206, 201, 0.4); }
.db-item-cat-badge.signature { background: rgba(241, 196, 15, 0.2); color: #f1c40f; border: 1px solid rgba(241, 196, 15, 0.4); }
.db-item-cat-badge.berry { background: rgba(46, 204, 113, 0.2); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.4); }
.db-item-cat-badge.mega { background: rgba(155, 89, 182, 0.2); color: #a29bfe; border: 1px solid rgba(155, 89, 182, 0.4); }
.db-item-cat-badge.z_crystal { background: rgba(255, 159, 26, 0.2); color: #ff9f1a; border: 1px solid rgba(255, 159, 26, 0.4); }
.db-item-cat-badge.evolution { background: rgba(255, 107, 129, 0.2); color: #ff6b81; border: 1px solid rgba(255, 107, 129, 0.4); }
.db-item-cat-badge.pokeball { background: rgba(235, 77, 75, 0.2); color: #eb4d4b; border: 1px solid rgba(235, 77, 75, 0.4); }
.db-item-cat-badge.medicine { background: rgba(112, 161, 255, 0.2); color: #70a1ff; border: 1px solid rgba(112, 161, 255, 0.4); }
.db-item-cat-badge.training { background: rgba(30, 144, 255, 0.2); color: #1e90ff; border: 1px solid rgba(30, 144, 255, 0.4); }
.db-item-cat-badge.tera_shard { background: rgba(0, 210, 211, 0.2); color: #00d2d3; border: 1px solid rgba(0, 210, 211, 0.4); }
.db-item-cat-badge.utility { background: rgba(164, 176, 190, 0.2); color: #a4b0be; border: 1px solid rgba(164, 176, 190, 0.4); }

.db-item-desc-preview {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
    margin-top: auto;
    min-height: 64px;
}
.db-item-table-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
}
.db-table-items th.th-desc,
.db-table-items td.td-desc {
    text-align: left;
    min-width: 280px;
    font-size: 0.74rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
}


/* ==========================================================================
   BATTLE MECHANICS: FIELD EFFECTS, STATUSES, GIMMICKS STYLES
   ========================================================================== */

/* --- 1. Field Effects Grid & Cards --- */
.db-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    width: 100%;
}
.db-field-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 220px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-field-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--field-accent, #ff9f43);
    opacity: 0.8;
}
.db-field-card:hover {
    border-color: var(--field-accent, #ff9f43);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 159, 67, 0.2);
}
.db-field-card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.db-field-card-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.db-field-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.db-field-cat-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    margin-left: auto;
}
.db-field-title-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}
.db-field-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.25;
    word-break: break-word;
}
.db-field-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    font-weight: normal;
}
.db-field-duration {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #feca57;
    background: rgba(254, 202, 87, 0.12);
    border: 1px solid rgba(254, 202, 87, 0.25);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    line-height: 1.3;
}
.db-field-desc-preview {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
    margin-top: auto;
}
.db-field-triggers-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.db-field-triggers-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.db-field-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.db-field-pill-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}
.db-field-pill-chip.move {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    color: #ff7675;
}
.db-field-pill-chip.move:hover {
    background: rgba(233, 69, 96, 0.35);
    border-color: #ff4757;
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}
.db-field-pill-chip.ability {
    background: rgba(241, 196, 15, 0.15);
    border-color: rgba(241, 196, 15, 0.4);
    color: #f1c40f;
}
.db-field-pill-chip.ability:hover {
    background: rgba(241, 196, 15, 0.35);
    border-color: #f39c12;
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(241, 196, 15, 0.3);
}
.db-field-pill-chip .en {
    font-size: 0.55rem;
    opacity: 0.65;
    font-style: italic;
}

/* Modal interactive items */
.db-field-interactive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.db-field-interactive-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-field-interactive-item:hover {
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.db-field-interactive-item.move:hover {
    border-color: #ff4757;
}
.db-field-interactive-item.ability:hover {
    border-color: #f1c40f;
}
.db-item-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
}
.db-field-interactive-item.move .db-item-icon-box {
    color: #ff7675;
    background: rgba(233, 69, 96, 0.2);
}
.db-field-interactive-item.ability .db-item-icon-box {
    color: #f1c40f;
    background: rgba(241, 196, 15, 0.2);
}
.db-item-text-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.db-item-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    color: #ffffff;
}
.db-item-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    font-weight: normal;
}
.db-item-type-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
}
.db-item-effect-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.3;
}
.db-item-arrow {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.25);
    transition: transform 0.2s ease, color 0.2s ease;
}
.db-field-interactive-item:hover .db-item-arrow {
    transform: translateX(3px);
    color: #ffffff;
}

/* --- 2. Statuses Grid & Cards --- */
.db-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    width: 100%;
}
.db-status-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 220px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.db-status-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--status-color, #e84118);
    opacity: 0.8;
}
.db-status-card:hover {
    border-color: var(--status-color, #e84118);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 20px var(--status-glow, var(--status-color, rgba(232, 65, 24, 0.25)));
}
.db-status-card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.db-status-card-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.db-status-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 8px;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
}
.db-status-type-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    margin-left: auto;
}
.db-status-type-badge.non_volatile {
    background: rgba(235, 77, 75, 0.25);
    color: #ff7675;
    border: 1px solid rgba(235, 77, 75, 0.5);
}
.db-status-type-badge.volatile {
    background: rgba(162, 155, 254, 0.25);
    color: #a29bfe;
    border: 1px solid rgba(162, 155, 254, 0.5);
}
.db-status-title-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}
.db-status-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.25;
    word-break: break-word;
}
.db-status-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    font-weight: normal;
}
.db-status-desc-preview {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
    margin-top: auto;
}
.db-status-imm-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.db-status-imm-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.db-status-imm-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

/* --- 3. Gimmicks Grid & Cards --- */
.db-gimmick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    width: 100%;
}
.db-gimmick-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.db-gimmick-card:hover {
    transform: translateY(-4px);
    border-color: var(--gimmick-color, #e056fd);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(224, 86, 253, 0.25);
}
.db-gimmick-banner {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}
.db-gimmick-banner-icon {
    font-size: 1.8rem;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}
.db-gimmick-banner-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.db-gimmick-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.db-gimmick-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}
.db-gimmick-gen-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}
.db-gimmick-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.db-gimmick-short-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}
.db-gimmick-features-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #ff9f43;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.db-gimmick-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.db-gimmick-features-list li {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.35;
}
.db-gimmick-features-list li i {
    font-size: 0.7rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Common detail badges */
.db-detail-trigger-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Mechanic & Detail Modal Header */

/* Status Detail Modal Banner & Download Button */
.db-status-banner {
    border-radius: 14px;
    padding: 14px 18px;
    margin-top: 10px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.db-status-banner-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
}

.db-status-banner-dl-btn:hover {
    background: var(--modal-accent, rgba(255, 255, 255, 0.22));
    border-color: var(--modal-accent, rgba(255, 255, 255, 0.45));
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 10px var(--modal-glow, rgba(255, 255, 255, 0.2));
}

.db-status-banner-dl-btn i {
    font-size: 0.72rem;
}

@media (max-width: 600px) {
    .db-status-banner {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .db-status-banner-right {
        width: 100%;
        justify-content: space-between;
    }
}

.db-mechanic-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    padding-right: 40px;
}
.db-mechanic-modal-icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}
.db-mechanic-modal-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
.db-mechanic-modal-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.db-mechanic-title-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.3rem;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    word-break: break-word;
}
.db-mechanic-title-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    margin-top: -2px;
}
.db-mechanic-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.db-mechanic-cat-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 12px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Interactive Chips for Cures & Immunities */
.db-interactive-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 7px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-interactive-chip.static {
    cursor: default;
}
.db-interactive-chip:not(.static):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.db-interactive-chip.move {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    color: #ff7675;
}
.db-interactive-chip.move:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #ff4757;
    box-shadow: 0 2px 10px rgba(255, 71, 87, 0.35);
}
.db-interactive-chip.ability {
    background: rgba(241, 196, 15, 0.15);
    border-color: rgba(241, 196, 15, 0.4);
    color: #f1c40f;
}
.db-interactive-chip.ability:hover {
    background: rgba(241, 196, 15, 0.3);
    border-color: #f39c12;
    box-shadow: 0 2px 10px rgba(241, 196, 15, 0.35);
}
.db-interactive-chip.item {
    background: rgba(46, 204, 113, 0.15);
    border-color: rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}
.db-interactive-chip.item:hover {
    background: rgba(46, 204, 113, 0.3);
    border-color: #27ae60;
    box-shadow: 0 2px 10px rgba(46, 204, 113, 0.35);
}
.db-interactive-chip.field {
    background: rgba(0, 210, 211, 0.15);
    border-color: rgba(0, 210, 211, 0.4);
    color: #00d2d3;
}
.db-interactive-chip.field:hover {
    background: rgba(0, 210, 211, 0.3);
    border-color: #01a3a4;
    box-shadow: 0 2px 10px rgba(0, 210, 211, 0.35);
}
.db-interactive-chip.poketype {
    background: rgba(162, 155, 254, 0.15);
    border-color: rgba(162, 155, 254, 0.4);
    color: #a29bfe;
}
.db-interactive-chip.switch {
    background: rgba(116, 185, 255, 0.15);
    border-color: rgba(116, 185, 255, 0.4);
    color: #74b9ff;
}
.chip-arrow {
    font-size: 0.65rem;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.db-interactive-chip:hover .chip-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* ==========================================================================
   EXPANDED DATABASE: GIMMICKS, TYPES, NATURES, ADVANCED MECHANICS
   ========================================================================== */

/* 1. Gimmicks Cards & Grid */
.db-gimmick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    width: 100%;
}
.db-gimmick-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
    display: flex;
    flex-direction: column;
}
.db-gimmick-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--gimmick-color, #e056fd)30;
    border-color: var(--gimmick-color, #e056fd);
}
.db-gimmick-banner {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}
.db-gimmick-banner-icon {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #ffffff;
    flex-shrink: 0;
}
.db-gimmick-banner-title {
    flex: 1;
}
.db-gimmick-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.db-gimmick-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}
.db-gimmick-gen-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px 10px;
    border-radius: 20px;
    color: #ffffff;
    white-space: nowrap;
}
.db-gimmick-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
}
.db-gimmick-short-desc {
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}
.db-gimmick-features-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #f1c40f;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-gimmick-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.db-gimmick-features-list li {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.db-gimmick-footer-btn {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: var(--gimmick-color, #e056fd);
}

/* 2. Types Grid & Calculator */
.db-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    width: 100%;
}
.db-type-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.db-type-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px var(--type-color, #ff7675)30;
    border-color: var(--type-color, #ff7675);
}
.db-type-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
}
.db-type-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.db-type-title-box {
    flex: 1;
}
.db-type-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #ffffff;
    font-weight: bold;
}
.db-type-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}
.db-type-badge-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.db-type-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.45;
}
.db-type-matchups-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
    border-radius: 8px;
}
.db-type-matchup-col {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
}
.db-type-matchup-col .label {
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.7);
    min-width: 90px;
}
.db-type-matchup-col .badges-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.db-type-mini-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Type Calculator */
/* Type Calculator (Уязвимости и сопротивления) */
.db-type-calc-container {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(20, 27, 48, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.db-type-calc-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.db-type-calc-title-box h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #00cec9;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.db-type-calc-title-box p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.5;
}

.db-type-calc-selectors-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(0, 0, 0, 0.3);
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.db-calc-row-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-calc-row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.db-calc-type-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Individual Type Button */
.db-calc-type-btn {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--t-color, #64748b);
    color: #e2e8f0;
    border-radius: 10px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    outline: none;
}
.db-calc-type-btn:hover {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--t-color, rgba(255, 255, 255, 0.3));
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.db-calc-type-btn.active {
    background: var(--t-color, #00cec9) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px var(--t-color, #00cec9)88, 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    transform: translateY(-1px) scale(1.04);
    font-weight: 800;
}
.db-calc-type-btn.disabled {
    opacity: 0.35;
    filter: grayscale(0.85);
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}
.db-calc-type-btn-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    flex-shrink: 0;
}

/* "None (1 type)" Button */
.db-calc-none-btn {
    border-left-color: #94a3b8;
    background: rgba(30, 41, 59, 0.5);
}
.db-calc-none-btn i {
    font-size: 0.85rem;
    color: #94a3b8;
}
.db-calc-none-btn.active {
    background: #475569 !important;
    border-color: #94a3b8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(148, 163, 184, 0.4) !important;
}
.db-calc-none-btn.active i {
    color: #ffffff;
}

/* Selected Preview */
.db-type-calc-selected-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(15, 23, 42, 0.8);
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/* Results Section */
.db-type-calc-results {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.db-calc-group {
    background: rgba(15, 23, 42, 0.65);
    border-radius: 12px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 5px solid #888;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}
.db-calc-group.danger-heavy {
    border-left-color: #ff3838;
    background: linear-gradient(90deg, rgba(255, 56, 56, 0.12) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.danger {
    border-left-color: #ff7675;
    background: linear-gradient(90deg, rgba(255, 118, 117, 0.1) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.resist {
    border-left-color: #55efc4;
    background: linear-gradient(90deg, rgba(85, 239, 196, 0.1) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.resist-heavy {
    border-left-color: #00b894;
    background: linear-gradient(90deg, rgba(0, 184, 148, 0.12) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.db-calc-group.immune {
    border-left-color: #fdcb6e;
    background: linear-gradient(90deg, rgba(253, 203, 110, 0.1) 0%, rgba(15, 23, 42, 0.65) 100%);
}

.db-calc-group-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-calc-badges-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 768px) {
    .db-type-calc-container {
        padding: 16px;
        gap: 16px;
    }
    .db-type-calc-selectors-block {
        padding: 12px;
    }
    .db-calc-type-btn {
        padding: 5px 9px;
        font-size: 0.72rem;
        gap: 6px;
    }
    .db-calc-type-btn-icon {
        width: 18px;
        height: 18px;
    }
}


/* 3. Natures Grid & Cards */
.db-nature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    width: 100%;
}
.db-nature-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-nature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    border-color: #2ecc71;
}
.db-nature-card.neutral {
    border-color: rgba(255, 255, 255, 0.08);
}
.db-nature-card.neutral:hover {
    border-color: #74b9ff;
}
.db-nature-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.db-nature-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.db-nature-info {
    flex: 1;
}
.db-nature-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: bold;
}
.db-nature-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
}
.db-nature-stats-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.db-nature-stat-plus {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(46, 204, 113, 0.3);
}
.db-nature-stat-minus {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ff7675;
    background: rgba(255, 118, 117, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 118, 117, 0.3);
}
.db-nature-neutral-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #74b9ff;
    background: rgba(116, 185, 255, 0.12);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-nature-meta-row {
    margin-top: auto;
}
.db-nature-mint-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-nature-mint-btn:hover {
    background: rgba(46, 204, 113, 0.2);
    border-color: #2ecc71;
    color: #2ecc71;
}

/* 4. Advanced Mechanics Grid & Cards */
.db-advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 18px;
    width: 100%;
}
/* ===== ADVANCED MECHANICS CARDS ===== */
.db-advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
}
.db-advanced-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
}
.db-advanced-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 18px var(--adv-color, #ff7675)30;
    border-color: var(--adv-color, #ff7675);
}
.db-advanced-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}
.db-advanced-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.db-advanced-title-box {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.db-advanced-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: bold;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
}
.db-advanced-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
    word-break: break-word;
    overflow-wrap: break-word;
}
.db-advanced-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    align-self: flex-start;
}
.db-advanced-desc-preview {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.5;
}
.db-advanced-footer-btn {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: var(--adv-color, #ff7675);
}
.db-math-formula-box {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #00cec9;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 206, 201, 0.3);
    padding: 12px 16px;
    border-radius: 8px;
    margin: 10px 0;
    overflow-x: auto;
}

/* Typography & Highlight Enhancements for Database Modals */
.db-section-subtitle {
    font-family: 'Minecraft', monospace;
    font-size: 0.94rem;
    color: #00cec9;
    margin: 16px 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}
.db-hl-bold {
    color: #ffffff;
    font-weight: 700;
}
.db-hl-italic {
    color: #f1c40f;
    font-style: italic;
}
.db-text-list-item {
    margin-bottom: 9px;
    line-height: 1.65;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.92);
}
.db-text-paragraph {
    margin-bottom: 10px;
    line-height: 1.65;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.88);
}
.db-modal-styled-list {
    margin: 0;
    padding-left: 20px;
    list-style: square;
}
.db-matchup-panel {
    background: rgba(255, 255, 255, 0.03);
    padding: 14px 18px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
}
.db-type-mini-badge.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    filter: brightness(1.15);
}
.stat-boost-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.stat-boost-tag.plus {
    background: rgba(46, 204, 113, 0.18);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
}
.stat-boost-tag.minus {
    background: rgba(255, 118, 117, 0.18);
    color: #ff7675;
    border: 1px solid rgba(255, 118, 117, 0.4);
}
.db-interactive-chip.status {
    background: rgba(162, 155, 254, 0.15);
    border-color: rgba(162, 155, 254, 0.4);
    color: #a29bfe;
}
.db-interactive-chip.status:hover {
    background: rgba(162, 155, 254, 0.3);
    border-color: #6c5ce7;
    box-shadow: 0 2px 10px rgba(108, 92, 231, 0.35);
}
.db-interactive-chip.gimmick {
    background: rgba(224, 86, 253, 0.15);
    border-color: rgba(224, 86, 253, 0.4);
    color: #e056fd;
}
.db-interactive-chip.gimmick:hover {
    background: rgba(224, 86, 253, 0.3);
    border-color: #be2edd;
    box-shadow: 0 2px 10px rgba(224, 86, 253, 0.35);
}

/* ==========================================================================
   OFFICIAL TYPE PILLS, IMAGE ICONS, CARDS & MODAL HERO
   ========================================================================== */

/* Universal Type Pill Badge with Image */
.db-type-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, var(--badge-color, #888) 18%, transparent);
    color: var(--badge-color, #fff);
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    text-shadow: none;
    box-shadow: 0 0 8px color-mix(in srgb, var(--badge-color, #888) 18%, transparent);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
    border: 1px solid color-mix(in srgb, var(--badge-color, #888) 50%, transparent);
    letter-spacing: 0.2px;
    backdrop-filter: blur(6px);
    box-sizing: border-box;
    white-space: nowrap;
}
.db-type-pill-badge.size-sm {
    padding: 3px 10px;
    font-size: 0.64rem;
    min-width: 90px;
    max-width: 125px;
    width: auto;
}
.db-type-pill-badge.size-md {
    padding: 4px 11px;
    font-size: 0.72rem;
    min-width: 94px;
}
.db-type-pill-badge.size-lg {
    padding: 6px 16px;
    font-size: 0.82rem;
    min-width: 114px;
}
.db-type-pill-badge.clickable {
    cursor: pointer;
}
.db-type-pill-badge.clickable:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--badge-color, #888) 32%, transparent);
    border-color: var(--badge-color, #888);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 14px color-mix(in srgb, var(--badge-color, #888) 45%, transparent);
    filter: brightness(1.2);
}
.db-type-pill-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}
.db-type-pill-badge.size-md .db-type-pill-icon {
    width: 16px;
    height: 16px;
}
.db-type-pill-badge.size-lg .db-type-pill-icon {
    width: 18px;
    height: 18px;
}

.db-move-type-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
/* Duplicate pill block removed */

/* Types Grid & Cards */
.db-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    width: 100%;
}
.db-type-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 18px 20px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.db-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45), 0 0 20px var(--type-color, #ff7675)35;
    border-color: var(--type-color, #ff7675);
}
.db-type-card-top-bar {
    display: flex;
    align-items: center;
    gap: 14px;
}
.db-type-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.db-type-card-main-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.db-type-title-area {
    flex: 1;
}
.db-type-title-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    color: #ffffff;
    font-weight: bold;
}
.db-type-title-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}
.db-type-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
}
.db-type-card-matchups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 14px;
    border-radius: 10px;
    margin-top: auto;
}
.db-type-matchup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.74rem;
}
.db-type-matchup-row .matchup-lbl {
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.7);
    min-width: 95px;
    flex-shrink: 0;
    margin-top: 0;
}
.db-type-matchup-row .matchup-badges-flow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}
.db-type-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: var(--type-color, #ff7675);
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Type Modal Hero Banner */
.db-type-modal-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid;
}
.db-type-modal-img-wrap {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.db-type-modal-big-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.db-type-modal-title-box {
    flex: 1;
}
.db-type-modal-top-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.db-type-modal-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.4rem;
    color: #ffffff;
    margin: 0;
}
.db-type-modal-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    margin-top: 2px;
}

/* Matchup Structured Panel */
.db-type-detail-modal {
    max-width: 860px !important;
}
.db-matchup-structured-panel {
    background: rgba(255, 255, 255, 0.03);
    padding: 16px 20px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.db-matchup-stat-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-matchup-stat-row .row-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
}
.db-matchup-stat-row.super .row-title { color: #55efc4; }
.db-matchup-stat-row.not-very .row-title { color: #fdcb6e; }
.db-matchup-stat-row.weak .row-title { color: #ff7675; }
.db-matchup-stat-row.resist .row-title { color: #00cec9; }
.db-matchup-stat-row.immune .row-title { color: #f1c40f; }

.db-matchup-stat-row .badges-wrap {
    display: flex;
    column-gap: 10px;
    row-gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.empty-val {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Minecraft', monospace;
}
.db-type-calc-selected-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.25);
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Round Type Icon Circles for Card Preview */
.db-type-icon-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    outline: none;
}
.db-type-icon-circle:hover {
    transform: translateY(-2px) scale(1.18);
    box-shadow: none;
    border-color: transparent;
    filter: brightness(1.2) drop-shadow(0 2px 8px var(--badge-color, rgba(255, 255, 255, 0.5)));
}
.db-type-circle-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
    pointer-events: none;
}

/* Modal Description Text Fix */
.db-detail-desc-full {
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    border-left: 4px solid var(--badge-color, #ff7675) !important;
}
.db-type-detail-text {
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

/* Gimmicks Tables: Z-Moves & Max-Moves */
.db-gimmick-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.db-gimmick-table th {
    background: rgba(255, 255, 255, 0.08);
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: #00cec9;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.db-gimmick-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}
.db-gimmick-move-row:hover td {
    background: rgba(255, 255, 255, 0.04);
}
.db-z-move-name-ru, .db-max-move-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: bold;
}
.db-z-move-name-en, .db-max-move-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
}

/* Max Guard Golden Shield Banner */
.db-max-guard-banner {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.2) 0%, rgba(211, 84, 0, 0.12) 100%);
    border: 2px solid #f1c40f;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 16px 0;
    box-shadow: 0 6px 20px rgba(241, 196, 15, 0.25);
}
.db-max-guard-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(241, 196, 15, 0.25);
    border: 2px solid #f1c40f;
    color: #f1c40f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(241, 196, 15, 0.4);
}
.db-max-guard-info {
    flex: 1;
}
.db-max-guard-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #f1c40f;
    font-weight: bold;
    margin-bottom: 6px;
}
.db-max-guard-desc {
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

/* Move Modal Actions Row */
.db-move-actions-row {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}
.db-move-learners-btn {
    flex: 1;
    background: linear-gradient(135deg, #0984e3 0%, #00cec9 100%);
    border: none;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 12px 18px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(9, 132, 227, 0.4);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.db-move-learners-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 206, 201, 0.5);
    filter: brightness(1.1);
}

/* Move Learners Modal & Grid */
.db-learners-modal {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.db-learners-header {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 14px;
}
.db-learners-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
}
.db-learners-subtitle {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #00cec9;
    margin-top: 4px;
}
.db-learners-body {
    overflow-y: auto;
    max-height: 65vh;
    padding-right: 6px;
}
.db-learners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.db-learner-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-learner-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 206, 201, 0.25);
}
.db-learner-img-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.db-learner-img-wrap img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
}
.db-learner-info {
    flex: 1;
    min-width: 0;
}
.db-learner-dex {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
}
.db-learner-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-learner-types {
    display: flex;
    gap: 4px;
    margin: 4px 0;
}
.db-learner-method {
    font-size: 0.7rem;
    color: #fdcb6e;
    font-family: 'Minecraft', monospace;
}
.db-no-learners-msg {
    text-align: center;
    padding: 30px 20px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
}

/* Type Matrix 18x18 Table */
.db-type-matrix-container {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px 20px;
    width: 100%;
}
.db-type-matrix-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
}
.db-type-matrix-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.legend-box {
    width: 26px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.72rem;
}
.db-matrix-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.db-type-matrix-table {
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
    min-width: 780px;
}
.db-matrix-corner {
    background: rgba(0, 0, 0, 0.4);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #00cec9;
    padding: 6px;
    text-align: center;
    border-radius: 6px;
    min-width: 120px;
}
.corner-atk { color: #55efc4; }
.corner-def { color: #74b9ff; }
.db-matrix-th-col {
    padding: 4px;
    text-align: center;
}
.db-matrix-header-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.db-matrix-hdr-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.db-matrix-th-row {
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffffff;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.db-matrix-th-row:hover {
    transform: scale(1.04);
    filter: brightness(1.15);
}
.db-matrix-row-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.db-matrix-cell {
    text-align: center;
    vertical-align: middle;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.75rem;
    border-radius: 6px;
    height: 34px;
    min-width: 34px;
    transition: transform 0.15s ease;
}
.db-matrix-cell:hover {
    transform: scale(1.2);
    z-index: 2;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.mult-2 {
    background: #2ed573 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.mult-half {
    background: #ff4757 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.mult-0 {
    background: #2f3542 !important;
    color: #a4b0be !important;
    border: 1px solid rgba(255,255,255,0.1);
}
.mult-1 {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.2);
}

/* 5x5 Nature Matrix Table */
.db-nature-matrix-container {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 18px 22px;
    width: 100%;
}
.db-nature-matrix-header {
    margin-bottom: 16px;
}
.db-nature-matrix-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    color: #ffffff;
    margin: 0;
}
.db-nature-matrix-header p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 6px 0 0 0;
}
.db-nature-matrix-table {
    border-collapse: separate;
    border-spacing: 6px;
    width: 100%;
    min-width: 720px;
}
.db-nature-corner {
    background: rgba(0, 0, 0, 0.35);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    min-width: 130px;
}
.corner-up { color: #55efc4; font-weight: bold; }
.corner-down { color: #ff7675; font-weight: bold; }
.db-nature-matrix-th-top {
    background: rgba(255, 255, 255, 0.04);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #55efc4;
}
.db-nature-matrix-th-left {
    background: rgba(255, 255, 255, 0.04);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #ff7675;
}
.db-nature-matrix-cell {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-nature-matrix-cell:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 206, 201, 0.25);
}
.db-nature-matrix-cell.neutral-cell {
    background: rgba(241, 196, 15, 0.1);
    border-color: rgba(241, 196, 15, 0.3);
}
.cell-nature-name-ru {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: bold;
}
.cell-nature-name-en {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
}
.cell-mint {
    font-size: 0.65rem;
    color: #55efc4;
    font-family: 'Minecraft', monospace;
    margin-top: 4px;
}

/* Gimmick Standalone Table Views & Quick Buttons */
.db-gimmick-standalone-container {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 20px 24px;
    width: 100%;
}
.db-gimmick-standalone-header {
    margin-bottom: 20px;
}
.db-gimmick-standalone-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
}
.db-gimmick-standalone-header p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 6px 0 0 0;
}
.db-gimmick-quick-actions {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-gimmick-quick-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    font-weight: bold;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.db-gimmick-quick-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 206, 201, 0.25);
}
.db-gimmick-quick-btn.gold {
    background: rgba(241, 196, 15, 0.12);
    border-color: rgba(241, 196, 15, 0.4);
    color: #f1c40f;
}
.db-gimmick-quick-btn.gold:hover {
    background: rgba(241, 196, 15, 0.25);
    border-color: #f1c40f;
    box-shadow: 0 4px 12px rgba(241, 196, 15, 0.35);
}

/* Muted Eye-Friendly Type Matrix Colors */
.db-matrix-cell.mult-2, .legend-box.mult-2 {
    background: rgba(46, 204, 113, 0.22) !important;
    color: #86efac !important;
    border: 1px solid rgba(46, 204, 113, 0.45) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.db-matrix-cell.mult-half, .legend-box.mult-half {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.38) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.db-matrix-cell.mult-0, .legend-box.mult-0 {
    background: rgba(30, 41, 59, 0.85) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    text-shadow: none;
}
.db-matrix-cell.mult-1, .legend-box.mult-1 {
    background: rgba(255, 255, 255, 0.02) !important;
    color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.035) !important;
}
.db-matrix-cell {
    text-align: center;
    vertical-align: middle;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    border-radius: 6px;
    height: 32px;
    min-width: 32px;
    transition: all 0.15s ease;
}
.db-matrix-cell:hover {
    transform: scale(1.15);
    z-index: 2;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.4);
    filter: brightness(1.2);
}

/* Muted Soft Type Matrix Headers */
.db-matrix-header-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: color-mix(in srgb, var(--hdr-color, #888) 32%, rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid color-mix(in srgb, var(--hdr-color, #888) 55%, transparent) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: all 0.2s ease;
}
.db-matrix-header-badge:hover {
    background: color-mix(in srgb, var(--hdr-color, #888) 50%, rgba(15, 23, 42, 0.95)) !important;
    border-color: var(--hdr-color, #888) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 8px var(--hdr-color, #888);
}

.db-matrix-th-row {
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    color: #ffffff;
    white-space: nowrap;
    background: color-mix(in srgb, var(--row-color, #888) 32%, rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid color-mix(in srgb, var(--row-color, #888) 55%, transparent) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    transition: all 0.2s ease;
}
.db-matrix-th-row:hover {
    background: color-mix(in srgb, var(--row-color, #888) 50%, rgba(15, 23, 42, 0.95)) !important;
    border-color: var(--row-color, #888) !important;
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 10px color-mix(in srgb, var(--row-color, #888) 40%, transparent);
}

/* BP Conversion Micro-Calculators */
.db-bp-calc-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(26, 38, 70, 0.8) 100%);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 14px;
    padding: 18px 22px;
    margin: 18px 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.db-bp-calc-header h3 {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #00cec9;
    margin: 0;
}
.db-bp-calc-header p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 4px 0 14px 0;
}
.db-bp-calc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.db-bp-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
    align-items: flex-start;
    width: fit-content;
}
.db-bp-input-wrap label {
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.db-bp-calc-box .num-input-group {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: fit-content !important;
    align-self: flex-start !important;
    border: 1px solid rgba(0, 206, 201, 0.5) !important;
    background: #0f172a !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
}
.db-bp-calc-box .num-input-group .num-btn {
    width: 34px !important;
    height: 36px !important;
    background: rgba(0, 206, 201, 0.2) !important;
    color: #00cec9 !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s, transform 0.1s !important;
    flex-shrink: 0 !important;
}
.db-bp-calc-box .num-input-group .num-btn:hover {
    background: rgba(0, 206, 201, 0.4) !important;
    color: #ffffff !important;
}
.db-bp-calc-box .num-input-group input[type="number"],
.db-bp-clean-input {
    width: 56px !important;
    height: 36px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.95rem !important;
    font-weight: bold !important;
    text-align: center !important;
    border: none !important;
    outline: none !important;
    padding: 0 2px !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
}
.db-bp-input-wrap select {
    background: #0f172a;
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #ffffff;
    padding: 8px 14px;
    height: 38px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    outline: none;
    transition: all 0.2s ease;
}
.db-bp-input-wrap select:focus {
    border-color: #00cec9;
    box-shadow: 0 0 0 3px rgba(0, 206, 201, 0.2);
}
.db-bp-quick-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 220px;
}
.db-bp-quick-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    margin-right: 2px;
}
.db-bp-quick-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 5px 9px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.db-bp-quick-btn:hover {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #ffffff;
}
.db-bp-quick-btn.active {
    background: #00cec9;
    border-color: #00cec9;
    color: #0f172a;
    font-weight: bold;
}
.db-bp-result-wrap {
    background: rgba(0, 206, 201, 0.12);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    padding: 8px 18px;
    text-align: center;
    min-width: 170px;
    margin-left: auto;
}
.db-bp-result-wrap .res-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-bp-result-wrap .res-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    font-weight: bold;
    color: #ffffff;
    margin-top: 2px;
}

/* Clean & Compact Learners Modal */
.db-learners-modal {
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.db-learners-header {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
}
.db-learners-header h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    color: #ffffff;
    margin: 0;
}
.db-learners-subtitle {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: #00cec9;
    margin-top: 4px;
}
.db-learners-body {
    overflow-y: auto;
    max-height: 68vh;
    padding: 4px 6px 10px 2px;
}
.db-learners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}
.db-learner-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.18s ease;
}
.db-learner-card:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.25);
}
.db-learner-img-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}
.db-learner-img-wrap img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
}
.db-learner-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.db-learner-top-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.db-learner-dex {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}
.db-learner-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-learner-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}
.db-learner-types {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.db-learner-types .db-type-icon-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}
.db-learner-types .db-type-icon-circle img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.db-learner-method {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #f1c40f;
    background: rgba(241, 196, 15, 0.12);
    border: 1px solid rgba(241, 196, 15, 0.3);
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

/* Move Modal Action Buttons Equal 50% Width */
.db-move-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 18px !important;
}

.db-move-actions-row > button,
.db-move-actions-row .db-move-learners-btn,
.db-move-actions-row .db-detail-download {
    flex: 1 1 0 !important;
    width: 50% !important;
    min-width: 0 !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.8rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.db-move-actions-row .db-move-learners-btn {
    background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%) !important;
    border: 1px solid rgba(0, 206, 201, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 180, 219, 0.3) !important;
}

.db-move-actions-row .db-move-learners-btn:hover {
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 180, 219, 0.45) !important;
}

.db-move-actions-row .db-detail-download {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.db-move-actions-row .db-detail-download:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

/* Metamorphosis Section Styles */
.db-meta-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 30px;
}
.db-meta-explain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 18px;
}
.db-meta-explain-card {
    background: rgba(15, 23, 42, 0.85);
    border-radius: 14px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.db-meta-explain-card.z-card {
    border: 1px solid rgba(241, 196, 15, 0.4);
    border-top: 4px solid #f1c40f;
}
.db-meta-explain-card.max-card {
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-top: 4px solid #00cec9;
}
.db-meta-explain-card .card-icon {
    font-size: 1.6rem;
    margin-bottom: 8px;
}
.db-meta-explain-card.z-card .card-icon { color: #f1c40f; }
.db-meta-explain-card.max-card .card-icon { color: #00cec9; }

.db-meta-explain-card h3 {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff;
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.db-meta-explain-card .card-text p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
    margin: 0 0 8px 0;
}

.db-meta-compare-results {
    display: flex;
    gap: 12px;
    flex: 2;
    min-width: 320px;
    flex-wrap: wrap;
}
.meta-sim-card {
    flex: 1;
    min-width: 150px;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.meta-sim-card.z-sim {
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.35);
}
.meta-sim-card.max-sim {
    background: rgba(0, 206, 201, 0.1);
    border: 1px solid rgba(0, 206, 201, 0.35);
}
.meta-sim-card .sim-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.meta-sim-card.z-sim .sim-tag { color: #f1c40f; }
.meta-sim-card.max-sim .sim-tag { color: #00cec9; }

.meta-sim-card .sim-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: #ffffff;
}
.meta-sim-card .sim-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    font-weight: bold;
    color: #ffffff;
}
.meta-sim-card.z-sim .sim-val { color: #f1c40f; }
.meta-sim-card.max-sim .sim-val { color: #00cec9; }
.meta-sim-card .sim-val span { font-size: 0.75rem; opacity: 0.8; }

.meta-sim-card .sim-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.35;
    margin-top: 2px;
}

/* Gimmick Moves Calculation Modal Styles */
.db-gimmick-calc-action-btn {
    width: 100% !important;
    height: 50px !important;
    border-radius: 12px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.92rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
}

.db-gimmick-calc-action-btn.z-btn {
    background: linear-gradient(135deg, #f1c40f 0%, #e67e22 100%) !important;
    color: #1a1a2e !important;
    box-shadow: 0 4px 18px rgba(241, 196, 15, 0.35) !important;
}
.db-gimmick-calc-action-btn.z-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(241, 196, 15, 0.55) !important;
}

.db-gimmick-calc-action-btn.max-btn {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(0, 206, 201, 0.35) !important;
}
.db-gimmick-calc-action-btn.max-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 206, 201, 0.55) !important;
}

/* Modal Popup Window */
.db-calc-moves-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 15, 30, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.db-calc-moves-modal {
    width: 95vw;
    max-width: 1300px;
    height: 90vh;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    padding: 24px 28px;
}

.db-calc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 14px;
    margin-bottom: 14px;
}
.db-calc-header-title h2 {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0 0 4px 0;
}
.db-calc-header-title p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.db-calc-modal-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.db-calc-mode-switch {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.calc-mode-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 18px;
    border-radius: 20px;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.calc-mode-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}
.calc-mode-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(233, 69, 96, 0.4);
}

.db-calc-filters-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.db-calc-search-wrap {
    flex: 2;
    min-width: 240px;
    position: relative;
}
.db-calc-search-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}
.db-calc-search-wrap input {
    width: 100%;
    height: 40px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 0 14px 0 38px;
    color: #ffffff;
    font-size: 0.8rem;
    font-family: 'Minecraft', monospace;
    outline: none;
    box-sizing: border-box;
}
.db-calc-search-wrap input:focus {
    border-color: #00cec9;
}

.db-calc-select-wrap select {
    height: 40px;
    background: #151a30;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 0 12px;
    color: #ffffff;
    font-size: 0.78rem;
    font-family: 'Minecraft', monospace;
    outline: none;
    cursor: pointer;
}

.db-calc-counter {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #00cec9;
    padding: 6px 14px;
    background: rgba(0, 206, 201, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(0, 206, 201, 0.25);
    white-space: nowrap;
}

.db-calc-table-scroll {
    flex: 1;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(10, 15, 30, 0.5);
}

.db-calc-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.db-calc-table th {
    position: sticky;
    top: 0;
    background: #0f172a;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 12px 14px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
    z-index: 2;
}

.db-calc-move-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
    cursor: pointer;
}
.db-calc-move-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}
.db-calc-move-row:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}
.db-calc-move-row td {
    padding: 10px 12px;
    vertical-align: middle;
    font-size: 0.78rem;
}

.db-move-title-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.db-move-names .name-ru {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.82rem;
    color: #ffffff;
}
.db-move-names .name-en {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.db-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 8px;
}
.db-meta-cell.z-cell {
    background: rgba(241, 196, 15, 0.06);
    border: 1px solid rgba(241, 196, 15, 0.2);
}
.db-meta-cell.max-cell {
    background: rgba(0, 206, 201, 0.06);
    border: 1px solid rgba(0, 206, 201, 0.2);
}

.meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.meta-bp-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
}
.meta-bp-badge.z-badge {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
    border: 1px solid rgba(241, 196, 15, 0.4);
}
.meta-bp-badge.max-badge {
    background: rgba(0, 206, 201, 0.2);
    color: #00cec9;
    border: 1px solid rgba(0, 206, 201, 0.4);
}
.meta-bp-badge.guard-badge {
    background: rgba(85, 239, 196, 0.2);
    color: #55efc4;
    border: 1px solid rgba(85, 239, 196, 0.4);
}

.meta-name {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.78rem;
}
.meta-sub, .meta-effect {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.3;
}

/* Card Customizer Radius & Shadow Presets */
.db-card-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.db-card-custom-slider {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    accent-color: #e94560;
}
.db-setting-num-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #00cec9;
    background: rgba(0, 206, 201, 0.12);
    border: 1px solid rgba(0, 206, 201, 0.3);
    padding: 3px 8px;
    border-radius: 6px;
    min-width: 38px;
    text-align: center;
}
.db-preset-pills-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.db-preset-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.db-preset-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}
.db-preset-pill.active {
    background: #e94560;
    border-color: #e94560;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
}


/* ==========================================================================
   2-MODE SITE SWITCHER (МИНИ-ИГРЫ / БАЗА ДАННЫХ)
   ========================================================================== */
.mode-switcher-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(26, 38, 70, 0.75) 100%) !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(233, 69, 96, 0.05) !important;
    backdrop-filter: blur(14px) !important;
}

.menu-header-brand {
    flex: 1;
    text-align: center;
}

.menu-header-brand h1 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    color: #e94560;
    text-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
    letter-spacing: 0.5px;
}

.menu-header-brand p {
    margin: 4px 0 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
}

.site-mode-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: rgba(26, 26, 46, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.92rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
}

.site-mode-btn i {
    font-size: 1.05rem;
    transition: transform 0.2s ease;
}

.site-mode-btn:hover {
    color: #ffffff;
    border-color: rgba(233, 69, 96, 0.5);
    background: rgba(233, 69, 96, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.25);
}

.site-mode-btn:hover i {
    transform: scale(1.15);
}

.site-mode-btn.active {
    background: linear-gradient(135deg, #e94560 0%, #c62a47 100%) !important;
    border-color: #ff6b81 !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(233, 69, 96, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.02);
}

#modeBtnDatabase.site-mode-btn:hover {
    border-color: rgba(0, 206, 201, 0.5);
    background: rgba(0, 206, 201, 0.15);
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.25);
}

#modeBtnDatabase.site-mode-btn.active {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%) !important;
    border-color: #81ecec !important;
    box-shadow: 0 0 22px rgba(0, 206, 201, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

@media (max-width: 960px) {
    .mode-switcher-header {
        flex-direction: column;
        gap: 14px;
    }
    .site-mode-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   DATABASE TABS (STYLING MATCHING MINI-GAMES)
   ========================================================================== */
.db-subtabs-container {
    margin-bottom: 26px !important;
    margin-top: 6px !important;
}

.db-subtabs-container .tab-btn.game-tab {
    position: relative;
    overflow: hidden;
}

/* Pokemon - Rose Neon */
.db-subtabs-container #dbSubTabPokemon.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.3), rgba(198, 42, 71, 0.5)) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 35px rgba(233, 69, 96, 0.4), 0 0 70px rgba(233, 69, 96, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.8) !important;
}
.db-subtabs-container #dbSubTabPokemon.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #e94560, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #e94560, 0 0 30px rgba(233, 69, 96, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}

/* Abilities - Gold Neon */
.db-subtabs-container #dbSubTabAbilities {
    border-color: rgba(255, 215, 0, 0.3) !important;
    background: linear-gradient(145deg, rgba(40, 30, 10, 0.5), rgba(60, 40, 10, 0.4)) !important;
}
.db-subtabs-container #dbSubTabAbilities:hover {
    border-color: #ffd700 !important;
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 215, 0, 0.1) !important;
}
.db-subtabs-container #dbSubTabAbilities.active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(200, 150, 0, 0.4)) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.4), 0 0 70px rgba(255, 215, 0, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
}
.db-subtabs-container #dbSubTabAbilities.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #ffd700, 0 0 30px rgba(255, 215, 0, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}
.db-subtabs-container #dbSubTabAbilities:hover i,
.db-subtabs-container #dbSubTabAbilities.active i {
    color: #ffd700 !important;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
}

/* Moves - Cyan Neon */
.db-subtabs-container #dbSubTabMoves {
    border-color: rgba(0, 206, 201, 0.3) !important;
    background: linear-gradient(145deg, rgba(10, 35, 45, 0.5), rgba(15, 45, 60, 0.4)) !important;
}
.db-subtabs-container #dbSubTabMoves:hover {
    border-color: #00cec9 !important;
    box-shadow: 0 8px 30px rgba(0, 206, 201, 0.3), inset 0 1px 0 rgba(0, 206, 201, 0.1) !important;
}
.db-subtabs-container #dbSubTabMoves.active {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.25), rgba(9, 132, 227, 0.4)) !important;
    border-color: #00cec9 !important;
    box-shadow: 0 0 35px rgba(0, 206, 201, 0.4), 0 0 70px rgba(0, 206, 201, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(0, 206, 201, 0.8) !important;
}
.db-subtabs-container #dbSubTabMoves.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00cec9, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #00cec9, 0 0 30px rgba(0, 206, 201, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}
.db-subtabs-container #dbSubTabMoves:hover i,
.db-subtabs-container #dbSubTabMoves.active i {
    color: #00cec9 !important;
    filter: drop-shadow(0 0 15px rgba(0, 206, 201, 0.9));
}

/* Items - Purple Neon */
.db-subtabs-container #dbSubTabItems {
    border-color: rgba(108, 92, 231, 0.3) !important;
    background: linear-gradient(145deg, rgba(30, 20, 50, 0.5), rgba(45, 30, 70, 0.4)) !important;
}
.db-subtabs-container #dbSubTabItems:hover {
    border-color: #a29bfe !important;
    box-shadow: 0 8px 30px rgba(108, 92, 231, 0.3), inset 0 1px 0 rgba(108, 92, 231, 0.1) !important;
}
.db-subtabs-container #dbSubTabItems.active {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.25), rgba(162, 155, 254, 0.4)) !important;
    border-color: #a29bfe !important;
    box-shadow: 0 0 35px rgba(108, 92, 231, 0.4), 0 0 70px rgba(108, 92, 231, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 15px rgba(162, 155, 254, 0.8) !important;
}
.db-subtabs-container #dbSubTabItems.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #a29bfe, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px #a29bfe, 0 0 30px rgba(108, 92, 231, 0.3);
    animation: gameTabGlow 1.8s ease-in-out infinite;
}
.db-subtabs-container #dbSubTabItems:hover i,
.db-subtabs-container #dbSubTabItems.active i {
    color: #a29bfe !important;
    filter: drop-shadow(0 0 15px rgba(162, 155, 254, 0.9));
}


/* ==========================================================================
   GAMES MODE WRAP (UNIFIED BLUE CARD WITH EMBEDDED TABS)
   ========================================================================== */
.games-mode-wrap {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    padding: 24px 30px 30px !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(233, 69, 96, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 30px !important;
}

.games-mode-wrap > .tabs {
    margin-bottom: 24px !important;
}

.games-mode-wrap > .tab-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
}

@media (max-width: 768px) {
    .games-mode-wrap {
        padding: 16px 14px 20px !important;
        border-radius: 16px !important;
    }
}


/* ==========================================================================
   WIDTH CONSTRAINT FIX FOR 2-MODE CONTAINERS
   ========================================================================== */
.main-menu {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#tabDatabase {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.games-mode-wrap {
    max-width: 1200px !important;
    margin: 0 auto 30px auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   TOP BAR BRAND & CENTERED MODE SWITCHER
   ========================================================================== */
.top-bar-brand {
    text-align: center;
    flex: 1;
    margin: 0 15px;
    pointer-events: none;
}

.top-bar-brand h1 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 1.12rem;
    color: #e94560;
    text-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.top-bar-brand p {
    margin: 2px 0 0;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.2;
}

.mode-switcher-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 10px 20px !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(26, 38, 70, 0.75) 100%) !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(233, 69, 96, 0.05) !important;
    backdrop-filter: blur(14px) !important;
}

.mode-switcher-header .site-mode-btn {
    min-width: 200px;
    justify-content: center;
}

@media (max-width: 768px) {
    .user-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 20px;
    }
    .top-bar-brand {
        order: 2;
        width: 100%;
        margin: 4px 0 0 0;
    }
    .top-bar-brand h1 {
        font-size: 0.95rem;
    }
    .top-bar-brand p {
        font-size: 0.58rem;
    }
    .mode-switcher-header {
        gap: 10px !important;
        padding: 8px 12px !important;
    }
    .mode-switcher-header .site-mode-btn {
        min-width: 0;
        flex: 1;
        padding: 10px 12px;
        font-size: 0.75rem;
    }
}


/* ==========================================================================
   TEAM BUILDER (РЕЖИМ СОЗДАТЬ КОМАНДУ)
   ========================================================================== */
#modeBtnTeambuilder.site-mode-btn:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.15);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
}

#modeBtnTeambuilder.site-mode-btn.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(16, 185, 129, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.teambuilder-mode-wrap {
    background: rgba(15, 52, 96, 0.5) !important;
    border-radius: 20px !important;
    padding: 24px 30px 30px !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tb-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.tb-team-name-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 280px;
}

.tb-team-name-group .tb-icon {
    font-size: 1.6rem;
    color: #10b981;
}

.tb-team-name-input {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 12px;
    padding: 10px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    outline: none;
    flex: 1;
}

.tb-team-name-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.tb-team-select {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    outline: none;
    cursor: pointer;
}

.tb-actions-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tb-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(26, 26, 46, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 8px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.tb-btn.primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #34d399;
}

.tb-btn.primary:hover {
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
}

.tb-btn.danger {
    color: #ff6b81;
    border-color: rgba(233, 69, 96, 0.4);
}

.tb-btn.danger:hover {
    background: rgba(233, 69, 96, 0.2);
}

.tb-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

.tb-slot-card {
    background: rgba(26, 26, 46, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}

.tb-slot-card:hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.tb-empty-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 20px;
}

.tb-empty-slot:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.tb-empty-slot-icon {
    font-size: 2.2rem;
    color: #10b981;
    margin-bottom: 10px;
}

.tb-empty-slot-title {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 4px;
}

.tb-empty-slot-sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}

.tb-slot-header {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-slot-avatar {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}

.tb-slot-avatar img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.tb-slot-info {
    flex: 1;
    min-width: 0;
}

.tb-slot-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.tb-slot-name {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-slot-eng {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-slot-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: #ff6b81;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px;
}

.tb-type-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.tb-slot-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tb-field-row label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    width: 100px;
    flex-shrink: 0;
}

.tb-input, .tb-select {
    flex: 1;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 10px;
    color: #fff;
    font-size: 0.75rem;
    outline: none;
}

.tb-input:focus, .tb-select:focus {
    border-color: #10b981;
}

.tb-moves-block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-moves-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
}

.tb-moves-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tb-move-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-move-item:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.tb-move-num {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #10b981;
}

.tb-move-name {
    font-size: 0.72rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-move-empty {
    color: rgba(255, 255, 255, 0.35);
}

/* Synergy Section */
.tb-synergy-section {
    background: rgba(26, 26, 46, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 20px;
}

.tb-synergy-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #10b981;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-no-synergy {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    padding: 20px;
}

.tb-synergy-table-wrap {
    overflow-x: auto;
}

.tb-synergy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.tb-synergy-table th, .tb-synergy-table td {
    padding: 8px 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-synergy-table th {
    background: rgba(15, 23, 42, 0.8);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
}

.tb-syn-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.tb-syn-pname {
    font-size: 0.65rem;
    margin-top: 2px;
}

.tb-eff-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    font-size: 0.72rem !important;
    font-family: 'Minecraft', monospace !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.85) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.eff-weak4 { background: #b71540 !important; color: #ffffff !important; }
.eff-weak { background: #e55039 !important; color: #ffffff !important; }
.eff-neutral { color: rgba(255, 255, 255, 0.45) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; border: none !important; box-shadow: none !important; }
.eff-resist { background: #00b894 !important; color: #ffffff !important; }
.eff-resist4 { background: #0984e3 !important; color: #ffffff !important; }
.eff-immune { background: #6c5ce7 !important; color: #ffffff !important; }

.tb-weak-count { color: #e55039; font-weight: bold; }
.tb-resist-count { color: #38ada9; font-weight: bold; }

/* Modals */
.tb-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tb-modal-content {
    background: #1a1a2e;
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 20px;
    width: 100%;
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.tb-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.tb-modal-header h3 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    font-size: 1.1rem;
}

.tb-modal-close {
    background: none;
    border: none;
    color: #ff6b81;
    font-size: 1.2rem;
    cursor: pointer;
}

.tb-modal-search {
    position: relative;
    margin-bottom: 14px;
}

.tb-modal-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
}

.tb-modal-search input {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 14px 10px 36px;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
    box-sizing: border-box;
}

.tb-modal-list {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    padding-right: 6px;
}

.tb-poke-pick-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-poke-pick-card:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    transform: translateY(-2px);
}

.tb-poke-pick-card img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 4px;
}

.tb-poke-pick-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-poke-pick-eng {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

.tb-move-pick-item {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-move-pick-item:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.tb-move-pick-left {
    display: flex;
    align-items: center;
}

.tb-move-pick-right {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    gap: 12px;
}

.tb-showdown-textarea {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    outline: none;
    box-sizing: border-box;
    resize: vertical;
}



/* ==========================================================================
   TEAMBUILDER NATIVE DATABASE MODAL STYLES
   ========================================================================== */
.tb-db-modal-content {
    max-width: 1200px !important;
    width: 95vw !important;
    height: 92vh !important;
    max-height: 92vh !important;
    background: #0f172a !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 28px !important;
    box-sizing: border-box !important;
    border-radius: 24px !important;
}

.tb-modal-count-badge {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    color: #34d399;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    white-space: nowrap;
}

.tb-modal-cards-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 10px 4px 20px;
    margin-top: 4px;
}

.tb-modal-cards-wrap .db-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 16px !important;
}

.tb-selectable-card {
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none;
}

.tb-selectable-card:hover {
    border-color: #10b981 !important;
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 24px rgba(16, 185, 129, 0.3) !important;
}

.tb-selectable-card:hover::before {
    background: linear-gradient(90deg, transparent, #10b981, transparent) !important;
    opacity: 1 !important;
}




/* ==========================================================================
   ADVANCED TEAM BUILDER STYLES (IV/EV, STATS, ITEMS, TERA) - 100% MINECRAFT FONT
   ========================================================================== */
.teambuilder-mode-wrap,
.teambuilder-mode-wrap *,
.tb-modal-content,
.tb-modal-content *,
.tb-slot-card,
.tb-slot-card *,
.tb-stat-editor-row,
.tb-stat-editor-row *,
.tb-ev-presets,
.tb-ev-presets *,
.tb-ev-counter,
.tb-stat-table-header span,
.tb-stat-chip,
.tb-stat-chip *,
.tb-stat-ed-name *,
.tb-stat-ed-final *,
.tb-stat-ed-ev *,
.tb-stat-ed-iv *,
.tb-preset-btn,
.tb-btn,
.tb-btn *,
.tb-tera-toggle-label,
.tb-tera-toggle-label *,
.tb-iv-max-btn {
    font-family: 'Minecraft', monospace !important;
}

/* Ensure Font Awesome icons are NEVER overridden by Minecraft font anywhere in teambuilder or modals */
.teambuilder-mode-wrap i,
.teambuilder-mode-wrap [class*="fa-"],
.tb-modal-content i,
.tb-modal-content [class*="fa-"],
.tb-top-bar i,
.tb-top-bar [class*="fa-"],
.tb-btn i,
.tb-btn [class*="fa-"],
.tb-slot-card i,
.tb-slot-card [class*="fa-"],
.tb-gen-modal-content i,
.tb-gen-modal-content [class*="fa-"],
.tb-gen-poke-card i,
.tb-gen-poke-card [class*="fa-"],
i.fas, i.far, i.fab, i.fa, [class*="fa-"], [class^="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-style: normal !important;
    font-weight: 900 !important;
}



/* Hide default browser spinners for cleaner UI */
.tb-ev-input-box::-webkit-outer-spin-button,
.tb-ev-input-box::-webkit-inner-spin-button,
.tb-iv-input-box::-webkit-outer-spin-button,
.tb-iv-input-box::-webkit-inner-spin-button,
.tb-lvl-input::-webkit-outer-spin-button,
.tb-lvl-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tb-ev-input-box, .tb-iv-input-box, .tb-lvl-input {
    -moz-appearance: textfield;
}

.tb-tera-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 10px;
    padding: 7px 14px;
    color: #81ecec;
    font-size: 0.76rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.tb-tera-toggle-label:hover {
    border-color: #00cec9;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

.tb-tera-toggle-label input {
    accent-color: #00cec9;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.tb-slot-subname {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.tb-slot-lvl {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 4px;
}

.tb-lvl-input {
    width: 44px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 2px 4px;
    color: #fff;
    font-size: 0.7rem;
    text-align: center;
    outline: none;
}

.tb-shiny-btn {
    background: none;
    border: none;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 4px;
}

.tb-shiny-btn.active, .tb-shiny-btn:hover {
    color: #ffd32a;
    transform: scale(1.2);
    filter: drop-shadow(0 0 6px rgba(255, 211, 42, 0.6));
}

.tb-item-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-item-btn:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.tb-item-name {
    font-size: 0.76rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-muted {
    color: rgba(255, 255, 255, 0.35);
}

/* Stats Summary Card in Slot */
.tb-stats-summary-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 8px 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-stats-summary-card:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.tb-stats-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}

.tb-stats-edit-link {
    color: #34d399;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tb-stats-mini-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.tb-stat-chip {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 4px 2px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tb-stat-chip span {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-stat-chip b {
    font-size: 0.75rem;
    color: #fff;
}

.tb-stat-plus {
    color: #2ed573;
    font-size: 0.52rem;
    font-weight: bold;
    margin-left: 2px;
}

.tb-stat-minus {
    color: #ff4757;
    font-size: 0.52rem;
    font-weight: bold;
    margin-left: 2px;
}

/* ==========================================================================
   STATS EDITOR MODAL - PIXEL-PERFECT ALIGNMENT
   ========================================================================== */
.tb-stats-summary-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.tb-ev-counter {
    font-size: 0.82rem;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
    color: #34d399;
}

.tb-ev-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tb-preset-btn {
    background: rgba(26, 38, 70, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    font-size: 0.68rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.tb-preset-btn:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.2);
}

.tb-preset-btn.danger:hover {
    border-color: #ff6b81;
    background: rgba(233, 69, 96, 0.2);
}

.tb-stat-table-header {
    display: grid;
    grid-template-columns: 120px 90px 1fr 110px;
    gap: 16px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tb-stat-editor-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.tb-stat-editor-row {
    display: grid;
    grid-template-columns: 120px 90px 1fr 110px;
    gap: 16px;
    align-items: center;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
}

.tb-stat-ed-name {
    display: flex;
    flex-direction: column;
}

.tb-stat-ed-name b {
    font-size: 0.85rem;
    color: #fff;
}

.tb-stat-ed-name small {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.tb-stat-ed-final {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-stat-val {
    font-size: 1.15rem;
    color: #10b981;
    font-weight: bold;
}

.tb-stat-ed-ev {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tb-ev-slider {
    flex: 1;
    accent-color: #10b981;
    cursor: pointer;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    outline: none;
}

.tb-ev-input-box {
    width: 58px;
    background: rgba(26, 38, 70, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 4px;
    color: #fff;
    font-size: 0.82rem;
    text-align: center;
    outline: none;
    transition: all 0.2s ease;
}

.tb-ev-input-box:focus {
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.tb-stat-ed-iv {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-iv-input-box {
    width: 48px;
    background: rgba(26, 38, 70, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 4px;
    color: #fff;
    font-size: 0.82rem;
    text-align: center;
    outline: none;
    transition: all 0.2s ease;
}

.tb-iv-input-box:focus {
    border-color: #34d399;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.35);
}

.tb-iv-max-btn {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.tb-iv-max-btn.max-31 {
    background: #10b981;
    border-color: #34d399;
    color: #fff;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.tb-iv-max-btn.min-0 {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
    color: #ff6b81;
}

.tb-iv-max-btn.custom-val {
    background: rgba(26, 38, 70, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffd32a;
}

/* Item Picker Row */
.tb-item-pick-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-item-pick-row:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    transform: translateY(-1px);
}

.tb-item-pick-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.tb-item-pick-info {
    flex: 1;
    min-width: 0;
}

.tb-item-pick-name {
    font-size: 0.82rem;
    color: #fff;
    margin-bottom: 2px;
}

.tb-item-pick-eng {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 6px;
}

.tb-item-pick-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
}

.tb-badge-bp {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    color: #ff6b81;
}

.tb-badge-acc {
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    color: #81ecec;
}




/* ==========================================================================
   ITEM PICKER & MOVE PICKER GRID STYLES
   ========================================================================== */
.tb-item-modal-list {
    flex: 1;
    overflow-y: auto;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 12px !important;
    padding: 6px 4px 16px !important;
}

.tb-move-modal-list {
    flex: 1;
    overflow-y: auto;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 10px !important;
    padding: 6px 4px 16px !important;
}

.tb-item-pick-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.tb-item-pick-row:hover {
    border-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.12) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25) !important;
}

.tb-item-pick-icon {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 4px !important;
}

.tb-item-pick-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.tb-item-pick-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.88rem !important;
    color: #fff !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.tb-item-pick-eng {
    font-size: 0.7rem !important;
    color: #f59e0b !important;
    font-weight: normal !important;
}

.tb-item-pick-desc {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.4 !important;
}

.tb-move-pick-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.tb-move-pick-item:hover {
    border-color: #e94560 !important;
    background: rgba(233, 69, 96, 0.12) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.25) !important;
}



/* Nature Button in Slot Card - Compact Auto-Fitting */
.tb-nature-btn {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.tb-nature-btn:hover {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.12) !important;
}

.tb-nature-btn-name {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 0.72rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

.tb-nature-btn-icon {
    color: #00cec9 !important;
    font-size: 0.82rem !important;
    flex-shrink: 0 !important;
}


.db-nature-matrix-cell.active-selected-nature {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.25) !important;
    box-shadow: 0 0 16px rgba(0, 206, 201, 0.5) !important;
    position: relative;
}

.tb-nat-sel-check {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #00cec9;
    font-size: 0.7rem;
}

.tb-item-slot-icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }


/* ==========================================================================
   CUSTOM TERA & ABILITY SELECT BUTTONS & MODALS
   ========================================================================== */
.tb-custom-select-btn {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

.tb-custom-select-btn:hover {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

.tb-custom-select-val {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 0.76rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tb-select-chevron {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
}

.tb-tera-tag-base {
    color: #00cec9 !important;
    font-size: 0.76rem !important;
}

.tb-tera-tag-stellar {
    color: #ffd32a !important;
    font-size: 0.76rem !important;
}

/* Tera Modal Grid */
.tb-tera-special-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.tb-tera-special-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.tb-tera-special-card b {
    font-size: 0.85rem !important;
    color: #fff !important;
    display: block !important;
}

.tb-tera-special-card small {
    font-size: 0.65rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.tb-tera-special-card:hover {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.12) !important;
    transform: translateY(-2px) !important;
}

.tb-tera-special-card.active-tera {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.22) !important;
    box-shadow: 0 0 16px rgba(0, 206, 201, 0.4) !important;
}

.tb-tera-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 8px !important;
}

.tb-tera-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.tb-tera-card-badge {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.tb-type-icon-mini {
    width: 14px !important;
    height: 14px !important;
    object-fit: contain !important;
}

.tb-tera-card-name {
    font-size: 0.75rem !important;
    color: #fff !important;
}

.tb-tera-card:hover {
    border-color: var(--tera-color, #10b981) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.tb-tera-card.active-tera {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.2) !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

.tb-tera-check {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    color: #10b981 !important;
    font-size: 0.65rem !important;
}

/* Ability Modal List */
.tb-ability-list-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.tb-ability-pick-card {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.tb-ability-pick-card:hover {
    border-color: #ffd32a !important;
    background: rgba(255, 211, 42, 0.08) !important;
    transform: translateY(-2px) !important;
}

.tb-ability-pick-card.active-ability {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.18) !important;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.35) !important;
}

.tb-ability-pick-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
    gap: 10px !important;
}

.tb-ability-names b {
    font-size: 0.88rem !important;
    color: #fff !important;
}

.tb-ability-eng {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-left: 6px !important;
}

.tb-ab-pill {
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
}

.tb-ab-pill.regular {
    background: rgba(52, 152, 219, 0.2) !important;
    border: 1px solid rgba(52, 152, 219, 0.4) !important;
    color: #74b9ff !important;
}

.tb-ab-pill.hidden {
    background: rgba(255, 211, 42, 0.2) !important;
    border: 1px solid rgba(255, 211, 42, 0.4) !important;
    color: #ffd32a !important;
}

.tb-ability-desc {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.35 !important;
}

.tb-ab-check {
    color: #10b981 !important;
    font-size: 0.85rem !important;
    margin-left: 6px !important;
}


/* ==========================================================================
   SLEEK LEVEL CONTROL PILL
   ========================================================================== */
.tb-level-control {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(0, 206, 201, 0.35) !important;
    border-radius: 8px !important;
    padding: 3px 8px !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.tb-level-control:hover, .tb-level-control:focus-within {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.1) !important;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3) !important;
}

.tb-lvl-tag {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    color: #00cec9 !important;
    font-weight: bold !important;
    user-select: none !important;
}

.tb-lvl-input {
    width: 36px !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem !important;
    font-weight: bold !important;
    text-align: center !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
}

.tb-lvl-input::-webkit-outer-spin-button,
.tb-lvl-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}


/* ==========================================================================
   DYNAMAX LEVEL SETTING (GIGANTAMAX POKEMON)
   ========================================================================== */
.tb-dmax-field-row {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.tb-dmax-control {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 71, 87, 0.08) !important;
    border: 1px solid rgba(255, 71, 87, 0.3) !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.tb-dmax-control:hover {
    border-color: #ff4757 !important;
    background: rgba(255, 71, 87, 0.14) !important;
    box-shadow: 0 0 12px rgba(255, 71, 87, 0.25) !important;
}

.tb-dmax-badge {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #ff4757 !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
}

.tb-dmax-slider {
    flex: 1 !important;
    min-width: 50px !important;
    height: 6px !important;
    accent-color: #ff4757 !important;
    cursor: pointer !important;
}

.tb-dmax-val {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.tb-dmax-val small {
    color: #ff6b81 !important;
    font-size: 0.65rem !important;
    margin-left: 2px !important;
}


/* ==========================================================================
   CLEAN TERA MODAL & PILL STYLES
   ========================================================================== */
.tb-type-icon-clean {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}

.tb-type-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.74rem !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.tb-tera-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 10px !important;
    padding: 4px 2px !important;
}

.tb-tera-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.tb-tera-card:hover {
    border-color: var(--tera-color, #00cec9) !important;
    background: rgba(0, 206, 201, 0.1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

.tb-tera-card.active-tera {
    border-color: var(--tera-color, #00cec9) !important;
    background: rgba(0, 206, 201, 0.2) !important;
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.4) !important;
}

.tb-tera-card-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tb-tera-check {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    color: #00cec9 !important;
    font-size: 0.7rem !important;
}


/* Clean Tera Display Item inside button (No colored pill) */
.tb-tera-display-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.76rem !important;
}

.tb-type-icon-clean {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}


/* ==========================================================================
   TOP BAR TOGGLES & G-MAX BUTTON
   ========================================================================== */
.tb-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    margin-bottom: 18px !important;
}

.tb-toggles-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.tb-mechanic-toggle {
    cursor: pointer !important;
    user-select: none !important;
    margin: 0 !important;
}

.tb-mechanic-toggle input {
    display: none !important;
}

.tb-toggle-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem !important;
    transition: all 0.2s ease !important;
}

.tb-mechanic-toggle input:checked + .tb-toggle-pill {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.18) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
}

.tb-slot-badges {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.tb-gmax-btn {
    background: rgba(255, 71, 87, 0.12) !important;
    border: 1px solid rgba(255, 71, 87, 0.35) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.tb-gmax-btn:hover {
    border-color: #ff4757 !important;
    color: #fff !important;
    background: rgba(255, 71, 87, 0.25) !important;
}

.tb-gmax-btn.active {
    background: #ff4757 !important;
    border-color: #ff4757 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.6) !important;
}


/* Mega Evolution Toggle Button */
.tb-mega-btn {
    background: rgba(233, 69, 96, 0.12) !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.tb-mega-btn:hover {
    border-color: #e94560 !important;
    color: #fff !important;
    background: rgba(233, 69, 96, 0.25) !important;
}

.tb-mega-btn.active {
    background: linear-gradient(135deg, #e94560, #ff007f) !important;
    border-color: #ff007f !important;
    color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.6) !important;
}


/* ==========================================================================
   TEAMBUILDER MOVE PICKER MODAL GRID & CARDS
   ========================================================================== */
.tb-move-grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 14px !important;
    align-content: start !important;
}

.tb-move-grid-container .db-move-card {
    min-height: 140px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}


/* Dynamax In-Battle HP Badge in Slot Stat Chip */
.tb-stat-dmax-hp {
    color: #ff007f !important;
    font-size: 0.52rem !important;
    font-weight: bold !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
    text-shadow: 0 0 6px rgba(255, 0, 127, 0.6) !important;
    margin-top: 1px !important;
}


/* Dedicated Transformation Buttons Row (Above Item) */
.tb-transform-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important;
    flex-wrap: wrap !important;
}

.tb-transform-row .tb-mega-btn,
.tb-transform-row .tb-gmax-btn {
    padding: 5px 12px !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
}


/* Description block inside Move Picker Cards */
.db-move-card-desc {
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.12) !important;
    font-size: 0.74rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.4 !important;
    font-family: 'Minecraft', monospace !important;
    word-break: break-word !important;
}


/* Synergy Table Type Icon */
.tb-syn-type-icon {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
    vertical-align: middle !important;
}


/* ==========================================================================
   TRAINER ACADEMY / BEGINNER GUIDE MODAL STYLING
   ========================================================================== */
.db-header-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex-shrink: 0;
    margin-right: 4px;
}

.db-header-actions-row {
    display: flex;
    gap: 8px;
}

.db-beginner-guide-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 12px;
    border: 1px solid rgba(241, 196, 15, 0.5);
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.2), rgba(233, 69, 96, 0.25));
    color: #f1c40f;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(241, 196, 15, 0.15);
}

.db-beginner-guide-btn i {
    color: #f1c40f;
    font-size: 0.85rem;
}

.db-beginner-guide-btn:hover {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.35), rgba(233, 69, 96, 0.4));
    border-color: #f1c40f;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(241, 196, 15, 0.35);
    transform: translateY(-2px);
}

/* Academy Modal */
.db-guide-modal-content {
    background: #0f1424;
    border: 1px solid rgba(241, 196, 15, 0.4);
    border-radius: 20px;
    width: 100%;
    max-width: 860px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(241, 196, 15, 0.2);
    overflow: hidden;
    animation: modalPop 0.25s ease;
}

.db-guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: rgba(241, 196, 15, 0.08);
    border-bottom: 1px solid rgba(241, 196, 15, 0.2);
}

.db-guide-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.db-guide-header-title h3 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    color: #f1c40f;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}


/* Guide Ranks Bar & Pills */
.db-guide-ranks-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: thin;
}

.db-guide-rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.db-guide-rank-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-1px);
}

.db-guide-rank-pill.active {
    font-weight: bold;
}

.db-guide-stepper-wrap {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    display: flex;
    gap: 8px;
    scrollbar-width: thin;
}

.db-guide-step-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.db-guide-step-chip:hover {
    background: rgba(241, 196, 15, 0.15);
    color: #ffffff;
    border-color: rgba(241, 196, 15, 0.4);
}

.db-guide-step-chip.active {
    background: linear-gradient(135deg, #f1c40f, #e67e22);
    color: #0f1424;
    border-color: #f1c40f;
    box-shadow: 0 2px 10px rgba(241, 196, 15, 0.4);
}

.db-guide-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    color: #dfe6e9;
    font-size: 0.88rem;
    line-height: 1.6;
}

.db-guide-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.db-guide-card-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #55efc4;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-guide-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.db-guide-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00b894, #00cec9);
    border: none;
    color: #0f1424;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 206, 201, 0.3);
}

.db-guide-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.45);
}

.db-guide-prev-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-guide-prev-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}


/* Z-Move Teambuilder Styles */
.tb-move-item.is-z-boosted {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.12), rgba(15, 23, 42, 0.8));
    border-color: rgba(0, 206, 201, 0.45);
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.15);
}

.tb-move-item.is-z-boosted:hover {
    border-color: #00cec9;
    box-shadow: 0 0 15px rgba(0, 206, 201, 0.35);
}

.tb-move-z-tag {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.25), rgba(108, 92, 231, 0.25));
    border: 1px solid rgba(0, 206, 201, 0.6);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    color: #00cec9;
    white-space: nowrap;
}

.tb-move-z-tag.signature {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.3), rgba(233, 69, 96, 0.3));
    border-color: #f1c40f;
    color: #f1c40f;
}

.db-move-z-box {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.15), rgba(108, 92, 231, 0.15));
    border: 1px solid rgba(0, 206, 201, 0.45);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 6px;
    font-size: 0.72rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: inset 0 0 12px rgba(0, 206, 201, 0.1);
}

.db-move-z-box.signature {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.2), rgba(233, 69, 96, 0.2));
    border-color: rgba(241, 196, 15, 0.6);
    box-shadow: inset 0 0 12px rgba(241, 196, 15, 0.15);
}


/* Rich Competitive Breakdown Panel */
.tb-stats-insight-section {
    margin-top: 16px;
    background: linear-gradient(145deg, rgba(10, 15, 30, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.tb-stats-insight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.tb-stats-insight-header h4 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.tb-insight-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-insight-tab-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-insight-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.tb-insight-tab-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    font-weight: bold;
}

.tb-insight-tab-content {
    display: none;
    animation: fadeInTab 0.25s ease-out;
}

.tb-insight-tab-content.active {
    display: block;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Overview Banner */
.tb-insight-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.tb-insight-stat-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-insight-stat-card-title {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tb-insight-stat-card-val {
    font-size: 1.1rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    color: #fff;
}

.tb-insight-stat-card-desc {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Speed Ladder */
.tb-speed-ladder-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-speed-tier-row {
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid #f39c12;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-speed-tier-row.faster {
    border-left-color: #2ecc71;
}

.tb-speed-tier-row.tied {
    border-left-color: #ffd32a;
}

.tb-speed-tier-row.slower {
    border-left-color: #e74c3c;
}

.tb-speed-tier-row.tr-first {
    border-left-color: #9b59b6;
    background: rgba(155, 89, 182, 0.1);
}

/* Health / Survival Bar */
.tb-survival-bar-wrap {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.tb-survival-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.tb-survival-bar-fill.safe {
    background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.tb-survival-bar-fill.danger {
    background: linear-gradient(90deg, #f39c12, #e67e22);
}

.tb-survival-bar-fill.ohko {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.tb-threat-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s ease;
}

.tb-threat-card:hover {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.2);
}

.tb-threat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #fff;
}

.tb-threat-attacker {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-threat-move {
    color: #74b9ff;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
}

.tb-threat-dmg-badge {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
}

.tb-threat-dmg-badge.safe { color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.4); }
.tb-threat-dmg-badge.danger { color: #f39c12; border: 1px solid rgba(243, 156, 18, 0.4); }
.tb-threat-dmg-badge.ohko { color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.4); }

.tb-threat-sub {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
}


/* Z-Move Button in Transform Row */
.tb-zmove-btn {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    border-radius: 6px;
    padding: 4px 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-zmove-btn:hover {
    background: rgba(0, 206, 201, 0.3);
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.4);
    transform: translateY(-1px);
}

.tb-zmove-btn.active {
    background: linear-gradient(135deg, #00cec9, #0984e3);
    border-color: #00cec9;
    color: #fff;
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.6);
}

.tb-move-item.z-transformed {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.22), rgba(108, 92, 231, 0.25)) !important;
    border-color: #00cec9 !important;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.35);
    animation: zPulse 2s infinite alternate;
}

.tb-move-item.z-transformed.signature {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.28), rgba(233, 69, 96, 0.28)) !important;
    border-color: #f1c40f !important;
    box-shadow: 0 0 14px rgba(241, 196, 15, 0.45);
}

@keyframes zPulse {
    0% { box-shadow: 0 0 8px rgba(0, 206, 201, 0.25); }
    100% { box-shadow: 0 0 16px rgba(0, 206, 201, 0.55); }
}

.tb-z-power-pill {
    background: linear-gradient(135deg, #ffd32a, #f39c12);
    color: #000;
    font-weight: bold;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    margin-left: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}


/* Format Selector Row */
.tb-insight-format-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-insight-format-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #10b981;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tb-format-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

.tb-format-pill {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-format-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.tb-format-pill.active {
    background: linear-gradient(135deg, #10b981, #0984e3);
    border-color: #10b981;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* Speed Badges Grid & Chips */
.tb-speed-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.tb-speed-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid var(--tier-color, #2ecc71);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 0.72rem;
    color: #fff;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.tb-speed-badge-pill:hover {
    transform: translateY(-2px);
    border-color: var(--tier-color, #2ecc71);
    background: rgba(25, 35, 60, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.tb-speed-badge-name {
    font-weight: 500;
}

.tb-speed-badge-spec {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.tb-speed-badge-val {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.68rem;
    color: var(--tier-color, #2ecc71);
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}


/* Top Bar Clean 2-Row Styling */
.tb-top-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    padding: 14px 18px !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}

.tb-top-row-main {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.tb-top-row-gimmicks {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 10px !important;
}

.tb-gimmicks-header-label {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.tb-team-name-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-width: 260px !important;
    max-width: 520px !important;
}

.tb-team-select {
    background: rgba(26, 26, 46, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    color: #fff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.82rem !important;
    outline: none !important;
    cursor: pointer !important;
    max-width: 200px !important;
}


/* Full Database Comparison Styles */
.tb-db-compare-box {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tb-db-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.tb-db-search-input {
    flex: 1;
    min-width: 240px;
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 8px;
    padding: 8px 14px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    outline: none;
}

.tb-db-search-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.tb-db-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tb-db-filter-chip {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-db-filter-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tb-db-filter-chip.active {
    background: #10b981;
    border-color: #10b981;
    color: #000;
    font-weight: bold;
}

.tb-db-rank-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(52, 152, 219, 0.12));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
}

.tb-db-rank-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb-db-rank-title {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
}

.tb-db-rank-value {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: bold;
    color: #10b981;
}

.tb-db-compare-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
    gap: 10px;
    transition: all 0.2s ease;
}

.tb-db-compare-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(20, 30, 55, 0.95);
}

.tb-db-compare-card-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-db-compare-card-avatar {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.tb-db-compare-card-names {
    display: flex;
    flex-direction: column;
}

.tb-db-compare-card-ru {
    font-weight: 500;
    font-size: 0.78rem;
    color: #fff;
}

.tb-db-compare-card-en {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-db-compare-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    white-space: nowrap;
}

.tb-db-compare-badge.faster {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.tb-db-compare-badge.slower {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}

.tb-db-compare-badge.tied {
    background: rgba(241, 196, 15, 0.15);
    border: 1px solid rgba(241, 196, 15, 0.4);
    color: #ffd32a;
}


/* Team Generator Modal & Button Styles */
.tb-btn.generator-highlight-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25)) !important;
    border: 1px solid #10b981 !important;
    color: #10b981 !important;
    font-weight: bold !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.25s ease !important;
}

.tb-btn.generator-highlight-btn:hover {
    background: linear-gradient(135deg, #10b981, #0984e3) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.6) !important;
    transform: translateY(-1px) !important;
}

.tb-gen-modal-content {
    max-width: 950px;
    width: 95vw;
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(145deg, #0d1322, #151f32);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.tb-gen-section-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #10b981;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.tb-gen-format-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-gen-format-card:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(20, 30, 55, 0.9);
    transform: translateY(-2px);
}

.tb-gen-format-card.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
}

.tb-gen-format-card-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-format-card-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.35;
}

.tb-gen-archetype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.tb-gen-arch-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-gen-arch-card:hover {
    background: rgba(25, 35, 60, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
}

.tb-gen-arch-card.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.tb-gen-arch-card.active span {
    color: #fff !important;
}

.tb-gen-preview-box {
    background: rgba(10, 15, 30, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
}

.tb-gen-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.tb-gen-preview-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.tb-gen-preview-avatar {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.tb-gen-preview-name {
    font-size: 0.72rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.tb-gen-preview-item {
    font-size: 0.62rem;
    color: #f59e0b;
    font-family: 'Minecraft', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.tb-gen-preview-role {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.5);
}

.tb-auto-build-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(52, 152, 219, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 6px;
    color: #10b981;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 5px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.tb-auto-build-btn:hover {
    background: linear-gradient(135deg, #10b981, #0984e3);
    color: #fff;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}


/* Offense & Defense Full DB Card Styles */
.tb-ko-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    white-space: nowrap;
}

.tb-ko-badge.ohko {
    background: rgba(241, 196, 15, 0.18);
    border: 1px solid rgba(241, 196, 15, 0.5);
    color: #ffd32a;
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.2);
}

.tb-ko-badge.twohko {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.tb-ko-badge.survives {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}


/* Flexible Team Generator Layout */
.tb-gen-options-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.tb-gen-options-col {
    flex: 1;
    min-width: 280px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
}

.tb-gen-gimmick-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.tb-gen-gimmick-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 7px 12px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.tb-gen-gimmick-chip:hover {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.tb-gen-gimmick-chip.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.tb-gen-quick-presets {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.tb-gen-preset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tb-gen-preset-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}


/* Individual Pokemon Build Generator Styles */
.tb-single-gen-modal-content {
    max-width: 780px;
    width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(145deg, #0d1322, #151f32);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
}

.tb-role-pills-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 16px;
}

.tb-role-pill {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-role-pill:hover {
    border-color: rgba(16, 185, 129, 0.5);
    color: #fff;
    background: rgba(20, 30, 55, 0.9);
}

.tb-role-pill.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.tb-build-details-card {
    background: rgba(10, 15, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tb-build-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.tb-build-field-box {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-build-field-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.tb-build-field-val {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: #fff;
}

.tb-build-moves-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.tb-build-move-chip {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #74b9ff;
    display: flex;
    align-items: center;
    gap: 6px;
}



/* Database Stat Filters Enhanced Styles */
.db-stat-filters-container {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.db-stat-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.db-stat-subhint {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Minecraft', monospace;
}

.db-stat-reset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 4px 10px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-stat-reset-btn:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
    color: #ff6b81;
}

.db-stat-sliders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.db-stat-filter-item {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.db-stat-filter-item:hover {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(20, 30, 55, 0.9);
}

.db-stat-filter-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
}

.db-stat-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.db-stat-name.hp { color: #ff5e57; }
.db-stat-name.atk { color: #ff9f43; }
.db-stat-name.def { color: #feca57; }
.db-stat-name.spa { color: #54a0ff; }
.db-stat-name.spd { color: #a29bfe; }
.db-stat-name.spe { color: #1dd1a1; }
.db-stat-name.bst { color: #ffd32a; }

.db-stat-range-val {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.35);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.db-stat-inputs-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-stat-num-input {
    flex: 1;
    min-width: 45px;
    background: rgba(10, 15, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 5px 6px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
    text-align: center;
    transition: all 0.2s ease;
}

.db-stat-num-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
    background: rgba(15, 25, 45, 1);
}

.db-stat-dash {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.db-stat-sort-toggles {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.db-stat-sort-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    width: 26px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-stat-sort-btn:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    color: #fff;
}

.db-stat-sort-btn.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: #fff;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* ==========================================================================
   COMMUNITY WALL (ОБЩАЯ СТЕНА КОМАНД) STYLES
   ========================================================================== */
.tb-wall-modal-content {
    max-width: 960px;
    width: 96vw;
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(155deg, #090e1a 0%, #121b2d 100%);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 206, 201, 0.15);
}

.tb-wall-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tb-wall-filters-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
}

.tb-wall-search-input {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    min-width: 240px;
    outline: none;
    transition: all 0.2s ease;
}

.tb-wall-search-input:focus {
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.tb-wall-feed-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.tb-wall-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.tb-wall-card:hover {
    border-color: rgba(0, 206, 201, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.tb-wall-card-author-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-wall-author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-wall-author-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0, 206, 201, 0.5);
    background: #0a0a1a;
}

.tb-wall-author-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.88rem;
    font-weight: bold;
    color: #fff;
}

.tb-wall-date {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
}

.tb-wall-team-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tb-wall-team-name {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #00cec9;
    font-weight: bold;
}

.tb-wall-format-badge {
    background: linear-gradient(135deg, #0984e3, #6c5ce7);
    border-radius: 6px;
    padding: 3px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: #fff;
    font-weight: bold;
}

.tb-wall-team-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
    background: rgba(10, 15, 30, 0.6);
    border-radius: 8px;
    padding: 8px 12px;
    border-left: 3px solid #00cec9;
}

.tb-wall-pokemon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.tb-wall-pokemon-chip {
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.tb-wall-pokemon-chip img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

.tb-wall-pokemon-chip-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tb-wall-pokemon-chip-item {
    font-size: 0.62rem;
    color: #f59e0b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tb-wall-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-wall-like-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 14px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-wall-like-btn:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
    color: #ff6b81;
}

.tb-wall-like-btn.liked {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-color: #e74c3c;
    color: #fff;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.4);
}

.tb-wall-import-btn {
    background: linear-gradient(135deg, #10b981, #0984e3);
    border: none;
    border-radius: 8px;
    padding: 7px 18px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.tb-wall-import-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
}

/* Publish Modal Styling */
.tb-publish-modal-content {
    max-width: 580px;
    width: 95vw;
    background: linear-gradient(145deg, #0d1322, #151f32);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
}


/* Move Slot Type Icon */
.tb-move-type-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
    margin-right: 2px;
}



/* Pills & Selection Controls */
.tb-gen-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.tb-gen-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-pill.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

/* Archetypes Grid */
.tb-gen-arch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
}

.tb-gen-arch-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-arch-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.tb-gen-arch-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(0, 206, 201, 0.2));
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(9, 132, 227, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 6 Pokemon Cards Grid */
.tb-gen-squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
}

.tb-gen-poke-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tb-gen-poke-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.tb-gen-poke-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.tb-gen-poke-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.tb-gen-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.92rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-poke-role {
    display: inline-block;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 3px;
}

.tb-gen-poke-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tb-gen-poke-moves-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-gen-move-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 4px 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* Pills & Selection Controls */
.tb-gen-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tb-gen-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-pill.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

/* Archetypes Flexible Row (No Truncation) */
.tb-gen-arch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-gen-arch-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tb-gen-arch-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.tb-gen-arch-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(0, 206, 201, 0.2));
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(9, 132, 227, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 6 Pokemon Cards Grid */
.tb-gen-squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
}

.tb-gen-poke-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tb-gen-poke-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.tb-gen-poke-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.tb-gen-poke-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.tb-gen-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-poke-role {
    display: inline-block;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 3px;
}

.tb-gen-poke-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-gen-detail-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-poke-moves-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-gen-move-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 5px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================================
   PROCEDURAL COMPETITIVE TEAM GENERATOR STYLES (CLEAN, NO EMOJIS, SCROLLABLE)
   ========================================================================== */
.tb-gen-modal-content {
    max-width: 1080px;
    width: 95vw;
    height: 90vh;
    max-height: 90vh;
    background: linear-gradient(155deg, #090e1a 0%, #111a2e 50%, #0d1527 100%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9), 0 0 50px rgba(16, 185, 129, 0.12);
    overflow: hidden;
    color: #fff;
    box-sizing: border-box;
}

.tb-gen-modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(9, 14, 26, 0.85);
    flex-shrink: 0;
}

#tbTeamGenModalBody, .tb-gen-modal-body {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

#tbTeamGenModalBody::-webkit-scrollbar {
    width: 7px;
}
#tbTeamGenModalBody::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}
#tbTeamGenModalBody::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.45);
    border-radius: 4px;
}
#tbTeamGenModalBody::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7);
}

.tb-gen-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(9, 14, 26, 0.95);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 10px;
}

/* Pills & Selection Controls */
.tb-gen-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tb-gen-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-pill.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.tb-gen-preset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-gen-preset-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #fff;
}

/* Archetypes Flexible Row (No Truncation) */
.tb-gen-arch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-gen-arch-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tb-gen-arch-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.tb-gen-arch-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(0, 206, 201, 0.2));
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(9, 132, 227, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 6 Pokemon Cards Grid */
.tb-gen-squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
    padding-bottom: 8px;
}

.tb-gen-poke-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tb-gen-poke-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.tb-gen-poke-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.tb-gen-poke-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.tb-gen-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-poke-role {
    display: inline-block;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 3px;
}

.tb-gen-poke-details {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-gen-detail-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-gen-poke-moves-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-gen-move-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 5px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================================
   SITE MODE SWITCHER FULL WIDTH DISTRIBUTION
   ========================================================================== */
.mode-switcher-header {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 8px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
}

.mode-switcher-header .site-mode-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

.mode-switcher-header .site-mode-btn span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 768px) {
    .mode-switcher-header {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    .mode-switcher-header .site-mode-btn {
        width: 100% !important;
        flex: none !important;
        padding: 10px 12px !important;
    }
}


/* Gimmick Toggles in Procedural Generator */
.tb-gen-gimmick-toggle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tb-gen-gimmick-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tb-gen-gimmick-toggle.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #10b981;
    color: #10b981;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}


/* ==========================================================================
   DATABASE STAT FILTERS STYLING (MINIMALIST, UNDER TYPE FILTERS, MINECRAFT FONT)
   ========================================================================== */
.db-stat-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.db-stat-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 22px;
}

.db-stat-sliders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: 4px;
}

.db-stat-filter-item {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 2px 5px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    height: 26px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: all 0.15s ease;
}

.db-stat-filter-item:hover {
    background: rgba(26, 38, 70, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.db-stat-filter-item.has-filter {
    border-color: rgba(16, 185, 129, 0.6) !important;
    background: rgba(16, 185, 129, 0.12) !important;
}

.db-stat-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 0;
}

.db-stat-name i {
    font-size: 0.58rem;
}

.db-stat-name.hp { color: #ef4444; }
.db-stat-name.atk { color: #f97316; }
.db-stat-name.def { color: #eab308; }
.db-stat-name.spa { color: #38bdf8; }
.db-stat-name.spd { color: #a78bfa; }
.db-stat-name.spe { color: #10b981; }
.db-stat-name.bst { color: #fbbf24; }

.db-stat-inputs-row {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.db-stat-num-input {
    width: 32px !important;
    min-width: 0 !important;
    height: 20px !important;
    background: rgba(10, 15, 30, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 1px 2px !important;
    text-align: center !important;
    outline: none !important;
    transition: all 0.15s ease;
    box-sizing: border-box !important;
}

.db-stat-num-input:focus {
    border-color: #10b981 !important;
    background: rgba(15, 23, 42, 1) !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4) !important;
}

.db-stat-num-input::-webkit-outer-spin-button,
.db-stat-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.db-stat-num-input {
    -moz-appearance: textfield;
}

.db-stat-dash {
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.65rem;
    line-height: 1;
}

.db-stat-sort-toggles {
    display: flex;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.db-stat-sort-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    padding: 0 4px !important;
    height: 20px !important;
    line-height: 18px !important;
    cursor: pointer;
    transition: all 0.15s ease;
}

.db-stat-sort-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.db-stat-sort-btn.active {
    background: #10b981 !important;
    border-color: #34d399 !important;
    color: #fff !important;
    font-weight: bold;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.db-stat-reset-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 2px 8px;
    height: 22px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.db-stat-reset-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fff;
}

/* Category Filter Compact & 'More...' Drawer Styles */
.db-cat-more-btn {
    background: rgba(15, 52, 96, 0.25);
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    padding: 5px 10px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    white-space: nowrap;
    vertical-align: middle;
}

.db-cat-more-btn i {
    font-size: 0.52rem;
    opacity: 0.75;
    transition: transform 0.2s ease;
}

.db-cat-more-btn:hover {
    background: rgba(15, 52, 96, 0.45);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.db-cat-more-btn.is-open {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #34d399;
}

.db-cat-more-btn.has-active-child {
    background: rgba(16, 185, 129, 0.22);
    border: 1px solid #10b981;
    color: #34d399;
}

.db-cat-more-badge {
    background: #10b981;
    color: #052e16;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    font-size: 0.52rem;
    border-radius: 8px;
    padding: 1px 4px;
    line-height: 1;
}

.db-cat-extra-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    padding: 6px 8px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    animation: fadeInCatExtra 0.18s ease-out;
}

@keyframes fadeInCatExtra {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Button in dbShowDetail to open full profile */
.db-detail-open-profile-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(9, 132, 227, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10b981;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.db-detail-open-profile-btn:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(9, 132, 227, 0.35));
    border-color: #34d399;
    color: #fff;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}


/* Move Slot Icons & Dual Name Styling */
.tb-slot-move-type-icon {
    width: 15px;
    height: 15px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 4px;
    vertical-align: middle;
}

.tb-move-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-move-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
}

.tb-move-en-sub {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.65rem;
    font-weight: normal;
    margin-left: 2px;
}


/* ==========================================================================
   BUILD ANALYSIS & SURVIVAL BENCHMARKS MODAL STYLES
   ========================================================================== */
.tb-build-analysis-container {
    margin-top: 18px;
    padding: 14px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.tb-build-analysis-header h4 {
    margin: 0 0 12px 0;
    color: #10b981;
    font-size: 0.95rem;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

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

.tb-analysis-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
}

.tb-analysis-card-title {
    font-weight: bold;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tb-bulk-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    margin-bottom: 6px;
}

.tb-bulk-label {
    color: rgba(255, 255, 255, 0.7);
}

.tb-bulk-val {
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.75rem;
}

.tb-bulk-val.badge-high {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.tb-bulk-val.badge-good {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.tb-bulk-val.badge-mid {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.tb-bulk-val.badge-low {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.tb-surv-meta-header {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 10px 0 6px 0;
    text-transform: uppercase;
}

.tb-surv-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.8);
}

.tb-surv-tag {
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tb-surv-tag.pass {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.tb-surv-tag.mid {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.tb-surv-tag.fail {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.tb-speed-tier-badge {
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.3);
    color: #38bdf8;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.tb-speed-benchmark-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
}

.tb-pros-cons-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tb-pros-list, .tb-cons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-pro-item {
    font-size: 0.72rem;
    color: #34d399;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-con-item {
    font-size: 0.72rem;
    color: #fb7185;
    display: flex;
    align-items: center;
    gap: 6px;
}


/* Slot Card Quick Bulk Summary */
.tb-slot-bulk-quick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    flex-wrap: wrap;
}

.tb-bulk-quick-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tb-bulk-quick-tag b {
    color: #10b981;
}

.tb-stats-modal-expanded {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(16, 185, 129, 0.3);
}


/* Z-Move Slot Badge Styles */
.tb-slot-zmove-badge {
    margin: 6px 0;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 211, 42, 0.1);
    border: 1px solid rgba(255, 211, 42, 0.3);
    color: #ffd32a;
    transition: all 0.2s ease;
}

.tb-slot-zmove-badge.ready {
    background: linear-gradient(135deg, rgba(255, 211, 42, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    border: 1px solid rgba(255, 211, 42, 0.45);
    box-shadow: 0 0 10px rgba(255, 211, 42, 0.15);
}

.tb-slot-zmove-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px dashed rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    font-size: 0.68rem;
}

.tb-zmove-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-zmove-title small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
    margin-left: 2px;
}


/* Profile Card Top Bar & Photo Button */
.db-profile-card-top-bar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    margin-bottom: 2px;
}
.db-profile-photo-btn {
    position: static;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
.db-profile-photo-btn:hover {
    background: #6366f1;
    border-color: #818cf8;
    color: #fff;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
}

.db-profile-search-wrap {
    position: relative;
    z-index: 550;
    min-width: 250px;
    max-width: 360px;
}
.db-profile-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    pointer-events: none;
}
.db-profile-search-input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    color: #fff;
    font-size: 0.82rem;
    transition: all 0.2s;
    font-family: inherit;
}
.db-profile-search-input:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
    background: #0f172a;
}
.db-profile-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 440px;
    max-width: min(460px, calc(100vw - 32px));
    background: #141b2d;
    border: 1px solid rgba(16, 185, 129, 0.55);
    border-radius: 12px;
    max-height: 380px;
    overflow-y: auto;
    z-index: 99999 !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 16px rgba(16, 185, 129, 0.25);
}
.db-profile-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
    text-decoration: none;
}
.db-profile-search-item:last-child {
    border-bottom: none;
}
.db-profile-search-item:hover {
    background: rgba(16, 185, 129, 0.22);
}
.db-profile-search-thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}
.db-profile-search-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    gap: 2px;
}
.db-profile-search-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-profile-search-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-profile-search-dex {
    font-size: 0.72rem;
    color: #10b981;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    flex-shrink: 0;
}
.db-profile-search-types {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}
.db-profile-search-type-pill {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.db-profile-search-empty {
    padding: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
}


/* ==========================================================================
   Z-MOVE BUTTON, MODAL & PER-MOVE EFFECTS
   ========================================================================== */
.tb-zmove-btn {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.16), rgba(255, 159, 26, 0.24));
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: #ffd700;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    font-family: inherit;
}
.tb-zmove-btn:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(255, 159, 26, 0.45));
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    transform: translateY(-1px);
}
.tb-zmove-btn.active {
    background: linear-gradient(135deg, #ffd700, #ff9f1a);
    color: #121829;
    border-color: #fff;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.65);
}

.tb-move-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tb-move-main-line {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.tb-move-z-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    padding: 3px 10px;
    margin-left: 20px;
    border-radius: 6px;
    margin-top: 3px;
    transition: all 0.2s;
    cursor: default;
}
.tb-move-z-sub.damage {
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: #ffd700;
}
.tb-move-z-sub.damage:hover {
    background: rgba(255, 215, 0, 0.16);
    border-color: #ffd700;
}
.tb-move-z-sub.status {
    background: rgba(255, 211, 42, 0.08);
    border: 1px solid rgba(255, 211, 42, 0.45);
    color: #ffd32a;
}
.tb-move-z-sub.status:hover {
    background: rgba(255, 211, 42, 0.18);
    border-color: #ffd32a;
}
.tb-move-z-title {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}
.tb-move-z-bp {
    color: #ffd32a;
    font-weight: 700;
    font-family: 'Minecraft', monospace, sans-serif;
    font-size: 0.72rem;
    flex-shrink: 0;
    margin-left: auto;
}
.tb-move-z-bp.status-boost {
    color: #ffd32a;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Z-Crystal Selection Modal */
.tb-zcrystal-modal-content {
    max-width: 800px !important;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.tb-zcrystal-modal-body {
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tb-zcrystal-actions {
    display: flex;
    justify-content: flex-end;
}
.tb-zcrystal-remove-btn {
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all 0.2s;
}
.tb-zcrystal-remove-btn:hover {
    background: rgba(239, 68, 68, 0.35);
    border-color: #ef4444;
    color: #fff;
}
.tb-zcrystal-section-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tb-zcrystal-section-title.signature {
    color: #ffd700;
}
.tb-zcrystal-signature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
.tb-zcrystal-sig-card {
    background: rgba(15, 23, 42, 0.85);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tb-zcrystal-sig-card:hover {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25);
}
.tb-zcrystal-sig-card.active {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 159, 26, 0.25));
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
}
.tb-zcrystal-sig-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tb-zcrystal-sig-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffd700;
    flex: 1;
}
.tb-zcrystal-sig-details {
    font-size: 0.78rem;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.35;
}
.tb-zcrystal-req-move {
    color: #38bdf8;
    font-weight: 600;
}
.tb-zcrystal-zmove-name {
    color: #f59e0b;
    font-weight: 700;
}
.tb-zcrystal-sig-desc {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 2px;
}

.tb-zcrystal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}
.tb-zcrystal-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tb-zcrystal-card:hover {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    transform: translateY(-2px);
}
.tb-zcrystal-card.compatible {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.08);
}
.tb-zcrystal-card.active {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.2);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}
.tb-zcrystal-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tb-zcrystal-type-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.tb-zcrystal-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
}
.tb-zcrystal-card-zmove {
    font-size: 0.72rem;
    color: #ffd700;
    font-weight: 600;
}
.tb-zcrystal-compat-badge {
    position: absolute;
    right: 8px;
    top: 8px;
    font-size: 0.62rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.25);
    color: #10b981;
    font-weight: 700;
}


/* ==========================================================================
   SYNERGY ANALYSIS TOGGLE & COVERAGE STYLES
   ========================================================================== */
.tb-synergy-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.tb-synergy-header-row .tb-synergy-title {
    margin-bottom: 0;
}
.tb-synergy-mode-tabs {
    display: flex;
    gap: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 4px;
}
.tb-syn-mode-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.tb-syn-mode-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.tb-syn-mode-btn.active {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35);
}
.tb-coverage-good {
    color: #10b981;
    font-weight: 700;
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tb-coverage-none {
    color: #f59e0b;
    font-weight: 700;
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tb-eff-badge.eff-super {
    background: #10b981 !important;
    color: #fff !important;
}


.tb-syn-tera-btn {
    margin-top: 5px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}
.tb-syn-tera-btn:hover {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.18);
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.35);
}
.tb-syn-tera-btn.active {
    background: linear-gradient(135deg, #00cec9, #0984e3);
    color: #fff;
    border-color: #fff;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.7);
}

/* ========================================================================== */
/* SYNERGY & WEAKNESS ANALYSIS ENHANCED DASHBOARD */
/* ========================================================================== */
.tb-syn-dash {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tb-syn-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}
.tb-syn-dash-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    font-family: 'Minecraft', monospace;
}
.tb-syn-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.tb-syn-status-badge.status-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.4));
    border: 1px solid #10b981;
    color: #a7f3d0;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}
.tb-syn-status-badge.status-yellow {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.4));
    border: 1px solid #f59e0b;
    color: #fde68a;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}
.tb-syn-status-badge.status-red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(185, 28, 28, 0.5));
    border: 1px solid #ef4444;
    color: #fecaca;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
    animation: synPulseRed 2s infinite ease-in-out;
}
@keyframes synPulseRed {
    0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.7); }
}

.tb-syn-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}
.tb-syn-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.2s, border-color 0.2s;
}
.tb-syn-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}
.tb-syn-card-label {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tb-syn-card-val {
    font-size: 1.15rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.tb-syn-card-sub {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
}

.tb-syn-tip-box {
    background: rgba(0, 206, 201, 0.08);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.73rem;
    color: #e2e8f0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.tb-syn-tip-box i {
    color: #00cec9;
    font-size: 0.95rem;
    margin-top: 2px;
}

.tb-balance-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
    gap: 4px;
    min-width: 60px;
}
.tb-bal-great {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #34d399;
}
.tb-bal-good {
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid #00cec9;
    color: #55efc4;
}
.tb-bal-neutral {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid #64748b;
    color: #cbd5e1;
}
.tb-bal-warn {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #fbbf24;
}
.tb-bal-danger {
    background: rgba(239, 68, 68, 0.25);
    border: 1px solid #ef4444;
    color: #f87171;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.tb-coverage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    gap: 5px;
    min-width: 68px;
}
.tb-cov-opt {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #34d399;
}
.tb-cov-single {
    background: rgba(9, 132, 227, 0.2);
    border: 1px solid #0984e3;
    color: #74b9ff;
}
.tb-cov-zero {
    background: rgba(244, 63, 94, 0.25);
    border: 1px solid #f43f5e;
    color: #fb7185;
}
.tb-cov-meta-alert {
    background: rgba(239, 68, 68, 0.3);
    border: 1px solid #ef4444;
    color: #fff;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
    animation: synPulseRed 2s infinite ease-in-out;
}



.tb-move-z-sub.status {
    background: rgba(255, 211, 42, 0.12);
    border-color: rgba(255, 211, 42, 0.5);
}
.tb-move-z-eff-badge {
    background: rgba(255, 211, 42, 0.25);
    color: #ffd32a;
    border: 1px solid rgba(255, 211, 42, 0.4);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.62rem;
    font-weight: 700;
    margin-left: auto;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.tb-move-z-sub:hover .tb-move-z-eff-badge {
    background: rgba(255, 211, 42, 0.4);
    box-shadow: 0 0 8px rgba(255, 211, 42, 0.6);
}


/* ==========================================================================
   TEAMBUILDER MOVE & Z-MOVE CONTAINED LAYOUT FIX
   ========================================================================== */
.tb-move-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
.tb-move-main-line {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
}
.tb-move-z-sub {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s !important;
    cursor: default !important;
    min-width: 0 !important;
}
.tb-move-z-sub.damage {
    background: rgba(255, 215, 0, 0.08) !important;
    border: 1px solid rgba(255, 215, 0, 0.4) !important;
    color: #ffd700 !important;
}
.tb-move-z-sub.damage:hover {
    background: rgba(255, 215, 0, 0.18) !important;
    border-color: #ffd700 !important;
}
.tb-move-z-sub.status {
    background: rgba(255, 211, 42, 0.08) !important;
    border: 1px solid rgba(255, 211, 42, 0.45) !important;
    color: #ffd32a !important;
}
.tb-move-z-sub.status:hover {
    background: rgba(255, 211, 42, 0.18) !important;
    border-color: #ffd32a !important;
}
.tb-move-z-title {
    color: #fff !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-right: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.tb-move-z-bp {
    color: #ffd32a !important;
    font-weight: 700 !important;
    font-family: 'Minecraft', monospace, sans-serif !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    white-space: nowrap !important;
}
.tb-move-z-bp.status-boost {
    color: #ffd32a !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
}

/* ===== MECHANICS JUMP BUTTONS & BANNERS ===== */
.db-mechanic-jump-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    margin-top: 14px;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.25) 0%, rgba(0, 206, 201, 0.15) 100%);
    border: 1px solid rgba(0, 206, 201, 0.45);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(0, 206, 201, 0.1);
}
.db-mechanic-jump-banner:hover {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.45) 0%, rgba(0, 206, 201, 0.3) 100%);
    border-color: #55efc4;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(85, 239, 196, 0.25);
}
.jump-banner-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.jump-banner-left i {
    font-size: 1.4rem;
    color: #55efc4;
}
.jump-banner-title {
    font-size: 0.92rem;
    font-weight: bold;
    color: #ffffff;
}
.jump-banner-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}
.jump-arrow {
    color: #55efc4;
    font-size: 1rem;
    transition: transform 0.2s ease;
}
.db-mechanic-jump-banner:hover .jump-arrow {
    transform: translateX(4px);
}
.db-mechanic-jump-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.4) 0%, rgba(0, 206, 201, 0.3) 100%);
    border: 1px solid #00cec9;
    border-radius: 10px;
    color: #55efc4;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(0, 206, 201, 0.2);
}
.db-mechanic-jump-btn:hover {
    background: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(85, 239, 196, 0.4);
}
.db-adv-tab-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid rgba(0, 206, 201, 0.5);
    color: #55efc4;
    font-size: 0.72rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-adv-tab-pill:hover {
    background: rgba(0, 206, 201, 0.45);
    border-color: #55efc4;
    color: #ffffff;
    transform: scale(1.05);
}

.db-math-formula-box {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: #55efc4;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(0, 206, 201, 0.5);
    box-shadow: 0 4px 20px rgba(0, 206, 201, 0.15), inset 0 0 15px rgba(0, 206, 201, 0.05);
    padding: 14px 18px;
    border-radius: 10px;
    margin: 12px 0;
    overflow-x: auto;
    line-height: 1.6;
    letter-spacing: 0.3px;
}
.db-section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 206, 201, 0.4), transparent);
    margin: 18px 0;
}

/* ===== TERA RULE CARD & EXCEPTIONS GRID ===== */
.db-tera-rule-card {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.15) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 10px;
}
.db-tera-rule-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: #55efc4;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 206, 201, 0.2);
}
.db-tera-rule-header i {
    font-size: 1.5rem;
    color: #00cec9;
}
.db-tera-exceptions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.db-tera-exception-item {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 10px 14px;
    border-left: 3px solid #ff7675;
}
.db-tera-exception-item.tech {
    border-left-color: #fdcb6e;
}
.db-tera-exception-item .exception-title {
    font-size: 0.82rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-tera-exception-item.bad .exception-title i {
    color: #ff7675;
}
.db-tera-exception-item.tech .exception-title i {
    color: #fdcb6e;
}
.db-tera-exception-item .exception-desc {
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}


.db-card-dl-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    font-size: 0.72rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.db-card-dl-action-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.db-status-cat-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
}

/* --- Status Card Avatar & Meta Chips Fixes --- */
.db-status-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.db-status-meta-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.db-status-chips-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.db-status-chip-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.85) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
}

.db-status-chips-row:has(.fa-shield-alt) .db-status-chip-label i {
    color: #2ecc71;
}

.db-status-chips-row:has(.fa-meteor) .db-status-chip-label i {
    color: #ff7675;
}

.db-status-chips-row:has(.fa-bolt) .db-status-chip-label i {
    color: #f1c40f;
}

.db-status-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.db-field-interactive-item.terrain .db-item-icon-box,
.db-field-interactive-item.field .db-item-icon-box {
    color: #a29bfe;
    background: rgba(162, 155, 254, 0.2);
}
.db-field-interactive-item.type .db-item-icon-box {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.2);
}
.db-field-interactive-item.item .db-item-icon-box {
    color: #0984e3;
    background: rgba(9, 132, 227, 0.2);
}


/* ==========================================================================
   TEAM GENERATOR 2.0 ENHANCED STYLES
   ========================================================================== */
.tb-gen-section-box {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s;
}
.tb-gen-section-box:hover {
    border-color: rgba(255, 255, 255, 0.16);
}
.tb-gen-input-wrap {
    width: 100%;
}
.tb-gen-text-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(10, 15, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
}
.tb-gen-text-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
    background: rgba(10, 18, 36, 0.95);
}
.tb-gen-chip-btn {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #e2e8f0;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    padding: 5px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    transition: all 0.18s ease;
}
.tb-gen-chip-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}
.tb-gen-chip-btn.active {
    background: rgba(245, 158, 11, 0.3) !important;
    border-color: #f59e0b !important;
    color: #fef08a !important;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}
.tb-gen-bring-badge {
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace !important;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
}
.tb-gen-pin-btn {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem;
    padding: 3px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
    transition: all 0.15s ease;
}
.tb-gen-pin-btn:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #fff;
}
.tb-gen-pin-btn.pinned {
    background: rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
    color: #f59e0b;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}
.tb-gen-reroll-btn {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem;
    padding: 3px 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
    transition: all 0.18s ease;
}
.tb-gen-reroll-btn:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    color: #10b981;
}
.tb-gen-bring-badge.core {
    background: rgba(16, 185, 129, 0.22);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #10b981;
}
.tb-gen-bring-badge.bench {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
}
.tb-gen-poke-card.is-core-card {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}


/* ==========================================================================
   ADMIN TRANSLATION & NAME CUSTOMIZATION SYSTEM STYLES
   ========================================================================== */
.admin-inline-pencil-btn {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #e94560;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.admin-inline-pencil-btn:hover {
    background: #e94560;
    color: #fff;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
    transform: scale(1.05);
}

.admin-inline-tag-btn {
    background: rgba(0, 206, 201, 0.15) !important;
    border: 1px dashed rgba(0, 206, 201, 0.6) !important;
    color: #00cec9 !important;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.admin-inline-tag-btn:hover {
    background: #00cec9 !important;
    color: #000 !important;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.6) !important;
    transform: translateY(-1px);
}

.admin-modal-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    background: rgba(0, 206, 201, 0.18);
    border: 1px solid rgba(0, 206, 201, 0.45);
    border-radius: 12px;
    color: #55efc4;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
}
.admin-modal-tag-chip i {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.15s;
}
.admin-modal-tag-chip i:hover {
    color: #ff4757;
}

.admin-modal-preset-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.admin-modal-preset-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
.admin-modal-preset-chip.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.admin-trans-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 7, 15, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999 !important;
}

.admin-trans-modal-content {
    background: #0f1123;
    border: 1px solid rgba(233, 69, 96, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(233, 69, 96, 0.2);
    border-radius: 14px;
    width: 95%;
    max-width: 520px;
    padding: 20px 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: adminTransFadeIn 0.2s ease;
}

@keyframes adminTransFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.admin-trans-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
}

.admin-trans-type-badge {
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.5);
    color: #ff6b81;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
}

.admin-trans-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-trans-field-group label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: space-between;
}

.admin-trans-input {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 9px 12px;
    color: #fff;
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
}

.admin-trans-input:focus {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
    background: rgba(15, 23, 42, 0.8);
}

.admin-trans-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
    margin-top: 4px;
}

/* Admin Panel Translations Table */
.admin-trans-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    overflow: hidden;
}

.admin-trans-table th {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.admin-trans-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
}

.admin-trans-table tr:hover td {
    background: rgba(233, 69, 96, 0.05);
}

/* Modal Tabs & Stats Styling */
.admin-trans-tabs-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}

.admin-trans-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-trans-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.admin-trans-tab-btn.active {
    background: rgba(233, 69, 96, 0.2);
    border-color: #e94560;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

.admin-trans-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-trans-textarea {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 70px;
    line-height: 1.4;
    transition: all 0.2s;
}

.admin-trans-textarea:focus {
    border-color: #e94560;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
    background: rgba(15, 23, 42, 0.8);
}

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

.admin-trans-stat-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-trans-stat-label {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-weight: bold;
}

.admin-trans-stat-input {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 8px;
    color: #55efc4;
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: bold;
    text-align: center;
    outline: none;
    transition: all 0.2s;
}

.admin-trans-stat-input:focus {
    border-color: #55efc4;
    box-shadow: 0 0 8px rgba(85, 239, 196, 0.35);
}

.admin-trans-total-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(233, 69, 96, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 8px;
    padding: 8px 14px;
    margin-top: 4px;
}

.admin-trans-select {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    font-size: 0.82rem;
    outline: none;
}

/* ========================================================================== */
/* NEWS & UPDATES (CHANGELOG) MODE STYLES */
/* ========================================================================== */
.news-mode-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 14px 40px;
}

.news-header-banner {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.news-header-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 206, 201, 0.12), transparent 70%);
    pointer-events: none;
}

.news-header-main {
    flex: 1;
    min-width: 280px;
}

.news-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.news-header-title {
    font-size: 1.45rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-header-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    line-height: 1.45;
}

.news-header-stats-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.news-stat-pill {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.news-stat-pill i {
    font-size: 1.15rem;
}

.news-stat-val {
    font-size: 0.95rem;
    font-weight: bold;
    font-family: 'Minecraft', monospace;
    color: #fff;
}

.news-stat-lbl {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

/* Controls Bar */
.news-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.news-category-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.news-cat-btn {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.news-cat-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.news-cat-btn.active {
    background: linear-gradient(135deg, #e94560, #c0392b);
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 2px 10px rgba(233, 69, 96, 0.4);
}

.news-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
    flex: 0 1 320px;
}

.news-search-box i.fa-search {
    position: absolute;
    left: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    pointer-events: none;
}

.news-search-box input {
    width: 100%;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 32px 8px 34px;
    color: #fff;
    font-size: 0.78rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.news-search-box input:focus {
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.news-search-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 4px;
}

.news-search-clear:hover {
    color: #fff;
}

/* News Cards */
.news-posts-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.news-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.news-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.news-card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.news-card-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.news-version-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
}

.news-tag-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
}

.news-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
}

.news-date-text {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.news-card-title {
    font-size: 1.12rem;
    color: #fff;
    margin: 0 0 8px 0;
    font-family: 'Minecraft', monospace;
    line-height: 1.4;
}

.news-card-summary {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

.news-card-body.collapsed {
    display: none;
}

.news-highlights-wrap {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 14px;
}

.news-hl-header {
    font-size: 0.75rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.news-highlight-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.news-highlight-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-hl-badge-col {
    flex: 0 0 64px;
}

.news-hl-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    text-align: center;
    width: 100%;
}

.news-hl-content-col {
    flex: 1;
}

.news-hl-title {
    font-size: 0.82rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.news-hl-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.45;
}

.news-card-footer {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

.news-expand-toggle-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 5px 12px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.news-expand-toggle-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.news-empty-state {
    text-align: center;
    padding: 40px 20px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
}

.news-reset-btn {
    margin-top: 14px;
    background: linear-gradient(135deg, #0984e3, #00cec9);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
}

.news-reset-btn:hover {
    opacity: 0.9;
}

/* ==========================================================================
   POKE DIV COMMUNITY HUB (ACTIONS, TYPES, SUGGESTIONS & POLLS)
   ========================================================================== */

.comm-actions-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* Quick Suggest Translation Pencil Button for RU users */
.suggest-trans-pencil-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 206, 201, 0.14);
    border: 1px solid rgba(0, 206, 201, 0.38);
    color: #00cec9;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    font-size: 0.65rem;
    cursor: pointer;
    margin-left: 6px;
    padding: 0;
    vertical-align: middle;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.suggest-trans-pencil-btn:hover {
    background: #00cec9;
    color: #0f172a;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.6);
}

.comm-account-display {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 206, 201, 0.08);
    border: 1px solid rgba(0, 206, 201, 0.28);
    border-radius: 8px;
    padding: 10px 14px;
    user-select: none;
}

.comm-idea-card-title {
    margin: 12px 0 8px 0;
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.4;
}

.comm-idea-content-box {
    background: rgba(255, 255, 255, 0.035);
    border-left: 3px solid #00cec9;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 10px;
    white-space: pre-wrap;
    word-break: break-word;
}

.comm-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.comm-btn-suggest {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%);
    color: #fff;
    border: 1px solid rgba(0, 206, 201, 0.5);
}

.comm-btn-suggest:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.45);
    filter: brightness(1.1);
}

.comm-btn-poll {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: 1px solid rgba(245, 158, 11, 0.5);
}

.comm-btn-poll:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
    filter: brightness(1.1);
}

.comm-types-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.45);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.comm-types-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.comm-type-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.76rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.comm-type-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.comm-type-btn.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(233, 69, 96, 0.15));
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

.comm-sort-group {
    display: flex;
    gap: 4px;
}

.comm-sort-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 5px 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.comm-sort-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.comm-sort-btn.active {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    color: #00cec9;
}

/* Community Cards */
.comm-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.92) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.comm-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.comm-card.comm-card-suggestion {
    border-left: 4px solid #00cec9;
}

.comm-card.comm-card-suggestion.status-approved {
    border-left: 4px solid #10b981;
}

.comm-card.comm-card-poll {
    border-left: 4px solid #f59e0b;
}

.comm-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.comm-author-col {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comm-author-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(0, 206, 201, 0.15);
    color: #00cec9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    border: 1px solid rgba(0, 206, 201, 0.3);
}

.comm-author-avatar.admin {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
}

.comm-author-avatar.custom {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(0, 206, 201, 0.45) !important;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.25);
}

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

.comm-author-badge-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    vertical-align: middle;
    margin-left: 6px;
    border-radius: 4px;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.comm-author-badge-img:hover {
    transform: scale(1.25);
}

.comm-author-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comm-author-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.comm-admin-pill {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
    border: 1px solid rgba(233, 69, 96, 0.4);
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
}

.comm-post-date {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
}

.comm-badge-col {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.comm-cat-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.comm-cat-pill.poll {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
}

.comm-status-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-status-pill.approved {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.comm-status-pill.voting {
    background: rgba(9, 132, 227, 0.18);
    color: #0984e3;
    border: 1px solid rgba(9, 132, 227, 0.35);
}

.comm-admin-card-actions {
    display: inline-flex;
    gap: 6px;
    margin-left: 6px;
}

.comm-admin-btn {
    border: none;
    border-radius: 5px;
    padding: 4px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-admin-btn.approve {
    background: #10b981;
    color: #fff;
}

.comm-admin-btn.delete {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.comm-admin-btn:hover {
    filter: brightness(1.2);
}

/* Translation comparison bar */
.comm-trans-compare-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
}

.comm-trans-box {
    flex: 1;
}

.comm-trans-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.comm-trans-value {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    font-weight: bold;
}

.comm-trans-box.eng .comm-trans-value {
    color: #e2e8f0;
}

.comm-trans-box.rus .comm-trans-value {
    color: #00cec9;
}

.comm-trans-arrow {
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.1rem;
}

.comm-reasoning-box {
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid rgba(0, 206, 201, 0.5);
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 12px;
    line-height: 1.45;
}

.comm-admin-comment-box {
    display: flex;
    gap: 8px;
    font-size: 0.78rem;
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    border: 1px dashed rgba(16, 185, 129, 0.3);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.comm-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 10px;
}

.comm-vote-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comm-vote-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 5px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.comm-vote-btn.like:hover, .comm-vote-btn.like.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #10b981;
}

.comm-vote-btn.dislike:hover, .comm-vote-btn.dislike.active {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

.comm-rating-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
}

.comm-rating-pill.pos {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.comm-rating-pill.neg {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.comm-rating-pill.zero {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}

/* Poll styling */
.comm-poll-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #fff;
    margin: 8px 0 6px 0;
    line-height: 1.4;
}

.comm-poll-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
    line-height: 1.45;
}

.comm-poll-options-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.comm-poll-opt-row {
    position: relative;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
}

.comm-poll-opt-row:hover {
    border-color: rgba(245, 158, 11, 0.5);
    transform: translateX(2px);
}

.comm-poll-opt-row.selected {
    border-color: #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.comm-poll-opt-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.45) 100%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.comm-poll-opt-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
}

.comm-poll-opt-radio {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
}

.comm-poll-opt-row.selected .comm-poll-opt-radio {
    color: #f59e0b;
}

.comm-poll-opt-text {
    flex: 1;
    font-family: 'Minecraft', monospace;
    font-size: 0.84rem;
    color: #fff;
}

.comm-poll-opt-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
}

.comm-poll-opt-stat .votes-num {
    color: rgba(255, 255, 255, 0.5);
}

.comm-poll-opt-stat .votes-pct {
    font-weight: bold;
    color: #f59e0b;
    min-width: 35px;
    text-align: right;
}

.comm-poll-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 10px;
}

.comm-poll-total b {
    color: #fff;
}

/* Modals */
.comm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.comm-modal-card {
    background: #1a1a2e;
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 14px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    animation: modalIn 0.2s ease-out;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.comm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.5);
}

.comm-modal-header h1,
.comm-modal-header h2,
.comm-modal-header h3,
.comm-modal-header h4,
.comm-modal-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.comm-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.comm-modal-close:hover {
    color: #fff;
}

.comm-modal-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.comm-form-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
}

.comm-form-input, .comm-form-textarea {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 9px 12px;
    color: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s;
}

.comm-form-input:focus, .comm-form-textarea:focus {
    border-color: #00cec9;
}

.comm-btn-add-opt {
    background: rgba(245, 158, 11, 0.15);
    border: 1px dashed rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    border-radius: 6px;
    padding: 6px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    margin-top: 6px;
}

.comm-btn-add-opt:hover {
    background: rgba(245, 158, 11, 0.25);
}

.comm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.5);
}

.comm-btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 7px 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
}

.comm-btn-submit {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%);
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.comm-btn-submit:hover {
    filter: brightness(1.1);
}

/* ==========================================================================
   TERA GENERATOR & TACTICAL RECOMMENDATIONS
   ========================================================================== */
.tb-gen-tera-detail {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 6px;
    padding: 3px 8px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    transition: all 0.2s ease;
}

.tb-gen-tera-detail:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.5);
}

.tb-tera-rec-box {
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.tb-tera-rec-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-tera-rec-chip:hover {
    background: rgba(168, 85, 247, 0.18);
    border-color: rgba(168, 85, 247, 0.5);
    transform: translateY(-1px);
}

.tb-tera-rec-chip.active {
    background: rgba(168, 85, 247, 0.28);
    border-color: #a855f7;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}






/* ==========================================================================
   COMMUNITY BUILDS & TEAMS ON NEWS WALL
   ========================================================================== */
.comm-card.comm-card-team {
    border-left: 4px solid #00cec9 !important;
}

.comm-card.comm-card-build {
    border-left: 4px solid #a855f7 !important;
}

.comm-type-pill.team {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid #00cec9;
    color: #00cec9;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-type-pill.build {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid #a855f7;
    color: #c084fc;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comm-format-badge {
    padding: 3px 9px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.comm-team-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.08rem;
    color: #fff;
    margin: 6px 0 8px 0;
}

.comm-team-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
    margin-bottom: 12px;
}

.comm-team-pokes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.comm-team-poke-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.2s, transform 0.2s;
}

.comm-team-poke-card:hover {
    border-color: #00cec9;
    transform: translateY(-2px);
}

.comm-team-poke-art-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 6px;
}

.comm-team-poke-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

.comm-tera-badge {
    position: absolute;
    bottom: -4px;
    right: -6px;
    padding: 2px 6px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.comm-team-poke-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.comm-team-poke-sub {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Minecraft', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.comm-team-poke-props {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    margin-top: 6px;
}

.comm-team-prop-chip {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comm-team-prop-chip i {
    font-size: 0.55rem;
    opacity: 0.7;
}

.comm-team-details-wrap {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.comm-details-header {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #00cec9;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.comm-poke-detail-row {
    background: rgba(10, 15, 30, 0.6);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.comm-poke-detail-head {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
}

.comm-poke-detail-title {
    color: #fff;
}

.comm-nature-tag {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid #10b981;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.62rem;
}

.comm-evs-tag {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.65rem;
}

.comm-poke-moves-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
}

.comm-detail-move-chip {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #e2e8f0;
    font-family: 'Minecraft', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comm-build-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.comm-build-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid;
    outline: none;
}

.comm-build-action-btn.details {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

.comm-build-action-btn.details:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.comm-build-action-btn.import {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    color: #00cec9;
}

.comm-build-action-btn.import:hover {
    background: rgba(0, 206, 201, 0.3);
    color: #fff;
    transform: translateY(-1px);
}

.comm-build-action-btn.copy {
    background: rgba(9, 132, 227, 0.15);
    border-color: #0984e3;
    color: #74b9ff;
}

.comm-build-action-btn.copy:hover {
    background: rgba(9, 132, 227, 0.3);
    color: #fff;
    transform: translateY(-1px);
}

/* Single Pokemon Hero Card */
.comm-single-build-box {
    display: flex;
    gap: 16px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 12px;
    padding: 16px;
    align-items: center;
    margin: 12px 0;
    flex-wrap: wrap;
}

.comm-single-art-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 90px;
}

.comm-single-art {
    width: 84px;
    height: 84px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
}

.comm-role-badge {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid #a855f7;
    color: #c084fc;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.58rem;
    font-family: 'Minecraft', monospace;
}

.comm-single-info-col {
    flex: 1;
    min-width: 220px;
}

.comm-single-head {
    margin-bottom: 8px;
}

.comm-single-name {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    color: #fff;
    font-weight: bold;
}

.comm-single-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.comm-single-chips-wrap {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.comm-chip-pill {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.comm-chip-pill.item i { color: #f59e0b; }
.comm-chip-pill.ability i { color: #00cec9; }
.comm-chip-pill.nature i { color: #10b981; }
.comm-chip-pill.evs i { color: #818cf8; }

.comm-single-moves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
}

.comm-single-move-chip {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    color: #fff;
    font-family: 'Minecraft', monospace;
}

/* Modal Publish Build */
.modal-publish-build {
    max-width: 620px !important;
    width: 95% !important;
    max-height: 88vh;
    overflow-y: auto;
}

.publish-build-tabs-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    flex-wrap: wrap;
}

.pub-tab-btn {
    background: none;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.pub-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.pub-tab-btn.active {
    background: rgba(0, 206, 201, 0.18);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.pub-field-row {
    margin-bottom: 12px;
}

.pub-label {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 5px;
}

.pub-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

.pub-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.2s;
}

.pub-input:focus {
    border-color: #00cec9;
}

.pub-team-chips-preview {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    min-height: 48px;
    align-items: center;
}

.pub-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    color: #fff;
    font-family: 'Minecraft', monospace;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pub-preview-chip img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.pub-search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid #00cec9;
    border-radius: 8px;
    padding: 8px;
    margin-top: 6px;
}

.pub-search-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.15s;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #fff;
}

.pub-search-item:hover {
    background: rgba(0, 206, 201, 0.25);
}

.pub-search-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.pub-selected-poke-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 206, 201, 0.1);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Minecraft', monospace;
}

.comm-btn-publish-build {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.2), rgba(9, 132, 227, 0.2)) !important;
    border: 1px solid #00cec9 !important;
    color: #00cec9 !important;
}

.comm-btn-publish-build:hover {
    background: linear-gradient(135deg, #00cec9, #0984e3) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.4);
}



/* ===== СХЕМА ЗОН ПОРАЖЕНИЯ ПРИЁМА (Move Target Diagram) ===== */
.db-move-target-box {
    background: rgba(18, 22, 36, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 20px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.db-target-diagram {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 380px;
}

.db-target-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    padding: 4px;
    border-radius: 14px;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

.db-target-row.side-active {
    outline: 3px solid #2ecc71;
    box-shadow: 0 0 16px rgba(46, 204, 113, 0.5);
    background: rgba(46, 204, 113, 0.1);
}

.db-target-pill {
    padding: 10px 4px;
    border-radius: 14px;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 700;
    color: #ffffff;
    border: 3.5px solid transparent;
    transition: all 0.2s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Enemy pills (orange like photo) */
.db-target-enemy {
    background: #de8326;
    opacity: 0.85;
}

/* Ally pills (cyan/blue like photo) */
.db-target-ally {
    background: #16c0eb;
    opacity: 0.85;
}

/* User pill (matches cyan from photo, sized to fit Пользователь) */
.db-target-user {
    background: #16c0eb;
    opacity: 0.85;
    font-size: 0.72rem;
    letter-spacing: -0.25px;
    white-space: nowrap;
}

/* Highlighted target pills (vibrant green border like photo) */
.db-target-pill.active {
    opacity: 1 !important;
    border: 3.5px solid #27ae60 !important;
    box-shadow: 0 0 12px rgba(39, 174, 96, 0.75), inset 0 0 6px rgba(39, 174, 96, 0.35);
}

.db-target-desc {
    margin-top: 14px;
    text-align: center;
    font-style: italic;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.45;
    max-width: 400px;
}

.db-detail-target-section {
    margin-top: 14px;
}

.db-detail-target-pill-badge {
    margin-left: 8px;
    font-size: 0.74rem;
    font-weight: normal;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(39, 174, 96, 0.2);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
    vertical-align: middle;
}

.db-move-target-badge, .db-move-meta-tag.db-move-target-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.35);
    white-space: nowrap;
}

.db-mcard-extra-pill.target {
    border-color: rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}


/* ==========================================================================
   ADMIN TAG & CATEGORY EDITOR STYLES (MINECRAFT FONT)
   ========================================================================== */
.comm-admin-btn.tags {
    background: rgba(0, 206, 201, 0.18) !important;
    border: 1px solid rgba(0, 206, 201, 0.4) !important;
    color: #00cec9 !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.15s ease !important;
}

.comm-admin-btn.tags:hover {
    background: rgba(0, 206, 201, 0.35) !important;
    color: #fff !important;
    border-color: #00cec9 !important;
}

.news-admin-tag-btn {
    background: rgba(0, 206, 201, 0.15) !important;
    border: 1px solid rgba(0, 206, 201, 0.35) !important;
    color: #00cec9 !important;
    border-radius: 6px !important;
    padding: 3px 9px !important;
    cursor: pointer !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.74rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.15s ease !important;
}

.news-admin-tag-btn:hover {
    background: rgba(0, 206, 201, 0.3) !important;
    border-color: #00cec9 !important;
    color: #fff !important;
}

.admin-editable {
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.admin-editable:hover {
    filter: brightness(1.25) !important;
    outline: 1px dashed rgba(0, 206, 201, 0.7) !important;
}

.news-tag-presets-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.news-tag-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    padding: 2px 8px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.news-tag-chip:hover {
    background: rgba(0, 206, 201, 0.2) !important;
    border-color: #00cec9 !important;
    color: #fff !important;
}

#modalAdminEditTags,
#modalAdminEditTags input,
#modalAdminEditTags select,
#modalAdminEditTags textarea,
#modalAdminEditTags button,
#modalAdminEditTags label,
#modalAdminEditTags span,
#modalAdminEditTags div {
    font-family: 'Minecraft', monospace !important;
}

#modalAdminEditTags i,
#modalAdminEditTags [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}

/* ==========================================================================
   PROFILE CRY CONTROLS - ULTRA-COMPACT SINGLE-ROW TOOLBAR
   ========================================================================== */
.db-profile-cry-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 2px;
    padding: 3px 8px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    max-width: 100%;
    flex-wrap: nowrap;
    position: relative;
    z-index: 5;
}

.db-profile-cry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.db-profile-cry-btn span {
    display: inline-block;
    line-height: 1;
}

.db-profile-cry-btn.play i,
.db-profile-cry-btn.retro i {
    display: inline-block;
    line-height: 1;
    transform: translateY(1.5px);
}

.db-profile-cry-btn.play {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(233, 69, 96, 0.18));
    border-color: rgba(233, 69, 96, 0.5);
    color: #fff;
}
.db-profile-cry-btn.play:hover {
    background: rgba(233, 69, 96, 0.6);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}
.db-profile-cry-btn.play.playing {
    background: linear-gradient(135deg, #e94560, #ff6b8b) !important;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out;
}

.db-profile-cry-btn.retro {
    background: rgba(108, 92, 231, 0.2);
    border-color: rgba(108, 92, 231, 0.4);
    color: #a29bfe;
    padding: 4px 8px;
}
.db-profile-cry-btn.retro:hover {
    background: rgba(108, 92, 231, 0.45);
    color: #fff;
    box-shadow: 0 0 8px rgba(108, 92, 231, 0.5);
}
.db-profile-cry-btn.retro.playing {
    background: #6c5ce7 !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(108, 92, 231, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out;
}

.db-profile-cry-btn.download {
    background: rgba(0, 184, 148, 0.15);
    border-color: rgba(0, 184, 148, 0.35);
    color: #55efc4;
    padding: 4px 7px;
    width: 26px;
    height: 26px;
}
.db-profile-cry-btn.download:hover {
    background: rgba(0, 184, 148, 0.4);
    color: #fff;
    box-shadow: 0 0 8px rgba(0, 184, 148, 0.5);
}

.db-profile-cry-vol-expandable {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.db-profile-cry-vol-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-profile-cry-vol-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.db-profile-cry-vol-pop {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 6px 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    align-items: center;
    gap: 8px;
    z-index: 100;
    white-space: nowrap;
}

.db-profile-cry-vol-expandable:hover .db-profile-cry-vol-pop,
.db-profile-cry-vol-expandable.active .db-profile-cry-vol-pop {
    display: flex;
}

.db-profile-cry-vol-pop::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #0f172a transparent transparent transparent;
}

.db-cry-compact-range {
    width: 65px;
    height: 4px;
    accent-color: #e94560;
    cursor: pointer;
}

#dbProfileCryVolVal {
    font-size: 0.68rem;
    color: #e94560;
    font-weight: 700;
    min-width: 28px;
    text-align: right;
    font-family: 'Minecraft', monospace;
}


/* ==========================================================================
   POKÉMON SOUNDS & CRIES DATABASE (SOUNDBOARD & CAPCUT TOOLS)
   ========================================================================== */

.db-cries-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 15px !important;
    box-sizing: border-box !important;
}

.db-cry-card {
    background: rgba(22, 27, 46, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    backdrop-filter: blur(10px) !important;
    font-family: 'Minecraft', monospace !important;
    box-sizing: border-box !important;
}

.db-cry-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(233, 69, 96, 0.5) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(233, 69, 96, 0.2) !important;
}

.db-cry-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

.db-cry-card-dex {
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    color: #e94560 !important;
    background: rgba(233, 69, 96, 0.15) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 0.5px !important;
    font-family: 'Minecraft', monospace !important;
}

.db-cry-card-types {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
}

.db-cry-card-type-dot {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.db-cry-card-type-dot img {
    width: 13px !important;
    height: 13px !important;
    object-fit: contain !important;
    display: block !important;
}

.db-cry-card-sprite-wrap {
    width: 90px !important;
    height: 90px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 6px auto !important;
    position: relative !important;
    cursor: pointer !important;
}

.db-cry-card-sprite {
    max-width: 85px !important;
    max-height: 85px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)) !important;
    transition: transform 0.25s ease !important;
}

.db-cry-card:hover .db-cry-card-sprite {
    transform: scale(1.08) !important;
}

.db-cry-card-name-ru {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    font-family: 'Minecraft', monospace !important;
    margin-top: 4px !important;
}

.db-cry-card-name-en {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    font-family: 'Minecraft', monospace !important;
}

.db-cry-card-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
}

.db-cry-play-row {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
}

.db-cry-play-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 10px !important;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(233, 69, 96, 0.1)) !important;
    border: 1px solid rgba(233, 69, 96, 0.4) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
}

.db-cry-play-btn:hover {
    background: rgba(233, 69, 96, 0.45) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.5) !important;
}

.db-cry-play-btn.playing {
    background: linear-gradient(135deg, #e94560, #ff6b8b) !important;
    border-color: #fff !important;
    box-shadow: 0 0 18px rgba(233, 69, 96, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out !important;
}

.db-cry-retro-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 7px 8px !important;
    background: rgba(108, 92, 231, 0.2) !important;
    border: 1px solid rgba(108, 92, 231, 0.4) !important;
    border-radius: 8px !important;
    color: #a29bfe !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
}

.db-cry-retro-btn:hover {
    background: rgba(108, 92, 231, 0.4) !important;
    color: #fff !important;
    border-color: #a29bfe !important;
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.4) !important;
}

.db-cry-retro-btn.playing {
    background: #6c5ce7 !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: 0 0 16px rgba(108, 92, 231, 0.9) !important;
    animation: dbCryPulse 0.8s infinite alternate ease-in-out !important;
}

.db-cry-download-row {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
}

.db-cry-dl-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 5px 8px !important;
    background: rgba(0, 184, 148, 0.15) !important;
    border: 1px solid rgba(0, 184, 148, 0.3) !important;
    border-radius: 7px !important;
    color: #55efc4 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Minecraft', monospace !important;
    white-space: nowrap !important;
}

.db-cry-dl-btn:hover {
    background: rgba(0, 184, 148, 0.35) !important;
    color: #fff !important;
    border-color: #00b894 !important;
    box-shadow: 0 0 10px rgba(0, 184, 148, 0.4) !important;
}

.db-cry-volume-slider {
    accent-color: #e94560 !important;
    height: 6px !important;
    border-radius: 3px !important;
}


/* ==========================================================================
   SOUND DATABASE STYLES (SFX, JINGLES, MOVES, OST)
   ========================================================================== */
.db-sound-card {
    background: rgba(22, 27, 46, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    backdrop-filter: blur(10px) !important;
    font-family: 'Minecraft', monospace !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.db-sound-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(233, 69, 96, 0.5) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(233, 69, 96, 0.2) !important;
}

.db-sound-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.db-sound-badge {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 0.4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-transform: uppercase !important;
}

.db-sound-format {
    font-size: 0.65rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}

.db-sound-icon-wrap {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    margin: 4px 0 10px 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease !important;
}

.db-sound-card:hover .db-sound-icon-wrap {
    transform: scale(1.08) !important;
}

.db-sound-name-ru {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 2px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.db-sound-name-en {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-style: italic !important;
    margin-bottom: 8px !important;
}

.db-sound-desc {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.db-sound-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
}

.db-sound-tag {
    font-size: 0.6rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
}

.db-sound-card-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
}

.db-sound-play-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(233, 69, 96, 0.5) !important;
    background: rgba(233, 69, 96, 0.2) !important;
    color: #fff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.db-sound-play-btn:hover {
    background: rgba(233, 69, 96, 0.4) !important;
    border-color: #e94560 !important;
    transform: scale(1.02) !important;
}

.db-sound-play-btn.playing {
    background: #e94560 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.6) !important;
    animation: soundPulse 1.2s infinite ease-in-out !important;
}

@keyframes soundPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(233, 69, 96, 0.5); }
    50% { box-shadow: 0 0 18px rgba(233, 69, 96, 0.9); }
}

.db-sound-dl-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.7rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.db-sound-dl-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.db-sound-progress-container {
    width: 100% !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
}

.db-sound-progress-bar {
    width: 100% !important;
    height: 5px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.db-sound-progress-fill {
    height: 100% !important;
    transition: width 0.2s linear !important;
}


/* ==========================================================================
   BACKDROP & VIDEO BACKGROUND GENERATOR (ADMIN PANEL)
   ========================================================================== */

.bd-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(233, 69, 96, 0.25);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.bd-header-info {
    flex: 1;
    min-width: 260px;
}

.bd-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bd-main-grid {
    display: grid;
    grid-template-columns: minmax(360px, 460px) 1fr;
    gap: 24px;
    align-items: flex-start;
}

@media (max-width: 960px) {
    .bd-main-grid {
        grid-template-columns: 1fr;
    }
}

.bd-controls-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bd-panel-box {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s ease;
}

.bd-panel-box:hover {
    border-color: rgba(233, 69, 96, 0.25);
}

.bd-panel-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}

.bd-preset-chips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bd-preset-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.64rem;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-preset-chip:hover {
    background: rgba(233, 69, 96, 0.18);
    border-color: rgba(233, 69, 96, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.bd-preset-chip.active {
    background: rgba(233, 69, 96, 0.28);
    border-color: #e94560;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.35);
}

.bd-res-btns-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.bd-res-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bd-res-btn:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.4);
    color: #ffffff;
}

.bd-res-btn.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.bd-custom-res-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.bd-input-num {
    width: 80px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 5px 8px;
}

.bd-input-num:focus {
    border-color: #00cec9;
    outline: none;
}

.bd-colors-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.bd-color-chips-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bd-color-chip {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.bd-color-chip:hover {
    transform: scale(1.15);
    border-color: #ffffff;
}

.bd-color-chip.active {
    border-color: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.bd-color-input {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.bd-select {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 6px 10px;
    cursor: pointer;
    width: 100%;
}

.bd-select:focus {
    border-color: #e94560;
    outline: none;
}

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

.bd-slider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.bd-slider-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.bd-range {
    flex: 1;
    height: 4px;
    accent-color: #e94560;
    cursor: pointer;
}

.bd-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
}

.bd-checkbox-label input[type="checkbox"] {
    accent-color: #e94560;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.bd-input-text {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    padding: 7px 10px;
    width: 100%;
    box-sizing: border-box;
}

.bd-input-text:focus {
    border-color: #00cec9;
    outline: none;
}

/* Right Column: Preview */
.bd-preview-col {
    position: relative;
}

.bd-preview-sticky {
    position: sticky;
    top: 20px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.bd-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bd-res-badge {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.35);
    color: #00cec9;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 3px 8px;
    border-radius: 4px;
}

.bd-preview-fs-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.72rem;
    transition: all 0.2s ease;
}

.bd-preview-fs-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.bd-canvas-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #060911;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    min-height: 320px;
    overflow: hidden;
}

#backdropPreviewCanvas {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
    display: block;
}

.bd-preview-tips {
    margin-top: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.63rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
}

/* Fullscreen Modal */
.bd-fullscreen-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.bd-fullscreen-overlay {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bdFullscreenCanvas {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

.bd-fullscreen-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e94560;
    border: none;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
}

.bd-fullscreen-close:hover {
    transform: rotate(90deg) scale(1.1);
}

.bd-fullscreen-tip {
    position: absolute;
    bottom: -32px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    text-align: center;
    width: 100%;
}


/* ==========================================================================
   TYPE BADGE & OVERLAY GENERATOR (ADMIN PANEL)
   ========================================================================== */

.tb-types-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 6px;
}

.tb-type-select-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-type-select-chip img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.tb-type-select-chip:hover {
    border-color: var(--t-color, #00cec9);
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.tb-type-select-chip.active {
    background: var(--t-color, #00cec9);
    border-color: #ffffff;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 12px var(--t-color, rgba(0, 206, 201, 0.5));
    font-weight: bold;
}

.tb-quick-combo-btn {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 5px 9px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-quick-combo-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #ffffff;
}

.tb-canvas-checker-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(45deg, #1c2438 25%, transparent 25%),
                      linear-gradient(-45deg, #1c2438 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #1c2438 75%),
                      linear-gradient(-45deg, transparent 75%, #1c2438 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 24px 16px;
    min-height: 220px;
    overflow: auto;
}

#typeBadgePreviewCanvas {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px;
    display: block;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   HD SPRITE & ART DOWNLOAD DROPDOWN (DATABASE & STUDIO)
   ========================================================================== */
.db-hd-dl-dropdown {
    position: fixed;
    z-index: 999999 !important;
    width: 360px;
    background: #0f172a;
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 206, 201, 0.2);
    padding: 12px;
    font-family: 'Minecraft', monospace;
    animation: dbHdFadeIn 0.15s ease-out;
}

@keyframes dbHdFadeIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.db-hd-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: #ffffff;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.db-hd-menu-close {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.db-hd-menu-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.db-hd-menu-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 380px;
    overflow-y: auto;
}

.db-hd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.15s ease;
}

.db-hd-item:hover {
    background: rgba(0, 206, 201, 0.08);
    border-color: rgba(0, 206, 201, 0.3);
}

.db-hd-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.db-hd-item-title {
    font-size: 0.68rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-hd-item-sub {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.45);
}

.db-hd-item-btns {
    display: flex;
    gap: 5px;
}

.db-hd-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.db-hd-btn:hover {
    background: #00cec9;
    color: #000;
    border-color: #00cec9;
}

.db-hd-btn.copy:hover {
    background: #e94560;
    color: #fff;
    border-color: #e94560;
}

.db-hd-menu-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}


.hd-studio-type-btn.active {
    background: rgba(0, 206, 201, 0.25) !important;
    border-color: #00cec9 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3) !important;
}

#hdStudioShinyToggle.active {
    background: rgba(241, 196, 15, 0.25) !important;
    border-color: #f1c40f !important;
    color: #f1c40f !important;
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.4) !important;
}


/* ==========================================================================
   POKÉMON EVOLUTION CHAIN COMPONENT
   ========================================================================== */
.db-profile-evo-section {
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(10, 15, 28, 0.96) 100%);
    border: 1px solid rgba(0, 206, 201, 0.28);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.db-profile-evo-section:hover {
    border-color: rgba(0, 206, 201, 0.5);
    box-shadow: 0 12px 36px rgba(0, 206, 201, 0.15), 0 10px 30px rgba(0, 0, 0, 0.4);
}

.db-evo-collapse-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    margin: 0 !important;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(90deg, rgba(0, 206, 201, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    transition: all 0.25s ease;
}

.db-evo-collapse-title:hover {
    background: linear-gradient(90deg, rgba(0, 206, 201, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.db-evo-collapse-title.is-expanded {
    border-bottom: 1px solid rgba(0, 206, 201, 0.22);
}

.db-evo-collapse-title.is-expanded .db-evo-arrow {
    transform: rotate(180deg);
}

.db-evo-count-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 20px;
    color: #00cec9;
    text-shadow: 0 0 8px rgba(0, 206, 201, 0.3);
}

.db-evo-toggle-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    transition: color 0.2s ease;
}

.db-evo-collapse-title:hover .db-evo-toggle-hint {
    color: #00cec9;
}

.db-evo-arrow {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: #00cec9;
    font-size: 0.85rem;
}

.db-profile-evo-body {
    padding: 26px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    background: radial-gradient(ellipse at center, rgba(30, 41, 59, 0.35) 0%, rgba(8, 12, 22, 0.7) 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 206, 201, 0.4) transparent;
}

.db-profile-evo-body::-webkit-scrollbar {
    height: 6px;
}

.db-profile-evo-body::-webkit-scrollbar-thumb {
    background: rgba(0, 206, 201, 0.4);
    border-radius: 4px;
}

/* Linear & Branching Layouts */
.db-evo-linear-wrap,
.db-evo-branching-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: 100%;
}

.db-evo-branching-wrap {
    align-items: center;
}

.db-evo-branch-base {
    display: flex;
    align-items: center;
    position: relative;
}

.db-evo-branch-base::after {
    content: '';
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 6px rgba(0, 206, 201, 0.4);
    flex-shrink: 0;
}

.db-evo-branch-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    padding-left: 28px;
    border-left: none;
}

.db-evo-branch-row {
    display: flex;
    align-items: center;
    position: relative;
}

.db-evo-branch-row::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-branch-row::after {
    content: '';
    position: absolute;
    left: -28px;
    top: -7px;
    bottom: -7px;
    width: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-branch-row:first-child::after {
    top: 50%;
}

.db-evo-branch-row:last-child::after {
    bottom: 50%;
}

.db-evo-branch-row:only-child::after {
    display: none;
}

.db-evo-sub-branch {
    display: flex;
    align-items: center;
    position: relative;
}

.db-evo-sub-branch::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-sub-branch::after {
    content: '';
    position: absolute;
    left: -28px;
    top: -7px;
    bottom: -7px;
    width: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

.db-evo-sub-branch:first-child::after {
    top: 50%;
}

.db-evo-sub-branch:last-child::after {
    bottom: 50%;
}

.db-evo-sub-branch:only-child::after {
    display: none;
}

.db-evo-branches-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    padding-left: 28px;
    border-left: none;
}

.db-evo-card + .db-evo-branches-col::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    width: 28px;
    height: 2px;
    background: rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 4px rgba(0, 206, 201, 0.3);
}

/* Card */
.db-evo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 126px;
    padding: 12px 8px 14px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
    user-select: none;
}

.db-evo-card:hover {
    transform: translateY(-4px);
    background: linear-gradient(180deg, rgba(40, 53, 76, 0.95) 0%, rgba(18, 28, 51, 0.98) 100%);
    border-color: rgba(0, 206, 201, 0.65);
    box-shadow: 0 10px 24px rgba(0, 206, 201, 0.25);
}

.db-evo-card:hover .db-evo-sprite {
    transform: scale(1.1);
}

.db-evo-card.is-current {
    background: linear-gradient(180deg, rgba(0, 206, 201, 0.18) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid #00cec9;
    box-shadow: 0 0 20px rgba(0, 206, 201, 0.4), inset 0 0 12px rgba(0, 206, 201, 0.12);
}

.db-evo-current-badge {
    position: absolute;
    top: -10px;
    background: linear-gradient(135deg, #00cec9, #0984e3);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 206, 201, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 5;
}

.db-evo-sprite-box {
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
}

.db-evo-sprite {
    max-width: 74px;
    max-height: 74px;
    object-fit: contain;
    image-rendering: auto !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.db-evo-name {
    font-size: 0.74rem;
    font-weight: 700;
    color: #f8fafc;
    text-align: center;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.15;
    height: 1.8rem;
    width: 100%;
    max-width: 120px;
    padding: 0 2px;
    box-sizing: border-box;
    margin-top: 3px;
    letter-spacing: 0.2px;
}

.db-evo-dex {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 1px;
    letter-spacing: 0.5px;
}

.db-evo-types {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.db-evo-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 6px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.2px;
}

.db-evo-type-chip img {
    width: 12px;
    height: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Step Arrow & Method Badge */
/* Step Arrow Container */
.db-evo-step-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 8px;
    min-width: 85px;
    max-width: 175px;
    width: auto;
    text-align: center;
    flex-shrink: 0;
    margin: 0 2px;
}

/* Method Badge (wrapping, multi-line, glow) */
.db-evo-method-badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.62rem;
    font-weight: 600;
    color: #fcd34d;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(252, 211, 77, 0.45);
    border-radius: 12px;
    padding: 4px 9px;
    line-height: 1.25;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 8px rgba(252, 211, 77, 0.15);
    margin-bottom: 7px;
    max-width: 155px;
    width: max-content;
    white-space: normal;
    text-align: center;
    word-break: normal;
    overflow-wrap: break-word;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.db-evo-method-badge:hover {
    border-color: rgba(252, 211, 77, 0.85);
    box-shadow: 0 4px 14px rgba(252, 211, 77, 0.35);
    transform: translateY(-1px);
    color: #fff;
}

.db-evo-method-badge i {
    flex-shrink: 0;
    font-size: 0.68rem;
    color: #fcd34d;
}

/* Elegant Directional Flow Track */
.db-evo-flow-track {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 55px;
    height: 18px;
}

.db-evo-flow-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 206, 201, 0.25) 0%, rgba(0, 206, 201, 0.85) 75%, #00cec9 100%);
    box-shadow: 0 0 6px rgba(0, 206, 201, 0.45);
    border-radius: 2px;
    position: relative;
}

.db-evo-flow-line::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 206, 201, 0.7);
    box-shadow: 0 0 6px rgba(0, 206, 201, 0.8);
}

.db-evo-flow-arrowhead {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -1px;
    color: #00cec9;
    font-size: 0.92rem;
    filter: drop-shadow(0 0 6px rgba(0, 206, 201, 0.85));
    transition: transform 0.2s ease;
    animation: evoArrowPulse 2.2s infinite ease-in-out;
}

.db-evo-arrow-icon {
    font-size: 0.9rem;
    color: #00cec9;
    filter: drop-shadow(0 0 4px rgba(0, 206, 201, 0.8));
}

@keyframes evoArrowPulse {
    0%, 100% {
        transform: translateX(0);
        filter: drop-shadow(0 0 5px rgba(0, 206, 201, 0.7));
    }
    50% {
        transform: translateX(4px);
        filter: drop-shadow(0 0 10px rgba(0, 206, 201, 1));
    }
}


/* ==========================================================================
   POKEMON SEARCH SPELL SUGGESTION & DROPDOWN STYLES
   ========================================================================== */
.hd-studio-search-wrap {
    position: relative;
    width: 100%;
}

.bd-panel-box:has(#hdStudioPokeSearchInp) {
    position: relative;
    z-index: 900 !important;
}

.hd-studio-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 999999 !important;
    background: #0b1329 !important;
    border: 1.5px solid #00cec9;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 206, 201, 0.3);
    max-height: 280px;
    overflow-y: auto;
    font-family: 'Minecraft', monospace;
    backdrop-filter: none !important;
}

.hd-drop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
}

.hd-drop-item:last-child {
    border-bottom: none;
}

.hd-drop-item:hover {
    background: rgba(0, 206, 201, 0.15);
}

.hd-drop-thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.hd-drop-text {
    flex: 1;
    overflow: hidden;
}

.hd-drop-name {
    font-size: 0.7rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-drop-sub {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.5);
}

.hd-drop-fuzzy-badge {
    color: #f1c40f;
    font-size: 0.6rem;
}

.db-search-suggest-box {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.3);
    border-radius: 8px;
    padding: 10px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffffff;
    margin-bottom: 16px;
}

.db-search-suggest-btn {
    background: rgba(241, 196, 15, 0.2);
    border: 1px solid #f1c40f;
    color: #f1c40f;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    transition: all 0.2s ease;
}

.db-search-suggest-btn:hover {
    background: #f1c40f;
    color: #000;
}


/* ==========================================================================
   VIDEO OVERLAY ELEMENTS GENERATOR STYLES
   ========================================================================== */
#adminSectionVideoElements {
    animation: fadeIn 0.3s ease;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.ve-recent-color-chip {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    cursor: pointer;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    display: inline-block;
    flex-shrink: 0;
}

.ve-recent-color-chip:hover {
    transform: scale(1.18);
    border-color: #00cec9;
    box-shadow: 0 4px 10px rgba(0, 206, 201, 0.4);
    z-index: 2;
}

.ve-recent-color-chip.active-c1 {
    border-color: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
}

.ve-recent-color-chip.active-c2 {
    border-color: #ffa502 !important;
    box-shadow: 0 0 8px rgba(255, 165, 2, 0.8) !important;
}

.ve-shape-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.ve-shape-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.18s ease;
    font-family: 'Minecraft', monospace;
}

.ve-shape-card:hover {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.12);
    transform: translateY(-2px);
}

.ve-shape-card.active {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.22);
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.4);
    color: #00cec9;
}

.ve-shape-name {
    font-size: 0.68rem;
    font-weight: bold;
    margin-top: 4px;
}

.ve-shape-desc {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
    line-height: 1.2;
}

.ve-color-preset-pill {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.ve-color-preset-pill:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.ve-preset-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ve-rot-quick-btn {
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ve-rot-quick-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #fff;
}

.ve-canvas-checker {
    background-color: #111827;
    background-image:
        linear-gradient(45deg, #1f293d 25%, transparent 25%),
        linear-gradient(-45deg, #1f293d 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1f293d 75%),
        linear-gradient(-45deg, transparent 75%, #1f293d 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
    border: 1.5px solid rgba(0, 206, 201, 0.3);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
}

#vePreviewCanvas {
    max-width: 100%;
    max-height: 520px;
    width: auto;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.6));
}

/* Download pills and matrix download buttons */
.db-chart-dl-pill {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.22), rgba(0, 206, 201, 0.22)) !important;
    border: 1px solid rgba(0, 206, 201, 0.45) !important;
    color: #00cec9 !important;
    font-weight: bold !important;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-chart-dl-pill:hover {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.38), rgba(0, 206, 201, 0.38)) !important;
    border-color: #00cec9 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.35) !important;
}

.db-matrix-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid rgba(0, 206, 201, 0.5);
    background: rgba(0, 206, 201, 0.12);
    color: #00cec9;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-matrix-dl-btn:hover {
    background: rgba(0, 206, 201, 0.28);
    border-color: #00cec9;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(0, 206, 201, 0.4);
    transform: translateY(-1px);
}



.db-table-name-cell {
    cursor: pointer;
    user-select: text;
    transition: color 0.15s ease;
}

.db-table-name-cell:hover .db-table-name-txt {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #00cec9;
}

.db-table-name-cell .db-title-copy-icon {
    font-size: 0.75em;
    opacity: 0.45;
    margin-left: 6px;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.db-table-name-cell:hover .db-title-copy-icon {
    opacity: 1;
    color: #00cec9;
    transform: scale(1.15);
}

.db-table-name-cell.copied {
    color: #2ed573 !important;
}

.db-table-name-cell.copied .db-table-name-txt {
    color: #2ed573 !important;
}


/* ==========================================================================
   TOP BAR DONATE & FRIENDS CHAT ENHANCEMENTS
   ========================================================================== */


/* Top Bar Actions Group */
.user-bar-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.top-bar-donate-btn {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(255, 107, 129, 0.25));
    border: 1px solid rgba(255, 107, 129, 0.5);
    border-radius: 20px;
    color: #ff6b81;
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(255, 107, 129, 0.15);
}

.top-bar-donate-btn:hover {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.45), rgba(255, 107, 129, 0.45));
    border-color: #ff6b81;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 107, 129, 0.35);
}

.hosting-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 26, 0.85);
    backdrop-filter: blur(8px);
    z-index: 999999 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.hosting-modal-card {
    max-width: 480px;
    width: 100%;
    margin: 0;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(245, 200, 66, 0.2);
}

.hosting-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.hosting-modal-close:hover {
    color: #f5c842;
    transform: scale(1.1);
}

.friends-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 360px;
    max-height: 520px;
    overflow-y: auto;
    background: #16213e;
    border: 2px solid #e94560;
    border-radius: 14px;
    padding: 12px;
    z-index: 9999;
    box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 15px rgba(233,69,96,0.2);
    box-sizing: border-box;
}

.friends-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(233,69,96,0.25);
}

.friends-tabs-bar {
    display: flex;
    gap: 6px;
}

.friends-tab-btn {
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(233, 69, 96, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.friends-tab-btn:hover {
    color: #fff;
    border-color: rgba(233, 69, 96, 0.5);
}

.friends-tab-btn.active {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #fff;
}

.friends-dropdown-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.friends-dropdown-close:hover {
    color: #e94560;
}

.friends-item-actions button.chat-btn:hover {
    border-color: #4ecdc4;
    color: #4ecdc4;
}

#friendsChatsPanel {
    flex: 1;
    min-height: 0;
}


/* ========================================================================== */
/* NEW CLEAN NEWS & HUB SUBTABS (ОБНОВЛЕНИЯ, ПОМОЩЬ ПРОЕКТУ, СБОРКИ) */
/* ========================================================================== */
.news-subtabs-wrapper {
    margin-bottom: 22px;
}

.news-subtabs-nav {
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.news-subtabs-nav::-webkit-scrollbar {
    display: none;
}

.news-subtab-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
}

.news-subtab-btn:hover {
    background: rgba(30, 41, 59, 0.85);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.news-subtab-btn.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(198, 42, 71, 0.55));
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 0 24px rgba(233, 69, 96, 0.4), 0 4px 16px rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

.news-subtab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 15%;
    width: 70%;
    height: 3px;
    background: #e94560;
    border-radius: 3px;
    box-shadow: 0 0 10px #e94560;
}

.news-subtab-badge {
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid rgba(0, 206, 201, 0.5);
    color: #00cec9;
    font-size: 0.6rem;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 2px;
}

.news-support-pill-btn {
    background: linear-gradient(135deg, rgba(255, 107, 129, 0.15), rgba(233, 69, 96, 0.25));
    border: 1px solid rgba(255, 107, 129, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(255, 71, 87, 0.2);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-align: left;
}

.news-support-pill-btn:hover {
    background: linear-gradient(135deg, rgba(255, 107, 129, 0.25), rgba(233, 69, 96, 0.4));
    border-color: #ff6b81;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 71, 87, 0.35);
}

/* HELP SECTION HERO CARDS */
.news-help-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.news-help-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

.news-help-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.news-help-card.help-card-bug { border-color: rgba(233, 69, 96, 0.35); }
.news-help-card.help-card-bug:hover { border-color: #e94560; box-shadow: 0 8px 25px rgba(233, 69, 96, 0.25); }

.news-help-card.help-card-idea { border-color: rgba(245, 158, 11, 0.35); }
.news-help-card.help-card-idea:hover { border-color: #f59e0b; box-shadow: 0 8px 25px rgba(245, 158, 11, 0.25); }

.news-help-card.help-card-trans { border-color: rgba(0, 206, 201, 0.35); }
.news-help-card.help-card-trans:hover { border-color: #00cec9; box-shadow: 0 8px 25px rgba(0, 206, 201, 0.25); }

.news-help-card.help-card-donate { border-color: rgba(255, 107, 129, 0.35); }
.news-help-card.help-card-donate:hover { border-color: #ff6b81; box-shadow: 0 8px 25px rgba(255, 107, 129, 0.25); }

.news-help-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.help-card-bug .news-help-icon { background: rgba(233, 69, 96, 0.15); color: #e94560; }
.help-card-idea .news-help-icon { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.help-card-trans .news-help-icon { background: rgba(0, 206, 201, 0.15); color: #00cec9; }
.help-card-donate .news-help-icon { background: rgba(255, 107, 129, 0.15); color: #ff6b81; }

.news-help-title {
    font-size: 0.95rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.35;
}

.news-help-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin: 0 0 16px 0;
    font-family: 'Minecraft', monospace;
}

.news-help-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    width: 100%;
    transition: all 0.2s;
}

.btn-bug { background: linear-gradient(135deg, #e94560, #c0392b); box-shadow: 0 4px 14px rgba(233, 69, 96, 0.35); }
.btn-idea { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35); }
.btn-trans { background: linear-gradient(135deg, #00cec9, #0984e3); box-shadow: 0 4px 14px rgba(0, 206, 201, 0.35); }
.btn-donate { background: linear-gradient(135deg, #ff4757, #e84118); box-shadow: 0 4px 14px rgba(255, 71, 87, 0.35); }

.news-help-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

/* ROADMAP STYLES */
.news-roadmap-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.news-roadmap-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.news-roadmap-badge {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    padding: 3px 10px;
    border-radius: 12px;
}

.news-roadmap-title {
    font-size: 1.05rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0;
}

.news-roadmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.news-roadmap-item {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.news-roadmap-item .roadmap-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.news-roadmap-item.done .roadmap-dot { background: #10b981; box-shadow: 0 0 10px #10b981; }
.news-roadmap-item.in-progress .roadmap-dot { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; animation: pulse 1.5s infinite; }
.news-roadmap-item.planned .roadmap-dot { background: #00cec9; box-shadow: 0 0 10px #00cec9; }

.roadmap-status {
    font-size: 0.6rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}

.news-roadmap-item.done .roadmap-status { color: #10b981; }
.news-roadmap-item.in-progress .roadmap-status { color: #f59e0b; }
.news-roadmap-item.planned .roadmap-status { color: #00cec9; }

.roadmap-info h4 {
    margin: 0 0 4px 0;
    font-size: 0.82rem;
    color: #fff;
    font-family: 'Minecraft', monospace;
    line-height: 1.35;
}

.roadmap-info p {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
    font-family: 'Minecraft', monospace;
}

.news-section-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.news-section-heading {
    font-size: 1rem;
    font-family: 'Minecraft', monospace;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.news-empty-section-hint {
    background: rgba(15, 23, 42, 0.6);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}



/* Dedicated Modal Button Variants */
.comm-btn-submit-bug {
    background: linear-gradient(135deg, #e94560, #c0392b) !important;
    border-color: #e94560 !important;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4) !important;
}
.comm-btn-submit-bug:hover {
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.6) !important;
    filter: brightness(1.1) !important;
}
.comm-btn-submit-idea {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border-color: #f59e0b !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
}
.comm-btn-submit-idea:hover {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6) !important;
    filter: brightness(1.1) !important;
}
.comm-btn-submit-trans {
    background: linear-gradient(135deg, #00cec9, #0984e3) !important;
    border-color: #00cec9 !important;
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.4) !important;
}
.comm-btn-submit-trans:hover {
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.6) !important;
    filter: brightness(1.1) !important;
}



/* ==========================================================================
   GLOBAL FONT UNIFICATION - ALL UI ELEMENTS USE MINECRAFT FONT
   ========================================================================== */
button,
input,
select,
textarea,
optgroup,
option,
dialog {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace !important;
}

input::placeholder,
textarea::placeholder {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace !important;
}

/* Ensure Font Awesome icon glyphs are NEVER overridden by the font unification */
i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands,
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}


/* ==========================================================================
   MINI-GAMES SUITE STYLES (Poke DIV Game)
   ========================================================================== */

.mg-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 16px;
    font-family: 'Minecraft', monospace;
}

.mg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mg-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.4);
}

.mg-stats-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mg-stat-item {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mg-stat-label {
    color: rgba(255, 255, 255, 0.55);
}

.mg-stat-val {
    color: #fff;
    font-weight: bold;
}

.mg-stat-val.highlight {
    color: #ff6b81;
}

.mg-filters-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mg-filter-lbl {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 4px;
}

.mg-filter-btn {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s;
}

.mg-filter-btn:hover {
    border-color: #00cec9;
    color: #fff;
}

.mg-filter-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
}

/* TIMER */
.mg-timer-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.mg-timer-fill {
    height: 100%;
    background: #00cec9;
    transition: width 1s linear, background-color 0.3s;
}

/* ARENA / STAGE */
.mg-sil-arena, .mg-match-arena, .mg-evo-arena, .mg-cry-player-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.mg-sil-stage {
    position: relative;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 12px;
    background: radial-gradient(circle at center, rgba(0, 206, 201, 0.15) 0%, rgba(15, 23, 42, 0.4) 70%);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.mg-sil-spotlight {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 69, 96, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.mg-sil-img {
    max-height: 260px;
    max-width: 220px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: filter 0.4s ease, transform 0.4s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}

.mg-sil-img.silhouette {
    filter: brightness(0) drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));
    pointer-events: none;
}

.mg-sil-img.revealed {
    filter: drop-shadow(0 0 20px rgba(0, 206, 201, 0.6));
    animation: silFlash 0.5s ease-out;
    pointer-events: none;
}

@keyframes silFlash {
    0% { filter: brightness(4) drop-shadow(0 0 40px #fff); transform: scale(1.08); }
    100% { filter: drop-shadow(0 0 20px rgba(0, 206, 201, 0.6)); transform: scale(1); }
}

.mg-cry-replay-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 206, 201, 0.25);
    border: 1px solid #00cec9;
    color: #00cec9;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.2s;
}

.mg-cry-replay-btn:hover {
    background: #00cec9;
    color: #000;
    transform: scale(1.1);
}

/* 4 OPTIONS GRID */
.mg-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .mg-options-grid { grid-template-columns: 1fr; }
}

.mg-opt-btn {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
}

.mg-opt-btn:hover:not(:disabled) {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.15);
    transform: translateY(-2px);
}

.mg-opt-key {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.mg-opt-btn.correct {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}

.mg-opt-btn.wrong {
    background: rgba(233, 69, 96, 0.25) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
    opacity: 0.7;
}

/* RESULT BANNER */
.mg-sil-result-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-sil-result-banner.correct {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-sil-result-banner.wrong {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-result-icon {
    font-size: 2rem;
}

.mg-sil-result-banner.correct .mg-result-icon { color: #10b981; }
.mg-sil-result-banner.wrong .mg-result-icon { color: #e94560; }

.mg-result-status {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.mg-sil-result-banner.correct .mg-result-status { color: #10b981; }
.mg-sil-result-banner.wrong .mg-result-status { color: #e94560; }

.mg-result-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 6px;
}

.mg-result-types {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mg-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.65rem;
    border: 1px solid;
}

.mg-type-pill img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.mg-gen-badge {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
}

/* ACTIONS BAR */
.mg-actions-bar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.mg-btn-next {
    background: linear-gradient(135deg, #e94560 0%, #c0392b 100%);
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
}

.mg-btn-next:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

/* GAME 2: CRY QUIZ */
.mg-cry-player-box {
    text-align: center;
    padding: 30px;
    margin-bottom: 24px;
}

.mg-cry-big-btn {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 100%);
    border: none;
    border-radius: 50px;
    padding: 16px 36px;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.4);
    transition: all 0.25s;
    margin-bottom: 14px;
}

.mg-cry-big-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 206, 201, 0.6);
}

.mg-cry-hint {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.mg-audio-equalizer {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
}

.mg-audio-equalizer span {
    width: 3px;
    background: #fff;
    border-radius: 3px;
    height: 6px;
}

.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(1) { animation: eq 0.6s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(2) { animation: eq 0.4s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(3) { animation: eq 0.7s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(4) { animation: eq 0.5s infinite ease-in-out; }
.mg-cry-big-btn.playing .mg-audio-equalizer span:nth-child(5) { animation: eq 0.8s infinite ease-in-out; }

@keyframes eq {
    0%, 100% { height: 4px; }
    50% { height: 18px; }
}

.mg-cry-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

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

.mg-cry-card {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
}

.mg-cry-card:hover {
    border-color: #00cec9;
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 206, 201, 0.2);
}

.mg-cry-card-img-wrap {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.mg-cry-card-img {
    max-height: 100px;
    max-width: 100px;
    object-fit: contain;
}

.mg-cry-card-name {
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    min-height: 1.4em;
}

.mg-cry-card.correct {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.2) !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4) !important;
}

.mg-cry-card.wrong {
    border-color: #e94560 !important;
    background: rgba(233, 69, 96, 0.2) !important;
    opacity: 0.6;
}

/* GAME 3: POKÉDLE */
.mg-pokedle-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
}

.mg-pokedle-guide {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
}

.mg-pokedle-input-wrap {
    position: relative;
    max-width: 480px;
    margin: 0 auto 16px auto;
}

.mg-pokedle-input {
    width: 100%;
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 0.95rem;
    color: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.mg-pokedle-input:focus {
    border-color: #10b981;
}

.mg-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
}

.mg-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s;
}

.mg-ac-item:hover {
    background: rgba(16, 185, 129, 0.15);
}

.mg-ac-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.mg-ac-name {
    flex: 1;
    color: #fff;
    font-size: 0.85rem;
}

.mg-ac-num {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.mg-pokedle-status {
    text-align: center;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 18px;
}

.mg-pokedle-status span {
    color: #10b981;
    font-weight: bold;
}

.mg-pokedle-table-header {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: 8px;
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 8px;
    padding: 0 4px;
}

.mg-pokedle-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.mg-pokedle-row {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: 8px;
    animation: slideIn 0.3s ease;
}

.mg-pokedle-cell {
    border-radius: 8px;
    padding: 10px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: bold;
    text-align: center;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

.mg-pokedle-cell.poke-cell {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    justify-content: flex-start;
    padding-left: 10px;
    gap: 8px;
}

.mg-cell-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.mg-cell-name {
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mg-pokedle-cell.correct {
    background: #10b981;
    color: #fff;
}

.mg-pokedle-cell.partial {
    background: #f59e0b;
    color: #fff;
}

.mg-pokedle-cell.wrong {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

.mg-pokedle-result-modal {
    text-align: center;
    padding: 24px;
    border-radius: 14px;
    animation: fadeIn 0.4s ease;
}

.mg-pokedle-result-modal.won {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-pokedle-result-modal.lost {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-res-badge {
    font-size: 1.15rem;
    font-weight: bold;
    margin-bottom: 14px;
    letter-spacing: 1px;
}

.mg-pokedle-result-modal.won .mg-res-badge { color: #10b981; }
.mg-pokedle-result-modal.lost .mg-res-badge { color: #e94560; }

.mg-res-target-wrap {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: rgba(15, 23, 42, 0.8);
    padding: 12px 24px;
    border-radius: 12px;
    margin-bottom: 18px;
}

.mg-res-target-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.mg-res-target-name {
    font-size: 1.1rem;
    color: #fff;
    font-weight: bold;
}

.mg-res-target-dex {
    font-size: 0.75rem;
    color: #00cec9;
}

.mg-res-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.mg-btn-share {
    background: #10b981;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.mg-btn-share:hover {
    filter: brightness(1.1);
}

/* GAME 4: TYPE MATCHUP CLASH */
.mg-match-clash-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.mg-match-card {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    flex: 1;
    min-width: 220px;
}

.mg-match-lbl {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.mg-type-big-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 30px;
    border: 2px solid;
    font-size: 1.1rem;
    font-weight: bold;
}

.mg-type-big-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.mg-clash-vs {
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffbe26;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: pulse 1.5s infinite;
}

.mg-match-poke-img {
    height: 110px;
    object-fit: contain;
    margin-bottom: 8px;
}

.mg-match-poke-name {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 6px;
}

.mg-match-question {
    text-align: center;
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 18px;
}

.mg-mult-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

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

.mg-mult-btn {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 14px 8px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.mg-mult-sub {
    font-size: 0.55rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.5);
}

.mg-mult-btn:hover:not(:disabled) {
    border-color: #00cec9;
    transform: translateY(-2px);
}

.mg-mult-btn.correct {
    background: rgba(16, 185, 129, 0.3) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
}

.mg-mult-btn.wrong {
    background: rgba(233, 69, 96, 0.3) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
    opacity: 0.7;
}

.mg-match-expl {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-match-expl.correct {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-match-expl.wrong {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-expl-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.mg-match-expl.correct .mg-expl-head { color: #10b981; }
.mg-match-expl.wrong .mg-expl-head { color: #e94560; }

.mg-expl-ans {
    margin-left: auto;
    font-size: 0.9rem;
    color: #fff;
}

.mg-expl-calc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

/* GAME 5: EVOLUTION METHOD QUIZ */
.mg-evo-flow-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.mg-evo-card {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 18px 24px;
    text-align: center;
    min-width: 140px;
}

.mg-evo-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 8px;
}

.mg-evo-pname {
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
}

.mg-evo-arrow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.mg-evo-arrow-icon {
    font-size: 1.6rem;
    color: #a855f7;
    animation: bounceRight 1.5s infinite;
}

@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

.mg-evo-badge {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid #a855f7;
    color: #a855f7;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
}

.mg-evo-question {
    text-align: center;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 22px;
}

.mg-evo-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .mg-evo-options-grid { grid-template-columns: 1fr; }
}

.mg-evo-opt-btn {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
    text-align: left;
}

.mg-evo-opt-btn:hover:not(:disabled) {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.15);
    transform: translateY(-2px);
}

.mg-evo-opt-btn.correct {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}

.mg-evo-opt-btn.wrong {
    background: rgba(233, 69, 96, 0.25) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
    opacity: 0.7;
}

.mg-evo-expl {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-evo-expl.correct {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.mg-evo-expl.wrong {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid #e94560;
}

.mg-evo-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #fff;
    margin-top: 6px;
}


/* ==========================================================================
   MINI-GAMES SUITE ENHANCEMENTS (Sound Controller, Silhouette Search, Font Awesome)
   ========================================================================== */

.mg-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Sound Controller Widget */
.mg-sound-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 5px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.mg-sound-toggle-btn {
    background: transparent;
    border: none;
    color: #00cec9;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, color 0.2s;
}

.mg-sound-toggle-btn:hover {
    transform: scale(1.15);
    color: #55efc4;
}

.mg-sound-toggle-btn.muted {
    color: #ff7675;
}

.mg-sound-slider-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mg-sound-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 68px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
}

.mg-sound-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00cec9;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.6);
    cursor: pointer;
    transition: transform 0.1s;
}

.mg-sound-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.mg-sound-val-lbl {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    min-width: 32px;
    text-align: right;
    font-family: 'Minecraft', monospace;
}

/* Fire and icons */
.mg-stat-fire {
    color: #ff6b81;
    margin-left: 2px;
    animation: flamePulse 1.8s infinite;
}

@keyframes flamePulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #ff6b81); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 6px #ff4757); }
}

/* Silhouette Search & Two-Phase UI */
.mg-sil-phase-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.82rem;
    padding: 8px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    flex-wrap: wrap;
    transition: all 0.3s ease;
}

.mg-sil-phase-hint.phase-1 {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.08);
}

.mg-sil-phase-hint.phase-2 {
    border-color: rgba(0, 206, 201, 0.4);
    background: rgba(0, 206, 201, 0.08);
}

.mg-sil-phase-hint b {
    color: #f59e0b;
    font-size: 0.95rem;
}

.mg-sil-bonus-tag {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #f59e0b;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mg-res-bonus-callout {
    margin-top: 8px;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #f59e0b;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: bounce 0.6s ease;
}

.mg-sil-search-wrap {
    position: relative;
    max-width: 520px;
    margin: 0 auto 20px auto;
    width: 100%;
}

.mg-sil-search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, 0.85);
    border: 2px solid rgba(0, 206, 201, 0.4);
    border-radius: 12px;
    padding: 0 16px;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.mg-sil-search-box:focus-within {
    border-color: #00cec9;
    box-shadow: 0 0 18px rgba(0, 206, 201, 0.35);
}

.mg-sil-search-box.shake {
    animation: shakeBox 0.4s ease;
    border-color: #e94560 !important;
    box-shadow: 0 0 18px rgba(233, 69, 96, 0.4) !important;
}

@keyframes shakeBox {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.mg-sil-search-icon {
    color: #00cec9;
    font-size: 1.05rem;
}

.mg-sil-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    padding: 13px 0;
}

.mg-sil-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Minecraft', monospace;
}

/* Animations */
.fadeInUp {
    animation: fadeInUp 0.35s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Poke-wordle arrows */
.mg-poke-arrow {
    font-size: 0.75rem;
    margin-left: 3px;
}

.mg-poke-arrow.up {
    color: #00cec9;
}

.mg-poke-arrow.down {
    color: #ff7675;
}

/* Matchup Clash calculation elements */
.mg-calc-part {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 4px 8px;
}

.mg-calc-times {
    opacity: 0.6;
    font-size: 0.7rem;
    margin: 0 4px;
}

.mg-calc-equals {
    opacity: 0.8;
    font-weight: bold;
    font-size: 1rem;
    margin: 0 6px;
}

.mg-calc-total {
    color: #00cec9;
    font-weight: bold;
    font-size: 1.1rem;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid #00cec9;
    border-radius: 6px;
    padding: 3px 8px;
}


/* ==========================================================================
   SILHOUETTE SEARCH MAXIMUM OVERLAY (z-index & floating layer)
   ========================================================================== */

.mg-sil-search-wrap {
    position: relative !important;
    max-width: 520px !important;
    margin: 0 auto 20px auto !important;
    width: 100% !important;
    z-index: 999999 !important;
}

.mg-sil-search-box {
    position: relative !important;
    z-index: 1000000 !important;
    background: rgba(15, 23, 42, 0.98) !important;
    border: 2px solid rgba(0, 206, 201, 0.6) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.75), 0 0 15px rgba(0, 206, 201, 0.2) !important;
}

.mg-sil-search-box:focus-within {
    border-color: #00cec9 !important;
    box-shadow: 0 0 25px rgba(0, 206, 201, 0.6), 0 10px 35px rgba(0, 0, 0, 0.9) !important;
}

.mg-sil-search-wrap .mg-autocomplete-dropdown,
#silDropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #0b132b !important;
    border: 2px solid #00cec9 !important;
    border-radius: 12px !important;
    max-height: 290px !important;
    overflow-y: auto !important;
    z-index: 9999999 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.98), 0 0 35px rgba(0, 206, 201, 0.45) !important;
}

.mg-options-grid {
    position: relative !important;
    z-index: 1 !important;
}

.mg-sil-result-banner {
    position: relative !important;
    z-index: 5 !important;
}

.mg-sil-stage {
    position: relative !important;
    z-index: 2 !important;
}

.mg-pokedle-input-wrap {
    position: relative !important;
    z-index: 999999 !important;
}

#pokedleDropdown {
    position: absolute !important;
    z-index: 9999999 !important;
    background: #0b132b !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.98), 0 0 35px rgba(16, 185, 129, 0.45) !important;
}


/* ==========================================================================
   GAME 6: SHINY HUNT STYLES
   ========================================================================== */
.mg-shiny-settings-card {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px 22px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.mg-shiny-setting-col {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mg-shiny-setting-col.actions-col {
    flex: 0 1 auto;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
}

.mg-shiny-setting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Minecraft', monospace;
}

.mg-shiny-setting-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mg-shiny-setting-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    color: #00cec9;
}

.mg-shiny-setting-val.highlight {
    color: #f59e0b;
}

/* Sliders */
.mg-shiny-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
}

.mg-shiny-range:hover {
    background: rgba(255, 255, 255, 0.25);
}

.mg-shiny-range.total::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.8);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mg-shiny-range.total::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px rgba(0, 206, 201, 1);
}

.mg-shiny-range.shiny::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mg-shiny-range.shiny::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px rgba(245, 158, 11, 1);
}

/* Preset Buttons */
.mg-shiny-presets {
    display: flex;
    gap: 6px;
}

.mg-shiny-preset-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.mg-shiny-preset-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.mg-shiny-preset-btn.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.mg-shiny-setting-col:nth-child(2) .mg-shiny-preset-btn.active {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

/* Mode toggle */
.mg-shiny-mode-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 4px;
}

.mg-shiny-mode-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}

.mg-shiny-mode-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.mg-shiny-mode-btn.active {
    background: #00cec9;
    color: #0b132b;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.5);
}

/* Start Button */
.mg-btn-start-hunt {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 9px 18px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.mg-btn-start-hunt:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
    background: linear-gradient(135deg, #34d399, #10b981);
}

.mg-btn-start-hunt:active {
    transform: translateY(1px);
}

/* Arena & HUD */
.mg-shiny-arena {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mg-shiny-hud {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: 'Minecraft', monospace;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.mg-hud-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.mg-hud-val {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    font-weight: bold;
    color: #00cec9;
}

.mg-hud-item.shiny-counter .mg-hud-val {
    color: #f59e0b;
}

.mg-hud-item.mistakes .mg-hud-val {
    color: #ff7675;
}

.mg-btn-reshuffle {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mg-btn-reshuffle:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
    transform: rotate(90deg);
}

/* Grid */
.mg-shiny-grid {
    --shiny-card-size: 90px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--shiny-card-size, 90px), 100%), 1fr));
    gap: 12px;
    padding: 18px;
    background: rgba(11, 19, 43, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    min-height: 250px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {
    .mg-shiny-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(var(--shiny-card-size, 72px), 100%), 1fr));
        gap: 8px;
        padding: 12px;
    }
}

/* Card */
.mg-shiny-card {
    position: relative;
    aspect-ratio: 1 / 1;
    background: rgba(26, 38, 57, 0.65);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    padding: 8px;
    overflow: hidden;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.mg-shiny-card:hover {
    transform: translateY(-4px) scale(1.05);
    background: rgba(36, 52, 78, 0.85);
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 14px rgba(245, 158, 11, 0.2);
}

.mg-shiny-card:active {
    transform: scale(0.95);
}

.mg-shiny-card-img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
    transition: transform 0.2s;
    pointer-events: none;
}

.mg-shiny-card:hover .mg-shiny-card-img {
    transform: scale(1.08);
}

/* Found Shiny Card State */
.mg-shiny-card.found-shiny {
    border-color: #f59e0b !important;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, rgba(20, 25, 42, 0.95) 100%) !important;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.65), inset 0 0 16px rgba(245, 158, 11, 0.35) !important;
    cursor: default !important;
    pointer-events: none !important;
    animation: shinyFoundGlow 2s infinite alternate ease-in-out;
}

@keyframes shinyFoundGlow {
    from { box-shadow: 0 0 20px rgba(245, 158, 11, 0.6), inset 0 0 12px rgba(245, 158, 11, 0.3); }
    to { box-shadow: 0 0 32px rgba(255, 215, 0, 0.85), inset 0 0 20px rgba(255, 215, 0, 0.5); }
}

.mg-shiny-sparkle-tag {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    color: #0b132b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.9);
    animation: shinyStarPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes shinyStarPop {
    0% { transform: scale(0) rotate(-60deg); }
    70% { transform: scale(1.3) rotate(20deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Shake Red Animation for mistakes */
.mg-shiny-card.shake-red {
    animation: shakeRed 0.45s cubic-bezier(.36,.07,.19,.97) both;
    border-color: #ff4757 !important;
    box-shadow: 0 0 18px rgba(255, 71, 87, 0.75) !important;
    background: rgba(255, 71, 87, 0.15) !important;
}

@keyframes shakeRed {
    10%, 90% { transform: translate3d(-3px, 0, 0); }
    20%, 80% { transform: translate3d(5px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* Victory Overlay Modal */
.mg-shiny-victory-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.mg-victory-content {
    position: relative;
    background: #0f172a;
    border: 2px solid #f59e0b;
    border-radius: 20px;
    padding: 34px 38px;
    text-align: center;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 0 45px rgba(245, 158, 11, 0.45), 0 20px 40px rgba(0,0,0,0.8);
    animation: modalPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'Minecraft', monospace;
}

.mg-vic-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s;
}

.mg-vic-close:hover {
    background: rgba(255, 71, 87, 0.3);
    color: #ff7675;
}

.mg-victory-badge {
    font-size: 1.45rem;
    color: #ffd700;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.mg-victory-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}

.mg-vic-stat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mg-vic-stat .lbl {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.mg-vic-stat .val {
    font-size: 1.15rem;
    color: #fff;
    font-weight: bold;
}

.mg-record-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eab308;
    color: #0b132b;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
}

.mg-victory-actions {
    display: flex;
    justify-content: center;
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* Account badge and reset button in minigames */
.mg-stats-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mg-account-badge-wrap {
    display: inline-flex;
    align-items: center;
}

.mg-account-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
    user-select: none;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mg-account-badge.logged-in {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.mg-account-badge.guest {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.65);
}

.mg-stat-reset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 4px 6px;
    border-radius: 6px;
    margin-left: 2px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mg-stat-reset-btn:hover {
    background: rgba(255, 118, 117, 0.2);
    border-color: #ff7675;
    color: #ff7675;
    transform: rotate(-45deg);
}


/* ==========================================================================
   SHINY HUNT: MISTAKE LIMIT & FAIL STYLES
   ========================================================================== */
.mg-shiny-range.mistakes-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mg-shiny-range.mistakes-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px rgba(239, 68, 68, 1);
}

.mg-shiny-range.mistakes-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
    cursor: pointer;
    border: none;
}

.mg-shiny-setting-val.highlight-red {
    color: #ef4444;
}

.mg-shiny-mistake-presets .mg-shiny-preset-btn.active {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3) !important;
}

.mg-victory-content.fail {
    border-color: #ef4444 !important;
    box-shadow: 0 0 45px rgba(239, 68, 68, 0.45), 0 20px 40px rgba(0, 0, 0, 0.8) !important;
}

.mg-shiny-card.missed-shiny {
    border-color: #ef4444 !important;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, rgba(20, 25, 42, 0.95) 100%) !important;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.65), inset 0 0 16px rgba(239, 68, 68, 0.35) !important;
    cursor: default !important;
    pointer-events: none !important;
    animation: shinyMissedGlow 2s infinite alternate ease-in-out;
}

@keyframes shinyMissedGlow {
    from { box-shadow: 0 0 20px rgba(239, 68, 68, 0.6), inset 0 0 12px rgba(239, 68, 68, 0.3); }
    to { box-shadow: 0 0 32px rgba(248, 113, 113, 0.85), inset 0 0 20px rgba(248, 113, 113, 0.5); }
}

.mg-shiny-setting-col.actions-col {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mg-shiny-setting-col.actions-col .mg-btn-start-hunt {
    height: 48px !important;
    padding: 0 24px !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
}


/* ==========================================================================
   SILHOUETTE SEARCH MAXIMUM OVERLAY & BOUNDARY ESCAPE
   ========================================================================== */
#tabSilhouette,
.tab-content#tabSilhouette,
.games-mode-wrap,
.games-mode-wrap > .tab-content#tabSilhouette,
.mg-sil-arena,
.mg-container {
    overflow: visible !important;
}

.mg-sil-stage {
    height: 200px !important;
    margin-bottom: 12px !important;
}

.mg-sil-img {
    max-height: 175px !important;
    max-width: 195px !important;
}

.mg-sil-phase-hint {
    margin-bottom: 10px !important;
}

.mg-sil-search-wrap {
    position: relative !important;
    z-index: 9999999 !important;
}

.mg-sil-search-wrap .mg-autocomplete-dropdown,
#silDropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    background: #0b132b !important;
    border: 2px solid #00cec9 !important;
    border-radius: 12px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    z-index: 99999999 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.98), 0 0 40px rgba(0, 206, 201, 0.5) !important;
}

/* Avatar pokemon search sprite / shiny toggles */
.avatar-style-btn:hover {
    filter: brightness(1.25);
}


/* Avatar action buttons & icons alignment */
#avatarCropBtn,
#avatarSaveBtn,
.avatar-action-btn {
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
}

#avatarCropBtn i,
#avatarSaveBtn i,
.avatar-action-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.85em;
    position: relative;
    top: 1px;
}


/* Community Poll Voters & Friends display */
.comm-admin-btn.voters {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.comm-admin-btn.voters:hover {
    background: rgba(245, 158, 11, 0.28);
    border-color: #f59e0b;
}

.comm-poll-voters-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
}

.poll-voter-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    color: rgba(245, 158, 11, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
    cursor: default;
}

.poll-voter-label.friend {
    color: #00cec9;
}

.poll-voters-chips {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.poll-voter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 2px 7px 2px 3px;
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.15s ease;
}

.poll-voter-chip.admin-chip {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #f59e0b;
    cursor: pointer;
}

.poll-voter-chip.admin-chip:hover {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
}

.poll-voter-chip.friend-chip {
    background: rgba(0, 206, 201, 0.12);
    border-color: rgba(0, 206, 201, 0.35);
    color: #00cec9;
}

.poll-voter-chip.friend-chip:hover {
    background: rgba(0, 206, 201, 0.22);
    border-color: #00cec9;
}

.poll-voter-chip.more {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.55rem;
}

.poll-voter-avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.poll-voter-avatar.placeholder {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.5rem;
}

.poll-voter-name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   ADMIN NAME IMAGE SELECTOR MODAL
   ============================================ */
.admin-ni-tab-btn {
    background: rgba(15, 52, 96, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s ease;
    line-height: 1;
}
.admin-ni-tab-btn:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.4);
    color: #fff;
}
.admin-ni-tab-btn.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

.admin-ni-style-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}
.admin-ni-style-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.admin-ni-style-btn.active {
    background: rgba(0, 206, 201, 0.3);
    color: #00cec9;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.3);
}

.admin-ni-card {
    background: rgba(15, 52, 96, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
    position: relative;
    user-select: none;
    min-height: 64px;
    box-sizing: border-box;
}
.admin-ni-card:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.45);
    transform: translateY(-2px);
}
.admin-ni-card.selected {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.45);
}
.admin-ni-card img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    margin-bottom: 4px;
    pointer-events: none;
}
.admin-ni-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.52rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0 2px;
}
.admin-ni-card-sub {
    font-family: 'Minecraft', monospace;
    font-size: 0.46rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1px;
}

/* ============================================
   ADMIN BRAND ONLINE COUNTER
   ============================================ */
.admin-header-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    margin-left: 10px;
    padding: 3px 9px 3px 7px;
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.45);
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: normal;
    color: #2ecc71;
    text-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
    letter-spacing: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1;
}

.admin-header-online-badge:hover {
    background: rgba(46, 204, 113, 0.22);
    border-color: #2ecc71;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.4);
    transform: translateY(-1px);
}

.admin-online-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 6px #2ecc71;
    display: inline-block;
    animation: adminOnlinePulse 2s infinite ease-in-out;
    flex-shrink: 0;
}

@keyframes adminOnlinePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.35);
        opacity: 0.65;
    }
}

.admin-online-text {
    font-size: 0.55rem;
    opacity: 0.85;
}


/* ============================================
   ADMIN ACCOUNTS: MASKED FIELDS & CONTROLS
   ============================================ */
.admin-masked-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s ease;
    user-select: none;
    vertical-align: middle;
}

.admin-masked-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(233, 69, 96, 0.45);
    color: #ffffff;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.2);
}

.admin-masked-pill .admin-mask-text {
    letter-spacing: 1.5px;
    transition: color 0.2s;
}

.admin-masked-pill.is-revealed .admin-mask-text {
    letter-spacing: normal;
    color: #00cec9;
}

.admin-masked-pill-pass.is-revealed .admin-mask-text {
    color: #e94560;
}

.admin-masked-pill .admin-mask-eye {
    font-size: 0.5rem;
    margin-left: 2px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.admin-masked-pill:hover .admin-mask-eye {
    opacity: 1;
}

.admin-key-btn {
    background: rgba(233, 69, 96, 0.1);
    border: 1px solid rgba(233, 69, 96, 0.3);
    color: #e94560;
    font-size: 0.5rem;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.admin-key-btn:hover {
    background: rgba(233, 69, 96, 0.3);
    border-color: #e94560;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
}


.db-profile-img.is-gen5 {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.db-profile-img.is-gen5:hover {
    transform: scale(calc(var(--sprite-scale, 1) * 1.08));
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.85));
}

.db-scale-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}
.db-scale-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.4);
}


/* EN Toggle Button for Community Posts */
.comm-admin-btn.en-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1.2;
}
.comm-admin-btn.en-toggle.active {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
}
.comm-admin-btn.en-toggle.active:hover {
    background: rgba(16, 185, 129, 0.35);
    border-color: #34d399;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}
.comm-admin-btn.en-toggle.inactive {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.45);
}
.comm-admin-btn.en-toggle.inactive:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    transform: translateY(-1px);
}

.news-admin-preview-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
    margin-bottom: 12px;
    user-select: none;
}
.news-admin-preview-pill:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #ffffff;
}
.news-admin-preview-pill.active {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}


/* ==========================================================================
   Admin News & Changelog Publisher Studio (Redesigned 2-Column Suite)
   ========================================================================== */

.news-publisher-card {
    max-width: 1220px !important;
    width: 95vw !important;
    height: 90vh !important;
    max-height: 920px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0d1322 !important;
    border: 1px solid rgba(0, 206, 201, 0.45) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 206, 201, 0.12) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

.news-publisher-header {
    padding: 12px 20px !important;
    background: rgba(15, 23, 42, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.news-publisher-body {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 18px !important;
    padding: 16px 20px !important;
    overflow: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
}

@media (max-width: 980px) {
    .news-publisher-card {
        height: auto !important;
        max-height: 94vh !important;
    }
    .news-publisher-body {
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
    }
}

.news-publisher-form-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding-right: 12px;
    min-width: 0;
}

.news-publisher-form-col::-webkit-scrollbar {
    width: 6px;
}
.news-publisher-form-col::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
.news-publisher-form-col::-webkit-scrollbar-thumb {
    background: rgba(0, 206, 201, 0.3);
    border-radius: 3px;
}
.news-publisher-form-col::-webkit-scrollbar-thumb:hover {
    background: #00cec9;
}

.news-publisher-preview-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.news-form-section-box {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-section-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    font-weight: 700;
    color: #00cec9;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.news-form-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
}
@media (max-width: 768px) {
    .news-form-grid-4 {
        grid-template-columns: 1fr 1fr !important;
    }
}

.news-form-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
@media (max-width: 600px) {
    .news-form-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

.news-tag-presets-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.news-tag-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.news-tag-chip:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #ffffff;
    transform: translateY(-1px);
}

.news-color-row-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-color-swatches {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.news-swatch-btn {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.news-swatch-btn:hover {
    transform: scale(1.2);
}
.news-swatch-btn.active {
    border-color: #ffffff;
    box-shadow: 0 0 8px currentColor;
    transform: scale(1.15);
}

.news-toggle-box {
    background: rgba(0, 206, 201, 0.04);
    border: 1px solid rgba(0, 206, 201, 0.15);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
}

.news-switch-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    user-select: none !important;
    margin: 0 !important;
    width: 100%;
}
.news-switch-label input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none;
}
.news-switch-slider {
    position: relative;
    width: 38px;
    height: 22px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    transition: all 0.25s ease;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.news-switch-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.news-switch-label input:checked + .news-switch-slider {
    background: #10b981;
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}
.news-switch-label input:checked + .news-switch-slider::before {
    transform: translateX(16px);
}

.news-en-inputs-box {
    background: rgba(0, 206, 201, 0.03);
    border: 1px solid rgba(0, 206, 201, 0.2);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-highlights-builder-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-hl-builder-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s ease;
}
.news-hl-builder-card:hover {
    border-color: rgba(0, 206, 201, 0.35);
}

.news-hl-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.72rem;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.15s ease;
}
.news-hl-icon-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #00cec9;
}

.news-hl-del-btn {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.news-hl-del-btn:hover {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* EN disabled states inside builder */
.news-publisher-card.en-disabled .news-hl-en-col {
    display: none !important;
}
.news-publisher-card.en-disabled .news-hl-grid-responsive {
    grid-template-columns: 1fr !important;
}

.news-preview-wrapper {
    background: rgba(10, 15, 30, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.news-preview-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.news-preview-mode-switch {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    padding: 2px;
    gap: 2px;
}

.news-preview-mode-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.news-preview-mode-btn.active {
    background: #00cec9;
    color: #000;
    font-weight: bold;
}

.news-live-preview-card-wrap {
    overflow-y: auto;
    flex: 1;
    padding-right: 4px;
}

.news-live-preview-card-wrap::-webkit-scrollbar {
    width: 5px;
}
.news-live-preview-card-wrap::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
.news-live-preview-card-wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}


/* ==========================================================================
   PROCEDURAL TEAM GENERATOR STUDIO REDESIGN (2-COLUMN RESPONSIVE SUITE)
   ========================================================================== */

.tb-gen-modal-content {
    max-width: 1420px !important;
    width: 96vw !important;
    height: 92vh !important;
    max-height: 94vh !important;
    background: linear-gradient(155deg, #090e1a 0%, #111a2e 50%, #0d1527 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(16, 185, 129, 0.15) !important;
    overflow: hidden !important;
    color: #fff !important;
    box-sizing: border-box !important;
}

#tbTeamGenModalBody.tb-gen-studio-body,
#tbTeamGenModalBody,
.tb-gen-studio-body {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: 440px 1fr !important;
    gap: 18px !important;
    padding: 16px 20px !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 1100px) {
    .tb-gen-studio-body {
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Left Column: Control Panel */
.tb-gen-control-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    padding-right: 10px !important;
    min-height: 0 !important;
}

.tb-gen-control-panel::-webkit-scrollbar {
    width: 6px !important;
}
.tb-gen-control-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 4px !important;
}
.tb-gen-control-panel::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.4) !important;
    border-radius: 4px !important;
}
.tb-gen-control-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7) !important;
}

/* Right Column: Live Team Panel */
.tb-gen-team-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
    min-height: 0 !important;
}

.tb-gen-team-panel::-webkit-scrollbar {
    width: 6px !important;
}
.tb-gen-team-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 4px !important;
}
.tb-gen-team-panel::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.4) !important;
    border-radius: 4px !important;
}
.tb-gen-team-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7) !important;
}

/* Accordion for Advanced Settings */
.tb-gen-accordion-toggle {
    background: rgba(0, 206, 201, 0.08) !important;
    border: 1px solid rgba(0, 206, 201, 0.35) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    color: #00cec9 !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.82rem !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
}

.tb-gen-accordion-toggle:hover {
    background: rgba(0, 206, 201, 0.16) !important;
    border-color: #00cec9 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

.tb-gen-acc-icon {
    font-size: 0.8rem !important;
    color: #00cec9 !important;
    transition: transform 0.2s ease !important;
}

.tb-gen-accordion-content {
    display: none;
    flex-direction: column !important;
    gap: 12px !important;
    animation: tbFadeIn 0.2s ease !important;
}

/* Compact 2x2 Format Grid */
.tb-gen-format-grid-compact {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

/* 6 Pokemon Cards Grid in Right Column */
.tb-gen-squad-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 12px !important;
}

/* Active Squad Tactical Banner */
.tb-gen-active-squad-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(9, 132, 227, 0.12) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}


/* Pokemon Card Header & Action Buttons Fix (No Overflow) */
.tb-gen-poke-card {
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.tb-gen-poke-header {
    overflow: hidden !important;
    min-width: 0 !important;
}

.tb-gen-pin-btn {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
}

.tb-gen-pin-btn:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}

.tb-gen-pin-btn.pinned {
    background: rgba(245, 158, 11, 0.3) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.35) !important;
}

.tb-gen-reroll-btn {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
}

.tb-gen-reroll-btn:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    transform: rotate(90deg) !important;
}

.tb-gen-bring-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.62rem !important;
    font-family: 'Minecraft', monospace !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
}


/* Section Box Flex-Shrink & Sizing Fix (Never Collapse or Squish Blocks) */
.tb-gen-control-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.tb-gen-control-panel > * {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.tb-gen-section-box {
    flex-shrink: 0 !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.tb-gen-accordion-box {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tb-gen-accordion-content {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    display: none;
    flex-direction: column !important;
    gap: 12px !important;
}

.tb-gen-accordion-content > * {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tb-gen-section-title {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.tb-gen-section-title > span {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.tb-gen-preset-btn,
.tb-gen-chip-btn {
    box-sizing: border-box !important;
    max-width: 100% !important;
    white-space: nowrap !important;
}

.tb-gen-gimmick-toggle,
.tb-gen-arch-btn {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.tb-gen-format-grid,
.tb-gen-format-grid-compact,
.tb-gen-arch-grid {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

.tb-gen-format-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.tb-gen-format-card-title,
.tb-gen-format-card-desc {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    min-width: 0 !important;
}


/* ==========================================================================
   UNIVERSAL ZERO-OVERFLOW SHIELD & SAFE MOBILE RESPONSIVE SUITE
   Guarantees zero horizontal blowout, safe modals, and responsive layout
   without interfering with pointer events or click handling.
   ========================================================================== */

/* 1. Global Viewport & Box-Sizing Hard Defense */
html {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    -webkit-text-size-adjust: 100% !important;
}

body {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    position: relative !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

/* Universal Media Containment */
img, video, canvas, svg, iframe {
    max-width: 100% !important;
    height: auto;
}

/* Universal Word-Break & Overflow Wrap for all text nodes */
p, span, h1, h2, h3, h4, h5, h6, label, a, button, div, td, th {
    overflow-wrap: break-word;
}

/* Ensure empty mount containers never block pointer events */
#dbDetailModalContainer {
    pointer-events: none !important;
}
#dbDetailModalContainer > * {
    pointer-events: auto !important;
}

/* 2. Universal Table & Data Grid Safe Container */
.db-table-wrapper,
.db-table-container,
.table-responsive,
.table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.db-table,
.db-type-matrix-table,
.db-nature-matrix-table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 3. Safe Modal Content Responsive Sizing (Only scale cards, NEVER touch overlays) */
@media (max-width: 768px) {
    body {
        padding: 8px 6px !important;
    }

    .modal-content,
    .modal-large,
    .tb-modal-content,
    .tb-gen-modal-content,
    .calc-modal-content,
    .news-publisher-modal,
    .news-viewer-modal-card,
    .hosting-donate-card,
    .confirm-modal-content,
    .completion-modal-content {
        max-width: 96vw !important;
        box-sizing: border-box !important;
    }

    .modal-two-columns,
    .news-publisher-body,
    .news-hl-grid-responsive {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    .modal-filters,
    .modal-results {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* 4. Team Generator Studio Mobile Optimizations */
@media (max-width: 1100px) {
    .tb-gen-studio-body {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
    }
    .tb-gen-control-panel {
        max-width: 100% !important;
        width: 100% !important;
    }
    .tb-gen-team-panel {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .tb-gen-modal-content {
        height: 96vh !important;
        max-height: 96vh !important;
        width: 98vw !important;
        padding: 8px 10px !important;
    }
    .tb-gen-modal-header {
        padding: 8px 10px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .tb-gen-modal-title {
        font-size: 0.92rem !important;
    }
    .tb-gen-modal-subtitle {
        display: none !important;
    }
    .tb-gen-modal-footer {
        padding: 8px 10px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .tb-gen-modal-footer .tb-btn {
        font-size: 0.72rem !important;
        padding: 6px 12px !important;
    }
    .tb-gen-studio-body {
        padding: 6px 2px !important;
        gap: 12px !important;
    }
    .tb-gen-squad-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .tb-gen-active-squad-box {
        padding: 10px 12px !important;
    }
    .tb-gen-format-grid-compact {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .tb-gen-format-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .tb-gen-poke-card {
        padding: 10px !important;
    }
}

/* 5. Teambuilder Studio Mobile Optimizations */
@media (max-width: 768px) {
    .tb-slots-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .tb-slot-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .tb-hero-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .tb-hero-title-wrap {
        width: 100% !important;
    }
    .tb-hero-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .tb-hero-actions .tb-btn {
        flex: 1 1 auto !important;
        text-align: center !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        padding: 6px 10px !important;
    }
}

/* 6. Floating UI Shield (Notifications, Social, Lang) */
@media (max-width: 768px) {
    #notificationContainer {
        pointer-events: none !important;
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        max-width: calc(100vw - 20px) !important;
        box-sizing: border-box !important;
    }
    .notification {
        pointer-events: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .social-block {
        top: 10px !important;
        right: 10px !important;
    }
    .social-toggle {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    .lang-switch-floating {
        top: 10px !important;
        right: 52px !important;
    }
    .lang-switch-floating .lang-btn {
        font-size: 0.58rem !important;
        padding: 7px 9px !important;
    }
}

/* 7. Extra Small Phones (iPhone SE, Galaxy Fold, screens <= 400px) */
@media (max-width: 400px) {
    body {
        padding: 4px 2px !important;
    }
    .tb-gen-format-grid-compact {
        grid-template-columns: 1fr !important;
    }
    .tb-gen-arch-btn {
        font-size: 0.65rem !important;
        padding: 5px 8px !important;
    }
}


/* ==========================================================================
   TEAMBUILDER GENERATOR: MONOTYPE, ROLL HISTORY & POSTER ENHANCEMENTS
   ========================================================================== */

/* Monotype Grid & Chips */
.tb-gen-monotype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 6px;
    margin-top: 6px;
    box-sizing: border-box;
    max-width: 100%;
}

.tb-gen-monotype-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-gen-monotype-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.tb-gen-monotype-chip.active {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.25) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

/* Roll History Controls */
.tb-gen-history-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.35);
    padding: 3px 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
    max-width: 100%;
}

.tb-gen-history-btn {
    background: transparent;
    border: none;
    color: #fff;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tb-gen-history-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    color: #10b981;
}

.tb-gen-history-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.tb-gen-history-counter {
    font-family: 'Minecraft', monospace, sans-serif;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    padding: 0 4px;
    user-select: none;
    white-space: nowrap;
}

/* Poster Modal & Preview */
.tb-poster-modal-content {
    max-width: 860px;
    width: 95%;
    background: #0d1322;
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(168, 85, 247, 0.2);
    border-radius: 16px;
    padding: 20px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    position: relative;
    animation: tbFadeIn 0.25s ease;
    box-sizing: border-box;
    max-height: 92vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tb-poster-preview-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #070a12;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    min-height: 220px;
    overflow: hidden;
}

.tb-poster-preview-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
    display: block;
}

.tb-poster-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 100%;
}

@media (max-width: 768px) {
    .tb-gen-monotype-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 4px;
    }
    .tb-gen-monotype-chip {
        font-size: 0.65rem;
        padding: 5px 6px;
    }
    .tb-poster-modal-content {
        padding: 14px;
        width: 98%;
        max-height: 96vh;
    }
    .tb-poster-actions {
        justify-content: stretch;
    }
    .tb-poster-actions .tb-btn {
        flex: 1 1 100%;
        text-align: center;
        justify-content: center;
    }
}


/* ==========================================================================
   Pokemon Species Biology, Physical Traits & Breeding Styles
   ========================================================================== */

/* Род / Категория покемона в заголовке профиля */
.db-profile-genus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #ffd166;
    background: rgba(255, 209, 102, 0.12);
    border: 1px solid rgba(255, 209, 102, 0.32);
    padding: 3px 10px;
    border-radius: 12px;
    margin: 4px 0 2px;
    box-shadow: 0 2px 8px rgba(255, 209, 102, 0.15);
    letter-spacing: 0.5px;
    width: fit-content;
}
.db-profile-genus i {
    font-size: 0.68rem;
    opacity: 0.85;
}

/* Физические параметры (Рост, Вес, Пол) в левой карточке */
.db-profile-physical-card {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.db-profile-physical-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.db-profile-physical-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: left;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.db-profile-physical-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}
.db-phys-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.db-phys-label i {
    color: #e94560;
    font-size: 0.7rem;
}
.db-phys-val {
    font-size: 0.88rem;
    color: #ffffff;
    font-weight: 500;
}
.db-phys-val b {
    color: #ffffff;
    font-weight: 700;
}
.db-phys-unit {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}
.db-phys-sub {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 2px;
}

/* Пол покемона (интерактивная шкала) */
.db-profile-gender-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.db-gender-genderless {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.74rem;
    font-family: 'Minecraft', monospace;
    padding: 6px 12px;
    border-radius: 8px;
    width: fit-content;
}
.db-gender-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.db-gender-bar {
    height: 8px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.db-gender-bar-m {
    background: linear-gradient(90deg, #38bdf8, #2563eb);
    height: 100%;
    transition: width 0.3s ease;
}
.db-gender-bar-f {
    background: linear-gradient(90deg, #f472b6, #e11d48);
    height: 100%;
    transition: width 0.3s ease;
}
.db-gender-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    padding: 0 2px;
}
.db-gender-label.male {
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 4px;
}
.db-gender-label.female {
    color: #f472b6;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Детальная секция биологии и разведения (Правая карточка) */
.db-bio-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.db-bio-detail-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-bio-detail-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.db-bio-detail-head {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-bio-detail-head i {
    color: #e94560;
    font-size: 0.72rem;
}
.db-bio-detail-value {
    font-size: 0.85rem;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}
.db-bio-detail-value b {
    color: #ffffff;
    font-weight: 700;
}
.db-bio-unit {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
}
.db-bio-sub-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    display: inline-flex;
    align-items: center;
}
.db-bio-egg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.db-bio-egg-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.35);
    color: #d8b4fe;
    padding: 3px 8px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 6px rgba(168, 85, 247, 0.15);
    transition: all 0.2s;
}
.db-bio-egg-chip:hover {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}
.db-bio-egg-chip i {
    font-size: 0.55rem;
    opacity: 0.8;
}
.db-bio-ev-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    background: rgba(233, 69, 96, 0.16);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #ff6b81;
    padding: 3px 9px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.2);
}
.db-bio-ev-badge i {
    font-size: 0.65rem;
}
.db-bio-exp-note {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 3px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
}
.db-bio-exp-note b {
    color: #f59e0b;
}
.db-bio-exp-note i {
    color: #f59e0b;
    font-size: 0.65rem;
}
.db-bio-dash {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .db-bio-details-grid {
        grid-template-columns: 1fr;
    }
    .db-profile-physical-row {
        grid-template-columns: 1fr 1fr;
    }
}


/* ========================================================================== */
/* NEWS & COMMUNITY: MUTED PLAYERS SYSTEM */
/* ========================================================================== */

.news-subtabs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.news-subtabs-nav {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.news-subtabs-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-manage-muted-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    padding: 9px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.news-manage-muted-btn:hover {
    background: rgba(233, 69, 96, 0.18);
    border-color: rgba(233, 69, 96, 0.5);
    color: #fff;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.25);
    transform: translateY(-1px);
}

.news-manage-muted-btn.has-muted {
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.45);
    color: #fff;
}

.news-muted-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e94560;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 18px;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

/* Card Author Mute Button */
.comm-user-mute-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 8px;
    vertical-align: middle;
}

.comm-user-mute-btn:hover {
    background: rgba(233, 69, 96, 0.22);
    border-color: rgba(233, 69, 96, 0.6);
    color: #ff6b81;
    transform: translateY(-1px);
}

.comm-user-mute-btn.muted {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #ff6b81;
}

.comm-user-mute-btn i {
    font-size: 0.68rem;
}

/* Feed Banner for Hidden Muted Posts */
.news-muted-feed-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(233, 69, 96, 0.08);
    border: 1px dashed rgba(233, 69, 96, 0.35);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    animation: fadeIn 0.25s ease-out;
}

.news-muted-feed-banner i.fa-volume-xmark {
    color: #e94560;
    font-size: 0.9rem;
}

.news-muted-feed-banner button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(233, 69, 96, 0.2);
    border: 1px solid rgba(233, 69, 96, 0.5);
    color: #ff8599;
    border-radius: 8px;
    padding: 4px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-muted-feed-banner button:hover {
    background: #e94560;
    color: #fff;
}

/* Modal for Muted Users */
.news-muted-modal-card {
    background: #121829 !important;
    border: 1px solid rgba(233, 69, 96, 0.3) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 24px rgba(233, 69, 96, 0.15) !important;
}

.news-muted-modal-desc {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

.news-muted-add-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.news-muted-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.news-muted-input-wrap i {
    position: absolute;
    left: 14px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.news-muted-input-wrap input {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 14px 10px 38px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    outline: none;
    transition: all 0.2s ease;
}

.news-muted-input-wrap input:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
}

.news-muted-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #e94560;
    border: none;
    color: #fff;
    border-radius: 10px;
    padding: 0 18px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease;
}

.news-muted-add-btn:hover {
    background: #ff5270;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4);
    transform: translateY(-1px);
}

.news-muted-list-wrap {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.news-muted-user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    transition: all 0.2s ease;
}

.news-muted-user-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(233, 69, 96, 0.3);
}

.news-muted-user-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.news-muted-avatar-box {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6b81;
    font-size: 0.85rem;
}

.news-muted-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.news-muted-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 700;
}

.news-muted-status-tag {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Minecraft', monospace;
}

.news-user-unmute-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #10b981;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-user-unmute-btn:hover {
    background: #10b981;
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.news-muted-empty-state {
    text-align: center;
    padding: 30px 16px;
    color: rgba(255, 255, 255, 0.4);
}

.news-muted-empty-icon {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 10px;
}

.news-muted-empty-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
}

.news-muted-empty-sub {
    font-size: 0.75rem;
    line-height: 1.4;
    max-width: 360px;
    margin: 0 auto;
}

.news-unmute-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(233, 69, 96, 0.12);
    border: 1px solid rgba(233, 69, 96, 0.35);
    color: #ff6b81;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.news-unmute-all-btn:hover {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #fff;
}

@media (max-width: 650px) {
    .news-subtabs-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    .news-subtabs-nav {
        width: 100%;
    }
    .news-manage-muted-btn {
        justify-content: center;
        width: 100%;
    }
}


/* ============================================
   ФИОЛЕТОВАЯ ПОДСВЕТКА УВЕДОМЛЕНИЙ АДМИНА
   ============================================ */

/* 1. Колокольчик в шапке (User Bar Bell) */
.notif-badge.has-admin-unread i {
    color: #c084fc !important;
    filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.95)) drop-shadow(0 0 14px rgba(168, 85, 247, 0.7)) !important;
    animation: adminBellPulse 1.8s infinite ease-in-out !important;
}

.notif-badge.has-admin-unread:hover i {
    color: #e9d5ff !important;
    filter: drop-shadow(0 0 8px rgba(233, 213, 255, 1)) drop-shadow(0 0 18px rgba(168, 85, 247, 0.9)) !important;
}

.notif-badge.has-admin-unread .notif-badge-count {
    background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.95), 0 0 14px rgba(147, 51, 234, 0.6) !important;
    border: 1px solid #d8b4fe !important;
    color: #ffffff !important;
}

@keyframes adminBellPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    15% {
        transform: scale(1.2) rotate(-14deg);
    }
    30% {
        transform: scale(1.2) rotate(14deg);
    }
    45% {
        transform: scale(1.1) rotate(-8deg);
    }
    60% {
        transform: scale(1.05) rotate(5deg);
    }
    75% {
        transform: scale(1) rotate(0deg);
    }
}

/* 2. Карточка прямого уведомления в дропдауне */
.notif-item.notif-item-admin {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(126, 34, 206, 0.28) 100%) !important;
    border: 1.5px solid rgba(192, 132, 252, 0.65) !important;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.35), inset 0 0 10px rgba(168, 85, 247, 0.15) !important;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    position: relative;
}

.notif-item.notif-item-admin.unread {
    border-color: #c084fc !important;
    box-shadow: 0 0 18px rgba(192, 132, 252, 0.55), inset 0 0 12px rgba(168, 85, 247, 0.25) !important;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.28) 0%, rgba(126, 34, 206, 0.45) 100%) !important;
}

.notif-item.notif-item-admin .notif-admin-title {
    color: #e9d5ff !important;
    font-weight: bold;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
}

.notif-item.notif-item-admin .notif-admin-title i {
    color: #c084fc;
    font-size: 0.75rem;
}

.notif-admin-tag {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.7);
    letter-spacing: 0.5px;
}

.notif-admin-body {
    color: #ffffff !important;
    font-size: 0.65rem;
    line-height: 1.5;
    margin-top: 6px;
    word-break: break-word;
    white-space: pre-wrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-family: 'Minecraft', monospace;
}

.notif-admin-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(192, 132, 252, 0.2);
}

.notif-admin-time {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(233, 213, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 4px;
}

.notif-admin-del-btn {
    background: transparent;
    border: none;
    color: rgba(233, 213, 255, 0.5);
    cursor: pointer;
    font-size: 0.6rem;
    padding: 2px 5px;
    border-radius: 4px;
    transition: all 0.2s;
}

.notif-admin-del-btn:hover {
    color: #ff6b81;
    background: rgba(255, 107, 129, 0.15);
}

/* 3. Кнопка отправки уведомления в строке пользователя */
.admin-send-user-notif-btn {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: #c084fc;
    font-size: 0.55rem;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 6px;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s;
}

.admin-send-user-notif-btn:hover {
    background: #a855f7;
    color: #fff;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.8);
}

/* 4. Модальное окно отправки */
.admin-notif-modal-content {
    max-width: 540px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    background: #151528;
    border: 2px solid #a855f7;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 20px rgba(168, 85, 247, 0.3);
}

.admin-notif-input,
.admin-notif-select,
.admin-notif-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: #0d0d1a;
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.2s;
}

.admin-notif-input:focus,
.admin-notif-select:focus,
.admin-notif-textarea:focus {
    border-color: #c084fc;
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.4);
}

/* ============================================
   СИНИЕ УВЕДОМЛЕНИЯ: ОТВЕТЫ ИГРОКОВ
   ============================================ */

.notif-item.notif-item-player-reply {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(37, 99, 235, 0.28) 100%) !important;
    border: 1.5px solid rgba(96, 165, 250, 0.65) !important;
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.35), inset 0 0 10px rgba(59, 130, 246, 0.1) !important;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    position: relative;
}

.notif-item.notif-item-player-reply.unread {
    border-color: #60a5fa !important;
    box-shadow: 0 0 18px rgba(96, 165, 250, 0.55), inset 0 0 12px rgba(59, 130, 246, 0.2) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.28) 0%, rgba(37, 99, 235, 0.42) 100%) !important;
}

.notif-player-reply-title {
    color: #bfdbfe !important;
    font-weight: bold;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
}

.notif-player-reply-title i {
    color: #60a5fa;
    font-size: 0.75rem;
}

.notif-player-reply-tag {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.48rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.7);
    letter-spacing: 0.5px;
}

.notif-player-reply-body {
    color: #93c5fd !important;
    font-size: 0.58rem;
    font-family: 'Minecraft', monospace;
    margin-top: 4px;
    opacity: 0.85;
}

.notif-player-reply-text {
    color: #ffffff !important;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    margin-top: 5px;
    padding: 5px 8px;
    background: rgba(59, 130, 246, 0.15);
    border-left: 2px solid #60a5fa;
    border-radius: 0 6px 6px 0;
    word-break: break-word;
    white-space: pre-wrap;
}


/* Approve & Apply Admin Button */
.comm-admin-btn.approve-apply {
    background: linear-gradient(135deg, #059669 0%, #00cec9 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 206, 201, 0.6) !important;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.35);
    font-weight: bold;
}
.comm-admin-btn.approve-apply:hover {
    filter: brightness(1.25);
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.6);
}


/* Translation comparison 3-box additions */
.comm-trans-box.cur .comm-trans-label {
    color: rgba(245, 158, 11, 0.8) !important;
}

.comm-trans-box.cur .comm-trans-value {
    color: #f59e0b !important;
}

.comm-trans-none {
    color: rgba(255, 255, 255, 0.35) !important;
    font-style: italic !important;
    font-weight: normal !important;
    font-size: 0.85rem !important;
}

.comm-trans-match-icon {
    font-size: 0.82rem !important;
    color: #10b981 !important;
    margin-left: 4px !important;
}

/* Real-time live highlight animation for new arrivals */
@keyframes commLivePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.85);
        transform: translateY(-4px) scale(1.01);
        border-color: rgba(16, 185, 129, 0.9) !important;
    }
    50% {
        box-shadow: 0 0 28px 6px rgba(16, 185, 129, 0.5);
        border-color: rgba(16, 185, 129, 0.75) !important;
    }
    100% {
        box-shadow: none;
        transform: translateY(0) scale(1);
    }
}

.comm-live-highlight {
    animation: commLivePulse 3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    position: relative;
    z-index: 5;
}

/* Unread live dot on modeBtnNews */
#modeBtnNews {
    position: relative;
}

.news-live-unread-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    animation: unreadPulse 1.8s infinite;
    pointer-events: none;
}

@keyframes unreadPulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 6px #10b981; }
    50% { transform: scale(1.35); opacity: 0.8; box-shadow: 0 0 14px #10b981; }
}

/* Translation Pokemon Sprite Card */
.comm-trans-poke-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(20, 24, 45, 0.75), rgba(10, 15, 30, 0.85));
    border: 1px solid rgba(0, 206, 201, 0.25);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.comm-trans-poke-card:hover {
    border-color: rgba(0, 206, 201, 0.45);
    transform: translateY(-1px);
}

.comm-trans-poke-avatar-box {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 10px;
    background: radial-gradient(circle, rgba(0, 206, 201, 0.15) 0%, rgba(10, 15, 30, 0.6) 80%);
    border: 1px solid rgba(0, 206, 201, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.comm-trans-poke-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
    transition: transform 0.25s ease;
}

.comm-trans-poke-card:hover .comm-trans-poke-img {
    transform: scale(1.1);
}

.comm-trans-poke-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.comm-trans-poke-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.comm-trans-poke-dex-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    color: #00cec9;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 6px;
    padding: 2px 7px;
    letter-spacing: 0.5px;
}

.comm-trans-poke-eng-name {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
}

.comm-trans-poke-cur-tag {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.comm-trans-poke-types-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.comm-trans-type-pill {
    font-size: 0.68rem;
    font-weight: bold;
    color: #fff;
    padding: 1px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}


/* Move Target Diagram (pokemondb style) */
.db-move-target-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 14px 14px;
    background: rgba(15, 52, 96, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    margin: 8px 0 6px;
}
.move-target {
    margin: 0 auto 12px;
    position: relative;
    width: 294px;
    height: 116px;
    box-sizing: border-box;
}
.move-target > .mt-pkmn {
    position: relative;
    z-index: 5;
    float: left;
    margin: 4px;
    width: 90px;
    height: 50px;
    border-radius: 20px / 44px;
    line-height: 44px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    box-sizing: border-box;
    transition: all 0.25s ease;
    user-select: none;
    letter-spacing: 0.3px;
    font-family: inherit;
}
.move-target > .mt-user {
    background-color: #13c2eb;
    border: 3px solid #13c2eb;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.move-target > .mt-foe {
    background-color: #e68929;
    border: 3px solid #e68929;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.move-target > .mt-selected {
    border-color: #2ecc71 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.55), inset 0 0 8px rgba(46, 204, 113, 0.25);
}
.move-target > .mt-unselected {
    opacity: 0.5;
}
.move-target > .mt-hspace,
.move-target > .mt-vspace {
    position: absolute;
    background: #2ecc71;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.9), 0 0 24px rgba(46, 204, 113, 0.5);
    z-index: 4;
    border-radius: 5px;
    pointer-events: none;
}

.move-target > .mt-hspace {
    width: 20px;
    height: 22px;
}
.move-target > .mt-hspace.tl { left: 88px; top: 18px; }
.move-target > .mt-hspace.tr { left: 186px; top: 18px; }
.move-target > .mt-hspace.bl { left: 88px; top: 76px; }
.move-target > .mt-hspace.br { left: 186px; top: 76px; }

.move-target > .mt-vspace {
    width: 22px;
    height: 20px;
}
.move-target > .mt-vspace.lt { left: 38px; top: 48px; }
.move-target > .mt-vspace.md { left: 136px; top: 48px; }
.move-target > .mt-vspace.rt { left: 234px; top: 48px; }

.mt-descr {
    color: #e2e8f0;
    font-style: italic;
    text-align: center;
    font-size: 0.92rem;
    margin: 4px 0 0;
    line-height: 1.45;
    max-width: 480px;
}


/* ==========================================================================
   MINI-GAMES SYNCHRONIZED DUEL HUD
   ========================================================================== */
.mg-duel-hud {
    position: sticky;
    top: 10px;
    z-index: 1500;
    width: calc(100% - 24px);
    max-width: 860px;
    margin: 10px auto 16px auto;
    animation: fadeInDown 0.3s ease;
    font-family: 'Minecraft', monospace !important;
}

.mg-duel-hud-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(22, 33, 62, 0.9));
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(233, 69, 96, 0.25);
    color: #fff;
    font-family: 'Minecraft', monospace !important;
}

.mg-duel-hud-col {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Minecraft', monospace !important;
}
.mg-duel-hud-col.left {
    justify-content: flex-start;
}
.mg-duel-hud-col.center {
    justify-content: center;
}
.mg-duel-hud-col.right {
    justify-content: flex-end;
}

.mg-duel-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #e94560, #ff6b81);
    color: #fff;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
}

.mg-duel-partner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem;
    font-weight: bold;
    color: #4ecdc4;
}

.mg-duel-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}
.mg-duel-pill.round {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffd700;
}
.mg-duel-pill.score {
    background: rgba(78, 205, 196, 0.15);
    border: 1px solid rgba(78, 205, 196, 0.4);
    color: #4ecdc4;
}

.mg-duel-quit-btn,
.mg-duel-surrender-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(233, 69, 96, 0.4);
    color: #ff6b81;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Minecraft', monospace !important;
}

.mg-duel-quit-btn:hover,
.mg-duel-surrender-btn:hover {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #fff;
    transform: translateY(-1px);
}

.mg-duel-opponent {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-family: 'Minecraft', monospace !important;
}

.mg-duel-label {
    color: #a0aec0;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace !important;
}

.mg-duel-name {
    color: #4ecdc4;
    font-weight: 700;
    font-family: 'Minecraft', monospace !important;
}

.mg-duel-progress,
.mg-duel-score {
    font-size: 0.75rem;
    color: #e2e8f0;
    font-family: 'Minecraft', monospace !important;
}

.mg-duel-progress strong,
.mg-duel-score strong {
    color: #ffd700;
    font-weight: 800;
    margin-left: 4px;
    font-family: 'Minecraft', monospace !important;
}

@media (max-width: 600px) {
    .mg-duel-hud-inner {
        flex-wrap: wrap;
        padding: 8px 12px;
        gap: 8px;
        font-size: 0.7rem;
    }
    .mg-duel-badge {
        font-size: 0.65rem;
        padding: 3px 8px;
    }
    .mg-duel-partner {
        font-size: 0.7rem;
    }
    .mg-duel-pill {
        padding: 3px 8px;
        font-size: 0.65rem;
    }
    .mg-duel-quit-btn,
    .mg-duel-surrender-btn {
        padding: 4px 8px;
        font-size: 0.65rem;
    }
}


/* ==========================================================================
   MINI-GAMES START SCREEN OVERLAY
   ========================================================================== */
.mg-start-overlay {
    position: relative;
    width: 100%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeInDown 0.3s ease;
    z-index: 10;
}

.mg-start-card {
    width: 100%;
    max-width: 540px;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.95), rgba(15, 23, 42, 0.98));
    border: 2px solid rgba(233, 69, 96, 0.4);
    border-radius: 20px;
    padding: 34px 26px;
    text-align: center;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.65), 0 0 25px rgba(233, 69, 96, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mg-start-icon-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px auto;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 70%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.mg-start-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
}

.mg-start-desc {
    color: #cbd5e1;
    font-size: 0.85rem;
    line-height: 1.65;
    margin: 0 0 22px 0;
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace !important;
    letter-spacing: 0.3px;
}

.mg-start-duel-badge {
    font-family: 'Minecraft', monospace !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(78, 205, 196, 0.25));
    border: 1px solid rgba(233, 69, 96, 0.5);
    border-radius: 20px;
    padding: 8px 18px;
    margin-bottom: 22px;
    font-size: 0.9rem;
    color: #ffd700;
    font-weight: 700;
}

.mg-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 15px 42px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mg-start-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    background: linear-gradient(135deg, #34d399, #059669);
}

.mg-start-btn:active {
    transform: translateY(1px) scale(0.98);
}

.mg-start-btn.duel {
    background: linear-gradient(135deg, #e94560, #ff6b81);
    box-shadow: 0 6px 22px rgba(233, 69, 96, 0.45);
}

.mg-start-btn.duel:hover {
    background: linear-gradient(135deg, #ff4772, #e94560);
    box-shadow: 0 12px 30px rgba(233, 69, 96, 0.65);
}

/* ==========================================================================
   SILHOUETTE DROPDOWN & START SCREEN FINAL OVERRIDES
   ========================================================================== */
.mg-sil-search-wrap .mg-autocomplete-dropdown,
#silDropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    background: #0b132b !important;
    border: 2px solid #00cec9 !important;
    border-radius: 12px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    z-index: 99999999 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.98), 0 0 40px rgba(0, 206, 201, 0.5) !important;
}

#silDropdown:not(.drop-up) {
    top: calc(100% + 8px) !important;
    bottom: auto !important;
}

#silDropdown.drop-up {
    bottom: calc(100% + 8px) !important;
    top: auto !important;
}

.mg-sil-phase-hint {
    margin-top: 8px !important;
    margin-bottom: 14px !important;
    min-height: 38px !important;
    position: relative !important;
    z-index: 10 !important;
}

.mg-start-desc {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace !important;
    font-size: 0.85rem !important;
    line-height: 1.65 !important;
    letter-spacing: 0.3px !important;
    color: #cbd5e1 !important;
}

.mg-start-duel-badge {
    font-family: 'Minecraft', monospace !important;
}


/* ==========================================================================
   MID-GAME LOCKED SETTINGS UNTIL DEFEAT
   ========================================================================== */
.mg-filters-bar.mid-game-locked .mg-filter-btn:not(.active),
.mg-shiny-settings-card.mid-game-locked .mg-shiny-setting-col:not(.zoom-col) input,
.mg-shiny-settings-card.mid-game-locked .mg-shiny-setting-col:not(.zoom-col) button,
.mg-shiny-settings-card.mid-game-locked .mg-shiny-mistake-presets button,
.mg-btn-reshuffle:disabled {
    opacity: 0.42 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.mg-shiny-settings-card.mid-game-locked .mg-shiny-setting-col:not(.zoom-col) {
    opacity: 0.65;
    transition: opacity 0.25s ease;
}

.mg-shiny-settings-card.mid-game-locked .mg-shiny-setting-col.zoom-col,
.mg-shiny-settings-card.mid-game-locked .mg-shiny-setting-col.zoom-col input,
.mg-shiny-settings-card.mid-game-locked .mg-shiny-setting-col.zoom-col button,
.mg-hud-item.zoom-controls,
.mg-hud-item.zoom-controls button,
.mg-sound-control-wrap,
.mg-sound-btn,
.mg-sound-slider {
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}





/* ==========================================================================
   SHINY VICTORY MODAL - SCREEN VIEWPORT CENTERING (SAFE)
   ========================================================================== */
.mg-shiny-victory-overlay[style*="display: none"],
.mg-shiny-victory-overlay[style*="display:none"],
.mg-shiny-victory-overlay:empty {
    display: none !important;
    pointer-events: none !important;
}

body > .mg-shiny-victory-overlay,
.mg-shiny-victory-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 99999999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow-y: auto !important;
}

body > .mg-shiny-victory-overlay .mg-victory-content,
.mg-shiny-victory-overlay .mg-victory-content {
    margin: auto !important;
    max-width: 480px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}


/* ==========================================================================
   ROUND HISTORIES: 50 FIFO LIMIT, 5 PIN SLOTS, MINIGAMES CARDS
   ========================================================================== */
.history-card.pinned {
    border: 1px solid #f59e0b !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(26, 26, 46, 0.75) 100%) !important;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15) !important;
}

.history-card.pinned .history-card-header {
    background: rgba(245, 158, 11, 0.05);
}

.history-card-pin-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    font-family: 'Minecraft', monospace;
}

.history-card-pin-btn:hover {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border-color: #f59e0b;
}

.history-card-pin-btn.active {
    background: rgba(245, 158, 11, 0.25) !important;
    color: #f59e0b !important;
    border-color: #f59e0b !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.35) !important;
}

.history-card-pin-btn .pin-tag {
    font-size: 0.65rem;
    font-weight: bold;
    letter-spacing: 0.3px;
}

.hist-mode-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    align-items: center;
}

.hist-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-family: 'Minecraft', monospace;
    white-space: nowrap;
    background: rgba(26, 26, 46, 0.7);
    border: 1px solid rgba(233, 69, 96, 0.3);
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hist-mode-btn:hover {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.15);
    transform: translateY(-1px);
}

.hist-mode-btn.active {
    background: #e94560 !important;
    border-color: #e94560 !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
}

.mg-hist-card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 0 12px;
}

.mg-hist-result-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
}

.mg-hist-result-banner.win {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10b981;
}

.mg-hist-result-banner.fail {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.mg-hist-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.mg-hist-stat-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'Minecraft', monospace;
}

.mg-hist-stat-box .lbl {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 5px;
}

.mg-hist-stat-box .val {
    font-size: 0.95rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mg-hist-pokemon-preview {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 6px 14px;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #cbd5e1;
    width: fit-content;
}

.mg-hist-poke-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

/* Pokemon profile link styles */
.db-profile-btn, .db-profile-form-pill, .db-evo-card, .db-profile-search-item {
    text-decoration: none !important;
    color: inherit;
}

/* Site mode link styles */
.site-mode-btn {
    text-decoration: none !important;
}


/* =========================================================================
   NEWS HIGHLIGHTS UNIFORM STRAIGHT-LINE ALIGNMENT & VIEWS / VOTES
   ========================================================================= */
.news-highlight-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.news-hl-badge-col {
    flex: 0 0 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.news-hl-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 22px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.62rem !important;
    font-family: 'Minecraft', monospace !important;
    font-weight: bold !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    letter-spacing: 0.5px !important;
}

.news-hl-content-col {
    flex: 1 !important;
    min-width: 0 !important;
}

.news-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 14px !important;
    flex-wrap: wrap !important;
}

.news-card-footer-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.news-card-footer-right {
    display: flex !important;
    align-items: center !important;
}

.news-views-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: 'Minecraft', monospace !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
}

.news-views-badge i {
    color: #00cec9 !important;
}

.news-views-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.76rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-family: 'Minecraft', monospace !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

.news-views-pill i {
    color: #00cec9 !important;
}


/* =========================================================================
   DETAILED BUILD ANALYSIS & GLOBAL COMPARISON STYLES
   ========================================================================= */
.tb-detailed-analysis-btn {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.2) 0%, rgba(16, 185, 129, 0.15) 100%);
    border: 1px solid rgba(0, 206, 201, 0.5);
    border-radius: 8px;
    padding: 6px 14px;
    color: #00cec9;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 10px rgba(0, 206, 201, 0.15);
}

.tb-detailed-analysis-btn:hover {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.35) 0%, rgba(16, 185, 129, 0.25) 100%);
    border-color: #00cec9;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 206, 201, 0.3);
    color: #fff;
}


.tb-detailed-analysis-overlay,
#tbDetailedAnalysisModal {
    z-index: 100005 !important;
}

.tb-detailed-analysis-content {
    max-width: 1000px !important;
    width: 95vw !important;
    max-height: 94vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #0f172a !important;
    border: 1px solid rgba(0, 206, 201, 0.3) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 206, 201, 0.1) !important;
}

.tb-detailed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.8);
}

.tb-detailed-poke-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tb-detailed-poke-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.tb-detailed-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.tb-detailed-title-row h3 {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    color: #fff;
}

.tb-detailed-types-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-type-pill {
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
}

.tb-tera-pill {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #00cec9;
}

.tb-detailed-stats-strip {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tb-detailed-stats-strip .stat-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 2px 7px;
    border-radius: 4px;
}

.tb-detailed-stats-strip .stat-pill.spe {
    color: #00cec9;
    border-color: rgba(0, 206, 201, 0.3);
}

.tb-detailed-nav-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
}

.tb-detailed-tab-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    white-space: nowrap;
}

.tb-detailed-tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.tb-detailed-tab-btn.active {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.tb-detailed-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.tb-detailed-footer {
    display: flex;
    justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.6);
}

/* BENCHMARK TAB */
.tb-bench-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .tb-bench-hero-grid {
        grid-template-columns: 1fr;
    }
}

.tb-bench-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px;
}

.tb-bench-card.highlight-speed {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.08) 0%, rgba(15, 23, 42, 0.6) 100%);
    border-color: rgba(0, 206, 201, 0.25);
}

.tb-bench-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 12px;
}

.tb-bench-tag {
    margin-left: auto;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
}

.tb-bench-main-val {
    margin-bottom: 12px;
}

.tb-bench-big-num {
    font-family: 'Minecraft', monospace;
    font-size: 2.4rem;
    font-weight: bold;
    color: #00cec9;
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}

.tb-bench-sub-lbl {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.tb-percentile-bar-wrap {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
}

.tb-percentile-bar-fill {
    height: 100%;
    border-radius: 4px;
}

.tb-percentile-bar-fill.speed {
    background: linear-gradient(90deg, #00cec9, #10b981);
}

.tb-percentile-bar-fill.phys {
    background: linear-gradient(90deg, #10b981, #059669);
}

.tb-percentile-bar-fill.spec {
    background: linear-gradient(90deg, #a855f7, #9333ea);
}

.tb-bench-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.tb-metric-box {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tb-metric-box .num {
    display: block;
    font-family: 'Minecraft', monospace;
    font-size: 1.2rem;
    font-weight: bold;
}

.tb-metric-box .lbl {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
}

.tb-metric-box.green .num { color: #10b981; }
.tb-metric-box.yellow .num { color: #f1c40f; }
.tb-metric-box.red .num { color: #ef4444; }

.tb-bench-boosts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
}

.tb-boost-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
}

.tb-boost-item .name {
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-boost-item .spe-val {
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    color: #fff;
}

.tb-boost-item .pct-val {
    color: #00cec9;
    font-size: 0.74rem;
}

.tb-bench-col-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tb-bench-val-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.tb-bench-val-row .val-num {
    font-family: 'Minecraft', monospace;
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
}

.tb-bench-val-row .pct-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
}

.tb-bench-val-row .pct-badge.good {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.tb-bench-val-row .desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.tb-quick-threats-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
}

.tb-quick-threats-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-threats-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-threat-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 12px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    transition: all 0.2s;
}

.tb-threat-chip img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.tb-threat-chip:hover, .tb-threat-chip.active {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
}

/* DUEL SIMULATOR TAB */
.tb-duel-opponent-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.tb-duel-search-box {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.tb-duel-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.tb-duel-search-inp {
    width: 100%;
    padding: 9px 12px 9px 34px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    outline: none;
    box-sizing: border-box;
}

.tb-duel-search-inp:focus {
    border-color: #00cec9;
    background: rgba(0, 206, 201, 0.05);
}

.tb-duel-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1e293b;
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
    margin-top: 4px;
}

.tb-duel-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tb-duel-search-item:hover {
    background: rgba(0, 206, 201, 0.15);
    color: #00cec9;
}

.tb-duel-search-item img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.tb-duel-quick-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tb-duel-quick-chips .lbl {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.tb-mini-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}

.tb-mini-chip.active {
    border-color: #00cec9;
    color: #00cec9;
    background: rgba(0, 206, 201, 0.1);
}

.tb-duel-speed-banner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.tb-duel-combatant {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tb-duel-combatant.our {
    align-items: flex-start;
}

.tb-duel-combatant.opp {
    align-items: flex-end;
}

.tb-duel-combatant .name {
    font-family: 'Minecraft', monospace;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
}

.tb-duel-combatant .spe-chip {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #00cec9;
}

.tb-boost-toggles {
    display: flex;
    gap: 5px;
    margin-top: 4px;
}

.tb-toggle-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.tb-toggle-btn.active {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.tb-duel-vs-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tb-duel-vs-col .vs-badge {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.4);
}

.tb-turn-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-turn-badge.first {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid #10b981;
}

.tb-turn-badge.second {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid #ef4444;
}

.tb-turn-badge.tie {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
    border: 1px solid #f1c40f;
}

.tb-duel-calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .tb-duel-calc-grid {
        grid-template-columns: 1fr;
    }
}

.tb-duel-calc-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
}

.tb-duel-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #fff;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 8px;
}

.tb-opp-incoming-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 12px;
}

.tb-move-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tb-move-title-row .move-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
}

.bp-tag {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.7);
}

.type-tag, .mini-type-tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.66rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.15);
}

.mult-tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
}

.mult-tag.super {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid #ef4444;
}

.mult-tag.resist {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid #10b981;
}

.tb-dmg-range-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.tb-dmg-range-row .dmg-numbers {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
}

.tb-dmg-range-row .dmg-percent {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.tb-healthbar-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.tb-healthbar-track.mini {
    height: 4px;
    margin-top: 6px;
    margin-bottom: 0;
}

.tb-healthbar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.tb-healthbar-fill.healthy { background: #10b981; }
.tb-healthbar-fill.warning { background: #f1c40f; }
.tb-healthbar-fill.danger { background: #ef4444; }

.tb-surv-pill {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tb-surv-pill.pass {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid #10b981;
}

.tb-surv-pill.roll {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
    border: 1px solid #f1c40f;
}

.tb-surv-pill.danger {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid #ef4444;
}

.tb-our-moves-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tb-our-move-item {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
}

.tb-our-move-item .move-name-part {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.tb-our-move-item .m-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #fff;
}

.tb-our-move-item .move-dmg-part {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}

.tb-our-move-item .dmg-range b {
    color: #00cec9;
}

.ko-tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    font-weight: bold;
}

.ko-tag.guaranteed {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid #10b981;
}

.ko-tag.high-chance {
    background: rgba(0, 206, 201, 0.2);
    color: #00cec9;
    border: 1px solid #00cec9;
}

.ko-tag.two-hko {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
}

.ko-tag.chip {
    color: rgba(255, 255, 255, 0.4);
}

.status-tag {
    font-size: 0.7rem;
    color: #a855f7;
    font-family: 'Minecraft', monospace;
}

/* SPEED TIERS TABLE */
.tb-speed-filter-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.tb-filter-pills-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tb-filter-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    cursor: pointer;
}

.tb-filter-pill.active {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.tb-speed-search-wrap {
    position: relative;
}

.tb-speed-search-wrap i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.tb-speed-table-inp {
    padding: 6px 10px 6px 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
}

.tb-speed-tiers-table-wrap {
    max-height: 480px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.tb-speed-tiers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    text-align: left;
}

.tb-speed-tiers-table thead {
    background: rgba(0, 0, 0, 0.35);
    position: sticky;
    top: 0;
    z-index: 2;
}

.tb-speed-tiers-table th {
    padding: 10px 12px;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.6);
    font-weight: normal;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-speed-tiers-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #fff;
}

.tb-speed-tiers-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.tb-table-poke-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
}

.tb-table-poke-cell img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.tb-table-types-cell {
    display: flex;
    gap: 4px;
}

.tb-diff-tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    font-weight: bold;
}

.tb-diff-tag.pass {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.tb-diff-tag.fail {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

.tb-diff-tag.tie {
    color: #f1c40f;
    background: rgba(241, 196, 15, 0.15);
}

.tb-table-duel-btn {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 4px;
    padding: 3px 8px;
    color: #00cec9;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s;
}

.tb-table-duel-btn:hover {
    background: #00cec9;
    color: #000;
}



/* ==========================================================================
   DETAILED BUILD ANALYSIS 2.0 STYLES (Scope Filters, Breakpoints, Presets, Weather)
   ========================================================================== */

.tb-detailed-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-filter-group .group-lbl {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tb-seg-ctrl {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 2px;
}

.tb-seg-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 5px 10px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tb-seg-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.tb-seg-btn.active {
    background: rgba(0, 206, 201, 0.25);
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

/* SMART EV BREAKPOINTS CARD */
.tb-breakpoints-card {
    background: rgba(18, 22, 36, 0.75);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.tb-breakpoints-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.86rem;
    color: #f59e0b;
    font-weight: bold;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
}

.tb-breakpoints-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.tb-bp-section {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tb-bp-subhead {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 4px;
}

.tb-bp-item {
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid #00cec9;
    padding: 6px 10px;
    border-radius: 0 6px 6px 0;
}

.tb-bp-item.optimal {
    border-left-color: #10b981;
}

.tb-bp-item.empty {
    border-left-color: rgba(255, 255, 255, 0.2);
}

.tb-bp-title {
    font-size: 0.72rem;
    font-weight: bold;
    margin-bottom: 2px;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tb-bp-desc {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.35;
    font-family: sans-serif;
}

.tb-bp-desc b {
    color: #fff;
}

/* OPPONENT EV PRESET SELECTOR (DUEL TAB) */
.tb-opp-preset-selector {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 10px;
}

.tb-opp-preset-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
}

.tb-opp-preset-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.tb-preset-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 4px 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tb-preset-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tb-preset-chip.active {
    background: rgba(0, 206, 201, 0.22);
    border-color: #00cec9;
    color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
    font-weight: bold;
}

.tb-opp-calculated-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.opp-stat-pill {
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 7px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
}

.opp-stat-pill.spe {
    background: rgba(0, 206, 201, 0.15);
    color: #00cec9;
    border: 1px solid rgba(0, 206, 201, 0.3);
}

.opp-desc-tag {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.68rem;
    margin-left: auto;
}

/* BATTLE ENVIRONMENT BAR */
.tb-battle-env-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    background: rgba(14, 18, 30, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 12px 0;
}

.tb-env-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.env-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.6);
}

.tb-env-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tb-env-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tb-env-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tb-env-btn.active.sun {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.tb-env-btn.active.rain {
    background: rgba(59, 130, 246, 0.25);
    border-color: #3b82f6;
    color: #60a5fa;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.tb-env-btn.active.snow {
    background: rgba(219, 234, 254, 0.25);
    border-color: #93c5fd;
    color: #bfdbfe;
    box-shadow: 0 0 8px rgba(147, 197, 253, 0.4);
}

.tb-env-btn.active.sand {
    background: rgba(217, 119, 6, 0.25);
    border-color: #d97706;
    color: #fbbf24;
    box-shadow: 0 0 8px rgba(217, 119, 6, 0.4);
}

.tb-env-btn.active.elec {
    background: rgba(234, 179, 8, 0.25);
    border-color: #eab308;
    color: #fde047;
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.4);
}

.tb-env-btn.active.grass {
    background: rgba(34, 197, 94, 0.25);
    border-color: #22c55e;
    color: #86efac;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.tb-env-btn.active.psych {
    background: rgba(236, 72, 153, 0.25);
    border-color: #ec4899;
    color: #f472b6;
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.4);
}

.tb-env-btn.active.mist {
    background: rgba(168, 85, 247, 0.25);
    border-color: #a855f7;
    color: #d8b4fe;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

.tb-env-btn.active.tr {
    background: rgba(139, 92, 246, 0.25);
    border-color: #a78bfa;
    color: #c4b5fd;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.45);
}

.tb-env-btn.active.intim {
    background: rgba(249, 115, 22, 0.25);
    border-color: #f97316;
    color: #fb923c;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.4);
}

/* COMBATANT HEADERS & ITEMS */
.combatant-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.combatant-mini-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.tb-item-select-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.item-lbl {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.tb-item-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.66rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-item-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tb-item-btn.active {
    background: rgba(234, 179, 8, 0.25);
    border-color: #eab308;
    color: #fde047;
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.35);
}




/* ==========================================================================
   DETAILED BUILD ANALYSIS 2.0 STYLES (Scope Filters, Breakpoints, Presets, Weather)
   ========================================================================== */

.tb-detailed-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tb-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-filter-group .group-lbl {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tb-seg-ctrl {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 2px;
}

.tb-seg-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 5px 10px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tb-seg-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.tb-seg-btn.active {
    background: rgba(0, 206, 201, 0.25);
    color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
}

/* SMART EV BREAKPOINTS CARD */
.tb-breakpoints-card {
    background: rgba(18, 22, 36, 0.75);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.tb-breakpoints-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.86rem;
    color: #f59e0b;
    font-weight: bold;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
}

.tb-breakpoints-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.tb-bp-section {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tb-bp-subhead {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 4px;
}

.tb-bp-item {
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid #00cec9;
    padding: 6px 10px;
    border-radius: 0 6px 6px 0;
}

.tb-bp-item.optimal {
    border-left-color: #10b981;
}

.tb-bp-item.empty {
    border-left-color: rgba(255, 255, 255, 0.2);
}

.tb-bp-title {
    font-size: 0.72rem;
    font-weight: bold;
    margin-bottom: 2px;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tb-bp-desc {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.35;
    font-family: sans-serif;
}

.tb-bp-desc b {
    color: #fff;
}

/* OPPONENT EV PRESET SELECTOR (DUEL TAB) */
.tb-opp-preset-selector {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 10px;
}

.tb-opp-preset-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
}

.tb-opp-preset-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.tb-preset-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 4px 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tb-preset-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tb-preset-chip.active {
    background: rgba(0, 206, 201, 0.22);
    border-color: #00cec9;
    color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.3);
    font-weight: bold;
}

.tb-opp-calculated-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.opp-stat-pill {
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 7px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
}

.opp-stat-pill.spe {
    background: rgba(0, 206, 201, 0.15);
    color: #00cec9;
    border: 1px solid rgba(0, 206, 201, 0.3);
}

.opp-desc-tag {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.68rem;
    margin-left: auto;
}

/* BATTLE ENVIRONMENT BAR */
.tb-battle-env-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    background: rgba(14, 18, 30, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 12px 0;
}

.tb-env-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.env-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.6);
}

.tb-env-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tb-env-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tb-env-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tb-env-btn.active.sun {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.tb-env-btn.active.rain {
    background: rgba(59, 130, 246, 0.25);
    border-color: #3b82f6;
    color: #60a5fa;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.tb-env-btn.active.snow {
    background: rgba(219, 234, 254, 0.25);
    border-color: #93c5fd;
    color: #bfdbfe;
    box-shadow: 0 0 8px rgba(147, 197, 253, 0.4);
}

.tb-env-btn.active.sand {
    background: rgba(217, 119, 6, 0.25);
    border-color: #d97706;
    color: #fbbf24;
    box-shadow: 0 0 8px rgba(217, 119, 6, 0.4);
}

.tb-env-btn.active.elec {
    background: rgba(234, 179, 8, 0.25);
    border-color: #eab308;
    color: #fde047;
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.4);
}

.tb-env-btn.active.grass {
    background: rgba(34, 197, 94, 0.25);
    border-color: #22c55e;
    color: #86efac;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.tb-env-btn.active.psych {
    background: rgba(236, 72, 153, 0.25);
    border-color: #ec4899;
    color: #f472b6;
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.4);
}

.tb-env-btn.active.mist {
    background: rgba(168, 85, 247, 0.25);
    border-color: #a855f7;
    color: #d8b4fe;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

.tb-env-btn.active.tr {
    background: rgba(139, 92, 246, 0.25);
    border-color: #a78bfa;
    color: #c4b5fd;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.45);
}

.tb-env-btn.active.intim {
    background: rgba(249, 115, 22, 0.25);
    border-color: #f97316;
    color: #fb923c;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.4);
}

/* COMBATANT HEADERS & ITEMS */
.combatant-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.combatant-mini-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.tb-item-select-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.item-lbl {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
}

.tb-item-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.66rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-item-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tb-item-btn.active {
    background: rgba(234, 179, 8, 0.25);
    border-color: #eab308;
    color: #fde047;
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.35);
}

/* ==========================================================================
   MODERN HUMAN-FRIENDLY DETAILED ANALYSIS 3.0 STYLES
   ========================================================================== */

.tb-detailed-analysis-content.modern-ui {
    max-width: 1050px !important;
    width: 95% !important;
    background: #0d121f !important;
    border: 1px solid rgba(0, 206, 201, 0.3) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 206, 201, 0.15) !important;
}

.tb-duel-arena {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* TOP TARGET PICKER BAR */
.tb-duel-meta-pick-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.25);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.meta-pick-lbl {
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-chips-scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.meta-chips-scroll::-webkit-scrollbar {
    display: none;
}

.meta-threat-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 3px 10px 3px 6px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.meta-threat-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.meta-threat-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.meta-threat-btn.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.35);
    font-weight: bold;
}

/* 1-SECOND HERO VERDICT BANNER */
.tb-verdict-banner {
    border-radius: 12px;
    padding: 14px 18px;
    border: 1.5px solid transparent;
    transition: all 0.3s ease;
}

.tb-verdict-banner.win {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
    border-color: #10b981;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2);
}

.tb-verdict-banner.danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0.05));
    border-color: #ef4444;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.2);
}

.tb-verdict-banner.trade {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
    border-color: #f59e0b;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2);
}

.tb-verdict-banner.tie {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.2), rgba(0, 206, 201, 0.05));
    border-color: #00cec9;
    box-shadow: 0 4px 20px rgba(0, 206, 201, 0.2);
}

.verdict-main-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.verdict-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.12rem;
    font-weight: bold;
    letter-spacing: 0.3px;
}

.tb-verdict-banner.win .verdict-title { color: #10b981; }
.tb-verdict-banner.danger .verdict-title { color: #ef4444; }
.tb-verdict-banner.trade .verdict-title { color: #f59e0b; }
.tb-verdict-banner.tie .verdict-title { color: #00cec9; }

.verdict-speed-tag {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.85);
}

.verdict-sub-desc {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.88);
    margin-top: 6px;
    line-height: 1.4;
    font-family: sans-serif;
}

/* CLASH STAGE: 2 COMBATANTS FACE TO FACE */
.tb-clash-stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.tb-combatant-card {
    background: rgba(16, 22, 38, 0.7);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tb-combatant-card.has-priority {
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.15);
}

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

.combatant-artwork {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}

.combatant-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.combatant-name {
    font-family: 'Minecraft', monospace;
    font-size: 1.02rem;
    font-weight: bold;
    color: #fff;
}

.combatant-types {
    display: flex;
    align-items: center;
    gap: 4px;
}

.combatant-types .type-badge {
    font-size: 0.66rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'Minecraft', monospace;
    text-transform: capitalize;
}

.combatant-types .tera-badge {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid #a855f7;
    color: #d8b4fe;
    font-size: 0.66rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'Minecraft', monospace;
}

.combatant-spe-stat {
    font-size: 0.76rem;
    color: #00cec9;
    font-family: 'Minecraft', monospace;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* HEALTH BAR WITH GHOST LOSS */
.tb-hp-strip {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hp-label-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
}

.hp-loss-text {
    color: #f59e0b;
    font-weight: bold;
}

.hp-bar-track {
    height: 9px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hp-bar-base {
    height: 100%;
    background: #10b981;
    position: relative;
    border-radius: 4px;
}

.hp-ghost-loss {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: rgba(239, 68, 68, 0.85);
    border-left: 2px solid #fff;
    transition: width 0.3s ease;
}

.hp-ghost-loss.lethal-kill {
    background: rgba(255, 40, 40, 0.95);
    box-shadow: 0 0 8px rgba(255, 40, 40, 0.8);
}

.tb-clash-vs-emblem {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
}

/* 4 INTERACTIVE MOVE CARDS (NINTENDO SWITCH STYLE) */
.tb-moves-picker-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.moves-picker-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-moves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
}

.tb-move-card {
    background: rgba(20, 26, 42, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 9px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-move-card:hover {
    border-color: rgba(0, 206, 201, 0.4);
    transform: translateY(-2px);
    background: rgba(24, 32, 52, 0.85);
}

.tb-move-card.selected {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.12) !important;
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.25);
}

.mcard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mcard-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.86rem;
    font-weight: bold;
    color: #fff;
}

.mcard-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.66rem;
    font-weight: bold;
}

.mcard-badge.ohko {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #10b981;
}

.mcard-badge.roll {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #f59e0b;
}

.mcard-badge.two-hko {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid #3b82f6;
    color: #60a5fa;
}

.mcard-badge.chip {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
}

.mcard-badge.status {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid #a855f7;
    color: #d8b4fe;
}

.mcard-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-family: 'Minecraft', monospace;
}

.mcard-type {
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: capitalize;
}

.mcard-bp {
    color: rgba(255, 255, 255, 0.6);
}

.mcard-mult.super {
    color: #10b981;
    font-weight: bold;
}

.mcard-mult.resist {
    color: #ef4444;
}

.mcard-dmg {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    font-family: sans-serif;
    margin-top: 2px;
}
.mcard-dmg b {
    color: #fff;
}

/* COLLAPSIBLE ACCORDION FOR CONDITIONS */
.tb-env-accordion {
    background: rgba(12, 16, 28, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.tb-env-accordion-header {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.tb-env-accordion-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.accordion-title-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
}

.env-summary-pill {
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: sans-serif;
}

.accordion-arrow {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.76rem;
    transition: transform 0.2s ease;
}

.tb-env-accordion-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
}

.env-body-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.row-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.env-pills-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.env-pill-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.env-pill-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.env-pill-btn.active {
    background: rgba(0, 206, 201, 0.22);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.env-pill-btn.active.sun { background: rgba(245, 158, 11, 0.25); border-color: #f59e0b; color: #f59e0b; }
.env-pill-btn.active.rain { background: rgba(59, 130, 246, 0.25); border-color: #3b82f6; color: #60a5fa; }
.env-pill-btn.active.snow { background: rgba(219, 234, 254, 0.25); border-color: #93c5fd; color: #bfdbfe; }
.env-pill-btn.active.sand { background: rgba(217, 119, 6, 0.25); border-color: #d97706; color: #fbbf24; }
.env-pill-btn.active.elec { background: rgba(234, 179, 8, 0.25); border-color: #eab308; color: #fde047; }
.env-pill-btn.active.grass { background: rgba(34, 197, 94, 0.25); border-color: #22c55e; color: #86efac; }
.env-pill-btn.active.psych { background: rgba(236, 72, 153, 0.25); border-color: #ec4899; color: #f472b6; }
.env-pill-btn.active.mist { background: rgba(168, 85, 247, 0.25); border-color: #a855f7; color: #d8b4fe; }
.env-pill-btn.active.tr { background: rgba(139, 92, 246, 0.25); border-color: #a78bfa; color: #c4b5fd; }
.env-pill-btn.active.intim { background: rgba(249, 115, 22, 0.25); border-color: #f97316; color: #fb923c; }
.env-pill-btn.active.fairy-aura { background: rgba(253, 121, 168, 0.28); border-color: #fd79a8; color: #fd79a8; box-shadow: 0 0 8px rgba(253, 121, 168, 0.4); }
.env-pill-btn.active.dark-aura { background: rgba(162, 155, 254, 0.28); border-color: #a29bfe; color: #a29bfe; box-shadow: 0 0 8px rgba(162, 155, 254, 0.4); }
.env-pill-btn.active.aura-break { background: rgba(0, 184, 148, 0.28); border-color: #00b894; color: #55efc4; box-shadow: 0 0 8px rgba(0, 184, 148, 0.4); }

/* TAB 2 SCORECARD & TIPS */
.tb-meta-scorecard {
    background: rgba(16, 22, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.scorecard-header {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.scorecard-col {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 8px 10px;
    border-top: 3px solid transparent;
}

.scorecard-col.green { border-top-color: #10b981; }
.scorecard-col.yellow { border-top-color: #f59e0b; }
.scorecard-col.red { border-top-color: #ef4444; }

.col-head {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.scorecard-col.green .col-head { color: #10b981; }
.scorecard-col.yellow .col-head { color: #f59e0b; }
.scorecard-col.red .col-head { color: #ef4444; }

.col-pokes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.poke-chip-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    padding: 3px 6px;
    border-radius: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s;
}

.poke-chip-mini:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #00cec9;
}

.poke-chip-mini img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.tb-simple-tips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.simple-tip-box {
    background: rgba(16, 22, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.simple-tip-box.speed .tip-icon { color: #00cec9; font-size: 1.1rem; }
.simple-tip-box.hp .tip-icon { color: #ef4444; font-size: 1.1rem; }

.tip-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tip-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    font-weight: bold;
    color: #fff;
}

.tip-text {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.35;
    font-family: sans-serif;
}

/* ITEM PILL & SYNERGY BADGES */
.our-item-pill {
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    padding: 2px 7px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
}
.our-item-pill.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #6ee7b7;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
}
.our-item-pill.active:hover {
    background: rgba(16, 185, 129, 0.3);
}
.our-item-pill.disabled {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
    color: rgba(239, 68, 68, 0.8);
    text-decoration: line-through;
    opacity: 0.7;
}
.our-item-pill.disabled:hover {
    opacity: 1;
}
.our-item-pill.no-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
}

.ability-badge {
    background: rgba(147, 51, 234, 0.25);
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: #e9d5ff;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.env-pill-btn.team-source {
    border-color: #f59e0b !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.06)) !important;
    color: #fef08a !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
    position: relative;
}

.env-pill-btn.team-source::after {
    content: '\f2b5';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome;
    font-weight: 900;
    margin-left: 5px;
    font-size: 0.72rem;
    color: #fbbf24;
    display: inline-block;
}

.env-pill-btn.team-source:hover {
    background: rgba(245, 158, 11, 0.28) !important;
    border-color: #fbbf24 !important;
}

/* ==========================================================================
   OPPONENT CUSTOMIZATION & FULL SEARCH MODAL STYLES (v3.2)
   ========================================================================== */

/* Top search trigger button */
.meta-search-trigger-btn {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.2), rgba(0, 206, 201, 0.08));
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 20px;
    padding: 5px 12px;
    color: #00cec9;
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.15);
}
.meta-search-trigger-btn:hover {
    background: rgba(0, 206, 201, 0.3);
    border-color: #00cec9;
    color: #fff;
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.35);
}

/* Opponent card action buttons */
.opp-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.opp-action-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 3px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.opp-action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.opp-action-btn.switch:hover {
    border-color: #00cec9;
    color: #00cec9;
}
.opp-action-btn.config.active {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.25);
}

/* Opponent move pill */
.opp-move-pill {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}
.opp-move-pill:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
}

/* Opponent item pill */
.opp-item-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}
.opp-item-pill.active {
    background: rgba(245, 158, 11, 0.18);
    border-color: #f59e0b;
    color: #fde68a;
}
.opp-item-pill:hover {
    background: rgba(255, 255, 255, 0.12);
}

.sash-saved-tag {
    color: #f59e0b;
    font-weight: bold;
    margin-left: 4px;
}
.hp-ghost-loss.sash-protected {
    background: #f59e0b !important;
}

/* OPPONENT CUSTOMIZATION PANEL / DRAWER */
.tb-opp-config-panel {
    background: #101626;
    border: 1px solid rgba(0, 206, 201, 0.25);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.tb-opp-config-panel.expanded {
    border-color: #00cec9;
    box-shadow: 0 0 16px rgba(0, 206, 201, 0.15);
}

.opp-config-header {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
}
.opp-config-header:hover {
    background: rgba(0, 206, 201, 0.06);
}

.config-title-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    color: #fff;
    flex-wrap: wrap;
}

.config-summary-pill {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
}

.opp-config-body {
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 12px;
    background: rgba(7, 10, 19, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 900px) {
    .opp-config-body {
        grid-template-columns: 1fr;
    }
}

.opp-subcard {
    background: rgba(16, 22, 38, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.subcard-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    color: #00cec9;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 6px;
}

.subcard-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.subcard-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
}

.opp-input-text {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.74rem;
    color: #fff;
    font-family: sans-serif;
    outline: none;
    transition: border 0.2s;
}
.opp-input-text:focus {
    border-color: #00cec9;
}

.opp-select {
    background: #0d121f;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.74rem;
    color: #fff;
    font-family: sans-serif;
    outline: none;
    cursor: pointer;
}
.opp-select:focus {
    border-color: #00cec9;
}

.opp-btn-group {
    display: flex;
    gap: 6px;
}
.group-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 5px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s;
}
.group-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.group-btn.active {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.bp-preset-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.bp-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s;
}
.bp-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.bp-chip.active {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    color: #fca5a5;
    font-weight: bold;
}

.tera-inline-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tera-toggle-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 5px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.tera-toggle-btn.active {
    background: rgba(168, 85, 247, 0.25);
    border-color: #a855f7;
    color: #e9d5ff;
}

.tailwind-toggle-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 5px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
}
.tailwind-toggle-btn.active {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.preset-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.preset-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    padding: 3px 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.2s;
}
.preset-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.preset-chip.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #6ee7b7;
    font-weight: bold;
}

.opp-live-stats-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 8px;
    border-radius: 6px;
}
.stat-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.85);
}
.stat-tag.spe {
    color: #00cec9;
}

.ev-sliders-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ev-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.slider-lbl {
    width: 65px;
    font-family: 'Minecraft', monospace;
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.7);
}
.opp-ev-range {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    accent-color: #00cec9;
    cursor: pointer;
}

/* SEARCH MODAL OVERLAY & BOX */
.tb-opp-search-overlay {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100010;
}
.tb-opp-search-modal-box {
    background: #0d121f;
    border: 1px solid rgba(0, 206, 201, 0.35);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 206, 201, 0.2);
    border-radius: 16px;
    max-width: 800px;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.opp-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.opp-search-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.05rem;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.opp-search-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s;
}
.opp-search-close:hover {
    color: #ef4444;
}

.opp-search-controls {
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.opp-search-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 12px;
    gap: 8px;
    transition: border 0.2s;
}
.opp-search-input-wrap:focus-within {
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.2);
}
.opp-search-input-wrap .search-icon {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
}
.opp-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.85rem;
    font-family: sans-serif;
}
.clear-search-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.opp-search-scope-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.scope-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 4px 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
}
.scope-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.scope-pill.active {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
    font-weight: bold;
}

.opp-search-grid {
    padding: 16px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    overflow-y: auto;
    max-height: 55vh;
}

.opp-search-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.opp-search-card:hover {
    background: rgba(0, 206, 201, 0.12);
    border-color: #00cec9;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.2);
}
.opp-search-card.selected {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.35);
}

.search-card-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}
.search-card-bst {
    color: #f59e0b;
}

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

.search-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.search-card-subname {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-bottom: 4px;
}

.search-card-types {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: center;
}
.mini-type {
    font-size: 0.58rem;
    font-family: 'Minecraft', monospace;
    padding: 1px 4px;
    border-radius: 4px;
}

.opp-search-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    padding: 40px 0;
}

/* EV BUDGET STYLES */
.opp-ev-budget-wrap {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.ev-budget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    gap: 8px;
}

.budget-title {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
}
.budget-title b {
    color: #00cec9;
}

.budget-remaining {
    font-size: 0.68rem;
    color: #10b981;
}
.budget-remaining.full {
    color: #f59e0b;
    font-weight: bold;
}

.ev-reset-btn {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}
.ev-reset-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #fff;
}

.ev-budget-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}
.ev-budget-fill {
    height: 100%;
    background: linear-gradient(90deg, #00cec9, #10b981);
    transition: width 0.15s ease;
}
.ev-budget-fill.full {
    background: linear-gradient(90deg, #10b981, #f59e0b);
}

.mini-ev-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    transition: all 0.2s;
}
.mini-ev-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
}

/* ==========================================================================
   TEAMBUILDER SUBTAB: "ПРОВЕРКА НА СОПЕРНИКАХ" (DUEL WORKSPACE)
   ========================================================================== */

.tb-opp-workspace-container {
    width: 100%;
    margin: 0 auto;
    padding: 12px 0 24px 0;
    font-family: inherit;
    color: #f1f2f6;
    animation: tbFadeIn 0.25s ease-out;
}

@keyframes tbFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* SECTION BOXES */
.tb-opp-section-box {
    background: linear-gradient(135deg, rgba(20, 26, 42, 0.9), rgba(15, 20, 32, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.tb-opp-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.tb-opp-box-title {
    font-size: 15px;
    font-weight: 700;
    color: #f1f2f6;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-opp-box-title i {
    color: #00cec9;
    font-size: 16px;
}

.tb-opp-box-hint {
    font-size: 12px;
    color: #a4b0be;
}

/* TEAM SLOTS SELECTOR GRID */
.tb-opp-slots-grid-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .tb-opp-slots-grid-row {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 550px) {
    .tb-opp-slots-grid-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tb-opp-slot-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 120px;
}

.tb-opp-slot-card:hover {
    background: rgba(0, 206, 201, 0.08);
    border-color: rgba(0, 206, 201, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.tb-opp-slot-card.active {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.18), rgba(9, 132, 227, 0.18));
    border: 2px solid #00cec9;
    box-shadow: 0 0 20px rgba(0, 206, 201, 0.35);
}

.tb-opp-slot-card.empty {
    opacity: 0.5;
    border-style: dashed;
}

.tb-opp-slot-card.empty:hover {
    opacity: 0.85;
    border-color: rgba(255, 255, 255, 0.3);
}

.tb-opp-slot-num {
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 10px;
    font-weight: 800;
    color: #747d8c;
    letter-spacing: 0.5px;
}

.tb-opp-slot-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.tb-opp-empty-plus {
    font-size: 24px;
    color: #747d8c;
    margin-bottom: 4px;
}

.tb-opp-slot-empty-text {
    font-size: 11px;
    color: #747d8c;
}

.tb-opp-slot-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}

.tb-opp-slot-name {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tb-opp-slot-item {
    font-size: 10px;
    color: #a4b0be;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: 2px;
}

.tb-opp-slot-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.tb-badge-win {
    background: rgba(46, 204, 113, 0.2);
    border: 1px solid #2ecc71;
    color: #2ecc71;
}

.tb-badge-warn, .tb-badge-tie {
    background: rgba(241, 196, 15, 0.2);
    border: 1px solid #f1c40f;
    color: #f1c40f;
}

.tb-badge-danger {
    background: rgba(231, 76, 60, 0.2);
    border: 1px solid #e74c3c;
    color: #ff7675;
}

/* QUICK THREATS BAR */
.tb-opp-threats-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tb-opp-threat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #dfe4ea;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tb-opp-threat-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.tb-opp-threat-chip.active {
    background: linear-gradient(135deg, #e17055, #d63031);
    border-color: #ff7675;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(225, 112, 85, 0.5);
}

.tb-opp-chip-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.tb-opp-search-dex-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0984e3, #00cec9);
    border: none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 206, 201, 0.3);
}

.tb-opp-search-dex-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.5);
}

/* DUEL VERDICT BANNER */
.tb-opp-verdict-banner {
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    border: 1px solid;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.tb-opp-verdict-banner.verdict-win {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(39, 174, 96, 0.25));
    border-color: #2ecc71;
}

.tb-opp-verdict-banner.verdict-loss {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.15), rgba(192, 57, 43, 0.25));
    border-color: #e74c3c;
}

.tb-opp-verdict-banner.verdict-tie {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.15), rgba(211, 84, 0, 0.25));
    border-color: #f39c12;
}

.tb-opp-verdict-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tb-opp-verdict-main {
    flex: 1;
}

.tb-opp-verdict-title {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
}

.tb-opp-verdict-desc {
    font-size: 13px;
    color: #dfe4ea;
}

.tb-opp-verdict-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* SPEED BADGE */
.tb-speed-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.tb-speed-badge.outspeeds {
    background: rgba(46, 204, 113, 0.2);
    border: 1px solid #2ecc71;
    color: #2ecc71;
}

.tb-speed-badge.outspeeded {
    background: rgba(231, 76, 60, 0.2);
    border: 1px solid #e74c3c;
    color: #ff7675;
}

.tb-speed-badge.tie {
    background: rgba(241, 196, 15, 0.2);
    border: 1px solid #f1c40f;
    color: #f1c40f;
}

/* MAIN FACE-TO-FACE ARENA GRID */
.tb-opp-arena-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .tb-opp-arena-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.tb-opp-card {
    background: linear-gradient(135deg, rgba(20, 26, 42, 0.9), rgba(15, 20, 32, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.tb-opp-our-card {
    border-left: 4px solid #00cec9;
}

.tb-opp-target-card {
    border-left: 4px solid #ff7675;
}

.tb-opp-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tb-opp-card-avatar {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

.tb-opp-card-meta {
    flex: 1;
}

.tb-opp-card-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #a4b0be;
    letter-spacing: 0.5px;
}

.tb-opp-card-title {
    margin: 1px 0 4px 0;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
}

.tb-opp-types-strip {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tb-opp-build-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tb-opp-build-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: #dfe4ea;
}

.tb-opp-build-pill i {
    color: #00cec9;
}

/* STATS STRIP */
.tb-opp-stats-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    background: rgba(0, 0, 0, 0.25);
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tb-opp-stats-strip .stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tb-opp-stats-strip .stat-cell .lbl {
    font-size: 10px;
    font-weight: 700;
    color: #747d8c;
    text-transform: uppercase;
}

.tb-opp-stats-strip .stat-cell .val {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
}

/* PRESETS ROW */
.tb-opp-presets-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tb-opp-preset-btn {
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #dfe4ea;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.tb-opp-preset-btn:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    color: #ffffff;
}

.tb-opp-preset-btn.reset {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.3);
    color: #ff7675;
}

.tb-opp-preset-btn.reset:hover {
    background: rgba(231, 76, 60, 0.25);
    border-color: #e74c3c;
}

/* SELECTORS */
.tb-opp-config-selectors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .tb-opp-config-selectors {
        grid-template-columns: 1fr;
    }
}

.tb-opp-selector-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.tb-opp-selector-group label {
    font-size: 11px;
    font-weight: 700;
    color: #a4b0be;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-opp-select {
    padding: 6px 10px;
    border-radius: 8px;
    background: #0f1420;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 12px;
    outline: none;
    min-width: 0;
}

.tb-opp-select:focus {
    border-color: #00cec9;
}

/* EV BUDGET & SLIDERS */
.tb-opp-ev-budget-box {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.tb-opp-ev-sliders-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 10px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.tb-opp-ev-slider-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
}

.tb-opp-ev-slider-item input[type="range"] {
    width: 100%;
    box-sizing: border-box;
}

.tb-opp-ev-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

.tb-opp-ev-label-row .stat-name {
    font-weight: 700;
    color: #a4b0be;
}

.tb-opp-ev-label-row .stat-val {
    font-weight: 800;
    color: #00cec9;
}

/* MOVES LIST & DAMAGE */
.tb-opp-moves-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-opp-moves-title {
    font-size: 13px;
    font-weight: 700;
    color: #dfe4ea;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-opp-moves-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-tab-move-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background 0.2s;
}

.tb-tab-move-card:hover {
    background: rgba(255, 255, 255, 0.06);
}

.tb-tab-move-card.opp-attack-card {
    border-left: 3px solid #ff7675;
}

.tb-tab-move-row-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tb-tab-move-name {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    flex: 1;
}

.tb-tab-move-type {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.tb-tab-move-cat {
    font-size: 10px;
    color: #a4b0be;
}

.tb-tab-move-bp {
    font-size: 10px;
    font-weight: 700;
    color: #f1c40f;
}

.tb-tab-move-dmg-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tb-tab-dmg-numbers {
    font-size: 12px;
    font-weight: 700;
    color: #dfe4ea;
}

.tb-tab-move-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.badge-ohko {
    background: rgba(46, 204, 113, 0.2);
    border: 1px solid #2ecc71;
    color: #2ecc71;
}

.badge-chance {
    background: rgba(52, 152, 219, 0.2);
    border: 1px solid #3498db;
    color: #3498db;
}

.badge-2hko {
    background: rgba(241, 196, 15, 0.2);
    border: 1px solid #f1c40f;
    color: #f1c40f;
}

.badge-neutral {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #dfe4ea;
}

.badge-immune {
    background: rgba(149, 165, 166, 0.2);
    border: 1px solid #95a5a6;
    color: #95a5a6;
}

.badge-status {
    background: rgba(149, 165, 166, 0.15);
    border: 1px solid rgba(149, 165, 166, 0.35);
    color: #b2bec3;
}

.tb-tab-move-card.status-move-card {
    opacity: 0.8;
    border: 1px dashed rgba(255, 255, 255, 0.12);
}

.tb-tab-move-bar-track {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    overflow: hidden;
}

.tb-tab-move-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.tb-tab-move-bar-fill.badge-ohko { background: #2ecc71; }
.tb-tab-move-bar-fill.badge-chance { background: #3498db; }
.tb-tab-move-bar-fill.badge-2hko { background: #f1c40f; }
.tb-tab-move-bar-fill.badge-neutral { background: #a4b0be; }

/* WHOLE TEAM SUMMARY GRID */
.tb-opp-team-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.tb-opp-tsum-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tb-opp-tsum-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.tb-opp-tsum-card.current {
    border: 2px solid #00cec9;
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.08), rgba(9, 132, 227, 0.08));
    box-shadow: 0 0 16px rgba(0, 206, 201, 0.3);
}

.tb-opp-tsum-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tb-opp-tsum-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.tb-opp-tsum-titles {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb-opp-tsum-name {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}

.tb-opp-tsum-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    width: fit-content;
    text-transform: uppercase;
}

.tb-opp-tsum-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 8px;
}

.tb-opp-tsum-row {
    display: flex;
    justify-content: space-between;
}

.tb-opp-tsum-row .lbl {
    color: #a4b0be;
}

.tb-opp-tsum-row .val {
    font-weight: 700;
}

.tb-opp-tsum-row .dmg-our { color: #2ecc71; }
.tb-opp-tsum-row .dmg-opp { color: #ff7675; }
.tb-opp-tsum-row .spd-win { color: #00cec9; }
.tb-opp-tsum-row .spd-loss { color: #fab1a0; }

.tb-opp-tsum-select-btn {
    width: 100%;
    padding: 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #dfe4ea;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.tb-opp-tsum-select-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #ffffff;
}

.tb-opp-tsum-select-btn.active {
    background: #00cec9;
    border-color: #00cec9;
    color: #0f1420;
}

/* EMPTY STATE */
.tb-opp-empty-state {
    text-align: center;
    padding: 48px 20px;
    background: rgba(20, 26, 42, 0.7);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 14px;
}

.tb-opp-empty-icon {
    font-size: 48px;
    color: #747d8c;
    margin-bottom: 14px;
}

.tb-opp-empty-state h3 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
}

.tb-opp-empty-state p {
    font-size: 13px;
    color: #a4b0be;
    max-width: 460px;
    margin: 0 auto;
}


/* ==========================================================================
   OPPONENT MODAL SELECTORS (NATURE, ITEM, MOVE WITH OVERLAYS)
   ========================================================================== */

.tb-opp-picker-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    padding: 4px 7px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    text-align: left;
    min-height: 28px;
    overflow: hidden;
}

.tb-opp-picker-btn:hover {
    background: rgba(0, 206, 201, 0.14);
    border-color: #00cec9;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.25);
    transform: translateY(-1px);
}

.tb-opp-picker-val {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    min-width: 0;
    flex: 1;
}

.tb-opp-picker-val span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 0.74rem;
    display: inline-block;
}

.tb-opp-picker-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.tb-opp-picker-arrow {
    font-size: 0.68rem;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
    margin-left: 4px;
    flex-shrink: 0;
}

.tb-opp-picker-btn:hover .tb-opp-picker-arrow {
    opacity: 1;
    transform: translateX(2px);
    color: #00cec9;
}

.tb-opp-change-move-btn {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.tb-opp-change-move-btn:hover {
    background: rgba(0, 206, 201, 0.3);
    border-color: #00cec9;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.3);
    transform: translateY(-1px);
}

.tb-tab-move-card.opp-attack-card.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.tb-tab-move-card.opp-attack-card.clickable:hover {
    border-color: #00cec9 !important;
    background: rgba(0, 206, 201, 0.08) !important;
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.25) !important;
    transform: translateY(-1px);
}

.tb-opp-card-badge-hint {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.3);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.68rem;
    color: #00cec9;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.tb-tab-move-card.opp-attack-card.clickable:hover .tb-opp-card-badge-hint {
    background: #00cec9;
    color: #0d1117;
    font-weight: bold;
}



/* ==========================================================================
   SLOT ATTACK BASE POWER / DAMAGE BADGE IN RIGHT CORNER
   ========================================================================== */

.tb-move-bp-badge {
    margin-left: auto;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1px 7px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.25;
    transition: all 0.2s ease;
}

.tb-move-item:hover .tb-move-bp-badge {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.15);
}

.tb-move-bp-badge.cat-physical {
    color: #ff9f43;
    background: rgba(255, 159, 67, 0.14);
    border-color: rgba(255, 159, 67, 0.4);
}

.tb-move-bp-badge.cat-special {
    color: #54a0ff;
    background: rgba(84, 160, 255, 0.14);
    border-color: rgba(84, 160, 255, 0.4);
}

.tb-move-bp-badge.cat-status {
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}



/* Opponent Duel Visual Enhancements */
.type-normal { background: linear-gradient(135deg, #A8A878, #8A8A59) !important; }

.tb-opp-pill-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    vertical-align: middle;
}

.tb-opp-types-strip .db-card-type-badge {
    padding: 3px 10px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.tb-opp-types-strip .db-card-type-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.tb-tab-move-type {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

.tb-tab-move-type .tb-slot-move-type-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    vertical-align: middle;
}

.db-move-name-ru {
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
}


/* Game / Generation Switcher in Movepool */
.db-learnset-sec-title {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.db-learnset-title-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.db-learnset-game-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.db-learnset-game-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-learnset-game-select {
    padding: 6px 14px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    outline: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.db-learnset-game-select:hover,
.db-learnset-game-select:focus {
    border-color: #e94560;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.45);
}
.db-learnset-game-select option {
    background: #0f172a;
    color: #ffffff;
    padding: 6px 10px;
}
@media (max-width: 600px) {
    .db-learnset-sec-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .db-learnset-game-switcher {
        width: 100%;
        justify-content: space-between;
    }
    .db-learnset-game-select {
        flex: 1;
    }
}


/* ==========================================================================
   POKÉMON HOME 3D SHOWCASE & HEXAGONAL STAGE
   ========================================================================== */
.db-profile-img-wrap.is-home-3d {
    width: 270px;
    height: 270px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 206, 201, 0.35);
}

.db-profile-img-wrap.is-home-3d.has-stage {
    background: radial-gradient(circle at 50% 52%, #115793 0%, #0a335c 42%, #041830 82%, #020d1c 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85), inset 0 0 25px rgba(0, 206, 201, 0.35), 0 0 0 1px rgba(0, 206, 201, 0.45);
}

/* Hexagonal Honeycomb Pattern from Pokémon HOME */
.db-profile-img-wrap.is-home-3d.has-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(0, 206, 201, 0.25) 0%, transparent 72%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath d='M13.99 0 L27.99 8.08 L27.99 24.23 L13.99 32.31 L0 24.23 L0 8.08 Z M13.99 16.15 L27.99 24.23 L27.99 40.38 L13.99 48.46 L0 40.38 L0 24.23 Z' fill='none' stroke='%2300cec9' stroke-width='0.75' stroke-opacity='0.22'/%3E%3Ccircle cx='13.99' cy='16.15' r='1.2' fill='%2300cec9' fill-opacity='0.45'/%3E%3Ccircle cx='13.99' cy='32.31' r='1.2' fill='%2300cec9' fill-opacity='0.45'/%3E%3C/svg%3E");
    background-size: 100% 100%, 28px 48px;
    opacity: 0.92;
    pointer-events: none;
    z-index: 1;
}

/* Ground Pedestal / Ambient Shadow */
.db-profile-img-wrap.is-home-3d.has-stage::after {
    content: '';
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 190px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 206, 201, 0.3) 55%, transparent 75%);
    filter: blur(4px);
    z-index: 2;
    pointer-events: none;
}

.db-profile-img-wrap.is-home-3d .db-profile-img {
    position: relative;
    z-index: 3;
    max-width: 88%;
    max-height: 88%;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.85));
    transition: transform 0.15s ease-out;
    transform-origin: center bottom;
    image-rendering: auto;
}

/* 3D HOME Controls Toolbar */
.db-home-controls-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 10px;
    background: rgba(10, 20, 38, 0.85);
    border: 1px solid rgba(0, 206, 201, 0.3);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    z-index: 5;
}

.db-home-pill-btn {
    background: rgba(15, 30, 55, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #e2e8f0;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    padding: 4px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.db-home-pill-btn:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    color: #00cec9;
    transform: translateY(-1px);
}

.db-home-pill-btn.active {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.35), rgba(9, 132, 227, 0.35));
    border-color: #00cec9;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.4);
}


/* ==========================================================================
   WOLFEY & POKÉMON HOME 3D MODEL VIEWER STYLES
   ========================================================================== */
.db-profile-img-wrap.is-home-3d {
    width: 290px;
    height: 290px;
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 206, 201, 0.35);
    transition: transform 0.2s ease, box-shadow 0.25s ease;
}

/* WolfeyVGC Purple Theme (Exact match to screenshot) */



/* ==========================================================================
   UNIFIED ITEM BADGES & TAGS
   ========================================================================== */
.db-item-badges-row {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 3px;
    flex-wrap: wrap;
}
.db-item-cat-badge,
.db-item-tag-badge,
.db-item-detail-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: fit-content;
    height: 20px;
    box-sizing: border-box;
    white-space: nowrap;
    line-height: 1;
    border: 1px solid;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.db-item-tag-badge,
.db-item-detail-tag {
    cursor: pointer;
}
.db-item-tag-badge:hover,
.db-item-detail-tag:hover {
    filter: brightness(1.25);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.tb-item-quick-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: all 0.15s ease;
}
.tb-item-quick-tag:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: #00cec9;
    color: #00cec9;
    transform: translateY(-1px);
}
.tb-item-quick-tag.active {
    background: #00cec9;
    color: #000;
    border-color: #00cec9;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.4);
}

/* ==========================================================================
   DATABASE - REGIONS TAB STYLING (V2 - CLEAN & POLISHED)
   ========================================================================== */
.db-regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 15px;
}

.db-region-card {
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
}

.db-region-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--region-accent, #e94560);
    box-shadow: 0 0 12px var(--region-accent, #e94560);
}

.db-region-card:hover {
    transform: translateY(-5px);
    border-color: var(--region-accent, #e94560);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.55), 0 0 25px rgba(233, 69, 96, 0.2);
}

.db-region-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.db-region-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.db-region-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-region-title-ru {
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.db-region-flag {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.db-region-title-en {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.db-region-jp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 0.72rem;
}

.db-region-jp-kanji {
    font-family: 'Segoe UI', 'Meiryo', 'Yu Gothic', sans-serif;
    color: #ffd32a;
    font-weight: 600;
}

.db-region-jp-romaji {
    font-family: 'Minecraft', monospace !important;
    color: rgba(255, 255, 255, 0.5);
}

.db-region-badges-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.db-region-badge {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.db-region-badge.gen-badge {
    background: var(--region-accent, #e94560);
    color: #fff;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.35);
}

.db-region-badge.year-badge {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.db-region-origin {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #ffdd59;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 221, 89, 0.08);
    border: 1px solid rgba(255, 221, 89, 0.2);
    padding: 6px 10px;
    border-radius: 8px;
    line-height: 1.3;
}

.db-region-games {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.35;
    background: rgba(0, 0, 0, 0.25);
    padding: 6px 10px;
    border-radius: 8px;
    border-left: 2px solid var(--region-accent, #e94560);
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-region-meta-grid,
.db-region-key-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px 12px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.63rem;
}

.db-region-stat {
    font-family: 'Minecraft', monospace !important;
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-region-stat i {
    color: var(--region-accent, #e94560);
    flex-shrink: 0;
}

.db-region-section-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-region-section-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-region-section-title i {
    color: var(--region-accent, #e94560);
}

.db-region-starters-grid,
.db-region-starters-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
}

.db-region-starter-chip {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 4px 6px 4px !important;
    min-height: 106px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-align: center !important;
    position: relative;
}

.db-region-starter-chip:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: var(--region-accent, #e94560) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.db-region-starter-img,
.db-region-starter-chip img.db-region-starter-img,
.db-region-starter-chip img {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6)) !important;
    transition: transform 0.2s ease !important;
}

.db-region-starter-chip:hover .db-region-starter-img,
.db-region-starter-chip:hover img {
    transform: scale(1.12) !important;
}

.db-region-starter-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 4px;
}

.db-region-starter-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.64rem !important;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    text-align: center;
}

.db-region-starter-types {
    display: flex;
    gap: 3px;
    margin-top: 3px;
    justify-content: center;
}

.db-region-type-mini {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    object-fit: contain !important;
}

.db-region-mascots-strip,
.db-region-mascots-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
}

.db-region-mascot-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 3px 8px !important;
    min-height: 48px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    flex: 1 1 calc(50% - 6px);
    max-width: calc(50% - 3px);
    overflow: hidden;
}

.db-region-mascot-item:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #ffd700 !important;
    transform: translateY(-2px) !important;
}

.db-region-mascot-img,
.db-region-mascot-item img.db-region-mascot-img,
.db-region-mascot-item img {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

.db-region-mascot-item:hover .db-region-mascot-img,
.db-region-mascot-item:hover img {
    transform: scale(1.15) !important;
}

.db-region-mascot-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    color: #ffd700;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-region-mechanics-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.db-region-mech-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 206, 201, 0.12);
    color: #00cec9;
    border: 1px solid rgba(0, 206, 201, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.db-region-card-actions,
.db-region-footer {
    display: flex !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding-top: 6px !important;
}

.db-region-action-btn,
.db-region-btn-pokedex,
.db-region-btn-detail {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.66rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    font-weight: 600;
    border: none;
    text-align: center;
    line-height: 1.2;
}

.db-region-action-btn.detail-btn,
.db-region-btn-detail {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.9);
}

.db-region-action-btn.detail-btn:hover,
.db-region-btn-detail:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    transform: translateY(-1px);
}

.db-region-action-btn.pokemon-filter-btn,
.db-region-btn-pokedex {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.3), rgba(233, 69, 96, 0.55));
    border: 1px solid #e94560;
    color: #fff;
}

.db-region-action-btn.pokemon-filter-btn:hover,
.db-region-btn-pokedex:hover {
    background: #e94560;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.45);
    transform: translateY(-1px);
}

/* ==========================================================================
   REGIONS MODAL DETAIL WINDOW
   ========================================================================== */
.db-region-detail-modal {
    max-width: 780px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    background: linear-gradient(145deg, #101524, #182035) !important;
    border-radius: 18px !important;
    padding: 24px !important;
    color: #fff !important;
}

.db-region-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.db-region-modal-badge-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.db-region-modal-title-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.db-region-modal-top-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.db-region-modal-name {
    font-family: 'Minecraft', monospace;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.db-region-modal-sub {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.db-region-modal-lore-box {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0;
}

.db-region-modal-lore-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: var(--modal-accent, #e94560);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.db-region-modal-lore-text {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.82rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

.db-region-modal-grid-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.db-region-modal-meta-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.db-region-meta-header {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-region-meta-header i {
    color: var(--modal-accent, #e94560);
}

.db-region-meta-val {
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    color: #fff;
    margin-top: 2px;
}

.db-region-meta-sub {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.35;
    margin-top: 2px;
}

.db-region-modal-section {
    margin-bottom: 18px;
}

.db-region-modal-section-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.db-region-modal-section-title i {
    color: var(--modal-accent, #e94560);
}

.db-region-modal-starters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.db-region-modal-starter-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s;
}

.db-region-modal-starter-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--modal-accent, #e94560);
    transform: translateY(-2px);
}

.db-region-modal-starter-img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}

.db-region-modal-starter-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.db-region-modal-starter-id {
    font-family: 'Minecraft', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
}

.db-region-modal-starter-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-region-modal-starter-types {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}

.db-region-modal-mascots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.db-region-modal-mascot-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.2s;
}

.db-region-modal-mascot-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffd700;
    transform: translateY(-2px);
}

.db-region-modal-mascot-img {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}

.db-region-modal-mascot-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.db-region-modal-mascot-id {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.45);
}

.db-region-modal-mascot-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: #ffd700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-region-modal-mascot-role {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.25;
}

.db-region-locations-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.db-region-location-pill {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.db-region-location-pill i {
    color: var(--modal-accent, #e94560);
}

.db-region-modal-mechs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-region-modal-mech-item {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 206, 201, 0.06);
    border: 1px solid rgba(0, 206, 201, 0.18);
    padding: 6px 12px;
    border-radius: 8px;
}

.db-region-modal-mech-item i {
    color: #00cec9;
    flex-shrink: 0;
}

.db-region-modal-footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.db-region-modal-filter-btn {
    width: 100%;
    padding: 12px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(233, 69, 96, 0.65));
    border: 1px solid #e94560;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(233, 69, 96, 0.35);
}

.db-region-modal-filter-btn:hover {
    background: #e94560;
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.6);
    transform: translateY(-2px);
}



/* ==========================================================================
   REGIONAL MAP PREVIEW & FULLSCREEN LIGHTBOX STYLES
   ========================================================================== */

.db-region-action-btn.map-btn {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.35);
    color: #00cec9;
    flex: 0 0 auto;
    padding: 7px 12px;
}

.db-region-action-btn.map-btn:hover {
    background: #00cec9;
    color: #111;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 206, 201, 0.35);
}

.db-region-map-section {
    margin-top: 18px;
}

.db-region-map-open-btn {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    color: #00cec9;
    background: rgba(0, 206, 201, 0.12);
    border: 1px solid rgba(0, 206, 201, 0.35);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.db-region-map-open-btn:hover {
    background: #00cec9;
    color: #111;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 206, 201, 0.3);
}

.db-region-map-preview-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #0e111a;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    max-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.db-region-map-preview-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center 30%;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.db-region-map-preview-wrap:hover .db-region-map-preview-img {
    transform: scale(1.04);
    filter: brightness(1.08);
}

.db-region-map-preview-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.75) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 14px;
    transition: background 0.3s ease;
}

.db-region-map-preview-wrap:hover .db-region-map-preview-overlay {
    background: linear-gradient(180deg, rgba(0, 206, 201, 0.05) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.db-region-map-zoom-badge {
    pointer-events: none;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.76rem;
    color: #fff;
    background: rgba(16, 26, 46, 0.88);
    border: 1px solid rgba(0, 206, 201, 0.5);
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease;
}

.db-region-map-preview-wrap:hover .db-region-map-zoom-badge {
    background: #00cec9;
    color: #111;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.45);
}

/* Fullscreen Lightbox */
.db-map-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 15, 0.92);
    backdrop-filter: blur(8px);
    z-index: 999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: dbFadeIn 0.25s ease;
}

.db-map-lightbox-container {
    width: 95vw;
    max-width: 1200px;
    height: 90vh;
    background: #121826;
    border: 2px solid rgba(0, 206, 201, 0.4);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 206, 201, 0.2);
    overflow: hidden;
    position: relative;
}

.db-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: rgba(18, 24, 38, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
}

.db-map-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.db-map-icon {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
}

.db-map-title-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.db-map-title-main {
    font-family: 'Minecraft', monospace !important;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.5px;
}

.db-map-title-sub {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.db-map-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-map-btn {
    font-family: 'Minecraft', monospace !important;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.db-map-btn:hover {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #00cec9;
    transform: translateY(-1px);
}

.db-map-btn.db-map-close-btn:hover {
    background: rgba(235, 77, 75, 0.35);
    border-color: #eb4d4b;
    color: #ff7675;
}

.db-map-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: radial-gradient(circle at center, #1b2438 0%, #0c101a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
}

.db-map-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.08s ease-out;
    transform-origin: center center;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.65);
    border-radius: 8px;
    pointer-events: none;
}

.db-map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: rgba(14, 18, 28, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    z-index: 10;
}

.db-map-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #00cec9;
}

.db-map-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

@keyframes dbFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}


/* ==========================================================================
   REGIONAL STORYLINE & CHRONICLES STYLES
   ========================================================================== */

.db-region-story-section {
    margin-top: 20px;
}

.db-region-story-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.db-region-story-card {
    background: rgba(14, 18, 28, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 16px;
    position: relative;
    transition: all 0.25s ease;
    border-left: 3px solid #00cec9;
}

.db-region-story-card:hover {
    background: rgba(22, 28, 44, 0.85);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateX(4px);
}

.db-region-story-card.prologue {
    border-left-color: #00cec9;
}

.db-region-story-card.conflict {
    border-left-color: #eb4d4b;
}

.db-region-story-card.conflict.sequel {
    border-left-color: #74b9ff;
}

.db-region-story-card.climax {
    border-left-color: #a29bfe;
}

.db-region-story-card.aftermath {
    border-left-color: #fdcb6e;
}

.db-region-story-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.db-region-story-badge {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.76rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    letter-spacing: 0.3px;
}

.db-region-story-card.prologue .db-region-story-badge {
    color: #00cec9;
}

.db-region-story-card.conflict .db-region-story-badge {
    color: #ff7675;
}

.db-region-story-card.conflict.sequel .db-region-story-badge {
    color: #74b9ff;
}

.db-region-story-card.climax .db-region-story-badge {
    color: #a29bfe;
}

.db-region-story-card.aftermath .db-region-story-badge {
    color: #ffeaa7;
}

.db-region-story-text {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.8rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    white-space: pre-line;
}


/* ==========================================================================
   GYM BADGES & LEADERS SHOWCASE STYLES
   ========================================================================== */

.db-region-gyms-section {
    margin-top: 20px;
}

.db-gym-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.db-gym-badge-card {
    background: rgba(14, 18, 28, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 3px solid var(--badge-accent, #00cec9);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.db-gym-badge-card:hover {
    background: rgba(20, 26, 42, 0.92);
    border-color: var(--badge-accent, #00cec9);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 206, 201, 0.15);
}

.db-gym-badge-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.db-gym-badge-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 3px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.db-gym-badge-real-img {
    width: 36px;
    height: 36px;
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
    transition: transform 0.25s ease;
}

.db-gym-badge-card:hover .db-gym-badge-real-img {
    transform: scale(1.15) rotate(4deg);
}

.db-gym-badge-type-ico {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.db-gym-badge-title-box {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.db-gym-badge-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-gym-badge-leader {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.db-gym-badge-city {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-gym-badge-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    gap: 6px;
}

.db-gym-type-pill {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.64rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.db-gym-ace-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 2px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-gym-ace-chip:hover {
    background: rgba(0, 206, 201, 0.2);
    border-color: #00cec9;
    transform: scale(1.03);
}

.db-gym-ace-img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
    flex-shrink: 0 !important;
}

.db-gym-ace-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}


/* ==========================================================================
   REGION PROFILE & GYM LEADER DOSSIER STYLES (FULL-PAGE ENCYCLOPEDIA)
   ========================================================================== */

.db-region-profile-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 10px 16px 60px;
    animation: fadeIn 0.3s ease;
    box-sizing: border-box;
}

/* Top Navigation Bar */
.db-regprof-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 10px 18px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    margin-bottom: 4px;
}

.db-regprof-back-btn {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.db-regprof-back-btn:hover {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.35);
}

.db-regprof-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem;
    color: #94a3b8;
}
.db-regprof-crumb-cur {
    color: #f1f5f9;
    font-weight: bold;
}
.db-regprof-crumb-sep {
    color: #64748b;
    font-size: 0.65rem;
}

.db-regprof-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-regprof-nav-btn {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-regprof-nav-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}
.db-regprof-nav-placeholder {
    width: 32px;
}

/* Hero Banner */
.db-regprof-hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 36px 40px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    background-size: cover;
    background-position: center;
}
.db-regprof-hero-glow {
    position: absolute;
    top: -40%;
    right: -15%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    opacity: 0.38;
}
.db-regprof-hero-content {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 320px;
}
.db-regprof-title-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.db-regprof-title-main {
    font-family: 'Minecraft', monospace !important;
    font-size: 2.3rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.5px;
    margin: 0;
}
.db-regprof-title-sub {
    font-family: 'Minecraft', monospace !important;
    font-size: 1.15rem;
    color: #cbd5e1;
    font-weight: normal;
}
.db-regprof-jp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 14px;
}
.db-region-jp-kanji {
    font-size: 1.05rem;
    color: #f8fafc;
    font-weight: bold;
}
.db-region-jp-romaji {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    color: #94a3b8;
}
.db-regprof-hero-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.db-region-badge {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(8px);
}
.db-regprof-desc {
    font-size: 0.96rem;
    line-height: 1.65;
    color: #e2e8f0;
    max-width: 720px;
    margin: 0 0 16px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.db-regprof-hero-art-side {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.db-regprof-hero-map-art {
    width: 290px;
    height: 185px;
    object-fit: cover;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
}
.db-regprof-hero-map-art:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.db-regprof-hero-map-btn {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    padding: 7px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(8px);
    transition: all 0.2s;
}
.db-regprof-hero-map-btn:hover {
    background: rgba(233, 69, 96, 0.35);
    border-color: #e94560;
    color: #ffffff;
}

/* Tabs Bar */
.db-regprof-tabs-bar {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    scrollbar-width: none;
}
.db-regprof-tabs-bar::-webkit-scrollbar {
    display: none;
}
.db-regprof-tab-btn {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem;
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.65);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.db-regprof-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}
.db-regprof-tab-btn.active {
    color: #ffffff;
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    box-shadow: 0 0 16px rgba(233, 69, 96, 0.4);
    font-weight: bold;
}

/* Tab Panels */
.db-regprof-tab-body {
    animation: fadeIn 0.25s ease;
}
.db-regprof-columns-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.db-regprof-panel {
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 24px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.db-regprof-panel-title {
    font-family: 'Minecraft', monospace !important;
    font-size: 1.02rem;
    color: #f8fafc;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}

/* Facts & Details */
.db-regprof-facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.db-regprof-fact-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.db-regprof-fact-item .label {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem;
    color: #94a3b8;
    text-transform: uppercase;
}
.db-regprof-fact-item .value {
    font-size: 0.88rem;
    color: #f1f5f9;
    font-weight: 600;
}

/* Locations & Mechanics */
.db-region-locations-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.db-region-location-pill {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.db-region-location-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
.db-region-modal-mechs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.db-region-modal-mech-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #e2e8f0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.db-region-modal-mech-item i {
    color: #fbbf24;
    margin-top: 3px;
    font-size: 1rem;
}

/* Gym Leaders & Badges Grid */
.db-regprof-gyms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
    gap: 18px;
}
.db-regprof-gym-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px);
}
.db-regprof-gym-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.db-regprof-gym-top {
    display: flex;
    align-items: center;
    gap: 14px;
}
.db-regprof-badge-art-box {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    flex-shrink: 0;
}
.db-gym-badge-real-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
.db-gym-badge-type-ico {
    font-size: 1.8rem;
    color: #cbd5e1;
}
.db-regprof-gym-title-box {
    flex: 1;
    min-width: 0;
}
.db-regprof-gym-badge-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.96rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-regprof-gym-city {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
.db-gym-type-pill {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.62rem;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 4px;
}
.db-regprof-gym-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.db-regprof-gym-leader-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.84rem;
    color: #f1f5f9;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-gym-ace-chip {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem;
    padding: 4px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.db-gym-ace-chip:hover {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #ffffff;
}
.db-gym-ace-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.db-regprof-leader-action {
    margin-top: 4px;
}
.db-regprof-leader-dossier-btn {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.7rem;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid rgba(233, 69, 96, 0.5);
    background: rgba(233, 69, 96, 0.16);
    color: #ff8597;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
}
.db-regprof-leader-dossier-btn:hover {
    background: #e94560;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(233, 69, 96, 0.5);
}

/* Map Viewer */
.db-regprof-map-viewer-wrap {
    position: relative;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #0b1120;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
}
.db-regprof-map-viewer-img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* Regional Pokédex */
.db-regprof-pokedex-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.db-regprof-pokedex-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.db-regprof-search-input {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    width: 220px;
    outline: none;
    transition: border-color 0.2s;
}
.db-regprof-search-input:focus {
    border-color: #e94560;
}
.db-regprof-type-select {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #1e293b;
    color: #ffffff;
    cursor: pointer;
    outline: none;
}
.db-regprof-pokedex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 12px;
}
.db-regprof-poke-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.db-regprof-poke-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(30, 41, 59, 0.9);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.db-regprof-poke-num {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.62rem;
    color: #94a3b8;
    margin-bottom: 4px;
}
.db-regprof-poke-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
    transition: transform 0.2s;
}
.db-regprof-poke-card:hover .db-regprof-poke-img {
    transform: scale(1.1);
}
.db-regprof-poke-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    font-weight: bold;
    color: #f8fafc;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.db-regprof-poke-types {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}
.db-regprof-poke-type-pill {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.55rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: bold;
}

/* Starters & Mascots */
.db-regprof-starters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}
.db-regprof-starter-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.db-regprof-starter-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.db-regprof-starter-img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
    transition: transform 0.25s;
    flex-shrink: 0;
}
.db-regprof-starter-card:hover .db-regprof-starter-img {
    transform: scale(1.12);
}
.db-regprof-starter-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.db-regprof-starter-id {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem;
    color: #94a3b8;
}
.db-regprof-starter-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 1.05rem;
    font-weight: bold;
    color: #ffffff;
}
.db-regprof-starter-types {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.db-regprof-mascots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.db-regprof-mascot-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.db-regprof-mascot-card:hover {
    transform: translateY(-4px);
    border-color: #fbbf24;
    box-shadow: 0 12px 28px rgba(251, 191, 36, 0.25);
}
.db-regprof-mascot-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
    transition: transform 0.25s;
    flex-shrink: 0;
}
.db-regprof-mascot-card:hover .db-regprof-mascot-img {
    transform: scale(1.12);
}
.db-regprof-mascot-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.db-regprof-mascot-role {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem;
    color: #fbbf24;
    text-transform: uppercase;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
}
.db-regprof-mascot-id {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem;
    color: #94a3b8;
}
.db-regprof-mascot-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 1.15rem;
    font-weight: bold;
    color: #ffffff;
}

/* ==========================================================================
   GYM LEADER DOSSIER MODAL STYLES
   ========================================================================== */

.db-gym-leader-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(3, 7, 18, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box;
}

.db-leader-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
    overflow-y: auto;
}

.db-leader-modal-window {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 940px;
    max-height: 90vh;
    overflow-y: auto;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
    animation: modalScaleIn 0.25s ease-out;
    margin: auto;
    cursor: default;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.db-leader-modal-window::-webkit-scrollbar {
    width: 8px;
}
.db-leader-modal-window::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.db-leader-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.1rem;
}
.db-leader-close-btn:hover {
    background: #e94560;
    border-color: #e94560;
    transform: rotate(90deg);
}

.db-leader-header {
    position: relative;
    overflow: hidden;
    padding: 32px 32px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background-size: cover;
    background-position: center;
}
.db-leader-avatar-box {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.db-leader-badge-art {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}
.db-leader-header-text {
    flex: 1;
    min-width: 260px;
}
.db-leader-title {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    margin-bottom: 4px;
}
.db-leader-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    margin: 0;
}
.db-leader-sub-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.db-leader-city {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.db-leader-dialogue-box {
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 14px 18px;
    margin: 20px 32px 10px;
    position: relative;
    font-style: italic;
}
.db-leader-dialogue-label {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.62rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-style: normal;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-leader-quote {
    font-size: 0.92rem;
    color: #f1f5f9;
    line-height: 1.5;
}

.db-leader-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 16px 32px;
}
.db-leader-info-block {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
}
.db-leader-info-title {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem;
    color: #f8fafc;
    font-weight: bold;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-leader-info-text {
    font-size: 0.86rem;
    color: #cbd5e1;
    line-height: 1.55;
    margin: 0;
}

.db-leader-teams-section {
    padding: 16px 32px 32px;
}
.db-leader-teams-title {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.db-leader-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}
.db-leader-pk-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.db-leader-pk-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.db-leader-pk-card.is-ace {
    border-color: rgba(251, 191, 36, 0.5);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
}
.db-leader-ace-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.58rem;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(251, 191, 36, 0.25);
    border: 1px solid #fbbf24;
    color: #fbbf24;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.db-leader-pk-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.db-leader-pk-sprite {
    width: 54px;
    height: 54px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
    flex-shrink: 0;
}
.db-leader-pk-info {
    flex: 1;
    min-width: 0;
}
.db-leader-pk-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-leader-pk-level {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem;
    color: #fbbf24;
    font-weight: bold;
    margin-top: 2px;
}
.db-leader-pk-ability {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.62rem;
    color: #94a3b8;
    margin-top: 2px;
}
.db-leader-pk-moves {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.db-leader-move-chip {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.6rem;
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

@media (max-width: 768px) {
    .db-regprof-title-main {
        font-size: 1.8rem;
    }
    .db-regprof-hero {
        padding: 24px 20px;
    }
    .db-regprof-hero-map-art {
        width: 100%;
        max-width: 300px;
        height: auto;
    }
    .db-regprof-columns-2 {
        grid-template-columns: 1fr;
    }
    .db-leader-header {
        padding: 24px 20px;
    }
    .db-leader-dialogue-box,
    .db-leader-info-grid,
    .db-leader-teams-section {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* Extra Leader Portrait and Gym Card Avatar Styles */
.db-leader-portrait-img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
    transition: transform 0.25s ease;
}
.db-leader-avatar-box:hover .db-leader-portrait-img {
    transform: scale(1.08);
}
.db-gym-card-leader-avatar {
    width: 24px;
    height: 24px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    vertical-align: middle;
    margin-right: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.db-leader-sub-row .db-gym-type-pill {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem;
    padding: 4px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
}


/* Dual-Mode Regional Pokédex Selector & Hints */
.db-regprof-dex-mode-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.db-regprof-dex-mode-btn {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.76rem;
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.7);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(10px);
}
.db-regprof-dex-mode-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
}
.db-regprof-dex-mode-btn.active {
    background: rgba(233, 69, 96, 0.22);
    border-color: #e94560;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.35);
    font-weight: bold;
}
.db-dex-count-pill {
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
.db-regprof-dex-mode-btn.active .db-dex-count-pill {
    background: #e94560;
    color: #ffffff;
}
.db-regprof-dex-hint {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3.5px solid #fbbf24;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #cbd5e1;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.db-regprof-poke-subnum {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.55rem;
    color: #64748b;
    margin-left: 4px;
}
@media (max-width: 768px) {
    .db-regprof-dex-mode-bar {
        flex-direction: column;
    }
    .db-regprof-dex-mode-btn {
        width: 100%;
        justify-content: space-between;
    }
}

/* Uniform Pixelated Rendering for All Regions Sprites */
.db-leader-pk-sprite,
.db-regprof-starter-img,
.db-regprof-mascot-img,
.db-region-modal-starter-img,
.db-region-modal-mascot-img,
.db-regprof-pokedex-img,
.db-gym-ace-img,
.db-region-starter-img,
.db-region-mascot-img {
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
}

/* ============================================================
   POKÉMON LEAGUE: ELITE FOUR & CHAMPIONS CARDS STYLES
   ============================================================ */

/* Elite Four Grid & Cards */
.db-regprof-e4-card {
    border-color: rgba(179, 136, 255, 0.25);
    background: linear-gradient(145deg, rgba(20, 24, 45, 0.92) 0%, rgba(15, 23, 42, 0.88) 100%);
}
.db-regprof-e4-card:hover {
    border-color: rgba(179, 136, 255, 0.6);
    box-shadow: 0 12px 32px rgba(179, 136, 255, 0.2), 0 0 20px rgba(179, 136, 255, 0.1);
}
.db-regprof-e4-avatar-box {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    overflow: hidden;
    padding: 0;
}
.db-e4-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    transition: transform 0.25s ease;
}
.db-regprof-e4-card:hover .db-e4-avatar-img {
    transform: scale(1.08);
}

/* Regional Champions VIP Cards */
.db-regprof-champions-grid {
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.db-regprof-champion-card {
    background: linear-gradient(145deg, rgba(35, 30, 15, 0.95) 0%, rgba(20, 18, 10, 0.9) 100%);
    border: 1px solid rgba(255, 215, 0, 0.45);
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.12), inset 0 0 16px rgba(255, 215, 0, 0.05);
    position: relative;
    padding-top: 32px;
}
.db-regprof-champion-card:hover {
    border-color: #ffd700;
    box-shadow: 0 16px 36px rgba(255, 215, 0, 0.28), 0 0 24px rgba(255, 215, 0, 0.18), inset 0 0 20px rgba(255, 215, 0, 0.08);
}
.db-regprof-champ-crown-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #d4af37 0%, #ffd700 50%, #d4af37 100%);
    color: #1a1a2e;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-align: center;
    padding: 3px 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.db-regprof-champ-avatar-box {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
    border: 1px solid rgba(255, 215, 0, 0.5);
    padding: 0;
    overflow: hidden;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.2);
}
.db-champ-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    transition: transform 0.25s ease;
}
.db-regprof-champion-card:hover .db-champ-avatar-img {
    transform: scale(1.1);
}
.db-regprof-champ-name {
    font-family: 'Minecraft', monospace !important;
    font-size: 1.12rem !important;
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}
.db-regprof-champ-title {
    color: #f6e58d !important;
    font-weight: 500;
}
.champ-type-pill {
    background: rgba(255, 215, 0, 0.15) !important;
    border: 1px solid rgba(255, 215, 0, 0.6) !important;
    color: #ffd700 !important;
    font-weight: bold;
}
.champ-ace-chip {
    border-color: rgba(255, 215, 0, 0.4) !important;
    background: rgba(255, 215, 0, 0.1) !important;
}
.champ-ace-chip:hover {
    border-color: #ffd700 !important;
    background: rgba(255, 215, 0, 0.2) !important;
}
.champ-dossier-btn {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(255, 215, 0, 0.35) 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.6) !important;
    color: #ffd700 !important;
    font-weight: bold;
}
.champ-dossier-btn:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.45) 0%, rgba(255, 215, 0, 0.6) 100%) !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.4) !important;
}

/* Role Badges on Leader Modal Portrait */
.db-leader-role-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    z-index: 2;
}
.db-leader-role-badge.champ {
    background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%);
    color: #1a1a2e;
    border: 2px solid #fff;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: champCrownPulse 2s infinite ease-in-out;
}
.db-leader-role-badge.e4 {
    background: linear-gradient(135deg, #b388ff 0%, #7c4dff 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 12px rgba(179, 136, 255, 0.6);
}
@keyframes champCrownPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
    50% { transform: scale(1.12); box-shadow: 0 0 18px rgba(255, 215, 0, 0.9); }
}


/* ============================================================
   ALOLA LEAGUE VERSION SWITCHER & BADGES
   ============================================================ */
.db-league-version-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    padding: 8px 14px;
    margin-top: 24px;
    margin-bottom: 16px;
    backdrop-filter: blur(8px);
}
.db-league-ver-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.db-league-version-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px;
    border-radius: 10px;
}
.db-league-ver-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-league-ver-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.db-league-ver-btn.active {
    background: linear-gradient(135deg, rgba(255, 121, 63, 0.25), rgba(255, 77, 77, 0.35));
    border: 1px solid rgba(255, 121, 63, 0.65);
    color: #fff;
    box-shadow: 0 2px 10px rgba(255, 77, 77, 0.3);
}
.db-ver-pill {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 700;
}
.db-e4-ver-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.db-e4-ver-tag.sm {
    background: rgba(255, 165, 2, 0.2);
    border: 1px solid rgba(255, 165, 2, 0.6);
    color: #ffa502;
}
.db-e4-ver-tag.usum {
    background: rgba(112, 161, 255, 0.2);
    border: 1px solid rgba(112, 161, 255, 0.6);
    color: #70a1ff;
}
.db-regprof-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 700;
    margin-left: 10px;
    background: rgba(179, 136, 255, 0.18);
    border: 1px solid rgba(179, 136, 255, 0.5);
    color: #d1b3ff;
    letter-spacing: 0.02em;
}
.db-regprof-count-badge.gold {
    background: rgba(255, 215, 0, 0.18);
    border: 1px solid rgba(255, 215, 0, 0.5);
    color: #ffd700;
}


/* Galar Sword & Shield badges & DLC cards */
.db-regprof-count-badge.teal {
    background: rgba(0, 206, 201, 0.18);
    border: 1px solid rgba(0, 206, 201, 0.5);
    color: #00cec9;
}
.db-e4-ver-tag.sword {
    background: rgba(235, 77, 75, 0.18);
    border: 1px solid rgba(235, 77, 75, 0.6);
    color: #ff7979;
}
.db-e4-ver-tag.shield {
    background: rgba(104, 109, 224, 0.18);
    border: 1px solid rgba(104, 109, 224, 0.6);
    color: #686de0;
}
.db-regprof-dlc-card {
    border-color: rgba(0, 206, 201, 0.25);
    background: linear-gradient(145deg, rgba(16, 32, 40, 0.92) 0%, rgba(10, 22, 30, 0.88) 100%);
}
.db-regprof-dlc-card:hover {
    border-color: rgba(0, 206, 201, 0.6);
    box-shadow: 0 12px 32px rgba(0, 206, 201, 0.2), 0 0 20px rgba(0, 206, 201, 0.1);
}
.db-regprof-dlc-avatar-box {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    overflow: hidden;
    padding: 0;
}
.db-dlc-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    transition: transform 0.25s ease;
}
.db-regprof-dlc-card:hover .db-dlc-avatar-img {
    transform: scale(1.08);
}


.db-leader-role-badge.finalist {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 165, 2, 0.35));
    border: 1.5px solid rgba(255, 215, 0, 0.7);
    color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}
.db-leader-role-badge.dlc {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.25), rgba(9, 132, 227, 0.35));
    border: 1.5px solid rgba(0, 206, 201, 0.7);
    color: #00cec9;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}


/* === REGIONAL BATTLE GIMMICKS & PHENOMENA === */
.db-region-gimmick-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid var(--gimmick-color, #ffd32a);
    border-radius: 8px;
    margin: 8px 0;
    font-size: 0.8rem;
    color: #e2e8f0;
    transition: all 0.25s ease;
}
.db-region-gimmick-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--gimmick-color, #ffd32a);
    transform: translateX(2px);
}
.db-region-gimmick-chip-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
}
.db-region-gimmick-chip-label {
    line-height: 1.3;
}
.db-region-gimmick-chip-label b {
    color: var(--gimmick-color, #ffd32a);
    font-weight: 600;
}

/* Region Profile Gimmick Panel */
.db-regprof-gimmick-panel {
    background: linear-gradient(135deg, rgba(30, 30, 48, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-left: 4px solid var(--gimmick-accent, #ffd32a) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 211, 42, 0.05);
    margin-bottom: 24px;
    border-radius: 14px;
    padding: 22px;
}
.db-regprof-gimmick-card {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.db-regprof-gimmick-icon-box {
    width: 88px;
    height: 88px;
    min-width: 88px;
    border-radius: 18px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 0%, rgba(10, 15, 30, 0.8) 85%);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
}
.db-regprof-gimmick-symbol-img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
    transition: transform 0.3s ease;
}
.db-regprof-gimmick-card:hover .db-regprof-gimmick-symbol-img {
    transform: scale(1.08) rotate(2deg);
}
.db-regprof-gimmick-fa-box {
    font-size: 2.2rem;
    color: var(--gimmick-accent, #ffd32a);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
.db-regprof-gimmick-info {
    flex: 1;
    min-width: 0;
}
.db-regprof-gimmick-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.db-regprof-gimmick-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
    letter-spacing: 0.3px;
}
.db-regprof-gimmick-badge {
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.db-regprof-gimmick-desc {
    color: #cbd5e1;
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0 0 14px 0;
}
.db-regprof-gimmick-features-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px 16px;
    background: rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.db-regprof-gimmick-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.45;
}
.db-regprof-gimmick-feature-item i {
    margin-top: 3px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .db-regprof-gimmick-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .db-regprof-gimmick-header-row {
        justify-content: center;
    }
    .db-regprof-gimmick-feature-item {
        text-align: left;
    }
}


/* ==========================================================================
   User Bar Nickname Edit & Nickname Change Modal
   ========================================================================== */

.user-bar-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 3px 4px 3px 8px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    user-select: none;
}
.user-bar-name-wrap:hover {
    background: rgba(233, 69, 96, 0.18);
}
.user-bar-name-wrap:hover #userBarName {
    color: #ff8c94;
}
.user-edit-name-btn {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.2s, transform 0.2s;
    display: inline-flex;
    align-items: center;
}
.user-bar-name-wrap:hover .user-edit-name-btn {
    color: #e94560;
    transform: scale(1.15);
}

#changeNicknameModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100002;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    box-sizing: border-box;
}
.nickname-modal-card {
    max-width: 440px;
    width: 92%;
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
    font-family: 'Minecraft', monospace;
    position: relative;
    box-sizing: border-box;
    animation: modalPopIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes modalPopIn {
    0% { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.nickname-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}
.nickname-modal-title {
    color: #e94560;
    font-size: 0.95rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nickname-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s, transform 0.2s;
}
.nickname-modal-close:hover {
    color: #e94560;
    transform: scale(1.1);
}
.nickname-status-box {
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 0.65rem;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.nickname-status-box.available {
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #a8f0c2;
}
.nickname-status-box.available i {
    color: #2ecc71;
    font-size: 1.1rem;
    margin-top: 1px;
}
.nickname-status-box.cooldown {
    background: rgba(243, 156, 18, 0.12);
    border: 1px solid rgba(243, 156, 18, 0.4);
    color: #fed7aa;
}
.nickname-status-box.cooldown i {
    color: #f39c12;
    font-size: 1.1rem;
    margin-top: 1px;
}
.nickname-input-group {
    margin-bottom: 14px;
    text-align: left;
}
.nickname-input-label {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.62rem;
    margin-bottom: 6px;
}
.nickname-input-field {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    background: rgba(15, 52, 96, 0.6);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.nickname-input-field:focus {
    border-color: #e94560;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.35);
}
.nickname-input-field:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(15, 52, 96, 0.2);
}
.nickname-char-count {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: right;
    margin-top: 4px;
}
.nickname-error-msg {
    color: #ff6b81;
    font-size: 0.62rem;
    margin-top: 8px;
    margin-bottom: 12px;
    display: none;
    line-height: 1.35;
    padding: 8px 12px;
    background: rgba(255, 107, 129, 0.12);
    border-radius: 6px;
    border-left: 3px solid #ff6b81;
    text-align: left;
}
.nickname-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}
.nickname-btn-save {
    padding: 9px 20px;
    background: #e94560;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nickname-btn-save:hover:not(:disabled) {
    background: #ff5277;
}
.nickname-btn-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.nickname-btn-cancel {
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.nickname-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}


/* ==========================================================================
   Move Learners Modal Filters & Search
   ========================================================================== */

.db-learners-filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.db-learners-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 52, 96, 0.45);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1;
}
.db-learners-filter-pill i {
    font-size: 0.7rem;
    color: #e94560;
    transition: color 0.2s;
}
.db-learners-filter-pill:hover {
    background: rgba(233, 69, 96, 0.2);
    border-color: rgba(233, 69, 96, 0.4);
    color: #fff;
    transform: translateY(-1px);
}
.db-learners-filter-pill.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.45);
}
.db-learners-filter-pill.active i {
    color: #fff;
}
.db-learners-pill-count {
    opacity: 0.75;
    font-size: 0.58rem;
    font-weight: normal;
}
.db-learners-filter-pill.active .db-learners-pill-count {
    opacity: 0.95;
}
.db-learners-search-wrap {
    flex: 1;
    min-width: 140px;
    position: relative;
    margin-left: auto;
}
.db-learners-search-wrap i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.65rem;
    pointer-events: none;
}
.db-learners-search-wrap input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 12px 6px 28px;
    background: rgba(15, 52, 96, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.db-learners-search-wrap input:focus {
    border-color: #e94560;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.35);
}
@media (max-width: 600px) {
    .db-learners-search-wrap {
        width: 100%;
        min-width: 100%;
        margin-left: 0;
        order: 10;
        margin-top: 4px;
    }
}


/* ==========================================================================
   Colored Nicknames (Purple, Gold, Cyan) & Admin Modal
   ========================================================================== */

/* Purple / Фиолетовый */
.nick-color-purple {
    color: #c084fc !important;
    text-shadow: 0 0 8px rgba(192, 132, 252, 0.75), 0 0 16px rgba(168, 85, 247, 0.45);
    font-weight: bold;
}

/* Gold / Золотой */
.nick-color-gold {
    background: linear-gradient(135deg, #fff3bf 0%, #ffd700 45%, #f59f00 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
    font-weight: bold;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
}

/* Cyan / Голубой */
.nick-color-cyan {
    color: #38bdf8 !important;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.75), 0 0 16px rgba(14, 165, 233, 0.45);
    font-weight: bold;
}

/* Admin Color Options Modal Buttons */
.admin-color-option-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(15, 52, 96, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    transition: all 0.2s ease;
    text-align: left;
    outline: none;
}
.admin-color-option-btn:hover {
    background: rgba(233, 69, 96, 0.2);
    border-color: rgba(233, 69, 96, 0.5);
    transform: translateY(-1px);
}
.admin-color-option-btn.selected {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.28);
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
}


/* ==========================================================================
   GIMMICKS TAB ICONS & VISUAL ENHANCEMENTS
   ========================================================================== */
.db-tab-icon-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: -2px;
    margin-right: 4px;
    display: inline-block;
}

.db-pill-icon-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 5px;
    display: inline-block;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.db-gimmick-banner-icon {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-gimmick-banner-icon-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease;
}

.db-gimmick-card:hover .db-gimmick-banner-icon-img {
    transform: scale(1.15) rotate(4deg);
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.35));
}

.db-gimmick-detail-modal .db-gimmick-banner-icon {
    width: 64px;
    height: 64px;
    background: rgba(0, 0, 0, 0.32);
    border-radius: 16px;
}

.db-gimmick-modal-icon-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
    animation: gimmickModalPulse 3s infinite ease-in-out;
}

@keyframes gimmickModalPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.db-gimmick-inline-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
    display: inline-block;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}


/* ==========================================================================
   DEDICATED GIMMICK PAGES STYLES
   ========================================================================== */
.db-gimmick-page-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    animation: gimmickPageFadeIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes gimmickPageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.db-gimmick-page-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.db-gimmick-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    transition: all 0.2s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.db-gimmick-back-btn:hover {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #ffd32a;
    transform: translateX(-3px);
}

.db-gimmick-header-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.db-gimmick-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: #cbd5e1;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-gimmick-nav-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
}

.db-gimmick-nav-pill.active {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-weight: bold;
}

.db-gimmick-page-hero {
    border-radius: 16px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 20px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.db-gimmick-hero-icon-box {
    width: 78px;
    height: 78px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.db-gimmick-hero-icon-img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
    animation: gimmickHeroPulse 3.5s infinite ease-in-out;
}

@keyframes gimmickHeroPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.db-gimmick-hero-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.db-gimmick-hero-tag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.db-gimmick-hero-gen-tag {
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    padding: 3px 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffd32a;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.db-gimmick-hero-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.65rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    margin: 0;
}

.db-gimmick-hero-sub {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}

.db-gimmick-hero-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.45;
    margin-top: 4px;
}

.db-gimmick-subtabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.db-gimmick-subtab-btn {
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #cbd5e1;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.db-gimmick-subtab-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.db-gimmick-subtab-btn.active {
    background: rgba(233, 69, 96, 0.35);
    border-color: #e94560;
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 0 16px rgba(233, 69, 96, 0.4);
}

.db-gimmick-info-card {
    background: #16213e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    margin-top: 10px;
}

@media (max-width: 768px) {
    .db-gimmick-page-hero {
        flex-direction: column;
        text-align: center;
        padding: 18px 16px;
        gap: 14px;
    }
    .db-gimmick-hero-tag-row {
        justify-content: center;
    }
    .db-gimmick-page-topbar {
        flex-direction: column;
        align-items: stretch;
    }
    .db-gimmick-header-switcher {
        justify-content: center;
    }
}


/* Gimmick Table Interactive Links & Hover States */
.db-table-poke-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.15s ease, transform 0.15s ease;
}
.db-table-poke-card:hover {
    background: rgba(224, 86, 253, 0.14);
    transform: translateY(-1px);
}
.db-table-poke-link {
    cursor: pointer;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}
.db-table-poke-card:hover .db-table-poke-link,
.db-table-poke-link:hover {
    color: #e056fd !important;
    text-shadow: 0 0 8px rgba(224, 86, 253, 0.5);
.db-mega-table-sprite {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
    flex-shrink: 0;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.db-mega-table-names {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
    transform: scale(1.1);
    filter: drop-shadow(0 4px 10px rgba(224, 86, 253, 0.5));
}
.db-table-item-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.db-table-item-card:hover {
    background: rgba(255, 211, 42, 0.14);
    border-color: rgba(255, 211, 42, 0.4);
    transform: translateY(-1px);
}
.db-table-item-link {
    cursor: pointer;
    transition: color 0.15s ease;
}
.db-table-item-card:hover .db-table-item-link {
    color: #fff !important;
    text-shadow: 0 0 6px rgba(255, 211, 42, 0.6);
}
.db-table-ability-card {
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(116, 185, 255, 0.06);
    border: 1px solid rgba(116, 185, 255, 0.15);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.db-table-ability-card:hover {
    background: rgba(116, 185, 255, 0.18);
    border-color: rgba(116, 185, 255, 0.45);
    transform: translateY(-1px);
}
.db-gimmick-filter-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-gimmick-filter-chip:hover {
    background: rgba(224, 86, 253, 0.2);
    border-color: #e056fd;
    color: #fff;
}
.db-gimmick-filter-chip.active {
    background: linear-gradient(135deg, #e056fd, #be2edd);
    border-color: #e056fd;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(224, 86, 253, 0.4);
}
.db-gimmick-search-input:focus {
    border-color: #e056fd !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 8px rgba(224, 86, 253, 0.3) !important;
}


/* Rules & Meta - Infographic Layout */
.db-gimmick-rules-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}
.db-gimmick-rules-hero {
    background: linear-gradient(135deg, rgba(224, 86, 253, 0.16) 0%, rgba(15, 23, 42, 0.85) 100%);
    border: 1px solid rgba(224, 86, 253, 0.35);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.db-gimmick-rules-hero-header {
    display: flex;
    align-items: center;
    gap: 16px;
}
.db-gimmick-rules-hero-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(224, 86, 253, 0.6));
    flex-shrink: 0;
}
.db-gimmick-rules-hero-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.15rem;
    color: #ffffff;
    margin: 0 0 5px 0;
    text-shadow: 0 0 14px rgba(224, 86, 253, 0.5);
}
.db-gimmick-rules-hero-sub {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.45;
}
.db-gimmick-rules-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.db-rules-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 0.75rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.9);
}
.db-rules-pill i {
    color: #e056fd;
}
.db-rules-pill.primal i {
    color: #ff4757;
}

/* Rules Grid */
.db-gimmick-rules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 880px) {
    .db-gimmick-rules-grid {
        grid-template-columns: 1fr;
    }
}
.db-rule-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    backdrop-filter: blur(10px);
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.db-rule-card:hover {
    border-color: rgba(224, 86, 253, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 18px rgba(224, 86, 253, 0.25);
    transform: translateY(-2px);
    background: rgba(22, 33, 62, 0.88);
}
.db-rule-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.db-rule-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.db-rule-icon-box.purple {
    background: rgba(224, 86, 253, 0.18);
    color: #e056fd;
    border: 1px solid rgba(224, 86, 253, 0.35);
}
.db-rule-icon-box.cyan {
    background: rgba(0, 206, 201, 0.18);
    color: #00cec9;
    border: 1px solid rgba(0, 206, 201, 0.35);
}
.db-rule-icon-box.gold {
    background: rgba(241, 196, 15, 0.18);
    color: #f1c40f;
    border: 1px solid rgba(241, 196, 15, 0.35);
}
.db-rule-icon-box.green {
    background: rgba(46, 213, 115, 0.18);
    color: #2ed573;
    border: 1px solid rgba(46, 213, 115, 0.35);
}
.db-rule-icon-box.emerald {
    background: rgba(16, 172, 132, 0.2);
    color: #1dd1a1;
    border: 1px solid rgba(29, 209, 161, 0.4);
}
.db-rule-icon-box.orange {
    background: rgba(255, 107, 129, 0.2);
    color: #ff6b81;
    border: 1px solid rgba(255, 107, 129, 0.4);
}

.db-rule-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 3px;
    font-weight: bold;
}
.db-rule-badge.purple { background: rgba(224, 86, 253, 0.15); color: #e056fd; }
.db-rule-badge.cyan { background: rgba(0, 206, 201, 0.15); color: #00cec9; }
.db-rule-badge.gold { background: rgba(241, 196, 15, 0.15); color: #f1c40f; }
.db-rule-badge.green { background: rgba(46, 213, 115, 0.15); color: #2ed573; }
.db-rule-badge.emerald { background: rgba(29, 209, 161, 0.15); color: #1dd1a1; }
.db-rule-badge.orange { background: rgba(255, 107, 129, 0.15); color: #ff6b81; }

.db-rule-title {
    margin: 0;
    font-family: 'Minecraft', monospace;
    font-size: 0.92rem;
    color: #ffffff;
}
.db-rule-text {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
    margin: 0;
}
.db-rule-text b {
    color: #ffffff;
}
.db-rule-highlight-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 9px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.42;
    margin-top: auto;
}
.db-rule-highlight-box i {
    color: #55efc4;
    margin-top: 2px;
    flex-shrink: 0;
}
.db-rule-highlight-box.emerald i { color: #1dd1a1; }
.db-rule-highlight-box.orange i { color: #ff9f43; }

/* Featured Wide Cards */
.db-rule-featured-content {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
}
@media (max-width: 620px) {
    .db-rule-featured-content {
        flex-direction: column;
        align-items: stretch;
    }
}
.db-rule-featured-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db-rule-featured-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(46, 213, 115, 0.25);
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.db-rule-featured-preview:hover {
    background: rgba(46, 213, 115, 0.15);
    border-color: #2ed573;
    transform: scale(1.05);
}
.db-rule-featured-preview img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.db-rule-featured-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
}

.db-rule-primal-duo {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    flex-shrink: 0;
}
.db-rule-primal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 10px 12px;
    min-width: 120px;
    max-width: 155px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}
.db-rule-primal-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.05);
}
.db-rule-primal-item img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}
.db-rule-primal-item .db-rule-featured-name {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    font-size: 0.72rem;
    word-break: break-word;
}


.db-table-move-card {
    cursor: pointer;
    transition: all 0.15s ease;
}
.db-table-move-link {
    cursor: pointer;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}
.db-table-move-card:hover .db-table-move-link,
.db-table-move-link:hover {
    color: #ffd32a !important;
    text-shadow: 0 0 8px rgba(255, 211, 42, 0.6);
}

/* Dynamax Crimson accents */
.db-rule-icon-box.red {
    background: rgba(255, 71, 87, 0.2);
    color: #ff4757;
    border: 1px solid rgba(255, 71, 87, 0.4);
}
.db-rule-badge.red {
    background: rgba(255, 71, 87, 0.18);
    color: #ff4757;
    border: 1px solid rgba(255, 71, 87, 0.3);
}
.db-rule-highlight-box.red i {
    color: #ff4757;
}
.db-rule-card.featured-dynamax {
    border-color: rgba(255, 71, 87, 0.35);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(255, 71, 87, 0.08) 100%);
}
.db-rule-card.featured-dynamax:hover {
    border-color: #ff4757;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 71, 87, 0.35);
}

/* Terastallization & Stellar Crystal accents */
.db-rule-icon-box.stellar {
    background: linear-gradient(135deg, rgba(255, 107, 129, 0.25) 0%, rgba(241, 196, 15, 0.25) 50%, rgba(0, 206, 201, 0.25) 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.4);
}
.db-rule-badge.stellar {
    background: linear-gradient(135deg, rgba(255, 107, 129, 0.2) 0%, rgba(241, 196, 15, 0.2) 50%, rgba(0, 206, 201, 0.2) 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
.db-rule-card.featured-stellar {
    border-color: rgba(0, 206, 201, 0.4);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(0, 206, 201, 0.08) 50%, rgba(224, 86, 253, 0.08) 100%);
}
.db-rule-card.featured-stellar:hover {
    border-color: #00cec9;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(0, 206, 201, 0.35);
}
.db-ogerpon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.db-ogerpon-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.db-ogerpon-card:hover {
    transform: translateY(-2px);
    background: rgba(22, 33, 62, 0.88);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* Clickable Tera Shard Card in Table and Hero */
.db-clickable-shard {
    cursor: pointer !important;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}
.db-clickable-shard:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(0, 206, 201, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0, 206, 201, 0.25) !important;
    background: rgba(0, 206, 201, 0.08) !important;
}


/* ==========================================================================
   SUPPORTER & TRAINER WARDROBE CUSTOMIZATION STYLES
   ========================================================================== */

.user-bar-companion-sprite {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    vertical-align: middle;
    margin-right: 4px;
}
.user-bar-companion-sprite:hover {
    transform: scale(1.25) translateY(-2px);
}
.user-bar-companion-sprite.shiny {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.75));
    animation: shinyGlow 2.5s ease-in-out infinite alternate;
}
@keyframes shinyGlow {
    0% { filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5)); }
    100% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.95)) drop-shadow(0 0 2px #fff); }
}

.supporter-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-right: 4px;
    vertical-align: middle;
    cursor: pointer;
}

.user-bar-wardrobe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 211, 42, 0.12);
    border: 1px solid rgba(255, 211, 42, 0.35);
    color: #ffd32a;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.82rem;
    margin-left: 6px;
}
.user-bar-wardrobe-btn:hover {
    background: rgba(255, 211, 42, 0.25);
    border-color: #ffd32a;
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 0 12px rgba(255, 211, 42, 0.4);
}

/* Nickname Colors & Gradients */
.nick-color-fire {
    color: #ff4757 !important;
    text-shadow: 0 0 8px rgba(255, 71, 87, 0.6) !important;
}
.nick-color-water {
    color: #1e90ff !important;
    text-shadow: 0 0 8px rgba(30, 144, 255, 0.6) !important;
}
.nick-color-grass {
    color: #2ed573 !important;
    text-shadow: 0 0 8px rgba(46, 213, 115, 0.6) !important;
}
.nick-color-electric {
    color: #ffa502 !important;
    text-shadow: 0 0 8px rgba(255, 165, 2, 0.6) !important;
}
.nick-color-purple {
    color: #a855f7 !important;
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.6) !important;
}
.nick-color-cyan {
    display: inline-block !important;
    vertical-align: middle !important;
    background: linear-gradient(135deg, #22d3ee, #00cec9) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
    filter: drop-shadow(0 0 5px rgba(0, 206, 201, 0.65));
}
.nick-color-amethyst {
    display: inline-block !important;
    vertical-align: middle !important;
    background: linear-gradient(135deg, #f0abfc, #a855f7) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
    filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.65));
}
.nick-color-emerald {
    display: inline-block !important;
    vertical-align: middle !important;
    background: linear-gradient(135deg, #6ee7b7, #05c46b) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
    filter: drop-shadow(0 0 5px rgba(5, 196, 107, 0.65));
}
.nick-color-ice {
    display: inline-block !important;
    vertical-align: middle !important;
    background: linear-gradient(135deg, #e0f2fe, #38bdf8) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.7));
}
.nick-color-ruby {
    display: inline-block !important;
    vertical-align: middle !important;
    background: linear-gradient(135deg, #fda4af, #e11d48) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
    filter: drop-shadow(0 0 5px rgba(225, 29, 72, 0.65));
}
.nick-color-sakura {
    display: inline-block !important;
    vertical-align: middle !important;
    background: linear-gradient(135deg, #fbcfe8, #ec4899) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
    filter: drop-shadow(0 0 5px rgba(236, 72, 153, 0.65));
}
.nick-color-gold {
    display: inline-block !important;
    vertical-align: middle !important;
    background: linear-gradient(45deg, #f1c40f, #ff9f43, #ffd32a, #f1c40f) !important;
    background-size: 250% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
    filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.45));
    animation: goldShine 3s linear infinite;
}
.nick-color-stellar {
    display: inline-block !important;
    vertical-align: middle !important;
    background: linear-gradient(90deg, #ff7675, #fdcb6e, #55efc4, #74b9ff, #a29bfe, #ff7675) !important;
    background-size: 250% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold !important;
    filter: drop-shadow(0 0 6px rgba(0, 206, 201, 0.5));
    animation: stellarRainbow 4s linear infinite;
}

@keyframes goldShine {
    0% { background-position: 0% center; }
    100% { background-position: 250% center; }
}
@keyframes stellarRainbow {
    0% { background-position: 0% center; }
    100% { background-position: 250% center; }
}

/* Modal Overlay & Card */
.supporter-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 7, 15, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.supporter-modal-card {
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background: #0f1423;
    border: 2px solid rgba(255, 211, 42, 0.4);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 211, 42, 0.15);
    font-family: 'Minecraft', monospace;
    position: relative;
    box-sizing: border-box;
    animation: modalPopIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.supporter-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}
.supporter-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.supporter-modal-title {
    margin: 0;
    font-size: 1.05rem;
    color: #fff;
    font-family: 'Minecraft', monospace;
}
.supporter-tier-pill {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 211, 42, 0.15);
    border: 1px solid rgba(255, 211, 42, 0.4);
    color: #ffd32a;
}
.supporter-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.15s;
}
.supporter-modal-close:hover {
    color: #ff4757;
}

/* Status Banner */
.supporter-status-banner {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}
.supporter-status-banner.active-banner {
    background: rgba(46, 213, 115, 0.1);
    border-color: rgba(46, 213, 115, 0.35);
    color: #2ed573;
}
.supporter-status-banner.inactive-banner {
    background: rgba(255, 71, 87, 0.08);
    border-color: rgba(255, 71, 87, 0.3);
    color: #ff6b81;
}

/* Live Preview Box */
.supporter-preview-box {
    background: rgba(15, 20, 35, 0.94);
    border: 1px dashed rgba(255, 211, 42, 0.45);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    text-align: center;
    position: sticky;
    top: -22px;
    z-index: 10;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.supporter-preview-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.supporter-live-preview {
    overflow: visible !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 18px;
    background: rgba(15, 23, 42, 0.7);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.supporter-preview-sprite {
    width: 38px;
    height: 38px;
    object-fit: contain;
    image-rendering: pixelated;
    transition: transform 0.2s;
}
.supporter-preview-nick {
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
}

/* Supporter Accordion System */
.supporter-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.supporter-accordion-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.supporter-accordion-item:hover {
    border-color: rgba(255, 255, 255, 0.22);
}

.supporter-accordion-item.is-open {
    border-color: rgba(255, 211, 42, 0.45);
    background: rgba(20, 27, 45, 0.6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), inset 0 0 14px rgba(255, 211, 42, 0.04);
}

.supporter-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    background: rgba(15, 23, 42, 0.45);
    gap: 8px;
}

.supporter-accordion-header:hover {
    background: rgba(255, 255, 255, 0.06);
}

.supporter-accordion-item.is-open .supporter-accordion-header {
    background: rgba(255, 211, 42, 0.08);
    border-bottom: 1px solid rgba(255, 211, 42, 0.2);
}

.supporter-accordion-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.3px;
    font-family: 'Minecraft', monospace;
    flex-shrink: 0;
}

.supporter-accordion-title i {
    color: #ffd32a;
    font-size: 0.85rem;
    width: 16px;
    text-align: center;
}

.supporter-accordion-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.supporter-accordion-summary {
    font-size: 0.66rem;
    font-family: 'Minecraft', monospace;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 211, 42, 0.12);
    border: 1px solid rgba(255, 211, 42, 0.3);
    color: #ffd32a;
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.supporter-accordion-chevron {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    transition: transform 0.25s ease, color 0.2s;
    flex-shrink: 0;
}

.supporter-accordion-item.is-open .supporter-accordion-chevron {
    transform: rotate(180deg);
    color: #ffd32a;
}

.supporter-accordion-body {
    display: none;
    padding: 12px 14px 14px;
    animation: accSlideDown 0.22s ease-out;
}

.supporter-accordion-item.is-open .supporter-accordion-body {
    display: block;
}

@keyframes accSlideDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sections */
.supporter-section {
    margin-bottom: 18px;
}
.supporter-section-title {
    font-size: 0.76rem;
    color: #ffd32a;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Controls */
.supporter-companion-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
}
.supporter-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.supporter-input:focus {
    border-color: #ffd32a;
    outline: none;
}
.supporter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 180px;
    overflow-y: auto;
    background: #141b2f;
    border: 1px solid rgba(255, 211, 42, 0.4);
    border-radius: 8px;
    margin-top: 4px;
    z-index: 100;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8);
}
.supporter-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.75rem;
    color: #fff;
    transition: background 0.15s;
}
.supporter-dropdown-item:hover {
    background: rgba(255, 211, 42, 0.15);
    color: #ffd32a;
}
.supporter-dropdown-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    image-rendering: pixelated;
}

.supporter-shiny-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.72rem;
    white-space: nowrap;
    user-select: none;
    transition: all 0.2s;
}
.supporter-shiny-toggle:hover {
    background: rgba(255, 215, 0, 0.18);
    border-color: #ffd32a;
}
.supporter-shiny-toggle input {
    cursor: pointer;
}

.supporter-btn-reset {
    background: rgba(255, 71, 87, 0.12);
    border: 1px solid rgba(255, 71, 87, 0.3);
    color: #ff4757;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.8rem;
}
.supporter-btn-reset:hover {
    background: rgba(255, 71, 87, 0.25);
    border-color: #ff4757;
}

/* Color & Badge Presets Grid */
.supporter-color-presets,
.supporter-badge-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 6px;
}
.supporter-color-chip,
.supporter-badge-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 7px 6px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #fff;
    text-align: center;
    transition: all 0.15s;
    user-select: none;
}
.supporter-color-chip:hover,
.supporter-badge-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}
.supporter-color-chip.active,
.supporter-badge-chip.active {
    border-color: #ffd32a;
    background: rgba(255, 211, 42, 0.15);
    box-shadow: 0 0 10px rgba(255, 211, 42, 0.25);
}

.chip-cyan span {
    background: linear-gradient(135deg, #22d3ee, #00cec9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.chip-amethyst span {
    background: linear-gradient(135deg, #f0abfc, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.chip-emerald span {
    background: linear-gradient(135deg, #6ee7b7, #05c46b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.chip-ice span {
    background: linear-gradient(135deg, #e0f2fe, #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.chip-ruby span {
    background: linear-gradient(135deg, #fda4af, #e11d48);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.chip-sakura span {
    background: linear-gradient(135deg, #fbcfe8, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.gold-chip span {
    background: linear-gradient(45deg, #f1c40f, #ff9f43);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.stellar-chip span {
    background: linear-gradient(90deg, #ff7675, #fdcb6e, #55efc4, #74b9ff, #a29bfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

/* ==========================================================================
   COMPANION AURAS & EFFECTS SYSTEM (BOOSTY PERKS)
   ========================================================================== */
.companion-aura-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* Aura Chips in Wardrobe */
.supporter-aura-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 6px;
    margin-bottom: 6px;
}
.supporter-aura-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 7px 6px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #fff;
    text-align: center;
    transition: all 0.15s;
    user-select: none;
    position: relative;
}
.supporter-aura-chip:hover:not(.tier-locked) {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}
.supporter-aura-chip.active {
    border-color: #ffd32a;
    background: rgba(255, 211, 42, 0.15);
    box-shadow: 0 0 10px rgba(255, 211, 42, 0.25);
}
.supporter-aura-chip.tier-locked {
    opacity: 0.45;
    cursor: not-allowed;
    border-style: dashed;
}
.supporter-aura-chip.chip-shiny span {
    background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.supporter-aura-chip.chip-terastal span {
    background: linear-gradient(135deg, #00cec9, #81ecec, #a29bfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.supporter-aura-chip.chip-stellar span {
    background: linear-gradient(90deg, #ff7675, #fdcb6e, #55efc4, #74b9ff, #a29bfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.supporter-aura-chip.chip-inferno span {
    background: linear-gradient(135deg, #ff4757, #ff6b81, #ffa502);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.supporter-aura-chip.chip-shadow span {
    background: linear-gradient(135deg, #a855f7, #6c5ce7, #2d3436);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.supporter-aura-chip.chip-thunder span {
    background: linear-gradient(135deg, #fef08a, #facc15, #eab308);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.supporter-aura-chip.chip-frost span {
    background: linear-gradient(135deg, #ffffff, #7dd3fc, #0284c7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.supporter-aura-chip.chip-ocean span {
    background: linear-gradient(135deg, #38bdf8, #06b6d4, #0284c7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.supporter-aura-chip.chip-nature span {
    background: linear-gradient(135deg, #6ee7b7, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.supporter-aura-chip.chip-dragon span {
    background: linear-gradient(135deg, #60a5fa, #a855f7, #f43f5e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.supporter-aura-chip.chip-toxic span {
    background: linear-gradient(135deg, #bef264, #84cc16, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.supporter-aura-chip.chip-aurora span {
    background: linear-gradient(135deg, #5eead4, #38bdf8, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

/* 1. Shiny Aura (Golden Sparkles) */
.companion-aura-container.aura-shiny img,
img.aura-shiny,
.user-card-companion-wrap.aura-shiny img,
#previewCompanionImg.aura-shiny,
#userBarNameImage.aura-shiny {
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px #facc15) drop-shadow(0 0 18px rgba(234, 179, 8, 0.85)) !important;
    animation: aura-pulse-shiny 2.2s ease-in-out infinite alternate !important;
}
@keyframes aura-pulse-shiny {
    0% {
        filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 8px #fde047) drop-shadow(0 0 14px rgba(234, 179, 8, 0.7));
    }
    100% {
        filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 14px #eab308) drop-shadow(0 0 24px rgba(245, 158, 11, 0.95)) drop-shadow(0 0 32px rgba(251, 191, 36, 0.5));
    }
}

/* 2. Terastal Aura (Cyan/Violet Crystal Shimmer) */
.companion-aura-container.aura-terastal img,
img.aura-terastal,
.user-card-companion-wrap.aura-terastal img,
#previewCompanionImg.aura-terastal,
#userBarNameImage.aura-terastal {
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px #22d3ee) drop-shadow(0 0 18px #818cf8) !important;
    animation: aura-pulse-terastal 2.6s ease-in-out infinite alternate !important;
}
@keyframes aura-pulse-terastal {
    0% {
        filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 8px #06b6d4) drop-shadow(0 0 14px #6366f1);
    }
    50% {
        filter: drop-shadow(0 0 6px #a5f3fc) drop-shadow(0 0 14px #22d3ee) drop-shadow(0 0 24px #a855f7) drop-shadow(0 0 32px rgba(6, 182, 212, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 11px #38bdf8) drop-shadow(0 0 18px #818cf8);
    }
}

/* 3. Stellar Cosmic Aura (Rainbow Prismatic Drift) */
.companion-aura-container.aura-stellar img,
img.aura-stellar,
.user-card-companion-wrap.aura-stellar img,
#previewCompanionImg.aura-stellar,
#userBarNameImage.aura-stellar {
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 11px #ec4899) drop-shadow(0 0 20px #3b82f6) !important;
    animation: aura-pulse-stellar 4s linear infinite !important;
}
@keyframes aura-pulse-stellar {
    0% {
        filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 11px #f43f5e) drop-shadow(0 0 20px #eab308);
    }
    25% {
        filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 11px #eab308) drop-shadow(0 0 20px #10b981);
    }
    50% {
        filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 11px #06b6d4) drop-shadow(0 0 20px #6366f1);
    }
    75% {
        filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 11px #a855f7) drop-shadow(0 0 20px #ec4899);
    }
    100% {
        filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 11px #f43f5e) drop-shadow(0 0 20px #eab308);
    }
}

/* 4. Inferno Fire Aura (Blazing Heatwave) */
.companion-aura-container.aura-inferno img,
img.aura-inferno,
.user-card-companion-wrap.aura-inferno img,
#previewCompanionImg.aura-inferno,
#userBarNameImage.aura-inferno {
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px #f97316) drop-shadow(0 0 20px #dc2626) !important;
    animation: aura-pulse-inferno 1.8s ease-in-out infinite alternate !important;
}
@keyframes aura-pulse-inferno {
    0% {
        filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 9px #fb923c) drop-shadow(0 0 16px #ea580c);
    }
    50% {
        filter: drop-shadow(0 0 6px #fed7aa) drop-shadow(0 0 15px #f97316) drop-shadow(0 0 26px #dc2626) drop-shadow(0 0 36px rgba(239, 68, 68, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 11px #f97316) drop-shadow(0 0 20px #b91c1c);
    }
}

/* 5. Shadow Abyssal Aura (Sinister Void) */
.companion-aura-container.aura-shadow img,
img.aura-shadow,
.user-card-companion-wrap.aura-shadow img,
#previewCompanionImg.aura-shadow,
#userBarNameImage.aura-shadow {
    filter: drop-shadow(0 0 3px #c084fc) drop-shadow(0 0 10px #9333ea) drop-shadow(0 0 20px #581c87) !important;
    animation: aura-pulse-shadow 2.2s ease-in-out infinite alternate !important;
}
@keyframes aura-pulse-shadow {
    0% {
        filter: drop-shadow(0 0 2px #e9d5ff) drop-shadow(0 0 8px #a855f7) drop-shadow(0 0 16px #6b21a8);
    }
    100% {
        filter: drop-shadow(0 0 5px #f3e8ff) drop-shadow(0 0 14px #9333ea) drop-shadow(0 0 24px #4c1d95) drop-shadow(0 0 34px rgba(126, 34, 206, 0.7));
    }
}

/* 6. Thunder / Electric Jitter Aura */
.companion-aura-container.aura-thunder img,
img.aura-thunder,
.user-card-companion-wrap.aura-thunder img,
#previewCompanionImg.aura-thunder,
#userBarNameImage.aura-thunder {
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 9px #facc15) drop-shadow(0 0 18px rgba(234, 179, 8, 0.95)) !important;
    animation: aura-jitter-thunder 0.8s steps(1) infinite !important;
}
@keyframes aura-jitter-thunder {
    0%, 100% {
        filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 8px #facc15) drop-shadow(0 0 16px #eab308);
    }
    15% {
        filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 14px #fef08a) drop-shadow(0 0 24px #eab308) drop-shadow(0 0 36px rgba(250, 204, 21, 0.8));
    }
    22% {
        filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 6px #fde047) drop-shadow(0 0 12px rgba(234, 179, 8, 0.7));
    }
    40% {
        filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 15px #fef08a) drop-shadow(0 0 28px #ca8a04);
    }
    65% {
        filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 9px #facc15);
    }
    82% {
        filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 16px #facc15) drop-shadow(0 0 30px rgba(234, 179, 8, 0.95));
    }
}

/* 7. Frost / Blizzard Crystal Aura */
.companion-aura-container.aura-frost img,
img.aura-frost,
.user-card-companion-wrap.aura-frost img,
#previewCompanionImg.aura-frost,
#userBarNameImage.aura-frost {
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 9px #7dd3fc) drop-shadow(0 0 18px #0284c7) !important;
    animation: aura-pulse-frost 2.5s ease-in-out infinite alternate !important;
}
@keyframes aura-pulse-frost {
    0% {
        filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 7px #7dd3fc) drop-shadow(0 0 14px #0ea5e9);
    }
    50% {
        filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 14px #bae6fd) drop-shadow(0 0 24px #0284c7) drop-shadow(0 0 34px rgba(186, 230, 253, 0.75));
    }
    100% {
        filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px #38bdf8) drop-shadow(0 0 18px #0369a1);
    }
}

/* 8. Ocean / Tidal Surge Aura */
.companion-aura-container.aura-ocean img,
img.aura-ocean,
.user-card-companion-wrap.aura-ocean img,
#previewCompanionImg.aura-ocean,
#userBarNameImage.aura-ocean {
    filter: drop-shadow(0 0 4px #22d3ee) drop-shadow(0 0 10px #0284c7) drop-shadow(0 0 20px rgba(3, 105, 161, 0.8)) !important;
    animation: aura-pulse-ocean 3.2s ease-in-out infinite alternate !important;
}
@keyframes aura-pulse-ocean {
    0% {
        filter: drop-shadow(0 0 3px #06b6d4) drop-shadow(0 0 8px #0284c7) drop-shadow(0 0 15px rgba(3, 105, 161, 0.7));
    }
    50% {
        filter: drop-shadow(0 0 7px #67e8f9) drop-shadow(0 0 16px #06b6d4) drop-shadow(0 0 28px #0284c7) drop-shadow(0 0 38px rgba(6, 182, 212, 0.5));
    }
    100% {
        filter: drop-shadow(0 0 4px #0891b2) drop-shadow(0 0 11px #0284c7) drop-shadow(0 0 18px rgba(3, 105, 161, 0.8));
    }
}

/* 9. Nature / Bloom Gaia Aura */
.companion-aura-container.aura-nature img,
img.aura-nature,
.user-card-companion-wrap.aura-nature img,
#previewCompanionImg.aura-nature,
#userBarNameImage.aura-nature {
    filter: drop-shadow(0 0 4px #34d399) drop-shadow(0 0 10px #10b981) drop-shadow(0 0 20px rgba(5, 150, 105, 0.75)) !important;
    animation: aura-pulse-nature 2.6s ease-in-out infinite alternate !important;
}
@keyframes aura-pulse-nature {
    0% {
        filter: drop-shadow(0 0 3px #34d399) drop-shadow(0 0 8px #10b981) drop-shadow(0 0 15px rgba(5, 150, 105, 0.65));
    }
    50% {
        filter: drop-shadow(0 0 7px #a7f3d0) drop-shadow(0 0 16px #34d399) drop-shadow(0 0 26px #059669) drop-shadow(0 0 36px rgba(52, 211, 153, 0.55));
    }
    100% {
        filter: drop-shadow(0 0 4px #34d399) drop-shadow(0 0 10px #047857) drop-shadow(0 0 18px rgba(5, 150, 105, 0.75));
    }
}

/* 10. Dragon Force / Plasma Aura */
.companion-aura-container.aura-dragon img,
img.aura-dragon,
.user-card-companion-wrap.aura-dragon img,
#previewCompanionImg.aura-dragon,
#userBarNameImage.aura-dragon {
    filter: drop-shadow(0 0 4px #60a5fa) drop-shadow(0 0 11px #8b5cf6) drop-shadow(0 0 22px #ec4899) !important;
    animation: aura-pulse-dragon 2s ease-in-out infinite alternate !important;
}
@keyframes aura-pulse-dragon {
    0% {
        filter: drop-shadow(0 0 3px #3b82f6) drop-shadow(0 0 9px #8b5cf6) drop-shadow(0 0 16px #ec4899);
    }
    50% {
        filter: drop-shadow(0 0 7px #93c5fd) drop-shadow(0 0 16px #a855f7) drop-shadow(0 0 28px #f43f5e) drop-shadow(0 0 38px rgba(99, 102, 241, 0.65));
    }
    100% {
        filter: drop-shadow(0 0 5px #4f46e5) drop-shadow(0 0 12px #9333ea) drop-shadow(0 0 20px #e11d48);
    }
}

/* 11. Toxic / Venom Mist Aura */
.companion-aura-container.aura-toxic img,
img.aura-toxic,
.user-card-companion-wrap.aura-toxic img,
#previewCompanionImg.aura-toxic,
#userBarNameImage.aura-toxic {
    filter: drop-shadow(0 0 4px #a3e635) drop-shadow(0 0 10px #84cc16) drop-shadow(0 0 20px #9333ea) !important;
    animation: aura-pulse-toxic 2.4s ease-in-out infinite alternate !important;
}
@keyframes aura-pulse-toxic {
    0% {
        filter: drop-shadow(0 0 3px #a3e635) drop-shadow(0 0 8px #84cc16) drop-shadow(0 0 15px #9333ea);
    }
    50% {
        filter: drop-shadow(0 0 7px #d9f99d) drop-shadow(0 0 16px #84cc16) drop-shadow(0 0 26px #a855f7) drop-shadow(0 0 38px rgba(168, 85, 247, 0.55));
    }
    100% {
        filter: drop-shadow(0 0 4px #a3e635) drop-shadow(0 0 11px #4d7c0f) drop-shadow(0 0 18px #7e22ce);
    }
}

/* 12. Aurora / Northern Lights Aura */
.companion-aura-container.aura-aurora img,
img.aura-aurora,
.user-card-companion-wrap.aura-aurora img,
#previewCompanionImg.aura-aurora,
#userBarNameImage.aura-aurora {
    filter: drop-shadow(0 0 4px #2dd4bf) drop-shadow(0 0 12px #06b6d4) drop-shadow(0 0 24px #818cf8) !important;
    animation: aura-cycle-aurora 4s ease-in-out infinite alternate !important;
}
@keyframes aura-cycle-aurora {
    0% {
        filter: drop-shadow(0 0 4px #2dd4bf) drop-shadow(0 0 12px #06b6d4) drop-shadow(0 0 20px #818cf8);
    }
    50% {
        filter: drop-shadow(0 0 7px #5eead4) drop-shadow(0 0 16px #c084fc) drop-shadow(0 0 28px #38bdf8) drop-shadow(0 0 40px rgba(129, 140, 248, 0.55));
    }
    100% {
        filter: drop-shadow(0 0 5px #a855f7) drop-shadow(0 0 14px #38bdf8) drop-shadow(0 0 22px #2dd4bf);
    }
}

/* ==========================================================================
   AURA PARTICLES & SPECIAL EFFECTS ENGINE (BOOSTY PERKS)
   ========================================================================== */

.aura-particles-layer,
.aura-particles-layer canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%) scale(var(--particles-scale, 1));
    transform-origin: center center;
    pointer-events: none !important;
    z-index: 5;
    overflow: visible;
    mix-blend-mode: screen;
    opacity: var(--particles-opacity, 1);
}

/* Global Disable when user turns off particles */
body.no-aura-particles .aura-particles-layer,
.no-aura-particles .aura-particles-layer {
    display: none !important;
}

/* Supporter Particles Toggle in Wardrobe */
.supporter-particles-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    padding: 8px 14px;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* Particle Scale & Customization Block */
.supporter-particles-scale-block {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    transition: opacity 0.25s ease, filter 0.25s ease;
}
.supporter-particles-scale-block.disabled {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(0.8);
}
.supporter-particles-param-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.supporter-param-val {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #00cec9;
    font-weight: bold;
}
.range-bound {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Minecraft', monospace;
}
.supporter-particles-var-selector,
.supporter-particles-size-selector,
.supporter-particles-opacity-selector,
.supporter-particles-speed-selector {
    display: flex;
    gap: 4px;
    margin-top: 3px;
    flex-wrap: wrap;
}
.supporter-range-slider--purple::-webkit-slider-thumb {
    background: #c084fc;
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.6);
}
.supporter-range-slider--sky::-webkit-slider-thumb {
    background: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}
.supporter-range-slider--gold::-webkit-slider-thumb {
    background: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}
.supporter-scale-btn.supporter-particles-var-btn.active {
    background: linear-gradient(135deg, rgba(255, 211, 42, 0.25), rgba(250, 177, 160, 0.25));
    border-color: #ffd32a;
    color: #ffd32a;
    box-shadow: 0 0 10px rgba(255, 211, 42, 0.3);
}
.supporter-particles-toggle-row .toggle-label {
    font-size: 0.74rem;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.supporter-particles-toggle-row .switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    flex-shrink: 0;
    margin: 0;
}
.supporter-particles-toggle-row .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.supporter-particles-toggle-row .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #334155;
    transition: 0.25s;
    border-radius: 20px;
}
.supporter-particles-toggle-row .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.25s;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.supporter-particles-toggle-row .switch input:checked + .slider {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}
.supporter-particles-toggle-row .switch input:checked + .slider:before {
    transform: translateX(18px);
}

/* ==========================================================================
   AURA PARTICLES - HYBRID PIXEL-MAGIC SYSTEM (12 AURAS x MULTI-VARIATIONS)
   ========================================================================== */

/* 1. Thunder Pixel Lightning & Plasma Sparks */
.p-bolt {
    position: absolute;
    width: calc(8px * var(--particle-size-mult, 1));
    height: calc(12px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' shape-rendering='crispEdges'><path d='M4,0 H7 V4 H8 V5 H5 V7 H6 V8 H4 V12 H3 V7 H1 V6 H3 V3 H2 V2 H4 Z' fill='%23ffffff'/><path d='M4,1 H6 V4 H7 V5 H4 V8 H5 V9 H3 V11 H2 V7 H0 V6 H2 V3 H3 V2 H4 Z' fill='%23fde047'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 7px #facc15) drop-shadow(0 0 12px #eab308);
    animation: px-spark-pop calc(0.9s / var(--particles-speed, 1)) steps(2, start) infinite;
}
.p-bolt.spark {
    width: calc(6px * var(--particle-size-mult, 1));
    height: calc(6px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'><rect x='2' y='0' width='2' height='6' fill='%23ffffff'/><rect x='0' y='2' width='6' height='2' fill='%23ffffff'/><rect x='2' y='2' width='2' height='2' fill='%23fef08a'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #fef08a) drop-shadow(0 0 6px #f59e0b);
    animation: px-twinkle calc(1.1s / var(--particles-speed, 1)) ease-in-out infinite alternate;
}
.p-bolt.orb {
    width: calc(6px * var(--particle-size-mult, 1));
    height: calc(6px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'><rect x='2' y='0' width='2' height='6' fill='%23ffffff'/><rect x='0' y='2' width='6' height='2' fill='%23ffffff'/><rect x='1' y='1' width='4' height='4' fill='%2338bdf8'/><rect x='2' y='2' width='2' height='2' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #38bdf8) drop-shadow(0 0 7px #facc15);
    animation: px-electric-buzz calc(1.3s / var(--particles-speed, 1)) ease-in-out infinite alternate;
}
.p-bolt.b1 { top: 4px; left: 6px; animation-delay: 0.1s; }
.p-bolt.b2 { top: 12px; right: 4px; animation-delay: 0.45s; transform: scaleX(-1); }
.p-bolt.b3 { bottom: 8px; left: 14px; animation-delay: 0.7s; }
.p-bolt.b4 { bottom: 6px; right: 8px; animation-delay: 0.25s; }
.p-bolt.b5 { top: 8px; left: 20px; animation-delay: 0.85s; }

@keyframes px-spark-pop {
    0%, 100% { opacity: 0; transform: scale(0.4); }
    20%, 45% { opacity: 1; transform: scale(1.15); }
    50% { opacity: 0; }
}
@keyframes px-twinkle {
    0% { opacity: 0.2; transform: scale(0.6) rotate(0deg); }
    100% { opacity: 1; transform: scale(1.2) rotate(45deg); }
}
@keyframes px-electric-buzz {
    0% { transform: scale(0.6) translate(0, 0); opacity: 0.3; }
    50% { transform: scale(1.2) translate(3px, -2px); opacity: 1; }
    100% { transform: scale(0.7) translate(-3px, 2px); opacity: 0.5; }
}

/* 2. Frost Pixel Ice Snowflake Crystals */
.p-crystal {
    position: absolute;
    width: calc(9px * var(--particle-size-mult, 1));
    height: calc(9px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'><rect x='4' y='0' width='1' height='9' fill='%23ffffff'/><rect x='0' y='4' width='9' height='1' fill='%23ffffff'/><rect x='2' y='2' width='1' height='1' fill='%237dd3fc'/><rect x='6' y='2' width='1' height='1' fill='%237dd3fc'/><rect x='2' y='6' width='1' height='1' fill='%237dd3fc'/><rect x='6' y='6' width='1' height='1' fill='%237dd3fc'/><rect x='3' y='3' width='3' height='3' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 7px #38bdf8);
    animation: px-drift-fall calc(2.8s / var(--particles-speed, 1)) ease-in-out infinite;
}
.p-crystal.shard {
    width: calc(6px * var(--particle-size-mult, 1));
    height: calc(9px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9' shape-rendering='crispEdges'><polygon points='3,0 5,4 3,9 1,4' fill='%23bae6fd'/><polygon points='3,1 4,4 3,8 2,4' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 6px #0284c7);
    animation: px-shard-float calc(2.4s / var(--particles-speed, 1)) ease-in-out infinite;
}
.p-crystal.dust {
    width: calc(5px * var(--particle-size-mult, 1));
    height: calc(5px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'><rect x='2' y='0' width='1' height='5' fill='%23ffffff'/><rect x='0' y='2' width='5' height='1' fill='%23ffffff'/><rect x='1' y='1' width='3' height='3' fill='%23e0f2fe'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 6px #38bdf8);
    animation: px-twinkle calc(1.4s / var(--particles-speed, 1)) ease-in-out infinite alternate;
}
.p-crystal.c1 { top: 2px; left: 10px; animation-delay: 0s; }
.p-crystal.c2 { top: 6px; right: 8px; animation-delay: 0.9s; }
.p-crystal.c3 { bottom: 8px; right: 16px; animation-delay: 1.8s; }
.p-crystal.c4 { bottom: 12px; left: 8px; animation-delay: 1.3s; }

@keyframes px-drift-fall {
    0% { transform: translateY(-8px) translateX(0) scale(0.6); opacity: 0; }
    20% { opacity: 0.95; }
    80% { opacity: 0.95; }
    100% { transform: translateY(20px) translateX(6px) scale(0.8); opacity: 0; }
}
@keyframes px-shard-float {
    0% { transform: translateY(-4px) rotate(-10deg) scale(0.8); opacity: 0.2; }
    50% { transform: translateY(8px) rotate(15deg) scale(1.1); opacity: 1; }
    100% { transform: translateY(20px) rotate(-5deg) scale(0.7); opacity: 0; }
}

/* 3. Inferno Pixel Fire Embers */
.p-ember {
    position: absolute;
    width: calc(7px * var(--particle-size-mult, 1));
    height: calc(9px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9' shape-rendering='crispEdges'><rect x='3' y='0' width='1' height='2' fill='%23ffffff'/><rect x='2' y='2' width='3' height='3' fill='%23fef08a'/><rect x='1' y='4' width='5' height='3' fill='%23f97316'/><rect x='2' y='7' width='3' height='2' fill='%23dc2626'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #ffeb3b) drop-shadow(0 0 7px #ea580c) drop-shadow(0 0 11px #dc2626);
    animation: px-ember-rise calc(2s / var(--particles-speed, 1)) ease-out infinite;
}
.p-ember.coal {
    width: calc(7px * var(--particle-size-mult, 1));
    height: calc(7px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><rect x='1' y='0' width='5' height='7' fill='%23dc2626'/><rect x='0' y='1' width='7' height='5' fill='%23dc2626'/><rect x='2' y='2' width='3' height='3' fill='%23f97316'/><rect x='3' y='3' width='1' height='1' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #ef4444) drop-shadow(0 0 8px #ea580c);
    animation: px-ember-rise calc(1.7s / var(--particles-speed, 1)) ease-out infinite;
}
.p-ember.sparkle {
    width: calc(5px * var(--particle-size-mult, 1));
    height: calc(5px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'><rect x='2' y='0' width='1' height='5' fill='%23ffffff'/><rect x='0' y='2' width='5' height='1' fill='%23ffffff'/><rect x='1' y='1' width='3' height='3' fill='%23fbbf24'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 7px #f59e0b);
    animation: px-twinkle calc(0.9s / var(--particles-speed, 1)) ease-in-out infinite alternate;
}
.p-ember.e1 { bottom: 6px; left: 12px; animation-delay: 0s; }
.p-ember.e2 { bottom: 2px; right: 14px; animation-delay: 0.4s; }
.p-ember.e3 { bottom: 8px; left: 24px; animation-delay: 0.85s; }
.p-ember.e4 { bottom: 4px; right: 24px; animation-delay: 1.3s; }
.p-ember.e5 { bottom: 0px; left: 18px; animation-delay: 1.7s; }

@keyframes px-ember-rise {
    0% { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; }
    20% { opacity: 1; transform: translateY(-8px) translateX(-3px) scale(1.1); }
    60% { transform: translateY(-24px) translateX(4px) scale(0.85); opacity: 0.9; }
    100% { transform: translateY(-42px) translateX(-2px) scale(0.2); opacity: 0; }
}

/* 4. Ocean Pixel Water Droplets & Bubbles */
.p-bubble {
    position: absolute;
    width: calc(7px * var(--particle-size-mult, 1));
    height: calc(7px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><rect x='2' y='0' width='3' height='1' fill='%23a5f3fc'/><rect x='2' y='6' width='3' height='1' fill='%230284c7'/><rect x='0' y='2' width='1' height='3' fill='%23a5f3fc'/><rect x='6' y='2' width='1' height='3' fill='%230284c7'/><rect x='1' y='1' width='2' height='2' fill='%23ffffff'/><rect x='2' y='2' width='3' height='3' fill='none'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.9)) drop-shadow(0 0 6px #0284c7);
    animation: px-bubble-rise calc(2.3s / var(--particles-speed, 1)) ease-in infinite;
}
.p-bubble.drop {
    width: calc(6px * var(--particle-size-mult, 1));
    height: calc(8px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 8' shape-rendering='crispEdges'><polygon points='3,0 5,4 5,7 3,8 1,7 1,4' fill='%2338bdf8'/><rect x='2' y='3' width='2' height='3' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #38bdf8) drop-shadow(0 0 6px #0284c7);
    animation: px-bubble-rise calc(2.0s / var(--particles-speed, 1)) ease-in infinite;
}
.p-bubble.foam {
    width: calc(4px * var(--particle-size-mult, 1));
    height: calc(4px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'><rect x='1' y='0' width='2' height='4' fill='%23ffffff'/><rect x='0' y='1' width='4' height='2' fill='%23ffffff'/><rect x='1' y='1' width='2' height='2' fill='%23a5f3fc'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 5px #38bdf8);
    animation: px-twinkle calc(1.2s / var(--particles-speed, 1)) ease-in-out infinite alternate;
}
.p-bubble.b1 { bottom: 4px; left: 10px; animation-delay: 0s; }
.p-bubble.b2 { bottom: 8px; right: 12px; animation-delay: 0.6s; }
.p-bubble.b3 { bottom: 2px; left: 24px; animation-delay: 1.2s; }
.p-bubble.b4 { bottom: 10px; right: 24px; animation-delay: 1.75s; }

@keyframes px-bubble-rise {
    0% { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
    20% { opacity: 0.95; transform: translateY(-6px) translateX(2px); }
    70% { opacity: 0.95; transform: translateY(-24px) translateX(-3px); }
    100% { transform: translateY(-40px) translateX(1px) scale(1.2); opacity: 0; }
}

/* 5. Nature Pixel Leaves with Wind Spiral */
.p-leaf {
    position: absolute;
    width: calc(8px * var(--particle-size-mult, 1));
    height: calc(8px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M2,0 H6 V1 H7 V3 H8 V5 H7 V6 H5 V7 H3 V8 H1 V7 H0 V5 H1 V3 H2 V1 Z' fill='%2310b981'/><rect x='2' y='2' width='4' height='4' fill='%236ee7b7'/><rect x='3' y='3' width='2' height='2' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #6ee7b7) drop-shadow(0 0 7px #059669);
    animation: px-leaf-spiral calc(3.2s / var(--particles-speed, 1)) ease-in-out infinite;
}
.p-leaf.petal {
    width: calc(7px * var(--particle-size-mult, 1));
    height: calc(7px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><polygon points='3,0 6,2 6,5 3,7 1,5 1,2' fill='%23f472b6'/><rect x='2' y='2' width='3' height='3' fill='%23fbcfe8'/><rect x='3' y='3' width='1' height='1' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #f472b6) drop-shadow(0 0 7px #ec4899);
    animation: px-leaf-spiral calc(3.0s / var(--particles-speed, 1)) ease-in-out infinite;
}
.p-leaf.spore {
    width: calc(5px * var(--particle-size-mult, 1));
    height: calc(5px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'><rect x='2' y='0' width='1' height='5' fill='%23ffffff'/><rect x='0' y='2' width='5' height='1' fill='%23ffffff'/><rect x='1' y='1' width='3' height='3' fill='%2334d399'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #a7f3d0) drop-shadow(0 0 7px #10b981);
    animation: px-twinkle calc(1.3s / var(--particles-speed, 1)) ease-in-out infinite alternate;
}
.p-leaf.l1 { animation-delay: 0s; }
.p-leaf.l2 { animation-delay: -1.6s; }
.p-leaf.l3 { animation-delay: -0.8s; }

@keyframes px-leaf-spiral {
    0% { transform: translate(-24px, 10px) rotate(0deg) scale(0.7); opacity: 0; }
    25% { opacity: 0.95; transform: translate(-12px, -16px) rotate(90deg) scale(1.1); }
    65% { opacity: 0.95; transform: translate(14px, -20px) rotate(180deg) scale(1); }
    100% { transform: translate(24px, 10px) rotate(270deg) scale(0.6); opacity: 0; }
}

/* 6. Shiny Classic Gen-5 Pixel Sparkles */
.p-star {
    position: absolute;
    width: calc(9px * var(--particle-size-mult, 1));
    height: calc(9px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'><rect x='4' y='0' width='1' height='9' fill='%23ffffff'/><rect x='0' y='4' width='9' height='1' fill='%23ffffff'/><rect x='3' y='1' width='3' height='7' fill='%23fde047'/><rect x='1' y='3' width='7' height='3' fill='%23fde047'/><rect x='3' y='3' width='3' height='3' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 8px #facc15) drop-shadow(0 0 12px #eab308);
    animation: px-star-flash calc(1.6s / var(--particles-speed, 1)) ease-out infinite;
}
.p-star.diamond {
    width: calc(7px * var(--particle-size-mult, 1));
    height: calc(9px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9' shape-rendering='crispEdges'><polygon points='3,0 6,4 3,9 0,4' fill='%23fef08a'/><polygon points='3,1 5,4 3,8 1,4' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 8px #eab308);
    animation: px-star-flash calc(1.4s / var(--particles-speed, 1)) ease-out infinite;
}
.p-star.ring {
    width: calc(6px * var(--particle-size-mult, 1));
    height: calc(6px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'><rect x='2' y='0' width='2' height='6' fill='%23ffffff'/><rect x='0' y='2' width='6' height='2' fill='%23ffffff'/><rect x='2' y='2' width='2' height='2' fill='%23fde047'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 6px #facc15);
    animation: px-twinkle calc(1.0s / var(--particles-speed, 1)) ease-in-out infinite alternate;
}
.p-star.s1 { top: 4px; left: 8px; animation-delay: 0.1s; }
.p-star.s2 { top: 8px; right: 6px; animation-delay: 0.55s; }
.p-star.s3 { bottom: 8px; right: 14px; animation-delay: 1.05s; }
.p-star.s4 { bottom: 10px; left: 12px; animation-delay: 0.35s; }

@keyframes px-star-flash {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    35% { transform: scale(1.3) rotate(45deg); opacity: 1; }
    70% { transform: scale(0.8) rotate(90deg); opacity: 0.6; }
    100% { transform: scale(0) rotate(135deg); opacity: 0; }
}

/* 7. Dragon Pixel Cosmic Energy Orbs */
.p-dragon-orb {
    position: absolute;
    width: calc(9px * var(--particle-size-mult, 1));
    height: calc(9px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'><rect x='3' y='0' width='3' height='1' fill='%23ec4899'/><rect x='3' y='8' width='3' height='1' fill='%233b82f6'/><rect x='0' y='3' width='1' height='3' fill='%23ec4899'/><rect x='8' y='3' width='1' height='3' fill='%233b82f6'/><rect x='2' y='2' width='5' height='5' fill='%23c084fc'/><rect x='3' y='3' width='3' height='3' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 4px #ec4899) drop-shadow(0 0 8px #8b5cf6) drop-shadow(0 0 12px #3b82f6);
    animation: px-dragon-orbit calc(2.6s / var(--particles-speed, 1)) linear infinite;
    top: 50%; left: 50%;
    margin-top: -4.5px; margin-left: -4.5px;
}
.p-dragon-orb.comet {
    width: calc(10px * var(--particle-size-mult, 1));
    height: calc(6px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' shape-rendering='crispEdges'><polygon points='0,3 7,0 10,3 7,6' fill='%23c084fc'/><polygon points='2,3 7,1 9,3 7,5' fill='%23ffffff'/><rect x='6' y='2' width='2' height='2' fill='%23ec4899'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 4px #ec4899) drop-shadow(0 0 8px #8b5cf6);
    animation: px-comet-orbit calc(2.2s / var(--particles-speed, 1)) linear infinite;
}
.p-dragon-orb.o1 { animation-delay: 0s; }
.p-dragon-orb.o2 { animation-delay: -1.3s; }

@keyframes px-dragon-orbit {
    0% { transform: rotate(0deg) translateX(28px) rotate(0deg) scale(0.8); }
    50% { transform: rotate(180deg) translateX(28px) rotate(-180deg) scale(1.2); }
    100% { transform: rotate(360deg) translateX(28px) rotate(-360deg) scale(0.8); }
}
@keyframes px-comet-orbit {
    0% { transform: rotate(0deg) translateX(30px) rotate(0deg) scale(0.9); }
    50% { transform: rotate(180deg) translateX(30px) rotate(-180deg) scale(1.2); }
    100% { transform: rotate(360deg) translateX(30px) rotate(-360deg) scale(0.9); }
}

/* 8. Shadow Pixel Ghost Wisps */
.p-smoke {
    position: absolute;
    width: calc(8px * var(--particle-size-mult, 1));
    height: calc(10px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10' shape-rendering='crispEdges'><rect x='3' y='0' width='2' height='2' fill='%23f3e8ff'/><rect x='2' y='2' width='4' height='3' fill='%23c084fc'/><rect x='1' y='5' width='6' height='3' fill='%237e22ce'/><rect x='2' y='8' width='4' height='2' fill='%233b0764'/><rect x='3' y='3' width='2' height='2' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #c084fc) drop-shadow(0 0 7px #7e22ce) drop-shadow(0 0 12px #3b0764);
    animation: px-smoke-float calc(2.1s / var(--particles-speed, 1)) ease-out infinite;
}
.p-smoke.eye {
    width: calc(7px * var(--particle-size-mult, 1));
    height: calc(7px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><rect x='2' y='0' width='3' height='7' fill='%233b0764'/><rect x='0' y='2' width='7' height='3' fill='%233b0764'/><rect x='1' y='1' width='5' height='5' fill='%237e22ce'/><rect x='2' y='2' width='3' height='3' fill='%23e879f9'/><rect x='3' y='3' width='1' height='1' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 4px #c084fc) drop-shadow(0 0 9px #7e22ce);
    animation: px-twinkle calc(1.5s / var(--particles-speed, 1)) ease-in-out infinite alternate;
}
.p-smoke.mote {
    width: calc(5px * var(--particle-size-mult, 1));
    height: calc(5px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'><rect x='1' y='0' width='3' height='5' fill='%23c084fc'/><rect x='0' y='1' width='5' height='3' fill='%23c084fc'/><rect x='2' y='2' width='1' height='1' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #a855f7);
    animation: px-smoke-float calc(1.8s / var(--particles-speed, 1)) ease-out infinite;
}
.p-smoke.m1 { bottom: 6px; left: 14px; animation-delay: 0s; }
.p-smoke.m2 { bottom: 8px; right: 14px; animation-delay: 0.7s; }
.p-smoke.m3 { bottom: 2px; left: 24px; animation-delay: 1.4s; }

@keyframes px-smoke-float {
    0% { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
    30% { opacity: 0.95; transform: translateY(-8px) translateX(-3px) scale(1.15); }
    100% { transform: translateY(-38px) translateX(4px) scale(1.4); opacity: 0; }
}

/* 9. Toxic Pixel Acid Droplets */
.p-toxic-bubble {
    position: absolute;
    width: calc(7px * var(--particle-size-mult, 1));
    height: calc(7px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><rect x='2' y='0' width='3' height='1' fill='%23d9f99d'/><rect x='2' y='6' width='3' height='1' fill='%237e22ce'/><rect x='0' y='2' width='1' height='3' fill='%23bef264'/><rect x='6' y='2' width='1' height='3' fill='%237e22ce'/><rect x='1' y='1' width='2' height='2' fill='%23ffffff'/><rect x='2' y='2' width='3' height='3' fill='%2384cc16'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #bef264) drop-shadow(0 0 7px #84cc16) drop-shadow(0 0 12px #7e22ce);
    animation: px-toxic-rise calc(2.2s / var(--particles-speed, 1)) ease-in infinite;
}
.p-toxic-bubble.splat {
    width: calc(8px * var(--particle-size-mult, 1));
    height: calc(6px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6' shape-rendering='crispEdges'><rect x='2' y='0' width='4' height='6' fill='%2384cc16'/><rect x='0' y='2' width='8' height='2' fill='%2384cc16'/><rect x='2' y='1' width='3' height='3' fill='%23d9f99d'/><rect x='3' y='2' width='1' height='1' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #bef264) drop-shadow(0 0 6px #65a30d);
    animation: px-toxic-rise calc(1.9s / var(--particles-speed, 1)) ease-in infinite;
}
.p-toxic-bubble.fume {
    width: calc(5px * var(--particle-size-mult, 1));
    height: calc(5px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'><rect x='1' y='0' width='3' height='5' fill='%23a855f7'/><rect x='0' y='1' width='5' height='3' fill='%23a855f7'/><rect x='1' y='1' width='3' height='3' fill='%23bef264'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #bef264);
    animation: px-twinkle calc(1.3s / var(--particles-speed, 1)) ease-in-out infinite alternate;
}
.p-toxic-bubble.tb1 { bottom: 6px; left: 12px; animation-delay: 0.1s; }
.p-toxic-bubble.tb2 { bottom: 8px; right: 12px; animation-delay: 0.8s; }
.p-toxic-bubble.tb3 { bottom: 4px; left: 24px; animation-delay: 1.4s; }

@keyframes px-toxic-rise {
    0% { transform: translateY(0) scale(0.6); opacity: 0; }
    25% { opacity: 0.95; transform: translateY(-6px) translateX(-2px); }
    100% { transform: translateY(-38px) translateX(2px) scale(1.2); opacity: 0; }
}

/* 10. Terastal Pixel Tera Diamond Crown */
.p-tera-crystal {
    position: absolute;
    top: -8px;
    left: 50%;
    margin-left: -7px;
    width: calc(14px * var(--particle-size-mult, 1));
    height: calc(14px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'><polygon points='7,0 12,5 7,14 2,5' fill='%23a5f3fc'/><polygon points='7,0 10,5 7,12 4,5' fill='%23ffffff'/><rect x='6' y='4' width='2' height='4' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 9px #38bdf8) drop-shadow(0 0 14px #c084fc);
    animation: px-tera-hover calc(2.4s / var(--particles-speed, 1)) ease-in-out infinite alternate;
}
.p-tera-crystal.facet {
    top: auto;
    left: auto;
    margin-left: 0;
    width: calc(7px * var(--particle-size-mult, 1));
    height: calc(7px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><polygon points='3,0 6,3 3,6 0,3' fill='%23a5f3fc'/><polygon points='3,1 5,3 3,5 1,3' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 7px #38bdf8);
    animation: px-shard-float calc(2.1s / var(--particles-speed, 1)) ease-in-out infinite alternate;
}
.p-tera-crystal.facet.f1 { top: 6px; left: 6px; animation-delay: 0.5s; }
.p-tera-crystal.facet.f2 { bottom: 8px; right: 8px; animation-delay: 1.2s; }

@keyframes px-tera-hover {
    0% { transform: translateY(0) scale(0.95); }
    100% { transform: translateY(-6px) scale(1.12); }
}

/* 11. Aurora Pixel Polar Lights */
.p-aurora-ribbon {
    position: absolute;
    bottom: -2px;
    left: 6%;
    right: 6%;
    height: calc(16px * var(--particle-size-mult, 1));
    background: linear-gradient(90deg, transparent 0%, rgba(45,212,191,0.85) 25%, rgba(6,182,212,0.9) 50%, rgba(192,132,252,0.85) 75%, transparent 100%);
    filter: blur(2px) drop-shadow(0 0 6px #2dd4bf) drop-shadow(0 0 12px #c084fc);
    animation: px-aurora-wave calc(3s / var(--particles-speed, 1)) ease-in-out infinite alternate;
    border-radius: 50% 50% 0 0;
}
.p-aurora-ribbon.curtain {
    bottom: auto;
    top: 0;
    left: 15%;
    right: 15%;
    height: calc(22px * var(--particle-size-mult, 1));
    background: linear-gradient(180deg, rgba(45,212,191,0.7) 0%, rgba(192,132,252,0.6) 70%, transparent 100%);
    filter: blur(2px) drop-shadow(0 0 8px #2dd4bf);
    animation: px-curtain-glow calc(2.6s / var(--particles-speed, 1)) ease-in-out infinite alternate;
    border-radius: 0 0 50% 50%;
}

@keyframes px-aurora-wave {
    0% { transform: scaleX(0.85) translateY(0); opacity: 0.6; }
    100% { transform: scaleX(1.15) translateY(-4px); opacity: 1; }
}
@keyframes px-curtain-glow {
    0% { opacity: 0.4; transform: scaleY(0.85); }
    100% { opacity: 0.9; transform: scaleY(1.15); }
}

/* 12. Stellar Pixel 18-Type Rainbow Prism Star */
.p-stellar-star {
    position: absolute;
    width: calc(9px * var(--particle-size-mult, 1));
    height: calc(9px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'><rect x='4' y='0' width='1' height='9' fill='%23ffffff'/><rect x='0' y='4' width='9' height='1' fill='%23ffffff'/><rect x='3' y='1' width='3' height='2' fill='%23ff007f'/><rect x='6' y='3' width='2' height='3' fill='%2300f5d4'/><rect x='3' y='6' width='3' height='2' fill='%237b2cbf'/><rect x='1' y='3' width='2' height='3' fill='%23ffdd00'/><rect x='3' y='3' width='3' height='3' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 8px #ff007f) drop-shadow(0 0 12px #00f5d4);
    animation: px-star-flash calc(1.8s / var(--particles-speed, 1)) ease-in-out infinite;
}
.p-stellar-star.flare {
    width: calc(11px * var(--particle-size-mult, 1));
    height: calc(11px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' shape-rendering='crispEdges'><rect x='5' y='0' width='1' height='11' fill='%23ffffff'/><rect x='0' y='5' width='11' height='1' fill='%23ffffff'/><rect x='3' y='3' width='5' height='5' fill='%23ff007f'/><rect x='4' y='4' width='3' height='3' fill='%23ffffff'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 9px #ff007f) drop-shadow(0 0 14px #00f5d4);
    animation: px-star-flash calc(1.4s / var(--particles-speed, 1)) ease-in-out infinite;
}
.p-stellar-star.dust {
    width: calc(5px * var(--particle-size-mult, 1));
    height: calc(5px * var(--particle-size-mult, 1));
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'><rect x='2' y='0' width='1' height='5' fill='%23ffffff'/><rect x='0' y='2' width='5' height='1' fill='%23ffffff'/><rect x='1' y='1' width='3' height='3' fill='%2338bdf8'/></svg>") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 6px #a855f7);
    animation: px-twinkle calc(1.1s / var(--particles-speed, 1)) ease-in-out infinite alternate;
}
.p-stellar-star.st1 { top: 4px; right: 8px; animation-delay: 0.1s; }
.p-stellar-star.st2 { bottom: 6px; left: 8px; animation-delay: 0.6s; }
.p-stellar-star.st3 { top: 12px; left: 4px; animation-delay: 1.1s; }
.p-stellar-star.st4 { bottom: 12px; right: 4px; animation-delay: 1.6s; }

/* ==========================================================================
   AVATAR FRAMES SYSTEM (BOOSTY PERKS)
   ========================================================================== */

/* Container reset when custom frame is active */
.user-avatar-wrap,
.supporter-preview-avatar-wrap {
    position: relative;
    box-sizing: border-box;
}

.user-avatar-wrap.has-custom-frame,
.supporter-preview-avatar-wrap.has-custom-frame,
.has-avatar-frame.has-custom-frame,
.comm-author-avatar.has-custom-frame,
.lb-scroll-avatar.has-custom-frame,
.chat-avatar-frame-wrap,
.chat-partner-avatar-wrap,
.friend-avatar-wrap,
.hall-user-avatar-wrap,
#avatarDefaultPreview.has-custom-frame {
    border: none !important;
    overflow: visible !important;
    position: relative !important;
}

.user-avatar-wrap.has-custom-frame {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.supporter-preview-avatar-wrap.has-custom-frame {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.user-avatar-wrap.has-custom-frame .user-avatar-img,
.supporter-preview-avatar-wrap.has-custom-frame .user-avatar-img,
.has-avatar-frame > img,
.comm-author-avatar.has-custom-frame > img,
.lb-scroll-avatar.has-custom-frame > img,
.chat-avatar-frame-wrap > img,
.chat-partner-avatar-wrap > img,
.friend-avatar-wrap > img,
.hall-user-avatar-wrap > img,
#avatarDefaultPreview.has-custom-frame > img {
    border-radius: 50% !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.user-avatar-wrap.has-custom-frame #userAvatarIcon,
.supporter-preview-avatar-wrap.has-custom-frame #previewAvatarIcon,
.has-avatar-frame > i,
.comm-author-avatar.has-custom-frame > i,
.hall-user-avatar-wrap > i {
    border-radius: 50% !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 1.5rem !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure display:none is never overridden by CSS */
.user-avatar-wrap #userAvatarImg[style*="display: none"],
.user-avatar-wrap #userAvatarImg[style*="display:none"],
.user-avatar-wrap #userAvatarIcon[style*="display: none"],
.user-avatar-wrap #userAvatarIcon[style*="display:none"],
.supporter-preview-avatar-wrap #previewAvatarImg[style*="display: none"],
.supporter-preview-avatar-wrap #previewAvatarImg[style*="display:none"],
.supporter-preview-avatar-wrap #previewAvatarIcon[style*="display: none"],
.supporter-preview-avatar-wrap #previewAvatarIcon[style*="display:none"] {
    display: none !important;
}

/* Pseudo-elements for avatar frames */
.user-avatar-wrap[class*="frame-"]::before,
.supporter-preview-avatar-wrap[class*="frame-"]::before,
.has-avatar-frame[class*="frame-"]::before,
.has-custom-frame[class*="frame-"]::before,
.comm-author-avatar.has-custom-frame[class*="frame-"]::before,
.lb-scroll-avatar.has-custom-frame[class*="frame-"]::before,
.chat-avatar-frame-wrap[class*="frame-"]::before,
.chat-partner-avatar-wrap[class*="frame-"]::before,
.friend-avatar-wrap[class*="frame-"]::before,
.hall-user-avatar-wrap[class*="frame-"]::before,
#avatarDefaultPreview.has-custom-frame[class*="frame-"]::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    transition: all 0.25s ease;
}

/* 0. Default Frame */
.user-avatar-wrap.frame-none,
.supporter-preview-avatar-wrap.frame-none,
.has-avatar-frame.frame-none {
    border: 2px solid #e94560 !important;
    overflow: hidden !important;
}
.hall-user-avatar-wrap.frame-none {
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    overflow: hidden !important;
}
.hall-user-avatar-wrap.frame-none::before,
.hall-user-avatar-wrap.frame-none::after {
    display: none !important;
}
.user-avatar-wrap.frame-none::before,
.supporter-preview-avatar-wrap.frame-none::before,
.has-avatar-frame.frame-none::before,
.has-custom-frame.frame-none::before,
.user-avatar-wrap.frame-none::after,
.supporter-preview-avatar-wrap.frame-none::after,
.has-avatar-frame.frame-none::after,
.has-custom-frame.frame-none::after {
    display: none !important;
}

/* 1. Poké Ball Frame */
.user-avatar-wrap.frame-pokeball::before,
.supporter-preview-avatar-wrap.frame-pokeball::before,
.has-avatar-frame.frame-pokeball::before,
.has-custom-frame.frame-pokeball::before {
    background: linear-gradient(180deg, #ff4757 0%, #ff4757 46%, #1a1a2e 46%, #1a1a2e 54%, #f1f2f6 54%, #f1f2f6 100%);
    box-shadow: 0 0 9px rgba(255, 71, 87, 0.65);
}
.user-avatar-wrap.frame-pokeball::after,
.supporter-preview-avatar-wrap.frame-pokeball::after,
.has-avatar-frame.frame-pokeball::after,
.has-custom-frame.frame-pokeball::after {
    content: '';
    position: absolute;
    bottom: -2.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #1a1a2e;
    box-shadow: 0 0 5px #fff;
    z-index: 3;
    pointer-events: none;
}

/* 2. Neon Fire Frame */
.user-avatar-wrap.frame-neon-fire::before,
.supporter-preview-avatar-wrap.frame-neon-fire::before,
.has-avatar-frame.frame-neon-fire::before,
.has-custom-frame.frame-neon-fire::before {
    border: 2.5px solid #ff4757;
    box-shadow: 0 0 8px #ff4757, 0 0 16px rgba(255, 71, 87, 0.7), inset 0 0 6px rgba(255, 71, 87, 0.5);
    animation: fireFramePulse 2s ease-in-out infinite alternate;
}
@keyframes fireFramePulse {
    0% { box-shadow: 0 0 6px #ff4757, 0 0 12px rgba(255, 71, 87, 0.6); border-color: #ff4757; }
    100% { box-shadow: 0 0 12px #ffa502, 0 0 20px rgba(255, 165, 2, 0.85); border-color: #ffa502; }
}

/* 3. Neon Water Frame */
.user-avatar-wrap.frame-neon-water::before,
.supporter-preview-avatar-wrap.frame-neon-water::before,
.has-avatar-frame.frame-neon-water::before,
.has-custom-frame.frame-neon-water::before {
    border: 2.5px solid #1e90ff;
    box-shadow: 0 0 8px #1e90ff, 0 0 16px rgba(30, 144, 255, 0.7), inset 0 0 6px rgba(30, 144, 255, 0.5);
    animation: waterFramePulse 2.5s ease-in-out infinite alternate;
}
@keyframes waterFramePulse {
    0% { box-shadow: 0 0 6px #1e90ff, 0 0 12px rgba(30, 144, 255, 0.6); border-color: #1e90ff; }
    100% { box-shadow: 0 0 12px #70a1ff, 0 0 20px rgba(112, 161, 255, 0.85); border-color: #70a1ff; }
}

/* 4. Neon Grass Frame */
.user-avatar-wrap.frame-neon-grass::before,
.supporter-preview-avatar-wrap.frame-neon-grass::before,
.has-avatar-frame.frame-neon-grass::before,
.has-custom-frame.frame-neon-grass::before {
    border: 2.5px solid #2ed573;
    box-shadow: 0 0 8px #2ed573, 0 0 16px rgba(46, 213, 115, 0.7), inset 0 0 6px rgba(46, 213, 115, 0.5);
    animation: grassFramePulse 2.2s ease-in-out infinite alternate;
}
@keyframes grassFramePulse {
    0% { box-shadow: 0 0 6px #2ed573, 0 0 12px rgba(46, 213, 115, 0.6); border-color: #2ed573; }
    100% { box-shadow: 0 0 12px #7bed9f, 0 0 20px rgba(123, 237, 159, 0.85); border-color: #7bed9f; }
}

/* 5. Neon Electric Frame */
.user-avatar-wrap.frame-neon-electric::before,
.supporter-preview-avatar-wrap.frame-neon-electric::before,
.has-avatar-frame.frame-neon-electric::before,
.has-custom-frame.frame-neon-electric::before {
    border: 2.5px solid #ffa502;
    box-shadow: 0 0 8px #ffa502, 0 0 16px rgba(255, 165, 2, 0.8), inset 0 0 6px rgba(255, 165, 2, 0.5);
    animation: electricFrameZap 1.5s steps(2, start) infinite;
}
@keyframes electricFrameZap {
    0%, 100% { box-shadow: 0 0 8px #ffa502, 0 0 16px rgba(255, 165, 2, 0.8); }
    50% { box-shadow: 0 0 14px #ffd32a, 0 0 24px rgba(255, 211, 42, 0.95); }
}

/* 6. Neon Psychic Frame */
.user-avatar-wrap.frame-neon-purple::before,
.supporter-preview-avatar-wrap.frame-neon-purple::before,
.has-avatar-frame.frame-neon-purple::before,
.has-custom-frame.frame-neon-purple::before {
    border: 2.5px solid #a855f7;
    box-shadow: 0 0 8px #a855f7, 0 0 16px rgba(168, 85, 247, 0.7), inset 0 0 6px rgba(168, 85, 247, 0.5);
    animation: purpleFramePulse 2.3s ease-in-out infinite alternate;
}
@keyframes purpleFramePulse {
    0% { box-shadow: 0 0 6px #a855f7, 0 0 12px rgba(168, 85, 247, 0.6); }
    100% { box-shadow: 0 0 12px #c084fc, 0 0 20px rgba(192, 132, 252, 0.85); }
}

/* 7. Ultra Ball Frame (Tier 2) */
.user-avatar-wrap.frame-ultraball::before,
.supporter-preview-avatar-wrap.frame-ultraball::before,
.has-avatar-frame.frame-ultraball::before,
.has-custom-frame.frame-ultraball::before {
    background: conic-gradient(#111 0deg 30deg, #ffd32a 30deg 70deg, #111 70deg 110deg, #ffd32a 110deg 150deg, #111 150deg 180deg, #f1f2f6 180deg 360deg);
    box-shadow: 0 0 11px rgba(255, 211, 42, 0.65), 0 0 4px #000;
}
.user-avatar-wrap.frame-ultraball::after,
.supporter-preview-avatar-wrap.frame-ultraball::after,
.has-avatar-frame.frame-ultraball::after,
.has-custom-frame.frame-ultraball::after {
    content: '';
    position: absolute;
    bottom: -2.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffd32a;
    border: 2px solid #111;
    box-shadow: 0 0 6px #ffd32a;
    z-index: 3;
    pointer-events: none;
}

/* 8. Crystal Cyan Frame (Tier 2) */
.user-avatar-wrap.frame-crystal-cyan::before,
.supporter-preview-avatar-wrap.frame-crystal-cyan::before,
.has-avatar-frame.frame-crystal-cyan::before,
.has-custom-frame.frame-crystal-cyan::before {
    border: 2.5px solid #00cec9;
    box-shadow: 0 0 10px #00cec9, 0 0 22px rgba(0, 206, 201, 0.75), inset 0 0 6px #81ecec;
    animation: crystalSpin 3s ease-in-out infinite alternate;
}
@keyframes crystalSpin {
    0% { box-shadow: 0 0 8px #00cec9, 0 0 16px rgba(0, 206, 201, 0.6); filter: hue-rotate(0deg); }
    100% { box-shadow: 0 0 14px #81ecec, 0 0 24px rgba(129, 236, 236, 0.9); filter: hue-rotate(25deg); }
}

/* 9. Shiny Gold Frame (Tier 2) */
.user-avatar-wrap.frame-shiny-gold::before,
.supporter-preview-avatar-wrap.frame-shiny-gold::before,
.has-avatar-frame.frame-shiny-gold::before,
.has-custom-frame.frame-shiny-gold::before {
    background: linear-gradient(135deg, #ffeaa7, #fdcb6e, #f1c40f, #e17055, #ffd32a);
    box-shadow: 0 0 12px rgba(255, 211, 42, 0.8), 0 0 20px rgba(243, 156, 18, 0.5);
    animation: shinyGoldBreath 2s ease-in-out infinite alternate;
}
@keyframes shinyGoldBreath {
    0% { filter: brightness(1) drop-shadow(0 0 4px #ffd32a); }
    100% { filter: brightness(1.3) drop-shadow(0 0 8px #fff); }
}

/* 10. Master Ball Frame (Tier 3) */
.user-avatar-wrap.frame-masterball::before,
.supporter-preview-avatar-wrap.frame-masterball::before,
.has-avatar-frame.frame-masterball::before,
.has-custom-frame.frame-masterball::before {
    background: conic-gradient(#8b5cf6 0deg 35deg, #ec4899 35deg 75deg, #8b5cf6 75deg 105deg, #ec4899 105deg 145deg, #8b5cf6 145deg 180deg, #f1f2f6 180deg 360deg);
    box-shadow: 0 0 13px rgba(139, 92, 246, 0.8), 0 0 24px rgba(236, 72, 153, 0.6);
}
.user-avatar-wrap.frame-masterball::after,
.supporter-preview-avatar-wrap.frame-masterball::after,
.has-avatar-frame.frame-masterball::after,
.has-custom-frame.frame-masterball::after {
    content: '';
    position: absolute;
    bottom: -2.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #8b5cf6;
    box-shadow: 0 0 6px #ec4899;
    z-index: 3;
    pointer-events: none;
}

/* 11. Beast Ball Frame (Tier 3) */
.user-avatar-wrap.frame-beastball::before,
.supporter-preview-avatar-wrap.frame-beastball::before,
.has-avatar-frame.frame-beastball::before,
.has-custom-frame.frame-beastball::before {
    background: conic-gradient(#0984e3 0deg 45deg, #ffd32a 45deg 55deg, #0984e3 55deg 125deg, #ffd32a 125deg 135deg, #0984e3 135deg 225deg, #ffd32a 225deg 235deg, #0984e3 235deg 305deg, #ffd32a 305deg 315deg, #0984e3 315deg 360deg);
    box-shadow: 0 0 13px rgba(0, 206, 201, 0.8), 0 0 22px rgba(255, 211, 42, 0.6);
    animation: beastGlow 2.5s ease-in-out infinite alternate;
}
@keyframes beastGlow {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.3) drop-shadow(0 0 8px #00cec9); }
}

/* 12. Stellar Rainbow Frame (Tier 3) */
.user-avatar-wrap.frame-stellar-rainbow::before,
.supporter-preview-avatar-wrap.frame-stellar-rainbow::before,
.has-avatar-frame.frame-stellar-rainbow::before,
.has-custom-frame.frame-stellar-rainbow::before {
    inset: -3.5px;
    background: conic-gradient(from 0deg, #ff4757, #ffa502, #2ed573, #00cec9, #1e90ff, #a855f7, #ec4899, #ff4757);
    box-shadow: 0 0 13px rgba(0, 206, 201, 0.7), 0 0 24px rgba(168, 85, 247, 0.6);
    animation: rotateConic 3s linear infinite;
}
@keyframes rotateConic {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 13. Inferno Frame (Tier 3) */
.user-avatar-wrap.frame-inferno::before,
.supporter-preview-avatar-wrap.frame-inferno::before,
.has-avatar-frame.frame-inferno::before,
.has-custom-frame.frame-inferno::before {
    inset: -3.5px;
    background: conic-gradient(from 0deg, #ff4757, #ff6b81, #ffa502, #e17055, #ff4757);
    box-shadow: 0 0 14px rgba(255, 71, 87, 0.9), 0 0 26px rgba(255, 165, 2, 0.8);
    animation: rotateConicFast 2s linear infinite;
}
@keyframes rotateConicFast {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 14. Shadow Abyss Frame (Tier 3) */
.user-avatar-wrap.frame-shadow-abyss::before,
.supporter-preview-avatar-wrap.frame-shadow-abyss::before,
.has-avatar-frame.frame-shadow-abyss::before,
.has-custom-frame.frame-shadow-abyss::before {
    inset: -3.5px;
    background: conic-gradient(from 0deg, #341f97, #8b5cf6, #0a0a1a, #5f27cd, #341f97);
    box-shadow: 0 0 13px rgba(139, 92, 246, 0.8), 0 0 24px rgba(95, 39, 205, 0.9);
    animation: rotateConic 4s linear infinite reverse;
}

/* Wardrobe Frame Chips */
.supporter-frame-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 7px;
    margin-bottom: 6px;
}
.supporter-frame-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 8px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: #fff;
    text-align: left;
    transition: all 0.15s;
    user-select: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.supporter-frame-chip:hover:not(.tier-locked) {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}
.supporter-frame-chip.active {
    border-color: #ffd32a;
    background: rgba(255, 211, 42, 0.15);
    box-shadow: 0 0 10px rgba(255, 211, 42, 0.25);
}
.supporter-frame-chip.tier-locked {
    opacity: 0.45;
    cursor: not-allowed;
    border-style: dashed;
}
.supporter-frame-mini-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    border: 1.5px solid rgba(255,255,255,0.4);
    background: #0d0d1a;
}
.supporter-frame-mini-dot.dot-none { border-color: #e94560; }
.supporter-frame-mini-dot.dot-pokeball { background: linear-gradient(180deg, #ff4757 50%, #fff 50%); border-color: #1a1a2e; }
.supporter-frame-mini-dot.dot-fire { border-color: #ff4757; box-shadow: 0 0 5px #ff4757; }
.supporter-frame-mini-dot.dot-water { border-color: #1e90ff; box-shadow: 0 0 5px #1e90ff; }
.supporter-frame-mini-dot.dot-grass { border-color: #2ed573; box-shadow: 0 0 5px #2ed573; }
.supporter-frame-mini-dot.dot-electric { border-color: #ffa502; box-shadow: 0 0 5px #ffa502; }
.supporter-frame-mini-dot.dot-purple { border-color: #a855f7; box-shadow: 0 0 5px #a855f7; }
.supporter-frame-mini-dot.dot-ultraball { background: conic-gradient(#111 0deg 30deg, #ffd32a 30deg 70deg, #111 70deg 110deg, #ffd32a 110deg 150deg, #111 150deg 180deg, #f1f2f6 180deg 360deg); border-color: #000; }
.supporter-frame-mini-dot.dot-crystal { border-color: #00cec9; box-shadow: 0 0 6px #00cec9; }
.supporter-frame-mini-dot.dot-shiny { background: linear-gradient(135deg, #ffd32a, #f1c40f); box-shadow: 0 0 6px #ffd32a; border-color: #ffeaa7; }
.supporter-frame-mini-dot.dot-masterball { background: conic-gradient(#8b5cf6 0deg 35deg, #ec4899 35deg 75deg, #8b5cf6 75deg 105deg, #ec4899 105deg 145deg, #8b5cf6 145deg 180deg, #f1f2f6 180deg 360deg); border-color: #8b5cf6; }
.supporter-frame-mini-dot.dot-beastball { background: conic-gradient(#0984e3 0deg 45deg, #ffd32a 45deg 55deg, #0984e3 55deg 125deg, #ffd32a 125deg 135deg, #0984e3 135deg 225deg, #ffd32a 225deg 235deg, #0984e3 235deg 305deg, #ffd32a 305deg 315deg, #0984e3 315deg 360deg); border-color: #ffd32a; }
.supporter-frame-mini-dot.dot-stellar { background: conic-gradient(#ff4757, #ffa502, #2ed573, #00cec9, #1e90ff, #a855f7, #ff4757); border: none; box-shadow: 0 0 6px #00cec9; }
.supporter-frame-mini-dot.dot-inferno { background: conic-gradient(#ff4757, #ffa502, #ff6b81, #ff4757); border: none; box-shadow: 0 0 6px #ff4757; }
.supporter-frame-mini-dot.dot-shadow { background: conic-gradient(#341f97, #8b5cf6, #0a0a1a, #5f27cd, #341f97); border: none; box-shadow: 0 0 6px #8b5cf6; }

/* Footer */
.supporter-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.supporter-boosty-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(243, 98, 45, 0.2), rgba(255, 71, 87, 0.2));
    border: 1px solid rgba(243, 98, 45, 0.5);
    color: #ff7675;
    padding: 7px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: bold;
    transition: all 0.2s;
}
.supporter-boosty-link-btn:hover {
    background: linear-gradient(135deg, rgba(243, 98, 45, 0.35), rgba(255, 71, 87, 0.35));
    border-color: #ff6b6b;
    transform: translateY(-1px);
    box-shadow: 0 0 12px rgba(243, 98, 45, 0.4);
}
.supporter-btn-cancel {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    transition: all 0.15s;
}
.supporter-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.supporter-btn-save {
    background: linear-gradient(135deg, #f1c40f, #ff9f43);
    border: none;
    color: #000;
    font-weight: bold;
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(241, 196, 15, 0.3);
}
.supporter-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(241, 196, 15, 0.5);
}
.supporter-btn-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.supporter-error-msg {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(255, 71, 87, 0.15);
    border: 1px solid rgba(255, 71, 87, 0.4);
    border-radius: 8px;
    color: #ff6b81;
    font-size: 0.72rem;
}


/* Supporter Pokemon Grid & Mode Selector */
.supporter-mode-selector {
    display: inline-flex;
    background: rgba(15, 52, 96, 0.5);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    gap: 3px;
    flex-wrap: wrap;
}
.supporter-mode-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.supporter-mode-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.supporter-mode-btn.active {
    background: #00cec9;
    color: #0a0a1a;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.4);
}
.supporter-shiny-chip {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 4px 10px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.supporter-shiny-chip:hover {
    border-color: #fdcb6e;
    color: #ffeaa7;
}
.supporter-shiny-chip.active {
    background: rgba(253, 203, 110, 0.22);
    border-color: #fdcb6e;
    color: #ffeaa7;
    box-shadow: 0 0 10px rgba(253, 203, 110, 0.4);
}
.supporter-btn-reset-text {
    background: none;
    border: 1px solid rgba(233, 69, 96, 0.3);
    color: #e94560;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}
.supporter-btn-reset-text:hover {
    background: rgba(233, 69, 96, 0.15);
    border-color: #e94560;
}
.supporter-poke-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
}
.supporter-poke-card {
    background: rgba(15, 52, 96, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 74px;
    user-select: none;
}
.supporter-poke-card:hover {
    background: rgba(0, 206, 201, 0.18);
    border-color: rgba(0, 206, 201, 0.5);
    transform: translateY(-2px);
}
.supporter-poke-card.selected {
    background: rgba(0, 206, 201, 0.28);
    border-color: #00cec9;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.5);
}
.supporter-poke-card img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    image-rendering: pixelated;
    margin-bottom: 3px;
}
.supporter-poke-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 76px;
    line-height: 1.15;
}
.supporter-poke-card-sub {
    font-family: 'Minecraft', monospace;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 1px;
}


.user-name-image {
    --companion-scale: 1;
    width: 44px;
    height: 44px;
    object-fit: contain;
    margin-left: -5px;
    vertical-align: middle;
    border-radius: 4px;
    flex-shrink: 0;
    transform: scale(var(--companion-scale, 1));
    transform-origin: center center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease, opacity 0.2s ease;
}
.user-name-image.smooth-art,
.user-card-companion.smooth-art,
.supporter-preview-sprite.smooth-art {
    image-rendering: auto !important;
}
.user-name-image:hover {
    transform: scale(calc(var(--companion-scale, 1) * 1.15));
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
    opacity: 1 !important;
}

/* Supporter Companion Scale Selector & Preview */
.supporter-scale-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.04);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.supporter-scale-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
}
.supporter-scale-selector {
    display: flex;
    gap: 5px;
    align-items: center;
}
.supporter-scale-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.supporter-scale-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}
.supporter-scale-btn.active {
    background: linear-gradient(135deg, #00b894, #00cec9);
    border-color: #55efc4;
    color: #0b1523;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.45);
}
.supporter-preview-sprite {
    --companion-scale: 1;
    width: 44px;
    height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
    transform: scale(var(--companion-scale, 1));
    transform-origin: center center;
    transition: transform 0.2s;
}
.comm-author-badge-img {
    --companion-scale: 1;
    transform: scale(var(--companion-scale, 1));
    transform-origin: center center;
}
.comm-author-badge-img:hover {
    transform: scale(calc(var(--companion-scale, 1) * 1.25));
}


/* Custom Nickname Display Enhancements */
.comm-author-username {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.comm-author-username.nick-color-stellar,
.comm-author-username.nick-color-gold {
    display: inline-block !important;
}
.lb-scroll-name span[class*="nick-color-"],
.friends-item-name[class*="nick-color-"],
.history-card-name span[class*="nick-color-"] {
    display: inline-block;
    vertical-align: middle;
}


/* Gimmick Pages Layout & Overflow Protection */
.db-gimmick-page-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.db-gimmick-page-topbar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.db-gimmick-page-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.db-gimmick-hero-info {
    min-width: 0 !important;
}

.db-gimmick-hero-desc {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.db-gimmick-subtabs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.db-gimmick-page-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.db-gimmick-rules-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.db-gimmick-rules-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.db-gimmick-rules-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 980px) {
    .db-gimmick-rules-grid {
        grid-template-columns: 1fr !important;
    }
}

.db-rule-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.db-rule-text {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.db-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   TEAMBUILDER DUELS: STAT STAGES (-6..+6) & Z-MOVE SIMULATOR STYLES
   ========================================================================== */

.tb-stat-strip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding: 0 4px;
}

.tb-stat-strip-title {
    font-size: 0.76rem;
    font-weight: 700;
    color: #a4b0be;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tb-stage-reset-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ced6e0;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.tb-stage-reset-btn:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
    color: #ff7675;
    transform: translateY(-1px);
}

.tb-opp-stats-strip .stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.tb-opp-stats-strip .stat-cell.stage-pos {
    background: rgba(46, 213, 115, 0.08);
}

.tb-opp-stats-strip .stat-cell.stage-neg {
    background: rgba(255, 118, 117, 0.08);
}

.tb-opp-stats-strip .stat-cell .val.stage-pos {
    color: #2ed573 !important;
    text-shadow: 0 0 10px rgba(46, 213, 115, 0.4);
}

.tb-opp-stats-strip .stat-cell .val.stage-neg {
    color: #ff7675 !important;
    text-shadow: 0 0 10px rgba(255, 118, 117, 0.4);
}

.tb-stage-ctrls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 3px;
}

.tb-stage-btn {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    user-select: none;
}

.tb-stage-btn:hover:not(.disabled) {
    background: rgba(0, 206, 201, 0.35);
    border-color: #00cec9;
    color: #00cec9;
    transform: scale(1.1);
}

.tb-stage-btn.minus:hover:not(.disabled) {
    background: rgba(255, 118, 117, 0.35);
    border-color: #ff7675;
    color: #ff7675;
}

.tb-stage-btn.disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

.tb-stage-badge {
    font-size: 10px;
    font-weight: 800;
    min-width: 19px;
    text-align: center;
    border-radius: 3px;
    padding: 1px 2px;
    user-select: none;
}

.tb-stage-badge.pos {
    color: #2ed573;
    background: rgba(46, 213, 115, 0.18);
    border: 1px solid rgba(46, 213, 115, 0.4);
}

.tb-stage-badge.neg {
    color: #ff7675;
    background: rgba(255, 118, 117, 0.18);
    border: 1px solid rgba(255, 118, 117, 0.4);
}

.tb-stage-badge.stage-zero {
    color: #57606f;
}

.tb-stage-ctrls-placeholder {
    height: 17px;
    margin-top: 3px;
    font-size: 11px;
    color: #57606f;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

/* Z-MOVE TOGGLE BUTTON */
.tb-duel-z-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 800;
    border: 1px solid rgba(255, 211, 42, 0.35);
    background: linear-gradient(135deg, rgba(255, 230, 0, 0.08), rgba(255, 159, 26, 0.14));
    color: #ffd32a;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    user-select: none;
}

.tb-duel-z-btn:hover {
    background: linear-gradient(135deg, rgba(255, 230, 0, 0.22), rgba(255, 159, 26, 0.32));
    border-color: #ffd32a;
    box-shadow: 0 0 14px rgba(255, 211, 42, 0.45);
    transform: translateY(-1px);
}

.tb-duel-z-btn.active {
    background: linear-gradient(135deg, #ff9f1a, #eb4d4b);
    border-color: #ffd32a;
    color: #ffffff;
    box-shadow: 0 0 18px rgba(255, 159, 26, 0.65);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    animation: zPulse 1.8s infinite alternate ease-in-out;
}

@keyframes zPulse {
    0% {
        box-shadow: 0 0 12px rgba(255, 159, 26, 0.5);
    }
    100% {
        box-shadow: 0 0 22px rgba(255, 230, 0, 0.85);
    }
}

.tb-move-z-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, #ff9f1a, #eb4d4b);
    color: #ffffff;
    box-shadow: 0 0 8px rgba(255, 159, 26, 0.5);
}

/* Z-MODE CARD STYLES */
.tb-tab-move-card.z-move-card {
    border-color: rgba(255, 211, 42, 0.5) !important;
    background: linear-gradient(135deg, rgba(255, 211, 42, 0.08), rgba(235, 77, 75, 0.08)) !important;
    box-shadow: 0 0 14px rgba(255, 159, 26, 0.25) !important;
}

.tb-tab-move-card.opp-attack-card.z-mode-active {
    border-color: rgba(255, 211, 42, 0.7) !important;
    background: linear-gradient(135deg, rgba(255, 230, 0, 0.08), rgba(255, 107, 107, 0.12)) !important;
    box-shadow: 0 0 18px rgba(255, 159, 26, 0.35) !important;
}

/* Z-SURVIVAL VERDICT BANNER */
.tb-zsurvival-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-top: 10px;
    border: 1px solid;
    transition: all 0.3s ease;
}

.tb-zsurvival-card.safe {
    background: linear-gradient(135deg, rgba(46, 213, 115, 0.12), rgba(0, 206, 201, 0.16));
    border-color: rgba(46, 213, 115, 0.55);
    box-shadow: 0 4px 18px rgba(46, 213, 115, 0.18);
}

.tb-zsurvival-card.safe .tb-zsurvival-icon {
    color: #2ed573;
    font-size: 1.65rem;
    flex-shrink: 0;
}

.tb-zsurvival-card.safe .tb-zsurvival-title {
    color: #2ed573;
    font-weight: 800;
    font-size: 0.92rem;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-zsurvival-card.safe .tb-zsurvival-desc {
    color: #dfe4ea;
    font-size: 0.8rem;
    line-height: 1.35;
}

.tb-zsurvival-card.safe .tb-zsurvival-tag {
    background: #2ed573;
    color: #1e272e;
    font-weight: 800;
    font-size: 0.72rem;
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
    margin-left: auto;
    letter-spacing: 0.5px;
}

.tb-zsurvival-card.warning {
    background: linear-gradient(135deg, rgba(255, 168, 1, 0.12), rgba(255, 94, 87, 0.16));
    border-color: rgba(255, 168, 1, 0.55);
    box-shadow: 0 4px 18px rgba(255, 168, 1, 0.18);
}

.tb-zsurvival-card.warning .tb-zsurvival-icon {
    color: #ffa801;
    font-size: 1.65rem;
    flex-shrink: 0;
}

.tb-zsurvival-card.warning .tb-zsurvival-title {
    color: #ffa801;
    font-weight: 800;
    font-size: 0.92rem;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-zsurvival-card.warning .tb-zsurvival-desc {
    color: #dfe4ea;
    font-size: 0.8rem;
    line-height: 1.35;
}

.tb-zsurvival-card.warning .tb-zsurvival-tag {
    background: #ffa801;
    color: #1e272e;
    font-weight: 800;
    font-size: 0.72rem;
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
    margin-left: auto;
    letter-spacing: 0.5px;
}

.tb-zsurvival-card.lethal {
    background: linear-gradient(135deg, rgba(235, 77, 75, 0.16), rgba(192, 57, 43, 0.22));
    border-color: rgba(235, 77, 75, 0.65);
    box-shadow: 0 4px 18px rgba(235, 77, 75, 0.22);
}

.tb-zsurvival-card.lethal .tb-zsurvival-icon {
    color: #ff4757;
    font-size: 1.65rem;
    flex-shrink: 0;
}

.tb-zsurvival-card.lethal .tb-zsurvival-title {
    color: #ff4757;
    font-weight: 800;
    font-size: 0.92rem;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-zsurvival-card.lethal .tb-zsurvival-desc {
    color: #dfe4ea;
    font-size: 0.8rem;
    line-height: 1.35;
}

.tb-zsurvival-card.lethal .tb-zsurvival-tag {
    background: #ff4757;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.72rem;
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
    margin-left: auto;
    letter-spacing: 0.5px;
}

.tb-zsurvival-card.status {
    background: linear-gradient(135deg, rgba(162, 155, 254, 0.15), rgba(108, 92, 231, 0.22));
    border-color: rgba(162, 155, 254, 0.55);
    box-shadow: 0 4px 18px rgba(108, 92, 231, 0.18);
}

.tb-zsurvival-card.status .tb-zsurvival-icon {
    color: #a29bfe;
    font-size: 1.65rem;
    flex-shrink: 0;
}

.tb-zsurvival-card.status .tb-zsurvival-title {
    color: #a29bfe;
    font-weight: 800;
    font-size: 0.92rem;
    margin-bottom: 2px;
}

.tb-zsurvival-card.status .tb-zsurvival-desc {
    color: #dfe4ea;
    font-size: 0.8rem;
    line-height: 1.35;
}

.tb-zsurvival-card.status .tb-zsurvival-tag {
    background: #6c5ce7;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.72rem;
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
    margin-left: auto;
}



/* ==========================================================================
   TEAMBUILDER DUEL ENVIRONMENT BAR (WEATHER & TERRAINS)
   ========================================================================== */
.tb-opp-env-bar {
    background: rgba(16, 22, 38, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.tb-opp-env-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}

@media (max-width: 840px) {
    .tb-opp-env-grid {
        grid-template-columns: 1fr;
    }
}

.tb-opp-env-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
}

.tb-opp-env-group-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-opp-env-group-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.tb-opp-env-group-pills .env-pill-btn {
    padding: 5px 10px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tb-env-src-tag {
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    margin-left: 2px;
}


/* ==========================================================================
   TERASTALLIZATION & SCREENS UI STYLES
   ========================================================================== */
.tb-card-subaction-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tb-tera-card-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 3px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #e0e0e0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.25s ease;
}

.tb-tera-card-btn:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: #c084fc;
    color: #fff;
    transform: translateY(-1px);
}

.tb-tera-card-btn.active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.4), rgba(99, 102, 241, 0.4));
    border-color: #c084fc;
    color: #fff;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.45);
    font-weight: bold;
}

.tb-tera-card-btn.opp:hover {
    background: rgba(236, 72, 153, 0.2);
    border-color: #f472b6;
}

.tb-tera-card-btn.opp.active {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.4), rgba(239, 68, 68, 0.4));
    border-color: #f472b6;
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.45);
    color: #fff;
    font-weight: bold;
}

.tb-tera-card-change-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 3px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.tb-tera-card-change-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.db-card-type-badge.tera-mode-badge {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.4), rgba(59, 130, 246, 0.4));
    border: 1px solid #c084fc;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
    font-weight: bold;
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
}

.tb-env-sub-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.6);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
}


/* Status Pills in Duel Tab */
.tb-status-pills-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.tb-status-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    margin-right: 3px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.tb-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    line-height: 1.2;
}

.tb-status-pill i {
    font-size: 0.65rem;
}

.tb-status-pill:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.tb-status-pill.active {
    font-weight: bold;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}

.tb-status-pill.pill-brn.active {
    background: rgba(239, 68, 68, 0.35);
    border-color: #ef4444;
    color: #fca5a5;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
}

.tb-status-pill.pill-par.active {
    background: rgba(234, 179, 8, 0.35);
    border-color: #eab308;
    color: #fef08a;
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.45);
}

.tb-status-pill.pill-psn.active {
    background: rgba(168, 85, 247, 0.35);
    border-color: #a855f7;
    color: #e9d5ff;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.45);
}

.tb-status-pill.pill-tox.active {
    background: rgba(139, 92, 246, 0.4);
    border-color: #8b5cf6;
    color: #ddd6fe;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.45);
}

.tb-status-pill.pill-slp.active {
    background: rgba(96, 165, 250, 0.35);
    border-color: #60a5fa;
    color: #bfdbfe;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.45);
}

.tb-status-pill.pill-frz.active {
    background: rgba(45, 212, 191, 0.35);
    border-color: #2dd4bf;
    color: #99f6e4;
    box-shadow: 0 0 8px rgba(45, 212, 191, 0.45);
}


/* Clickable Opponent Avatar & Change Header */
.tb-opp-avatar-clickable {
    position: relative;
    cursor: pointer;
    display: inline-block;
    border-radius: 12px;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.tb-opp-avatar-clickable:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 0 10px rgba(0, 206, 201, 0.7));
}

.tb-opp-avatar-search-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #00cec9;
    color: #0b1329;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    box-shadow: 0 0 6px rgba(0, 206, 201, 0.7);
    border: 2px solid #141c2f;
    transition: all 0.2s ease;
}

.tb-opp-avatar-clickable:hover .tb-opp-avatar-search-badge {
    transform: scale(1.15);
    background: #55efc4;
}

.tb-opp-card-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.tb-opp-change-poke-btn {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.2), rgba(9, 132, 227, 0.2));
    border: 1px solid rgba(0, 206, 201, 0.45);
    color: #00cec9;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.72rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.tb-opp-change-poke-btn:hover {
    background: rgba(0, 206, 201, 0.35);
    border-color: #00cec9;
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.5);
}

.tb-clickable-title {
    cursor: pointer;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
}

.tb-clickable-title:hover {
    color: #00cec9;
}


/* Ability Boosted Pill & Tag */
.tb-opp-build-pill.ability-boosted {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.25), rgba(0, 206, 201, 0.25)) !important;
    border-color: #2ecc71 !important;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.5) !important;
}

.tb-ability-boost-tag {
    background: rgba(46, 204, 113, 0.35);
    color: #86efac;
    border: 1px solid #2ecc71;
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.4);
}


/* Entry Hazard Badges & Active Buttons */
.env-pill-btn.active.rock-hazard {
    background: linear-gradient(135deg, rgba(225, 112, 85, 0.45), rgba(214, 48, 49, 0.45)) !important;
    border-color: #e17055 !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(225, 112, 85, 0.5) !important;
}

.tb-hazard-dmg-badge {
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}
.tb-hazard-dmg-badge i {
    font-size: 0.6rem;
    color: #f59e0b;
}
.tb-hazard-dmg-badge.our {
    background: rgba(225, 112, 85, 0.25);
    border: 1px solid #e17055;
    color: #fab1a0;
}
.tb-hazard-dmg-badge.opp {
    background: rgba(214, 48, 49, 0.25);
    border: 1px solid #d63031;
    color: #ff7675;
}

.tb-hazard-boots-badge {
    font-size: 0.7rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    margin-left: 6px;
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid #00cec9;
    color: #81ecec;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


/* Battle Format Toggle & Helping Hand */
.tb-format-switch-group {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.35);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 3px;
}

.tb-format-btn {
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Minecraft', monospace;
    font-size: 0.74rem;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.tb-format-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.tb-format-btn.active {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.3), rgba(9, 132, 227, 0.3));
    border-color: #00cec9;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.4);
}

.tb-hh-btns-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* === HP Control Slider & Badges (Duel Calculator) === */
.tb-hp-control-box {
    margin-top: 4px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 5px 8px;
}
.tb-hp-control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.tb-hp-label-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}
.tb-hp-icon {
    color: #ef4444;
}
.tb-hp-title {
    font-weight: 600;
    color: #e2e8f0;
}
.tb-hp-numbers {
    font-family: 'Minecraft', monospace;
    font-size: 0.78rem;
    color: #94a3b8;
}
.tb-hp-numbers b {
    color: #f1f5f9;
}
.tb-hp-badges-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.tb-hp-status-tag {
    font-size: 0.68rem;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tb-hp-status-tag.sash-ready {
    background: rgba(46, 204, 113, 0.2);
    border: 1px solid #2ecc71;
    color: #86efac;
}
.tb-hp-status-tag.sash-broken {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    text-decoration: line-through;
}
.tb-hp-status-tag.multiscale-ready {
    background: rgba(0, 206, 201, 0.2);
    border: 1px solid #00cec9;
    color: #a5f3fc;
}
.tb-hp-status-tag.multiscale-broken {
    background: rgba(148, 163, 184, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #94a3b8;
}
.tb-hp-status-tag.pinch-active {
    background: rgba(245, 158, 11, 0.25);
    border: 1px solid #f59e0b;
    color: #fef08a;
    animation: pulseGlow 1.5s infinite alternate;
}
.tb-hp-status-tag.pinch-debuff {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #fca5a5;
}
.tb-hp-status-tag.berry-ready {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid #a855f7;
    color: #d8b4fe;
}
.tb-hp-visual-bar-track {
    width: 100%;
    height: 7px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.tb-hp-visual-bar-fill {
    height: 100%;
    transition: width 0.25s ease, background-color 0.25s ease;
    border-radius: 3px;
}
.tb-hp-visual-bar-fill.hp-high {
    background: linear-gradient(90deg, #10b981, #2ecc71);
}
.tb-hp-visual-bar-fill.hp-mid {
    background: linear-gradient(90deg, #f59e0b, #eab308);
}
.tb-hp-visual-bar-fill.hp-low {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}
.tb-hp-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tb-hp-slider {
    flex: 1;
    min-width: 100px;
    height: 6px;
    accent-color: #3b82f6;
    cursor: pointer;
}
.tb-hp-presets {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.tb-hp-preset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.tb-hp-preset-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.25);
}
.tb-hp-preset-btn.active {
    background: rgba(59, 130, 246, 0.25);
    border-color: #3b82f6;
    color: #60a5fa;
}

/* === Admin Supporter Management Panel === */
.admin-supporter-quick-panel {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.admin-supporter-quick-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #e2e8f0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-supporter-quick-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-supporter-input {
    flex: 1.2;
    min-width: 180px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 7px 10px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.2s;
}
.admin-supporter-input:focus {
    border-color: #00cec9;
}
.admin-supporter-select {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 7px 10px;
    color: #e2e8f0;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    outline: none;
}
.admin-grant-supporter-btn {
    background: linear-gradient(135deg, #00cec9, #0984e3);
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.15s, opacity 0.15s;
    box-shadow: 0 2px 8px rgba(0, 206, 201, 0.3);
}
.admin-grant-supporter-btn:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}
.admin-grant-supporter-btn:active {
    transform: translateY(0);
}
.admin-user-supporter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    margin-left: 6px;
}
.admin-user-supporter-pill.trainer {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #fca5a5;
}
.admin-user-supporter-pill.ultra {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid #3b82f6;
    color: #93c5fd;
}
.admin-user-supporter-pill.master {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid #a855f7;
    color: #d8b4fe;
}
.admin-user-supporter-pill.founder {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(234, 179, 8, 0.2));
    border: 1px solid #f59e0b;
    color: #fef08a;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}
.admin-user-supporter-pill.expired {
    background: rgba(148, 163, 184, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #94a3b8;
    text-decoration: line-through;
}
.admin-supporter-action-btn {
    background: rgba(0, 206, 201, 0.12);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    font-size: 0.55rem;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 6px;
    transition: all 0.15s;
    font-family: 'Minecraft', monospace;
}
.admin-supporter-action-btn:hover {
    background: rgba(0, 206, 201, 0.25);
    color: #fff;
    border-color: #00cec9;
}


/* Tier Lock Badges & Indicators */
.tier-locked {
    opacity: 0.42 !important;
    filter: grayscale(0.7);
    cursor: not-allowed !important;
    position: relative;
}
.tier-locked:hover {
    border-color: rgba(255, 71, 87, 0.4) !important;
}
.supporter-poke-card.locked {
    opacity: 0.38;
    filter: grayscale(0.85);
    position: relative;
    cursor: not-allowed;
    background: rgba(20, 20, 30, 0.4);
    border-color: rgba(255, 255, 255, 0.05);
}
.supporter-poke-card.locked:hover {
    border-color: rgba(255, 71, 87, 0.5);
    opacity: 0.6;
    transform: none;
}
.supporter-poke-card-lock-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(10, 10, 20, 0.85);
    color: #ffd32a;
    border: 1px solid rgba(255, 211, 42, 0.4);
    border-radius: 50%;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.52rem;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}


/* Avatar Background Chips & Mobile Touch Fix */
.avatar-bg-chip {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    touch-action: manipulation;
    padding: 0;
    outline: none;
    display: inline-block;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}
.avatar-bg-chip:hover,
.avatar-bg-chip:active {
    transform: scale(1.14);
    border-color: #ffffff;
}
.avatar-bg-chip.active {
    border-color: #ffd32a !important;
    box-shadow: 0 0 0 2px #1a1a2e, 0 0 10px #ffd32a !important;
    transform: scale(1.12);
}

@media (max-width: 768px) {
    .avatar-bg-chip {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    #customColorPicker {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 92vw !important;
        box-sizing: border-box !important;
    }
}



/* Normalized Companion Icons for Cards, Lists & Comments */
.user-card-companion-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
    overflow: visible !important;
}
.user-card-companion {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto !important;
    transition: transform 0.2s ease;
}
.user-card-companion-wrap:hover .user-card-companion {
    transform: scale(1.18);
}

/* Titan scale button in Wardrobe */
.supporter-scale-btn--titan {
    border-color: rgba(243, 156, 18, 0.4) !important;
    color: #f1c40f !important;
}
.supporter-scale-btn--titan:hover {
    background: rgba(243, 156, 18, 0.2) !important;
    color: #fff !important;
    border-color: #f39c12 !important;
}
.supporter-scale-btn--titan.active {
    background: linear-gradient(135deg, #f39c12, #e74c3c) !important;
    border-color: #f1c40f !important;
    color: #fff !important;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(243, 156, 18, 0.6) !important;
}

/* Titan Companion in Top Bar */
.user-name-image.companion-titan {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65));
    z-index: 100;
    margin-left: 14px;
}


.friends-item-name {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
}
.friends-item-name .user-card-companion-wrap {
    margin-left: 2px !important;
}



/* Supporter Companion Horizontal Gap Slider */
.supporter-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
}
.supporter-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd32a, #ff9f1a);
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(255, 211, 42, 0.6);
    transition: transform 0.15s, box-shadow 0.15s;
}
.supporter-range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 12px rgba(255, 211, 42, 0.9);
}
.supporter-range-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd32a, #ff9f1a);
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(255, 211, 42, 0.6);
}
.supporter-preview-mock-icons {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    opacity: 0.55;
    margin-left: 6px;
}
.supporter-preview-mock-icons i {
    font-size: 0.78rem;
    color: #a4b0be;
}


/* Supporter Scale Slider & Colossus Preset */
.supporter-range-slider--cyan::-webkit-slider-thumb {
    background: linear-gradient(135deg, #00cec9, #0984e3) !important;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.6) !important;
}
.supporter-range-slider--cyan::-webkit-slider-thumb:hover {
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.9) !important;
}
.supporter-range-slider--cyan::-moz-range-thumb {
    background: linear-gradient(135deg, #00cec9, #0984e3) !important;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.6) !important;
}
.supporter-scale-btn--colossus {
    border-color: rgba(168, 85, 247, 0.4) !important;
    color: #c084fc !important;
}
.supporter-scale-btn--colossus:hover {
    background: rgba(168, 85, 247, 0.2) !important;
    color: #fff !important;
    border-color: #a855f7 !important;
}
.supporter-scale-btn--colossus.active {
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    border-color: #f472b6 !important;
    color: #fff !important;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.6) !important;
}


/* Tier Locked Elements in Supporter Wardrobe */
.supporter-mode-btn.tier-locked,
.supporter-shiny-chip.tier-locked,
.supporter-color-chip.tier-locked {
    opacity: 0.42 !important;
    position: relative;
    cursor: not-allowed !important;
    filter: grayscale(0.6);
}
.supporter-mode-btn.tier-locked::after,
.supporter-shiny-chip.tier-locked::after {
    content: '\f023';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    font-size: 0.65rem;
    margin-left: 4px;
    opacity: 0.7;
}
.supporter-color-chip.tier-locked::after {
    content: '\f023';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    font-size: 0.6rem;
    margin-left: 3px;
    opacity: 0.7;
}


/* ===================================================
   SUPPORT & BOOSTY TIERS MODAL ENHANCEMENT
   =================================================== */
.hosting-modal-card--tiers {
    max-width: 980px !important;
    width: 95vw !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    padding: 32px 28px !important;
    background: linear-gradient(155deg, #0d0f22 0%, #13152c 50%, #0a0b16 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.35) !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(255, 200, 50, 0.15) !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.3) transparent;
}
.hosting-modal-card--tiers::-webkit-scrollbar {
    width: 6px;
}
.hosting-modal-card--tiers::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    border-radius: 4px;
}
.hosting-modal-card--tiers .hosting-modal-close {
    top: 18px;
    right: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
    transition: all 0.25s ease;
}
.hosting-modal-card--tiers .hosting-modal-close:hover {
    background: rgba(235, 77, 75, 0.3);
    border-color: #ff6b6b;
    color: #fff;
    transform: rotate(90deg);
}

.supporter-tiers-modal-header {
    text-align: center;
    margin-bottom: 20px;
}
.supporter-tiers-heart-icon {
    font-size: 2.2rem;
    color: #ff4757;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 15px rgba(255, 71, 87, 0.6));
    animation: cardFloat 3s ease-in-out infinite;
}
.supporter-tiers-modal-header h3 {
    font-family: 'Minecraft', monospace;
    font-size: 1.3rem;
    color: #ffd32a;
    margin: 0 0 8px 0;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(255, 211, 42, 0.35);
}
.supporter-tiers-modal-header p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.55;
}

/* Try all / wardrobe teaser bar */
.supporter-tiers-try-all-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.12) 0%, rgba(168, 85, 247, 0.15) 100%);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 14px;
    padding: 12px 18px;
    margin-bottom: 18px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
}
.supporter-tiers-try-all-bar:hover {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.2) 0%, rgba(168, 85, 247, 0.25) 100%);
    border-color: rgba(0, 206, 201, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 206, 201, 0.2);
}
.supporter-tiers-try-all-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.78rem;
    line-height: 1.4;
}
.supporter-tiers-try-all-content strong {
    color: #00cec9;
}
.supporter-tiers-try-all-arrow {
    color: #00cec9;
    font-size: 1rem;
    transition: transform 0.2s ease;
}
.supporter-tiers-try-all-bar:hover .supporter-tiers-try-all-arrow {
    transform: translateX(4px);
}

/* New features showcase banner in donate modal */
.supporter-new-features-banner {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 18px rgba(0, 206, 201, 0.12);
}
.supporter-new-features-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    color: #00cec9;
}
.supporter-new-features-head span {
    color: #fff;
    font-weight: 700;
}
.supporter-new-features-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.supporter-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 0.68rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.88);
    transition: all 0.2s ease;
}
.supporter-feature-tag:hover {
    border-color: #00cec9;
    color: #fff;
    transform: translateY(-1px);
    background: rgba(0, 206, 201, 0.15);
}

/* Dynamic Sale Banner */
.supporter-sale-banner {
    background: linear-gradient(135deg, rgba(235, 77, 75, 0.2) 0%, rgba(255, 159, 67, 0.2) 100%);
    border: 1px solid rgba(255, 107, 107, 0.5);
    border-radius: 14px;
    padding: 12px 18px;
    margin-bottom: 20px;
    box-shadow: 0 4px 18px rgba(235, 77, 75, 0.2);
}
.supporter-sale-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.supporter-sale-fire-icon {
    font-size: 1.5rem;
    color: #ff6b6b;
    filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.7));
    animation: firePulse 1.5s ease-in-out infinite alternate;
}
@keyframes firePulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255, 107, 107, 0.6)); }
    100% { transform: scale(1.15); filter: drop-shadow(0 0 14px rgba(255, 107, 107, 0.9)); }
}
.supporter-sale-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    flex: 1;
}
.supporter-sale-text-wrap strong {
    font-family: 'Minecraft', monospace;
    font-size: 0.85rem;
    color: #ffd32a;
}
.supporter-sale-text-wrap span {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
}
.supporter-sale-countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 211, 42, 0.4);
    border-radius: 8px;
    padding: 6px 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    color: #ffd32a;
}

/* Grid of 3 tier cards */
.supporter-tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 22px;
    align-items: stretch;
}
.supporter-tier-card {
    position: relative;
    background: rgba(18, 20, 42, 0.82);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: all 0.25s ease;
}
.supporter-tier-card:hover {
    transform: translateY(-4px);
}

/* Tier Card: Trainer */
.supporter-tier-card--trainer {
    border: 1px solid rgba(235, 77, 75, 0.45);
    box-shadow: 0 4px 20px rgba(235, 77, 75, 0.1);
}
.supporter-tier-card--trainer:hover {
    border-color: rgba(235, 77, 75, 0.85);
    box-shadow: 0 8px 25px rgba(235, 77, 75, 0.25);
}

/* Tier Card: Ultra (Popular) */
.supporter-tier-card--ultra {
    border: 2px solid #00cec9;
    background: linear-gradient(180deg, rgba(0, 206, 201, 0.1) 0%, rgba(18, 20, 42, 0.9) 100%);
    box-shadow: 0 6px 28px rgba(0, 206, 201, 0.25);
    transform: scale(1.02);
}
.supporter-tier-card--ultra:hover {
    transform: scale(1.03) translateY(-4px);
    box-shadow: 0 10px 35px rgba(0, 206, 201, 0.4);
}

/* Tier Card: Master */
.supporter-tier-card--master {
    border: 1px solid rgba(168, 85, 247, 0.55);
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.08) 0%, rgba(18, 20, 42, 0.9) 100%);
    box-shadow: 0 4px 22px rgba(168, 85, 247, 0.18);
}
.supporter-tier-card--master:hover {
    border-color: rgba(168, 85, 247, 0.95);
    box-shadow: 0 8px 30px rgba(168, 85, 247, 0.35);
}

/* Popular badge */
.supporter-tier-popular-tag {
    position: absolute;
    top: -12px;
    right: 16px;
    background: linear-gradient(135deg, #00cec9, #0984e3);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    font-family: 'Minecraft', monospace;
    padding: 3px 10px;
    border-radius: 12px;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 12px rgba(0, 206, 201, 0.5);
    z-index: 2;
}

/* Card Header elements */
.supporter-tier-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 12px;
    align-self: flex-start;
}
.supporter-tier-ball-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}
.supporter-tier-card-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 8px;
}
.supporter-tier-card--trainer .supporter-tier-card-title { color: #ff6b6b; }
.supporter-tier-card--ultra .supporter-tier-card-title { color: #00cec9; }
.supporter-tier-card--master .supporter-tier-card-title { color: #c084fc; }

.supporter-tier-card-price {
    font-family: 'Minecraft', monospace;
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffd32a;
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}
.supporter-tier-card-price span[id^="tierPrice_"] {
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffd32a;
}
.supporter-tier-period {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: normal;
}
.supporter-old-price {
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
    text-decoration: line-through !important;
    margin-right: 4px !important;
    font-weight: normal !important;
}
.supporter-sale-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    color: #fff !important;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 6px;
    margin-left: 6px;
    vertical-align: middle;
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.5);
}

.supporter-tier-card-section-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.supporter-tier-card-section-label.is-limits {
    margin-top: 14px;
    color: rgba(255, 107, 107, 0.7);
}

.supporter-tier-features-list,
.supporter-tier-limits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.supporter-tier-features-list {
    margin-bottom: 6px;
}
.supporter-tier-limits-list {
    margin-bottom: 16px;
}
.supporter-tier-features-list li {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.35;
}
.supporter-tier-features-list li i {
    color: #2ed573;
    font-size: 0.72rem;
    margin-top: 3px;
    flex-shrink: 0;
}
.supporter-tier-limits-list li {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.3;
}
.supporter-tier-limits-list li i {
    color: rgba(255, 71, 87, 0.65);
    font-size: 0.68rem;
    margin-top: 3px;
    flex-shrink: 0;
}

/* CTA buttons */
.supporter-tier-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 12px;
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff !important;
    text-decoration: none !important;
    margin-top: auto;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.supporter-tier-cta-btn--trainer {
    background: linear-gradient(135deg, #eb4d4b, #c0392b);
}
.supporter-tier-cta-btn--trainer:hover {
    background: linear-gradient(135deg, #ff6b6b, #d63031);
    box-shadow: 0 6px 20px rgba(235, 77, 75, 0.45);
    transform: translateY(-2px);
}
.supporter-tier-cta-btn--ultra {
    background: linear-gradient(135deg, #00cec9, #0984e3);
}
.supporter-tier-cta-btn--ultra:hover {
    background: linear-gradient(135deg, #00ece6, #00a8ff);
    box-shadow: 0 6px 22px rgba(0, 206, 201, 0.55);
    transform: translateY(-2px);
}
.supporter-tier-cta-btn--master {
    background: linear-gradient(135deg, #9b59b6, #e056fd);
}
.supporter-tier-cta-btn--master:hover {
    background: linear-gradient(135deg, #b06ab3, #be2edd);
    box-shadow: 0 6px 22px rgba(155, 89, 182, 0.55);
    transform: translateY(-2px);
}

/* Preview buttons */
.supporter-tier-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.2s ease;
}
.supporter-tier-preview-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    transform: translateY(-1px);
}
.supporter-tier-preview-btn--ultra:hover {
    border-color: #00cec9;
    color: #00cec9;
}
.supporter-tier-preview-btn--master:hover {
    border-color: #c084fc;
    color: #c084fc;
}

/* VIP LIFETIME TIER CARD: Мастер Покемонов (Beast Ball) */
.supporter-tier-founder-card {
    position: relative;
    background: linear-gradient(135deg, rgba(26, 20, 50, 0.88) 0%, rgba(15, 18, 38, 0.95) 50%, rgba(32, 18, 48, 0.9) 100%);
    border: 2px solid rgba(241, 196, 15, 0.5);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 22px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 25px rgba(241, 196, 15, 0.15);
    transition: all 0.3s ease;
    text-align: left;
}
.supporter-tier-founder-card:hover {
    border-color: rgba(241, 196, 15, 0.85);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 35px rgba(241, 196, 15, 0.3);
    transform: translateY(-2px);
}
.supporter-tier-founder-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(241, 196, 15, 0.06) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.supporter-tier-founder-tag {
    position: absolute;
    top: -1px;
    right: 24px;
    background: linear-gradient(135deg, #f39c12, #e74c3c);
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 0 0 12px 12px;
    letter-spacing: 0.8px;
    box-shadow: 0 4px 14px rgba(243, 156, 18, 0.4);
    z-index: 2;
}
.supporter-tier-founder-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
.supporter-tier-founder-info {
    flex: 1;
    min-width: 280px;
}
.supporter-tier-founder-header {
    margin-bottom: 14px;
}
.supporter-tier-card-badge--beast {
    background: rgba(0, 206, 201, 0.12);
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
}
.supporter-tier-ball-img--beast {
    width: 24px;
    height: 24px;
}
.supporter-tier-founder-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    font-weight: bold;
    color: #ffd32a;
    margin: 8px 0 6px 0;
    text-shadow: 0 0 12px rgba(255, 211, 42, 0.4);
    display: flex;
    align-items: center;
}
.supporter-tier-founder-price {
    font-family: 'Minecraft', monospace;
    font-size: 1.55rem;
    font-weight: bold;
    color: #ffd32a;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.supporter-tier-founder-price span[id^="tierPrice_"] {
    font-size: 1.55rem;
    font-weight: bold;
    color: #ffd32a;
}
.supporter-tier-founder-price-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: normal;
}
.supporter-tier-founder-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
}
.supporter-tier-founder-features li {
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.35;
}
.supporter-tier-founder-features li i {
    font-size: 0.75rem;
    margin-top: 3px;
    flex-shrink: 0;
}
.supporter-tier-founder-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 230px;
}
.supporter-tier-cta-btn--founder {
    width: 100%;
    background: linear-gradient(135deg, #f1c40f 0%, #e67e22 50%, #e74c3c 100%);
    color: #1a1a2e !important;
    font-weight: 800;
    box-shadow: 0 6px 25px rgba(241, 196, 15, 0.45);
    margin-top: 0;
}
.supporter-tier-cta-btn--founder:hover {
    background: linear-gradient(135deg, #f39c12 0%, #d35400 50%, #c0392b 100%);
    color: #fff !important;
    box-shadow: 0 8px 30px rgba(241, 196, 15, 0.6);
    transform: translateY(-2px);
}
.supporter-tier-preview-btn--founder {
    width: 100%;
    padding: 8px 18px;
    border-color: rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.12);
}
.supporter-tier-preview-btn--founder:hover {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.28);
    color: #ffd32a;
}
.supporter-tier-founder-subtext {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-family: 'Minecraft', monospace;
}

/* Activation hint banner */
.supporter-activation-hint {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(30, 39, 73, 0.6);
    border: 1px solid rgba(116, 185, 255, 0.3);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
    text-align: left;
}
.supporter-activation-hint-icon {
    font-size: 1.4rem;
    color: #74b9ff;
    flex-shrink: 0;
}
.supporter-activation-hint-text {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
}

/* One-time donate strip */
.supporter-one-time-donate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(245, 200, 66, 0.08);
    border: 1px dashed rgba(245, 200, 66, 0.4);
    border-radius: 14px;
    padding: 12px 18px;
    flex-wrap: wrap;
    gap: 12px;
}
.supporter-one-time-text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
}
.hosting-donate-btn--compact {
    padding: 8px 18px !important;
    font-size: 0.72rem !important;
    margin: 0 !important;
    border-radius: 10px !important;
}

/* Responsive */
@media (max-width: 820px) {
    .supporter-tiers-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .supporter-tier-card--ultra {
        transform: none !important;
    }
    .supporter-tier-card--ultra:hover {
        transform: translateY(-4px) !important;
    }
    .hosting-modal-card--tiers {
        padding: 22px 16px !important;
        max-height: 94vh !important;
    }
    .supporter-tier-founder-content {
        flex-direction: column;
        align-items: stretch;
    }
    .supporter-tier-founder-features {
        grid-template-columns: 1fr;
    }
    .supporter-tier-founder-action {
        width: 100%;
    }
    .supporter-tier-cta-btn--founder {
        width: 100%;
    }
    .supporter-tier-preview-btn--founder {
        width: 100%;
    }
    .supporter-one-time-donate {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
}



/* ============================================================
   LOBBY GAME MODES REDESIGN (Option 1: Gaming Lobby Cards)
   ============================================================ */
.lobby-modes-container {
    background: linear-gradient(180deg, rgba(24, 24, 46, 0.92) 0%, rgba(15, 15, 28, 0.96) 100%);
    border: 1px solid rgba(233, 69, 96, 0.25);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 1px rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 22px 24px;
    margin: 0 0 28px 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.lobby-modes-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #e94560 50%, transparent 100%);
    opacity: 0.8;
}

.lobby-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lobby-title-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lobby-icon-box {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(255, 107, 129, 0.1));
    border: 1px solid rgba(233, 69, 96, 0.4);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6b81;
    font-size: 1.35rem;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.25);
}

.lobby-title-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lobby-badge-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    color: #e94560;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
}

.lobby-main-heading {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

.lobby-ambient-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lobby-ambient-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(14, 14, 26, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 6px 14px;
    transition: all 0.25s ease;
}

.lobby-ambient-pill:hover,
.lobby-ambient-pill:focus-within {
    border-color: rgba(233, 69, 96, 0.55);
    box-shadow: 0 0 16px rgba(233, 69, 96, 0.22);
    background: rgba(22, 22, 40, 0.9);
}

.lobby-ambient-icon {
    font-size: 0.95rem;
    color: #e94560;
}

.lobby-ambient-select-wrap {
    display: flex;
    flex-direction: column;
}

.lobby-ambient-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 2px;
}

.lobby-ambient-select {
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.82rem;
    cursor: pointer;
    outline: none;
    padding: 0;
    margin: 0;
}

.lobby-ambient-select option {
    background: #16162a;
    color: #ffffff;
    padding: 8px;
}

.lobby-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.lobby-card {
    position: relative;
    background: rgba(22, 22, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    min-height: 175px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
    width: 100%;
}

.lobby-card:hover {
    transform: translateY(-4px);
    border-color: rgba(233, 69, 96, 0.5);
    background: rgba(30, 30, 56, 0.85);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(233, 69, 96, 0.2);
}

.lobby-card:active {
    transform: translateY(-1px);
}

.lobby-card.active-mode-btn {
    border-color: #e94560 !important;
    background: linear-gradient(160deg, rgba(233, 69, 96, 0.22) 0%, rgba(26, 26, 48, 0.95) 100%) !important;
    box-shadow: 0 0 24px rgba(233, 69, 96, 0.45), inset 0 0 16px rgba(233, 69, 96, 0.12) !important;
    transform: translateY(-2px);
}

.lobby-card.active-mode-btn .lobby-card-bottom-line {
    background: linear-gradient(90deg, #ff6b81, #e94560);
    opacity: 1;
    box-shadow: 0 0 8px #ff6b81;
}

.lobby-card-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 12px;
}

.lobby-card-tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.active-mode-btn .lobby-card-tag {
    background: rgba(233, 69, 96, 0.25);
    color: #ff8599;
    border-color: rgba(233, 69, 96, 0.5);
}

.lobby-card-status {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.2s ease;
}

.active-mode-btn .lobby-card-status {
    color: #ff6b81;
    font-weight: 700;
}

.lobby-card-icon-frame {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: 12px;
    transition: all 0.25s ease;
}

.lobby-card:hover .lobby-card-icon-frame {
    transform: scale(1.08);
    background: rgba(233, 69, 96, 0.15);
    border-color: rgba(233, 69, 96, 0.4);
    color: #ff6b81;
}

.active-mode-btn .lobby-card-icon-frame {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #ff6b81;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.4);
}

.lobby-card-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.lobby-card-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.active-mode-btn .lobby-card-name {
    color: #ff8599;
}

.lobby-card-description {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.68);
    margin-bottom: 8px;
    letter-spacing: 0.2px;
}

.lobby-card-bottom-line {
    width: 100%;
    height: 2px;
    background: transparent;
    border-radius: 2px;
    margin-top: auto;
    opacity: 0;
    transition: all 0.25s ease;
}

.lobby-card-room:hover .lobby-card-icon-frame {
    border-color: rgba(78, 205, 196, 0.5);
    color: #4ecdc4;
}
.lobby-card-room .tag-room {
    color: #4ecdc4;
    border-color: rgba(78, 205, 196, 0.3);
    background: rgba(78, 205, 196, 0.1);
}

@media (max-width: 1180px) {
    .lobby-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .lobby-modes-container {
        padding: 16px 14px;
        margin-bottom: 20px;
    }
    .lobby-header-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .lobby-ambient-panel {
        width: 100%;
        justify-content: flex-start;
    }
    .lobby-ambient-pill {
        flex: 1 1 auto;
        min-width: 140px;
    }
    .lobby-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .lobby-card {
        padding: 14px 12px 10px;
        min-height: 155px;
    }
    .lobby-card-name {
        font-size: 0.88rem;
    }
    .lobby-card-description {
        font-size: 0.58rem;
    }
}

@media (max-width: 500px) {
    .lobby-cards-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   AMBIENT MODAL & LOBBY TRIGGERS (MUSIC & BACKGROUND SELECTION)
   ========================================================================== */

.lobby-ambient-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(18, 20, 36, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    user-select: none;
    text-align: left;
}

.lobby-ambient-trigger:hover {
    background: rgba(28, 32, 54, 0.95);
    border-color: rgba(233, 69, 96, 0.6);
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.25), 0 6px 20px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}

.lobby-trigger-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.lobby-ambient-trigger:hover .lobby-trigger-icon-box {
    transform: scale(1.08);
}

.lobby-trigger-icon-box.music-accent {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(15, 52, 96, 0.35));
    border: 1px solid rgba(233, 69, 96, 0.45);
    color: #ff577d;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.2);
}

.lobby-trigger-icon-box.bg-accent {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.22), rgba(58, 123, 213, 0.3));
    border: 1px solid rgba(0, 210, 255, 0.4);
    color: #38ef7d;
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.2);
}

.lobby-trigger-info {
    display: flex;
    flex-direction: column;
    min-width: 90px;
}

.lobby-trigger-label {
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.lobby-trigger-value {
    font-family: 'Minecraft', monospace;
    font-size: 0.86rem;
    color: #ffffff;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.lobby-trigger-arrow {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.35);
    margin-left: 4px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.lobby-ambient-trigger:hover .lobby-trigger-arrow {
    color: #e94560;
    transform: rotate(90deg);
}

/* Ambient Modal Overlay */
.ambient-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(8, 10, 20, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ambient-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Modal Window Container */
.ambient-modal-container {
    background: linear-gradient(165deg, rgba(22, 26, 44, 0.96) 0%, rgba(14, 16, 28, 0.98) 100%);
    border: 1px solid rgba(233, 69, 96, 0.35);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(233, 69, 96, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    width: 100%;
    max-width: 680px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(24px) scale(0.96);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ambient-modal-overlay.active .ambient-modal-container {
    transform: translateY(0) scale(1);
}

/* Header */
.ambient-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(14, 16, 30, 0.6);
}

.ambient-header-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ambient-header-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(15, 52, 96, 0.4));
    border: 1px solid rgba(233, 69, 96, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e94560;
    font-size: 1.25rem;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.25);
}

.ambient-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.ambient-subtitle {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 3px 0 0 0;
}

.ambient-close-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.ambient-close-btn:hover {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #ffffff;
    transform: rotate(90deg);
}

/* Tabs */
.ambient-tabs-nav {
    display: flex;
    background: rgba(10, 12, 22, 0.7);
    padding: 8px 24px;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ambient-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.22s ease;
}

.ambient-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.ambient-tab-btn.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.3), rgba(15, 52, 96, 0.45));
    border-color: rgba(233, 69, 96, 0.65);
    color: #ffffff;
    box-shadow: 0 0 16px rgba(233, 69, 96, 0.25);
}

/* Body */
.ambient-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    max-height: 52vh;
}

.ambient-modal-body::-webkit-scrollbar {
    width: 6px;
}

.ambient-modal-body::-webkit-scrollbar-thumb {
    background: rgba(233, 69, 96, 0.4);
    border-radius: 4px;
}

.ambient-section-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
}

.ambient-section-hint i {
    color: #e94560;
}

/* Music Track Cards */
.ambient-music-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ambient-track-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(25, 28, 48, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ambient-track-item:hover {
    background: rgba(35, 40, 68, 0.85);
    border-color: rgba(233, 69, 96, 0.4);
    transform: translateX(4px);
}

.ambient-track-item.active {
    background: linear-gradient(90deg, rgba(233, 69, 96, 0.18), rgba(25, 28, 48, 0.75));
    border-color: #e94560;
    box-shadow: 0 0 16px rgba(233, 69, 96, 0.25);
}

.ambient-track-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.ambient-track-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff577d;
    font-size: 1rem;
    flex-shrink: 0;
}

.ambient-track-icon.muted {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.4);
}

.ambient-track-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ambient-track-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.92rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ambient-track-desc {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ambient-track-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
    flex-shrink: 0;
}

.ambient-preview-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.ambient-preview-btn:hover {
    background: #e94560;
    border-color: #ff577d;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
    transform: scale(1.08);
}

.ambient-preview-btn.playing {
    background: #e94560;
    border-color: #ff577d;
    box-shadow: 0 0 16px rgba(233, 69, 96, 0.65);
    animation: ambientPulse 1.2s infinite alternate;
}

@keyframes ambientPulse {
    from { transform: scale(1); box-shadow: 0 0 8px rgba(233, 69, 96, 0.5); }
    to { transform: scale(1.1); box-shadow: 0 0 20px rgba(233, 69, 96, 0.85); }
}

.ambient-check-badge {
    color: rgba(255, 255, 255, 0.15);
    font-size: 1.15rem;
    transition: all 0.2s ease;
}

.ambient-track-item.active .ambient-check-badge {
    color: #38ef7d;
    text-shadow: 0 0 10px rgba(56, 239, 125, 0.5);
}

/* Background Wallpaper Cards */
.ambient-bg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.ambient-bg-item {
    background: rgba(22, 26, 44, 0.65);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.ambient-bg-item:hover {
    border-color: rgba(56, 239, 125, 0.5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 239, 125, 0.2);
    transform: translateY(-3px);
}

.ambient-bg-item.active {
    border-color: #38ef7d;
    box-shadow: 0 0 24px rgba(56, 239, 125, 0.4);
}

.ambient-bg-thumb-wrap {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    background: #0d0e17;
}

.ambient-bg-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.ambient-bg-item:hover .ambient-bg-thumb {
    transform: scale(1.06);
}

.ambient-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(14, 16, 28, 0.95) 100%);
}

.ambient-bg-active-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(56, 239, 125, 0.9);
    color: #0b1a10;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 6px;
    display: none;
    box-shadow: 0 0 10px rgba(56, 239, 125, 0.6);
}

.ambient-bg-item.active .ambient-bg-active-tag {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ambient-bg-info {
    padding: 10px 14px 12px 14px;
    background: rgba(14, 16, 28, 0.7);
}

.ambient-bg-name {
    font-family: 'Minecraft', monospace;
    font-size: 0.88rem;
    color: #ffffff;
    font-weight: bold;
}

.ambient-bg-desc {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 3px;
}

/* Footer */
.ambient-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 24px;
    background: rgba(10, 12, 22, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ambient-btn-done {
    background: linear-gradient(135deg, #e94560 0%, #c82348 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.92rem;
    font-weight: bold;
    padding: 10px 24px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.35);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.ambient-btn-done:hover {
    background: linear-gradient(135deg, #ff577d 0%, #e94560 100%);
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.6);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 600px) {
    .ambient-modal-container {
        max-width: 95vw;
        border-radius: 16px;
    }
    .ambient-modal-header {
        padding: 14px 16px;
    }
    .ambient-tabs-nav {
        padding: 6px 16px;
    }
    .ambient-modal-body {
        padding: 14px 16px;
    }
    .ambient-bg-grid {
        grid-template-columns: 1fr;
    }
    .lobby-ambient-panel {
        width: 100%;
        gap: 8px;
    }
    .lobby-ambient-trigger {
        flex: 1 1 calc(50% - 4px);
        min-width: 135px;
        padding: 6px 10px;
        gap: 8px;
    }
    .lobby-trigger-value {
        max-width: 85px;
    }
}


/* ==========================================================================
   MODERN DEVELOPER MODE STYLES (#devMode)
   ========================================================================== */

#devMode {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 5px 40px 5px;
}

/* 1. Back button */
#devMode .back-to-play-btn {
    background: rgba(233, 69, 96, 0.15) !important;
    border: 1px solid rgba(233, 69, 96, 0.4) !important;
    color: #ff577d !important;
    border-radius: 12px !important;
    padding: 9px 20px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-bottom: 18px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

#devMode .back-to-play-btn:hover {
    background: linear-gradient(135deg, #e94560, #ff577d) !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.5) !important;
    transform: translateX(-4px) !important;
}

/* 2. Top Header & Collection Selector */
#devMode .admin-header {
    background: linear-gradient(165deg, rgba(20, 24, 44, 0.88) 0%, rgba(14, 16, 30, 0.94) 100%) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 14px 22px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}

#devMode .game-selector {
    background: rgba(10, 12, 24, 0.75) !important;
    border: 1px solid rgba(233, 69, 96, 0.35) !important;
    border-radius: 14px !important;
    padding: 6px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

#devMode #gameSelectDev {
    background: rgba(16, 20, 36, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    padding: 7px 12px !important;
    border-radius: 10px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.7rem !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

#devMode #gameSelectDev:focus {
    border-color: #e94560 !important;
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.35) !important;
}

#devMode .admin-header button {
    border: none !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    font-weight: bold !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
}

#devMode .admin-header button:hover {
    transform: translateY(-2px) !important;
}

#devMode #createGameBtnDev {
    background: linear-gradient(135deg, #e94560 0%, #ff577d 100%) !important;
    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.35) !important;
}
#devMode #createGameBtnDev:hover {
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.6) !important;
}

#devMode #deleteCurrentGameBtn {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%) !important;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.25) !important;
}

#devMode #clearRandomBtn {
    background: linear-gradient(135deg, #d35400 0%, #f39c12 100%) !important;
}

#devMode #exportCollectionBtn {
    background: linear-gradient(135deg, #2980b9 0%, #3498db 100%) !important;
}

#devMode #importCollectionBtn {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#devMode #addPokemonBtnDev {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: 1px solid rgba(52, 211, 153, 0.45) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
    transition: all 0.22s ease !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.74rem !important;
    padding: 9px 18px !important;
}
#devMode #addPokemonBtnDev:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
    box-shadow: 0 6px 22px rgba(16, 185, 129, 0.55) !important;
    transform: translateY(-2px) !important;
}

#devMode #templateBtn {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    border: 1px solid rgba(167, 139, 250, 0.45) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35) !important;
    transition: all 0.22s ease !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.74rem !important;
    padding: 9px 18px !important;
}
#devMode #templateBtn:hover {
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%) !important;
    box-shadow: 0 6px 22px rgba(139, 92, 246, 0.55) !important;
    transform: translateY(-2px) !important;
}

#devMode #randomPokemonBtn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.45) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
    transition: all 0.22s ease !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.74rem !important;
    padding: 9px 18px !important;
}
#devMode #randomPokemonBtn:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.55) !important;
    transform: translateY(-2px) !important;
}

/* 3. Main Editor & Slide Grid */
#devMode .dev-main-grid {
    display: flex !important;
    gap: 22px !important;
    flex-wrap: wrap !important;
    margin-top: 22px !important;
    align-items: stretch !important;
}

#devMode .editor-panel,
#devMode .slides-list-panel {
    background: linear-gradient(165deg, rgba(20, 24, 44, 0.88) 0%, rgba(14, 16, 30, 0.94) 100%) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 18px !important;
    padding: 22px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45) !important;
}

#devMode .editor-title {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.92rem !important;
    color: #ffffff !important;
    margin-bottom: 18px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e94560 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: 0.5px !important;
}

#devMode .editor-title i {
    color: #e94560;
}

/* 4. Upload drop area with restored PhotoFon background */
#devMode #uploadAreaDev {
    background-image: url('background/PhotoFon.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 2px dashed rgba(233, 69, 96, 0.6) !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    transition: all 0.25s ease !important;
    min-height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    padding: 16px !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

#devMode #uploadAreaDev::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(10, 14, 26, 0.45) !important;
    border-radius: 14px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: background 0.25s ease !important;
}

#devMode #uploadAreaDev:hover::before {
    background: rgba(10, 14, 26, 0.25) !important;
}

#devMode #uploadAreaDev:hover {
    border-color: #ff577d !important;
    box-shadow: 0 0 25px rgba(233, 69, 96, 0.35), inset 0 0 25px rgba(0, 0, 0, 0.4) !important;
    transform: scale(1.01) !important;
}

#devMode #uploadAreaDev > * {
    position: relative !important;
    z-index: 2 !important;
}

#devMode #imagePlaceholder {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(14, 18, 35, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 14px 22px !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.22s ease !important;
}

#devMode #imagePlaceholder[style*="display: none"],
#devMode #imagePlaceholder.hidden {
    display: none !important;
}

#devMode #imagePreviewDev[style*="display: none"],
#devMode #imagePreviewDev.hidden {
    display: none !important;
}

#devMode #imagePreviewDev[style*="display: block"] {
    display: block !important;
}

#devMode #uploadAreaDev:hover #imagePlaceholder {
    background: rgba(20, 26, 50, 0.85) !important;
    border-color: rgba(233, 69, 96, 0.45) !important;
    transform: scale(1.04) !important;
}

#devMode #uploadAreaDev i {
    font-size: 2.2rem !important;
    color: #ff4d6d !important;
    margin-bottom: 8px !important;
    text-shadow: 0 0 12px rgba(255, 77, 109, 0.5) !important;
    transition: transform 0.2s ease !important;
}

#devMode #uploadAreaDev:hover i {
    transform: scale(1.12);
}

#devMode #pokemonNameDev,
#devMode #pokemonDescriptionDev {
    background: rgba(12, 14, 28, 0.85) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    font-family: 'Minecraft', monospace !important;
    outline: none !important;
    transition: all 0.22s ease !important;
}

#devMode #pokemonNameDev:focus,
#devMode #pokemonDescriptionDev:focus {
    border-color: #e94560 !important;
    box-shadow: 0 0 16px rgba(233, 69, 96, 0.3) !important;
    background: rgba(18, 22, 42, 0.95) !important;
}

/* 4b. Type Buttons Grid & Single-Line Labels */
#devMode #typeIconsGridDev {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 6px 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 900px) {
    #devMode #typeIconsGridDev {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important;
    }
}

#devMode #typeIconsGridDev .type-icon-item {
    width: 100% !important;
    min-width: 0 !important;
    background: rgba(18, 22, 42, 0.75) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 7px 4px 6px 4px !important;
    cursor: pointer !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#devMode #typeIconsGridDev .type-icon-item img {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    transition: transform 0.2s ease !important;
}

#devMode #typeIconsGridDev .type-icon-item:hover {
    transform: translateY(-2px) !important;
    background: rgba(30, 38, 70, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

#devMode #typeIconsGridDev .type-icon-item:hover img {
    transform: scale(1.08) !important;
}

#devMode #typeIconsGridDev .type-icon-item span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 9.5px !important;
    margin-top: 5px !important;
    color: #cbd5e1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.2px !important;
    line-height: 1.2 !important;
}

/* Selected Active Type State */
#devMode #typeIconsGridDev .type-icon-item.selected {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.4), rgba(198, 42, 71, 0.65)) !important;
    border: 2px solid #ff4d6d !important;
    box-shadow: 0 0 16px rgba(255, 77, 109, 0.55), inset 0 0 12px rgba(255, 77, 109, 0.25) !important;
    transform: translateY(-2px) scale(1.03) !important;
}

#devMode #typeIconsGridDev .type-icon-item.selected span {
    color: #ffffff !important;
    font-weight: bold !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.6) !important;
}

/* Dynamic Type Color Glows on Hover */
#devMode #typeIconsGridDev .type-icon-item[data-type="Огненный"]:hover { border-color: #EE8130 !important; box-shadow: 0 0 14px rgba(238, 129, 48, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Водный"]:hover { border-color: #6390F0 !important; box-shadow: 0 0 14px rgba(99, 144, 240, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Травяной"]:hover { border-color: #7AC74C !important; box-shadow: 0 0 14px rgba(122, 199, 76, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Электро"]:hover { border-color: #F7D02C !important; box-shadow: 0 0 14px rgba(247, 208, 44, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Ледяной"]:hover { border-color: #96D9D6 !important; box-shadow: 0 0 14px rgba(150, 217, 214, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Боевой"]:hover { border-color: #C22E28 !important; box-shadow: 0 0 14px rgba(194, 46, 40, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Ядовитый"]:hover { border-color: #A33EA1 !important; box-shadow: 0 0 14px rgba(163, 62, 161, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Земляной"]:hover { border-color: #E2BF65 !important; box-shadow: 0 0 14px rgba(226, 191, 101, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Летающий"]:hover { border-color: #A98FF3 !important; box-shadow: 0 0 14px rgba(169, 143, 243, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Психический"]:hover { border-color: #F95587 !important; box-shadow: 0 0 14px rgba(249, 85, 135, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Насекомый"]:hover { border-color: #A6B91A !important; box-shadow: 0 0 14px rgba(166, 185, 26, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Каменный"]:hover { border-color: #B6A136 !important; box-shadow: 0 0 14px rgba(182, 161, 54, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Призрачный"]:hover { border-color: #735797 !important; box-shadow: 0 0 14px rgba(115, 87, 151, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Драконий"]:hover { border-color: #6F35FC !important; box-shadow: 0 0 14px rgba(111, 53, 252, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Тёмный"]:hover { border-color: #8B7365 !important; box-shadow: 0 0 14px rgba(139, 115, 101, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Стальной"]:hover { border-color: #B7B7CE !important; box-shadow: 0 0 14px rgba(183, 183, 206, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Волшебный"]:hover { border-color: #D685AD !important; box-shadow: 0 0 14px rgba(214, 133, 173, 0.5) !important; }
#devMode #typeIconsGridDev .type-icon-item[data-type="Нормальный"]:hover { border-color: #A8A77A !important; box-shadow: 0 0 14px rgba(168, 167, 122, 0.5) !important; }

/* 5. Save & Delete Buttons in Editor */
#devMode .action-buttons {
    display: flex !important;
    gap: 14px !important;
    margin-top: auto !important;
    padding-top: 16px !important;
}

#devMode .action-buttons .save-btn {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
    border: 1.5px solid rgba(52, 211, 153, 0.45) !important;
    border-radius: 14px !important;
    padding: 13px 22px !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.82rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.35) !important;
    transition: all 0.22s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    letter-spacing: 0.5px !important;
}

#devMode .action-buttons .save-btn:hover {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
    box-shadow: 0 6px 24px rgba(16, 185, 129, 0.55) !important;
    transform: translateY(-2px) !important;
}

#devMode .action-buttons .delete-btn {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    border: 1.5px solid rgba(248, 113, 113, 0.4) !important;
    border-radius: 14px !important;
    padding: 13px 22px !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.82rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.35) !important;
    transition: all 0.22s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    letter-spacing: 0.5px !important;
}

#devMode .action-buttons .delete-btn:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%) !important;
    box-shadow: 0 6px 24px rgba(239, 68, 68, 0.55) !important;
    transform: translateY(-2px) !important;
}

/* Sidebar "Очистить пустые записи" button */
#devMode #clearEmptyPokemonBtn {
    background: rgba(234, 88, 12, 0.18) !important;
    border: 1.5px solid rgba(249, 115, 22, 0.45) !important;
    border-radius: 12px !important;
    color: #fed7aa !important;
    padding: 11px 16px !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(234, 88, 12, 0.15) !important;
    transition: all 0.22s ease !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

#devMode #clearEmptyPokemonBtn:hover {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.45) !important;
    transform: translateY(-2px) !important;
}

/* 6. Background & Music Manager */
#devMode .bg-music-manager {
    display: flex !important;
    gap: 22px !important;
    margin-top: 24px !important;
    min-height: 320px !important;
    flex-wrap: wrap !important;
}

#devMode .bg-panel,
#devMode .music-panel {
    flex: 1 !important;
    min-width: 320px !important;
    background: linear-gradient(165deg, rgba(20, 24, 44, 0.88) 0%, rgba(14, 16, 30, 0.94) 100%) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 18px !important;
    padding: 20px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#devMode .panel-title {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.92rem !important;
    color: #ffffff !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e94560 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: 0.5px !important;
}

#devMode .panel-title i {
    color: #e94560;
}

#devMode .bg-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    padding: 4px !important;
}

#devMode .bg-card {
    background: rgba(16, 20, 36, 0.75) !important;
    border: 2px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 14px !important;
    padding: 10px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#devMode .bg-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(233, 69, 96, 0.6) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45), 0 0 18px rgba(233, 69, 96, 0.25) !important;
}

#devMode .bg-card.active {
    border-color: #38ef7d !important;
    background: rgba(56, 239, 125, 0.08) !important;
    box-shadow: 0 0 20px rgba(56, 239, 125, 0.35) !important;
}

#devMode .bg-card img,
#devMode .bg-preview-thumb img {
    width: 100% !important;
    height: 110px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
    transition: transform 0.3s ease !important;
    background: #0d0e17 !important;
}

#devMode .bg-card:hover img {
    transform: scale(1.05) !important;
}

#devMode .bg-card span {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem !important;
    color: #ffffff !important;
    font-weight: bold !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#devMode .bg-card--preview {
    border: 2px solid rgba(56, 239, 125, 0.45) !important;
    background: rgba(56, 239, 125, 0.05) !important;
    cursor: default !important;
}

#devMode .bg-preview-thumb {
    width: 100% !important;
    height: 110px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
    background: #0d0e17 !important;
}

#devMode .bg-card--upload {
    border: 2px dashed rgba(233, 69, 96, 0.5) !important;
    background: rgba(233, 69, 96, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 140px !important;
}

#devMode .bg-card--upload:hover {
    border-color: #ff577d !important;
    background: rgba(233, 69, 96, 0.12) !important;
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.3) !important;
}

#devMode .bg-card--upload i {
    font-size: 2rem !important;
    color: #e94560 !important;
    margin-bottom: 8px !important;
    transition: transform 0.2s ease !important;
}

#devMode .bg-card--upload:hover i {
    transform: scale(1.15) !important;
}

#devMode .bg-card .delete-bg-btn {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    background: rgba(231, 76, 60, 0.9) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    width: 26px !important;
    height: 26px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: all 0.2s ease !important;
    backdrop-filter: blur(4px) !important;
    z-index: 5 !important;
}

#devMode .bg-card:hover .delete-bg-btn {
    opacity: 1 !important;
}

#devMode .bg-card .delete-bg-btn:hover {
    transform: scale(1.1) !important;
    background: #ff5252 !important;
}

/* 7. Music Items in Dev Mode */
#devMode .music-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow-y: auto !important;
    flex: 1 !important;
}

#devMode .music-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 14px !important;
    background: rgba(16, 20, 36, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.74rem !important;
}

#devMode .music-item:hover {
    background: rgba(28, 34, 60, 0.85) !important;
    border-color: rgba(233, 69, 96, 0.4) !important;
    transform: translateX(3px) !important;
}

#devMode .music-item.active {
    border-color: #e94560 !important;
    background: linear-gradient(90deg, rgba(233, 69, 96, 0.22), rgba(16, 20, 36, 0.85)) !important;
    box-shadow: 0 0 16px rgba(233, 69, 96, 0.25) !important;
}

#devMode .music-item.playing {
    border-color: #ff577d !important;
    animation: ambientPulse 1.2s infinite alternate !important;
}


/* ==========================================================================
   ЕДИНЫЙ РАЗМЕР ИМЕНИ И ОПИСАНИЯ ПОКЕМОНОВ ВО ВСЕХ РЕЖИМАХ КАК В ПРЕЗЕНТАЦИИ
   ========================================================================== */
.pres-pokemon-name,
.fullscreen-presentation .pres-pokemon-name,
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-pokemon-name,
.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-pokemon-name,
.room-fullscreen .pres-pokemon-name,
#presentationMode .pres-pokemon-name,
#fullscreenPresentation .pres-pokemon-name {
    font-size: clamp(2.4rem, 3.6vw, 3.6rem) !important;
    line-height: 1.25 !important;
    letter-spacing: 2px !important;
    color: #e94560 !important;
    text-shadow: 0 0 25px rgba(233, 69, 96, 0.7) !important;
    margin-bottom: 24px !important;
    word-break: break-word !important;
}

.pres-description,
.fullscreen-presentation .pres-description,
.fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-description,
.fullscreen-presentation:not(:has(#gameSidebar[style*="display: block"])) .pres-description,
.room-fullscreen .pres-description,
#presentationMode .pres-description,
#fullscreenPresentation .pres-description {
    font-size: 1.5rem !important;
    line-height: 1.8 !important;
    color: #f0f0f0 !important;
    background: rgba(0, 0, 0, 0.35) !important;
    padding: 20px 24px !important;
    border-radius: 26px !important;
    margin-bottom: 28px !important;
    max-height: 380px !important;
    overflow-y: auto !important;
}

/* При раскрытии типов в карточке — аккуратный адаптивный переход */
.pres-card.types-expanded .pres-description {
    font-size: 1.05rem !important;
    line-height: 1.45 !important;
    padding: 12px 20px !important;
    margin-bottom: 15px !important;
    max-height: 120px !important;
}

@media (max-width: 768px) {
    .pres-pokemon-name,
    .fullscreen-presentation .pres-pokemon-name,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-pokemon-name,
    .room-fullscreen .pres-pokemon-name {
        font-size: 2.1rem !important;
        margin-bottom: 16px !important;
    }
    .pres-description,
    .fullscreen-presentation .pres-description,
    .fullscreen-presentation:has(#gameSidebar[style*="display: block"]) .pres-description,
    .room-fullscreen .pres-description {
        font-size: 1.15rem !important;
        line-height: 1.55 !important;
        padding: 15px 18px !important;
        margin-bottom: 18px !important;
    }
}

/* ==========================================================================
   СОВРЕМЕННЫЙ СТИЛЬ БЛОКОВ ЗАПУСКА ("ПРОВЕРЬ СЕБЯ!" И "НА СКОРОСТЬ!")
   ========================================================================== */
.leaderboard-launch-section {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 40px 36px 36px 36px !important;
    background: radial-gradient(circle at 50% 0%, rgba(32, 45, 90, 0.85) 0%, rgba(12, 16, 36, 0.95) 100%) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 28px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(233, 69, 96, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    max-width: 840px !important;
    margin: 24px auto !important;
    position: relative !important;
    overflow: hidden !important;
    animation: modalZoomIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.leaderboard-launch-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 10% !important;
    right: 10% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #ff4772, transparent) !important;
}

.leaderboard-launch-section.mode-speed::before {
    background: linear-gradient(90deg, transparent, #f7d02c, transparent) !important;
}

.leaderboard-launch-section.mode-speed {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(247, 208, 44, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Header */
.leaderboard-launch-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 30px !important;
}

.leaderboard-launch-icon-badge {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    transition: transform 0.3s ease !important;
}

.leaderboard-launch-header:hover .leaderboard-launch-icon-badge {
    transform: scale(1.1) rotate(5deg) !important;
}

.leaderboard-launch-icon-badge.check-badge {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.25), rgba(255, 75, 114, 0.45)) !important;
    color: #ff547a !important;
    border: 1px solid rgba(255, 75, 114, 0.6) !important;
    box-shadow: 0 0 24px rgba(233, 69, 96, 0.4) !important;
}

.leaderboard-launch-icon-badge.speed-badge {
    background: linear-gradient(135deg, rgba(247, 208, 44, 0.25), rgba(238, 129, 48, 0.45)) !important;
    color: #ffd02c !important;
    border: 1px solid rgba(247, 208, 44, 0.6) !important;
    box-shadow: 0 0 24px rgba(247, 208, 44, 0.4) !important;
}

.leaderboard-launch-title-wrap {
    text-align: center !important;
}

.leaderboard-launch-title {
    font-family: 'Minecraft', monospace !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.leaderboard-launch-section.mode-check .leaderboard-launch-title {
    color: #ff547a !important;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.6) !important;
}

.leaderboard-launch-section.mode-speed .leaderboard-launch-title {
    color: #ffd233 !important;
    text-shadow: 0 0 20px rgba(247, 208, 44, 0.6) !important;
}

.leaderboard-launch-subtitle {
    color: rgba(225, 232, 255, 0.68) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    margin-top: 6px !important;
}

/* Preset Cards Grid */
.leaderboard-launch-grid {
    display: flex !important;
    justify-content: center !important;
    gap: 22px !important;
    margin-bottom: 32px !important;
    flex-wrap: wrap !important;
}

.leaderboard-launch-btn {
    background: linear-gradient(155deg, rgba(30, 40, 80, 0.8) 0%, rgba(16, 22, 45, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 22px !important;
    padding: 26px 36px !important;
    min-width: 165px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.leaderboard-launch-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 22px !important;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.15), transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

.leaderboard-launch-btn:hover {
    transform: translateY(-5px) scale(1.03) !important;
}

.leaderboard-launch-btn:hover::before {
    opacity: 1 !important;
}

.leaderboard-launch-btn:active {
    transform: translateY(-1px) scale(0.98) !important;
}

.leaderboard-launch-section.mode-check .leaderboard-launch-btn:hover {
    border-color: #ff4772 !important;
    box-shadow: 0 14px 34px rgba(233, 69, 96, 0.45), 0 0 20px rgba(233, 69, 96, 0.25) !important;
}

.leaderboard-launch-section.mode-speed .leaderboard-launch-btn:hover {
    border-color: #f7d02c !important;
    box-shadow: 0 14px 34px rgba(247, 208, 44, 0.45), 0 0 20px rgba(247, 208, 44, 0.25) !important;
}

.leaderboard-launch-count {
    font-family: 'Minecraft', monospace !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
    transition: transform 0.25s ease !important;
}

.leaderboard-launch-btn:hover .leaderboard-launch-count {
    transform: scale(1.08) !important;
}

.leaderboard-launch-section.mode-check .leaderboard-launch-count {
    color: #ff547a !important;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.6) !important;
}

.leaderboard-launch-section.mode-speed .leaderboard-launch-count {
    color: #ffd233 !important;
    text-shadow: 0 0 20px rgba(247, 208, 44, 0.6) !important;
}

.leaderboard-launch-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: rgba(225, 235, 255, 0.72) !important;
}

/* Custom Input Row */
.leaderboard-launch-custom-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    background: rgba(18, 24, 50, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 14px 24px !important;
    max-width: 620px !important;
    margin: 0 auto 30px auto !important;
    flex-wrap: wrap !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.leaderboard-launch-custom-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(225, 235, 255, 0.8) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
}

.leaderboard-launch-custom-label i {
    color: #ff4772 !important;
    font-size: 1.05rem !important;
}

.leaderboard-launch-section.mode-speed .leaderboard-launch-custom-label i {
    color: #ffd02c !important;
}

.launch-stepper-control {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(10, 14, 30, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    transition: border-color 0.25s ease !important;
}

.launch-stepper-control:focus-within {
    border-color: #ff4772 !important;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.35), inset 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.leaderboard-launch-section.mode-speed .launch-stepper-control:focus-within {
    border-color: #ffd02c !important;
    box-shadow: 0 0 14px rgba(247, 208, 44, 0.35), inset 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.launch-step-btn {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
}

.launch-step-btn:hover {
    background: rgba(233, 69, 96, 0.4) !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
}

.leaderboard-launch-section.mode-speed .launch-step-btn:hover {
    background: rgba(247, 208, 44, 0.4) !important;
    color: #ffffff !important;
}

.launch-step-btn:active {
    transform: scale(0.94) !important;
}

.leaderboard-launch-custom-input {
    width: 90px !important;
    border: none !important;
    background: transparent !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 1.15rem !important;
    font-weight: bold !important;
    text-align: center !important;
    outline: none !important;
    -moz-appearance: textfield !important;
}

.leaderboard-launch-custom-input::-webkit-outer-spin-button,
.leaderboard-launch-custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.leaderboard-launch-custom-input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

.leaderboard-launch-custom-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #ff4772 0%, #e94560 60%, #c62a47 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 10px 24px !important;
    color: #ffffff !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.88rem !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgba(233, 69, 96, 0.45) !important;
    transition: all 0.25s cubic-bezier(0.34, 1.3, 0.64, 1) !important;
}

.leaderboard-launch-custom-btn:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 8px 26px rgba(233, 69, 96, 0.65) !important;
}

.leaderboard-launch-custom-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

.leaderboard-launch-custom-btn.speed-start-btn {
    background: linear-gradient(135deg, #ffd233 0%, #f7d02c 50%, #ee8130 100%) !important;
    color: #121526 !important;
    box-shadow: 0 4px 18px rgba(247, 208, 44, 0.45) !important;
}

.leaderboard-launch-custom-btn.speed-start-btn:hover {
    box-shadow: 0 8px 26px rgba(247, 208, 44, 0.65) !important;
}

/* Progressive Mode Toggle */
.progressive-mode-toggle {
    background: rgba(16, 22, 46, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 18px 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin-top: 10px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}

.progressive-toggle-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 16px !important;
    cursor: pointer !important;
    user-select: none !important;
}

.progressive-toggle-label input[type="checkbox"] {
    display: none !important;
}

.progressive-toggle-slider {
    width: 52px !important;
    height: 30px !important;
    background: rgba(45, 55, 88, 0.8) !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    position: relative !important;
    transition: all 0.3s cubic-bezier(0.34, 1.3, 0.64, 1) !important;
    flex-shrink: 0 !important;
}

.progressive-toggle-slider::after {
    content: '' !important;
    position: absolute !important;
    width: 22px !important;
    height: 22px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    top: 3px !important;
    left: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1) !important;
}

.progressive-toggle-label input:checked + .progressive-toggle-slider {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #34d399 !important;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.5) !important;
}

.progressive-toggle-label input:checked + .progressive-toggle-slider::after {
    transform: translateX(22px) !important;
}

.progressive-toggle-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    text-align: left !important;
}

.progressive-toggle-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.progressive-toggle-title i {
    color: #10b981 !important;
}

.progressive-toggle-hint {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.78rem !important;
    color: rgba(220, 228, 255, 0.6) !important;
    font-weight: 500 !important;
}

/* Guessed Badge */
.progressive-guessed-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    border-radius: 14px !important;
    padding: 8px 16px !important;
    margin-left: auto !important;
}

.progressive-guessed-badge .guessed-info {
    color: #34d399 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.progressive-guessed-badge .guessed-info strong {
    font-size: 1rem !important;
    color: #ffffff !important;
}

.progressive-guessed-badge .guessed-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.progressive-view-btn,
.progressive-reset-btn {
    padding: 6px 12px !important;
    border-radius: 10px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}

.progressive-view-btn {
    background: rgba(78, 205, 196, 0.18) !important;
    border: 1px solid rgba(78, 205, 196, 0.45) !important;
    color: #4ecdc4 !important;
}

.progressive-view-btn:hover {
    background: rgba(78, 205, 196, 0.32) !important;
    transform: translateY(-1px) !important;
}

.progressive-reset-btn {
    background: rgba(233, 69, 96, 0.18) !important;
    border: 1px solid rgba(233, 69, 96, 0.45) !important;
    color: #ff6b81 !important;
}

.progressive-reset-btn:hover {
    background: rgba(233, 69, 96, 0.32) !important;
    transform: translateY(-1px) !important;
}


/* ==========================================================================
   Скрытие заголовка "Выберите коллекцию" в режимах кроме Презентации и 1 игрока
   ========================================================================== */
#tabPlay:has(.leaderboard-launch-section) > h2,
#tabPlay:has(#gamesGrid .leaderboard-launch-section) > h2,
#tabPlay:has(.leaderboard-launch-section) #gamesSectionHeading,
#tabPlay:has(#gamesGrid .leaderboard-launch-section) #gamesSectionHeading {
    display: none !important;
}

/* ==========================================================================
   Подтяжка шрифтов (Minecraft retro-pixel) для новых стилей блоков запуска
   ========================================================================== */
.leaderboard-launch-subtitle {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.8px !important;
    color: rgba(225, 232, 255, 0.7) !important;
    margin-top: 6px !important;
}

.leaderboard-launch-label {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.74rem !important;
    letter-spacing: 1.2px !important;
    color: rgba(225, 235, 255, 0.78) !important;
    text-transform: uppercase !important;
    margin-top: 6px !important;
}

.leaderboard-launch-custom-label {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.8px !important;
    color: rgba(225, 235, 255, 0.88) !important;
}

.leaderboard-launch-custom-input {
    font-family: 'Minecraft', monospace !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    color: #ffffff !important;
}

.progressive-toggle-title {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.6px !important;
    color: #ffffff !important;
    font-weight: normal !important;
}

.progressive-toggle-hint {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.5px !important;
    color: rgba(220, 228, 255, 0.55) !important;
}

.progressive-guessed-badge .guessed-info {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.5px !important;
}

.progressive-view-btn,
.progressive-reset-btn {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.5px !important;
}

/* Description Source Switcher (Studio vs Official Pokedex Canon) */
.db-desc-source-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
    margin-left: auto;
}

.db-desc-src-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}

.db-desc-src-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.db-desc-src-btn.active {
    background: rgba(0, 206, 201, 0.22);
    color: #00cec9;
    border: 1px solid rgba(0, 206, 201, 0.5);
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.25);
    font-weight: 700;
}

.db-canon-ver-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 206, 201, 0.12);
    border: 1px solid rgba(0, 206, 201, 0.35);
    color: #00cec9;
    font-family: 'Minecraft', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.3px;
}

.db-canon-ver-badge i {
    font-size: 0.65rem;
    color: #fcd34d;
}


/* ==========================================================================
   POKE DIV HUB: ABOUT & HALL OF FAME SECTION (#newsSectionAbout)
   ========================================================================== */

#newsSectionAbout {
    padding: 10px 0 40px 0;
    animation: fadeInNewsAbout 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInNewsAbout {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 1. Project Hero Card */
.about-hero-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(20, 24, 45, 0.85) 0%, rgba(12, 14, 28, 0.95) 100%);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 18px;
    padding: 32px 28px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.about-hero-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, rgba(236, 72, 153, 0.15) 50%, transparent 70%);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}

.about-hero-content {
    position: relative;
    z-index: 1;
    max-width: 820px;
}

.about-hero-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.about-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
}

.about-badge-version {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}

.about-hero-title {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 14px 0;
    color: #ffffff;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.about-hero-desc {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0;
}

/* 2. Creator Card */
.about-creator-container {
    margin-bottom: 24px;
}

.about-creator-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    background: linear-gradient(135deg, rgba(26, 21, 46, 0.8) 0%, rgba(17, 18, 36, 0.9) 100%);
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: 16px;
    padding: 22px 26px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.about-creator-avatar-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, rgba(10, 10, 26, 0.8) 70%);
    border: 2px solid rgba(216, 180, 254, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
}

.about-creator-avatar {
    max-width: 68px;
    max-height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.about-creator-crown {
    position: absolute;
    top: -8px;
    right: -4px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #1e1b4b;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.6);
    border: 1.5px solid #fff;
}

.about-creator-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-creator-role {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #d8b4fe;
    display: flex;
    align-items: center;
    gap: 6px;
}

.about-creator-name {
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.2;
}

.about-creator-bio {
    font-size: 0.92rem;
    line-height: 1.45;
    color: #94a3b8;
    margin: 4px 0 0 0;
    max-width: 580px;
}

.about-creator-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 170px;
}

.about-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.about-link-btn.tg-channel {
    background: rgba(36, 161, 222, 0.15);
    border-color: rgba(36, 161, 222, 0.4);
    color: #38bdf8;
}
.about-link-btn.tg-channel:hover {
    background: rgba(36, 161, 222, 0.28);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(36, 161, 222, 0.3);
}

.about-link-btn.tg-chat {
    background: rgba(129, 140, 248, 0.15);
    border-color: rgba(129, 140, 248, 0.4);
    color: #c7d2fe;
}
.about-link-btn.tg-chat:hover {
    background: rgba(129, 140, 248, 0.28);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(129, 140, 248, 0.3);
}

.about-link-btn.boosty {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.4);
    color: #fdba74;
}
.about-link-btn.boosty:hover {
    background: rgba(249, 115, 22, 0.28);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3);
}

.about-link-btn.donate {
    background: rgba(236, 72, 153, 0.15);
    border-color: rgba(236, 72, 153, 0.4);
    color: #f472b6;
}
.about-link-btn.donate:hover {
    background: rgba(236, 72, 153, 0.28);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.3);
}

/* 3. Features Grid */
.about-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.about-feature-card {
    background: rgba(18, 22, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 22px 20px;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.about-feature-card:hover {
    background: rgba(26, 31, 58, 0.85);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.about-feature-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--feat-color, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 14px;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.2);
}

.about-feature-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.about-feature-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0;
}

/* 4. Hall of Fame Section */
.about-hall-section {
    background: linear-gradient(180deg, rgba(16, 18, 38, 0.9) 0%, rgba(10, 11, 24, 0.95) 100%);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 20px;
    padding: 32px 26px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    position: relative;
    overflow: hidden;
}

.about-hall-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 28px auto;
}

.about-hall-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.2) 0%, rgba(245, 158, 11, 0.25) 100%);
    border: 1px solid rgba(234, 179, 8, 0.5);
    color: #fef08a;
    margin-bottom: 12px;
}

.about-hall-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 10px 0;
    letter-spacing: -0.3px;
}

.about-hall-subtitle {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0;
}

/* Hall of fame cards grid */
.hall-of-fame-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.hall-loading-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 36px;
    color: #94a3b8;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hall-user-card {
    background: rgba(22, 26, 50, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hall-user-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.hall-card-owner {
    background: linear-gradient(180deg, rgba(38, 26, 68, 0.8) 0%, rgba(20, 18, 42, 0.85) 100%);
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.25);
}

.hall-card-founder {
    background: linear-gradient(180deg, rgba(30, 27, 75, 0.8) 0%, rgba(15, 23, 42, 0.85) 100%);
    border-color: rgba(129, 140, 248, 0.45);
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.2);
}

.hall-card-master {
    border-color: rgba(234, 179, 8, 0.4);
    box-shadow: 0 0 14px rgba(234, 179, 8, 0.15);
}

.hall-card-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.hall-tier-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.hall-tier-pill.badge-owner {
    background: rgba(168, 85, 247, 0.25);
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: #e9d5ff;
}

.hall-tier-pill.badge-founder {
    background: rgba(99, 102, 241, 0.25);
    border: 1px solid rgba(99, 102, 241, 0.5);
    color: #c7d2fe;
}

.hall-tier-pill.badge-master {
    background: rgba(234, 179, 8, 0.2);
    border: 1px solid rgba(234, 179, 8, 0.45);
    color: #fef08a;
}

.hall-tier-pill.badge-ultra {
    background: rgba(6, 182, 212, 0.2);
    border: 1px solid rgba(6, 182, 212, 0.45);
    color: #a5f3fc;
}

.hall-tier-pill.badge-trainer {
    background: rgba(148, 163, 184, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
}

.hall-tier-pill.badge-admin {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}

.hall-owner-star {
    color: #fbbf24;
    font-size: 0.85rem;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.8));
}

.hall-sprite-wrapper {
    position: relative;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    overflow: visible !important;
}

.hall-user-sprite {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
    transition: transform 0.2s ease;
}

.hall-user-card:hover .hall-user-sprite {
    transform: scale(1.1);
}

.hall-shiny-sparkle {
    position: absolute;
    top: 0;
    right: 0;
    color: #facc15;
    font-size: 0.85rem;
    animation: sparklePulse 2s infinite ease-in-out;
}

@keyframes sparklePulse {
    0%, 100% { opacity: 0.6; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.2); }
}

.hall-user-details {
    width: 100%;
}

.hall-user-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hall-companion-sub {
    font-size: 0.78rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* 5. Community Box & CTA */
.about-community-box {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(28, 22, 48, 0.7) 0%, rgba(16, 20, 36, 0.85) 100%);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 16px;
    padding: 24px;
}

.about-community-glow {
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(30px);
    pointer-events: none;
}

.about-community-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}

.about-community-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.35);
    color: #d8b4fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.about-community-text h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px 0;
}

.about-community-text p {
    font-size: 0.92rem;
    line-height: 1.45;
    color: #cbd5e1;
    margin: 0;
}

.about-community-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hall-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.hall-cta-primary {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
}
.hall-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6);
}

.hall-cta-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}
.hall-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .about-creator-card {
        grid-template-columns: auto 1fr;
    }
    .about-creator-links {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .about-creator-links .about-link-btn {
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
    }
    .about-community-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .about-community-icon {
        margin: 0 auto;
    }
    .about-community-actions {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .about-hero-card {
        padding: 22px 18px;
    }
    .about-hero-title {
        font-size: 1.45rem;
    }
    .about-creator-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 18px;
    }
    .about-creator-avatar-wrap {
        margin: 0 auto;
    }
    .about-creator-role {
        justify-content: center;
    }
    .about-creator-bio {
        margin: 6px auto 0 auto;
    }
    .about-creator-links .about-link-btn {
        flex: 1 1 100%;
    }
    .hall-of-fame-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 14px;
    }
    .hall-user-card {
        padding: 14px 12px;
    }
    .hall-tier-pill {
        font-size: 0.7rem;
        padding: 2px 7px;
    }
}

@media (max-width: 480px) {
    .hall-of-fame-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .hall-user-card {
        padding: 16px 14px;
    }
}



/* ==========================================================================
   ADDITIONAL NEWS, COMMUNITY & ABOUT FIXES
   ========================================================================== */

/* Subtab Sections */
.news-subtab-section {
    animation: fadeInNews 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInNews {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header & Action Buttons */
.comm-btn-news {
    background: linear-gradient(135deg, #e94560 0%, #c0392b 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(233, 69, 96, 0.5) !important;
    box-shadow: 0 4px 14px rgba(233, 69, 96, 0.4) !important;
}

.comm-btn-news:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.6) !important;
    filter: brightness(1.1);
}

/* Modals & Dialogs */
.comm-modal-dialog {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
}

.pub-tab-content {
    display: block;
    padding-top: 10px;
}

.pub-tab-content[style*="display:none"],
.pub-tab-content[style*="display: none"] {
    display: none !important;
}

/* Live Preview in News Creator Modal */
.news-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.news-preview-title {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    color: #00cec9;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.news-preview-lang-tabs {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    padding: 2px;
    gap: 2px;
}

/* Color Picker & Admin Tools */
.news-admin-del-btn {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    border-radius: 6px;
    padding: 3px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.news-admin-del-btn:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

.news-color-picker-input {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.news-color-hex-input {
    font-family: 'Minecraft', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.news-icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.news-icon-select-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 0.75rem;
    text-align: left;
    transition: all 0.2s ease;
}

.news-icon-select-btn:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.4);
    color: #00cec9;
}

/* Community Cards Polish */
.comm-card-badges-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.comm-card-body {
    margin: 12px 0;
}

.comm-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.comm-team-details-inner {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    margin-top: 12px;
}

.comm-voting-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 3px 8px;
}

.comm-vote-count {
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    font-weight: 700;
}

.comm-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.68rem;
    font-weight: 700;
}

/* Help Section Wrappers */
.news-help-section {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Polls Form Polish */
.comm-poll-inputs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.comm-poll-opt-main {
    display: flex;
    gap: 8px;
    align-items: center;
}

.poll-opt-inp {
    flex: 1;
}

/* Hero Subtitle */
.about-hero-subtitle {
    font-size: 1.12rem;
    font-weight: 600;
    color: #a5b4fc;
    margin: -4px 0 12px 0;
    letter-spacing: 0.2px;
}

.comm-poll-hint {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* Author Badge */
.comm-author-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    margin-left: 6px;
    vertical-align: middle;
}

.comm-author-badge.admin {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #f87171;
}

.comm-share-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.72rem;
    color: #00cec9;
    cursor: pointer;
    transition: color 0.2s;
}

.comm-share-action:hover {
    color: #fff;
}

.admin-voters {
    color: #f87171;
    font-weight: bold;
}

.friend-voters {
    color: #6ee7b7;
}

.news-muted-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.comm-team-prop-chip.tera {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #d8b4fe;
}

/* Mobile Responsiveness for News Mode */
@media (max-width: 768px) {
    .news-mode-wrap {
        padding: 10px 8px 30px;
    }
    .news-header-banner {
        padding: 16px 14px;
    }
    .news-header-title {
        font-size: 1.18rem;
    }
    .news-subtabs-wrapper {
        gap: 10px;
        margin-bottom: 16px;
    }
    .news-subtabs-nav {
        gap: 6px;
    }
    .news-subtab-btn {
        padding: 8px 13px;
        font-size: 0.75rem;
    }
    .news-controls-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .news-category-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .news-category-pills::-webkit-scrollbar {
        display: none;
    }
    .news-search-box {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }
    .news-card {
        padding: 14px 12px;
    }
    .comm-card {
        padding: 14px 12px;
    }
    .comm-team-pokes-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
    }
}

/* ===================================================
   FLOATING COMPANION (СВОБОДНЫЙ КОМПАНЬОН) STYLES
   =================================================== */
.floating-companion-widget {
    position: fixed;
    z-index: 999999;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    min-height: 50px;
    padding: 4px;
    background: transparent;
    border: none;
    border-radius: 50%;
    box-shadow: none;
    transition: transform 0.15s ease, filter 0.2s ease;}

.floating-companion-widget:hover {
    transform: scale(1.05);
}

.floating-companion-widget.is-dragging {
    cursor: grabbing !important;
    transform: scale(1.12);
}

.topbar-companion-pin-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    padding: 2px 5px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    margin-left: 2px;
}

.topbar-companion-pin-btn:hover {
    color: #00cec9;
    transform: scale(1.2);
}

.topbar-companion-pin-btn.active {
    color: #00cec9;
    text-shadow: 0 0 8px rgba(0, 206, 201, 0.8);
}

.topbar-wardrobe-btn {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.18), rgba(9, 132, 227, 0.18));
    border: 1px solid rgba(0, 206, 201, 0.4);
    color: #00cec9;
    font-family: 'Minecraft', monospace, sans-serif;
    font-size: 0.72rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    margin-right: 4px;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.topbar-wardrobe-btn:hover {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.35), rgba(9, 132, 227, 0.35));
    border-color: #00cec9;
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.4);
    transform: translateY(-1px);
}


.floating-companion-drag-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.floating-companion-toolbar {
    position: absolute;
    bottom: -34px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(13, 15, 34, 0.92);
    border: 1px solid rgba(0, 206, 201, 0.5);
    border-radius: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.floating-companion-widget:hover .floating-companion-toolbar,
.floating-companion-widget.is-touch-active .floating-companion-toolbar {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.floating-companion-tool-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #a4b0be;
    font-size: 0.72rem;
    padding: 3px 7px;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s, transform 0.15s;
}

.floating-companion-tool-btn:hover {
    color: #00cec9;
    background: rgba(0, 206, 201, 0.2);
    border-color: rgba(0, 206, 201, 0.5);
    transform: scale(1.1);
}

.supporter-floating-toggle-btn {
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid rgba(0, 206, 201, 0.4);
    background: rgba(0, 206, 201, 0.15);
    color: #00cec9;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.supporter-floating-toggle-btn:hover {
    background: rgba(0, 206, 201, 0.3);
    border-color: #00cec9;
    color: #fff;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.4);
}

.supporter-floating-toggle-btn.active {
    background: linear-gradient(135deg, #00cec9, #0984e3) !important;
    border-color: #00cec9 !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.6) !important;
}

.supporter-floating-toggle-btn.tier-locked {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.5);
}

.companion-aura-container.floating-companion-detached {
    display: none !important;
}
#userBarNameImage, .floating-companion-img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}




/* Aura Background Glow Intensity Scaling */
[style*="--aura-glow-mult:0"],
[style*="--aura-glow-mult: 0"],
[style*="--aura-glow-mult:0.0"],
[style*="--aura-glow-mult: 0.0"] {
    filter: none !important;
}

.companion-aura-container img,
.floating-companion-img,
#previewCompanionImg,
#userBarNameImage {
    transition: filter 0.25s ease;
}

/* ==========================================================================
   AURA GLOW INTENSITY MODIFIERS
   ========================================================================== */

/* Aura signature color mapping for contour glows */
.aura-shiny, .aura-shiny img, [class*="aura-shiny"] { --aura-color: #facc15; }
.aura-terastal, .aura-terastal img, [class*="aura-terastal"] { --aura-color: #22d3ee; }
.aura-stellar, .aura-stellar img, [class*="aura-stellar"] { --aura-color: #ec4899; }
.aura-inferno, .aura-inferno img, [class*="aura-inferno"] { --aura-color: #f97316; }
.aura-shadow, .aura-shadow img, [class*="aura-shadow"] { --aura-color: #9333ea; }
.aura-thunder, .aura-thunder img, [class*="aura-thunder"] { --aura-color: #eab308; }
.aura-frost, .aura-frost img, [class*="aura-frost"] { --aura-color: #38bdf8; }
.aura-ocean, .aura-ocean img, [class*="aura-ocean"] { --aura-color: #0284c7; }
.aura-nature, .aura-nature img, [class*="aura-nature"] { --aura-color: #4ade80; }
.aura-dragon, .aura-dragon img, [class*="aura-dragon"] { --aura-color: #818cf8; }
.aura-toxic, .aura-toxic img, [class*="aura-toxic"] { --aura-color: #a855f7; }
.aura-aurora, .aura-aurora img, [class*="aura-aurora"] { --aura-color: #2dd4bf; }

/* 0% Glow: Complete removal of the background light spot, pure sharp sprite! */
.aura-glow-none,
.aura-glow-none img,
img.aura-glow-none,
.companion-aura-container.aura-glow-none,
.companion-aura-container.aura-glow-none img,
.user-card-companion-wrap.aura-glow-none,
.user-card-companion-wrap.aura-glow-none img,
#previewCompanionWrap.aura-glow-none,
#previewCompanionWrap.aura-glow-none img,
#previewCompanionImg.aura-glow-none,
#userBarNameImage.aura-glow-none,
#userBarCompanionWrap.aura-glow-none,
#userBarCompanionWrap.aura-glow-none img,
#floatingCompanionWrap.aura-glow-none,
#floatingCompanionWrap.aura-glow-none img,
#floatingCompanionImg.aura-glow-none {
    filter: none !important;
    animation-name: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.aura-glow-none::before,
.aura-glow-none::after,
.companion-aura-container.aura-glow-none::before,
.companion-aura-container.aura-glow-none::after {
    display: none !important;
}

/* 35% Glow: Compact soft contour glow right around sprite border */
.aura-glow-soft img,
img.aura-glow-soft,
.companion-aura-container.aura-glow-soft img,
.user-card-companion-wrap.aura-glow-soft img,
#previewCompanionWrap.aura-glow-soft img,
#previewCompanionImg.aura-glow-soft,
#userBarNameImage.aura-glow-soft,
#floatingCompanionImg.aura-glow-soft,
#floatingCompanionWrap.aura-glow-soft img {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 4px var(--aura-color, #22d3ee)) !important;
    animation-name: none !important;
}

/* 70% Glow: Balanced medium contour glow */
.aura-glow-medium img,
img.aura-glow-medium,
.companion-aura-container.aura-glow-medium img,
.user-card-companion-wrap.aura-glow-medium img,
#previewCompanionWrap.aura-glow-medium img,
#previewCompanionImg.aura-glow-medium,
#userBarNameImage.aura-glow-medium,
#floatingCompanionImg.aura-glow-medium,
#floatingCompanionWrap.aura-glow-medium img {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 8px var(--aura-color, #22d3ee)) drop-shadow(0 0 14px var(--aura-color, #22d3ee)) !important;
    animation-name: none !important;
}

/* ==========================================================================
   FIX AURA DROP-SHADOW RECTANGULAR BOX CLIPPING
   Ensures drop-shadow conforms organically to the character silhouette,
   eliminating the rectangular box/edge artifacts on GIFs and scaled sprites
   ========================================================================== */

/* 1. Transparent unconstrained containers */
.companion-aura-container,
#previewCompanionWrap,
#floatingCompanionWrap,
.user-card-companion-wrap {
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Companion sprites: padding buffer prevents border-pixel clipping */
#previewCompanionImg,
#floatingCompanionImg,
#userBarNameImage,
.user-card-companion,
.supporter-preview-sprite,
.floating-companion-img {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px !important;
    box-sizing: content-box !important;
    overflow: visible !important;
}

/* 3. Aura particles layer clean overflow */
.aura-particles-layer {
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



/* ==========================================================================
   PERFECT FLEX & GRID LAYOUT FOR DATABASE SEARCH & FILTERS PANEL
   ========================================================================== */

/* Main outer panel container: ALWAYS vertical column spanning 100% width */
.db-controls {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
}

/* Top search bar row: ALWAYS spans 100% width at the top of db-controls */
.db-search-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

/* Search input input wrapper expands to fill available top row space */
.db-search-wrapper {
    flex: 1 1 280px !important;
    min-width: 220px !important;
    position: relative !important;
}

.db-search-input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Dropdown and view buttons stay on top right */
.db-sort-select {
    width: auto !important;
    flex-shrink: 0 !important;
}

.db-view-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

/* Filter section wrappers always take full width below search row */
.db-filters-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
}

/* Desktop (> 850px): 2 spacious equal columns for Left (Categories) and Right (Types/Stats) */
@media (min-width: 851px) {
    .db-filters-columns {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        align-items: start !important;
    }

    .db-filters-left,
    .db-filters-right {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Mobile & Tablet (<= 850px): Clean 1-column stacked layout */
@media (max-width: 850px) {
    .db-search-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .db-search-wrapper {
        width: 100% !important;
    }

    .db-sort-select {
        width: 100% !important;
    }

    .db-filters-columns {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 16px !important;
    }

    .db-filters-left,
    .db-filters-right {
        width: 100% !important;
    }
}

/* Pill chip wrapping (excluding type pill grids) */
.db-filter-pills:not(.db-type-pills) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}

.db-filter-pills:not(.db-type-pills) .db-pill {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Database and Moves Type Filter Grid Restored */
.db-type-pills,
.db-filter-pills.db-type-pills,
#dbTypeFilters,
#dbMoveTypeFilters {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.db-type-pills .db-pill,
.db-filter-pills.db-type-pills .db-pill,
#dbTypeFilters .db-pill,
#dbMoveTypeFilters .db-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 2px 4px !important;
    gap: 3px !important;
    text-transform: capitalize !important;
    border-radius: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 1 !important;
    aspect-ratio: 3/2 !important;
    min-height: 46px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.db-type-pills .db-pill img,
.db-filter-pills.db-type-pills .db-pill img,
#dbTypeFilters .db-pill img,
#dbMoveTypeFilters .db-pill img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.db-type-pills .db-pill .db-pill-name,
.db-filter-pills.db-type-pills .db-pill .db-pill-name,
#dbTypeFilters .db-pill .db-pill-name,
#dbMoveTypeFilters .db-pill .db-pill-name {
    font-size: 0.56rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    text-align: center !important;
    display: block !important;
    font-family: 'Minecraft', monospace !important;
}

@media (max-width: 768px) {
    .db-type-pills,
    .db-filter-pills.db-type-pills,
    #dbTypeFilters,
    #dbMoveTypeFilters {
        grid-template-columns: repeat(9, 1fr) !important;
        gap: 4px !important;
    }
    .db-type-pills .db-pill,
    .db-filter-pills.db-type-pills .db-pill,
    #dbTypeFilters .db-pill,
    #dbMoveTypeFilters .db-pill {
        padding: 4px !important;
        aspect-ratio: 1 !important;
        min-height: auto !important;
    }
    .db-type-pills .db-pill .db-pill-name,
    .db-filter-pills.db-type-pills .db-pill .db-pill-name,
    #dbTypeFilters .db-pill .db-pill-name,
    #dbMoveTypeFilters .db-pill .db-pill-name {
        display: none !important;
    }
}

/* ==========================================================================
   SUPPORTER PREVIEW MODE BAR & TIER TABS
   ========================================================================== */
.supporter-modal-card {
    max-width: 550px !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.supporter-status-banner.preview-banner {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.85), rgba(26, 32, 58, 0.75)) !important;
    border: 1px solid rgba(0, 206, 201, 0.3) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.supporter-preview-mode-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.supporter-preview-bar-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.supporter-preview-bar-heading {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
}

.supporter-preview-bar-texts {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
}

.supporter-preview-bar-title {
    color: #ffd32a !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
}

.supporter-preview-bar-subtext {
    font-size: 0.65rem !important;
    opacity: 0.75 !important;
    white-space: nowrap !important;
}

.supporter-preview-boosty-btn {
    padding: 4px 10px !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.supporter-preview-tier-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 4px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
}

.supporter-preview-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 6px 4px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Minecraft', monospace !important;
    font-size: 0.69rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    outline: none !important;
    box-sizing: border-box !important;
    user-select: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    width: 100% !important;
    min-width: 0 !important;
}

.supporter-preview-tab-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.supporter-preview-tab-btn img {
    width: 15px !important;
    height: 15px !important;
    image-rendering: pixelated !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    flex-shrink: 0 !important;
}

.supporter-preview-tab-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.supporter-preview-tab-btn:hover img {
    transform: scale(1.18) rotate(-6deg) !important;
}

.supporter-preview-tab-btn.active {
    font-weight: bold !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.supporter-preview-tab-btn.tier-trainer.active,
.supporter-preview-tab-btn[data-tier="trainer"].active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.35), rgba(185, 28, 28, 0.25)) !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.supporter-preview-tab-btn.tier-ultra.active,
.supporter-preview-tab-btn[data-tier="ultra"].active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(37, 99, 235, 0.25)) !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.supporter-preview-tab-btn.tier-master.active,
.supporter-preview-tab-btn[data-tier="master"].active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(126, 34, 206, 0.25)) !important;
    border-color: #a855f7 !important;
    color: #e9d5ff !important;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.supporter-preview-tab-btn.tier-founder.active,
.supporter-preview-tab-btn[data-tier="founder"].active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.25)) !important;
    border-color: #f59e0b !important;
    color: #fef08a !important;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 600px) {
    .supporter-preview-tier-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
}

/* ==========================================================================
   PERFECT AURA GLOW ENFORCEMENT & BOX ELIMINATION
   ========================================================================== */
.aura-glow-none,
.aura-glow-none img,
.companion-aura-container.aura-glow-none img,
#previewCompanionWrap.aura-glow-none img,
#previewCompanionImg.aura-glow-none,
#userBarNameImage.aura-glow-none,
#userBarCompanionWrap.aura-glow-none img,
#floatingCompanionWrap.aura-glow-none img,
#floatingCompanionImg.aura-glow-none,
img.aura-glow-none {
    filter: none !important;
    animation: none !important;
    animation-name: none !important;
    box-shadow: none !important;
}

.aura-glow-soft img,
.companion-aura-container.aura-glow-soft img,
#previewCompanionWrap.aura-glow-soft img,
#previewCompanionImg.aura-glow-soft,
#userBarNameImage.aura-glow-soft,
#floatingCompanionImg.aura-glow-soft,
#floatingCompanionWrap.aura-glow-soft img,
img.aura-glow-soft {
    animation: none !important;
    animation-name: none !important;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px var(--aura-color, #9333ea)) !important;
}

.aura-glow-medium img,
.companion-aura-container.aura-glow-medium img,
#previewCompanionWrap.aura-glow-medium img,
#previewCompanionImg.aura-glow-medium,
#userBarNameImage.aura-glow-medium,
#floatingCompanionImg.aura-glow-medium,
#floatingCompanionWrap.aura-glow-medium img,
img.aura-glow-medium {
    animation: none !important;
    animation-name: none !important;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 5px var(--aura-color, #9333ea)) !important;
}

/* ==========================================================================
   INTERACTIVE HP BAR & SLIDER COMBO (DUEL CALCULATOR)
   ========================================================================== */
.tb-hp-interactive-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 4px;
}

.tb-hp-bar-interactive-track {
    position: relative;
    flex: 1;
    min-width: 110px;
    height: 15px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9px;
    overflow: visible;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
}

.tb-hp-bar-interactive-fill {
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    border-radius: 7px;
    pointer-events: none;
    transition: width 0.05s ease, background 0.2s ease;
    z-index: 1;
}

.tb-hp-bar-interactive-fill.hp-high {
    background: linear-gradient(90deg, #10b981, #22c55e);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.45);
}
.tb-hp-bar-interactive-fill.hp-mid {
    background: linear-gradient(90deg, #f59e0b, #eab308);
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.45);
}
.tb-hp-bar-interactive-fill.hp-low {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.55);
}

.tb-hp-bar-interactive-slider {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    z-index: 2;
    outline: none;
}

.tb-hp-bar-interactive-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #0f172a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 6px rgba(255, 255, 255, 0.8);
    cursor: grab;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.tb-hp-bar-interactive-slider::-webkit-slider-thumb:hover {
    transform: scale(1.18);
    box-shadow: 0 0 10px #ffffff;
}

.tb-hp-bar-interactive-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.28);
    box-shadow: 0 0 12px #38bdf8;
}

.tb-hp-bar-interactive-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #0f172a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 6px rgba(255, 255, 255, 0.8);
    cursor: grab;
}

.tb-hp-step-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}

.tb-hp-step-btn:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: #3b82f6;
    color: #ffffff;
    transform: scale(1.08);
}

.tb-hp-step-btn:active {
    transform: scale(0.95);
}


/* CRITICAL HIT TOGGLE BUTTON & TAG */
.tb-duel-crit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 800;
    border: 1px solid rgba(235, 77, 75, 0.45);
    background: linear-gradient(135deg, rgba(235, 77, 75, 0.12), rgba(255, 121, 121, 0.08));
    color: #ff7675;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    user-select: none;
}

.tb-duel-crit-btn:hover {
    background: linear-gradient(135deg, rgba(235, 77, 75, 0.25), rgba(255, 107, 107, 0.35));
    border-color: #ff7675;
    color: #ffbe76;
    box-shadow: 0 0 14px rgba(235, 77, 75, 0.45);
    transform: translateY(-1px);
}

.tb-duel-crit-btn.active {
    background: linear-gradient(135deg, #d63031, #e17055);
    border-color: #ff7675;
    color: #ffffff;
    box-shadow: 0 0 18px rgba(214, 48, 49, 0.65);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    animation: critPulse 1.8s infinite alternate ease-in-out;
}

@keyframes critPulse {
    0% {
        box-shadow: 0 0 12px rgba(214, 48, 49, 0.5);
    }
    100% {
        box-shadow: 0 0 22px rgba(255, 107, 107, 0.85);
    }
}

.tb-move-crit-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(214, 48, 49, 0.25), rgba(225, 112, 85, 0.35));
    border: 1px solid rgba(255, 118, 117, 0.5);
    color: #ff7675;
}

.tb-move-crit-tag.auto-crit {
    background: linear-gradient(135deg, rgba(225, 112, 85, 0.3), rgba(243, 156, 18, 0.4));
    border-color: #f39c12;
    color: #f1c40f;
}

/* PROTECT / DETECT TOGGLE BUTTON */
.tb-duel-protect-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 800;
    border: 1px solid rgba(0, 206, 201, 0.45);
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.12), rgba(129, 236, 236, 0.08));
    color: #81ecec;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    user-select: none;
}

.tb-duel-protect-btn:hover {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.25), rgba(0, 206, 201, 0.35));
    border-color: #00cec9;
    color: #55efc4;
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.45);
    transform: translateY(-1px);
}

.tb-duel-protect-btn.active {
    background: linear-gradient(135deg, #0984e3, #00cec9);
    border-color: #74b9ff;
    color: #ffffff;
    box-shadow: 0 0 18px rgba(0, 206, 201, 0.65);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    animation: protectPulse 1.8s infinite alternate ease-in-out;
}

@keyframes protectPulse {
    0% {
        box-shadow: 0 0 12px rgba(9, 132, 227, 0.5);
    }
    100% {
        box-shadow: 0 0 22px rgba(0, 206, 201, 0.85);
    }
}

/* RUIN AURAS & RESIST BERRIES BADGES */
.tb-status-active-tag.protect-tag {
    background: rgba(231, 76, 60, 0.25);
    color: #ff7675;
    border: 1px solid #e74c3c;
}

.tb-status-active-tag.berry-tag {
    background: rgba(46, 204, 113, 0.25);
    color: #2ecc71;
    border: 1px solid #2ecc71;
}

.tb-tab-dmg-numbers {
    cursor: help;
    transition: color 0.2s ease;
}

.tb-tab-dmg-numbers:hover {
    color: #74b9ff !important;
    text-decoration: underline dotted #74b9ff;
}

/* ACTIVE STATUS & SPECIAL DAMAGE TAGS (SPREAD, BURN, GUTS, ETC.) */
.tb-status-active-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 6px;
    vertical-align: 1px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-family: 'Minecraft', monospace;
    white-space: nowrap;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.tb-status-active-tag.tb-tag-spread {
    background: rgba(14, 165, 233, 0.16);
    border: 1px solid rgba(56, 189, 248, 0.45);
    color: #38bdf8;
    box-shadow: 0 0 6px rgba(14, 165, 233, 0.2);
}
.tb-status-active-tag.tb-tag-spread i {
    font-size: 0.62rem;
    color: #38bdf8;
}

.tb-status-active-tag.tb-tag-burn {
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fca5a5;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.2);
}
.tb-status-active-tag.tb-tag-burn i {
    color: #ef4444;
}

.tb-status-active-tag.tb-tag-guts {
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(34, 197, 94, 0.45);
    color: #86efac;
}
.tb-status-active-tag.tb-tag-guts i {
    color: #22c55e;
}

.tb-status-active-tag.tb-tag-facade {
    background: rgba(234, 179, 8, 0.16);
    border: 1px solid rgba(234, 179, 8, 0.45);
    color: #fef08a;
}
.tb-status-active-tag.tb-tag-facade i {
    color: #eab308;
}

.tb-status-active-tag.tb-tag-protect {
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}
.tb-status-active-tag.tb-tag-protect i {
    color: #ef4444;
}

.tb-status-active-tag.tb-tag-bypassed {
    background: rgba(168, 85, 247, 0.16);
    border: 1px solid rgba(168, 85, 247, 0.45);
    color: #d8b4fe;
}
.tb-status-active-tag.tb-tag-bypassed i {
    color: #a855f7;
}

.tb-status-active-tag.tb-tag-chip {
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #fcd34d;
}
.tb-status-active-tag.tb-tag-chip i {
    color: #f59e0b;
}

.tb-status-active-tag.tb-tag-berry {
    background: rgba(46, 204, 113, 0.16);
    border: 1px solid rgba(46, 204, 113, 0.45);
    color: #86efac;
}
.tb-status-active-tag.tb-tag-berry i {
    color: #2ecc71;
}

.tb-status-active-tag.tb-tag-amulet {
    background: rgba(0, 206, 201, 0.16);
    border: 1px solid rgba(0, 206, 201, 0.45);
    color: #5eead4;
}
.tb-status-active-tag.tb-tag-amulet i {
    color: #00cec9;
}

.tb-status-active-tag.tb-tag-helping-hand {
    background: rgba(46, 204, 113, 0.16);
    border: 1px solid rgba(46, 204, 113, 0.45);
    color: #86efac;
}
.tb-status-active-tag.tb-tag-helping-hand i {
    color: #2ecc71;
}


/* ==========================================================================
   COMMUNITY POST COMMENTS SYSTEM
   ========================================================================== */
.comm-comments-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    padding: 6px 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.comm-comments-toggle-btn:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.4);
    color: #00cec9;
    transform: translateY(-1px);
}
.comm-comments-toggle-btn.active {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.25), rgba(9, 132, 227, 0.25));
    border-color: #00cec9;
    color: #00cec9;
    box-shadow: 0 0 12px rgba(0, 206, 201, 0.3);
}
.comm-comments-toggle-btn i {
    font-size: 0.9rem;
    color: #00cec9;
}

.comm-comments-wrapper {
    margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
    animation: commCommentsFadeIn 0.25s ease-out;
}
@keyframes commCommentsFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.comm-comments-box {
    background: rgba(10, 14, 28, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.comm-comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.comm-comments-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
}

/* Comment Form */
.comm-comment-form {
    display: flex;
    gap: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    transition: border-color 0.2s;
}
.comm-comment-form:focus-within {
    border-color: rgba(0, 206, 201, 0.5);
    box-shadow: 0 0 14px rgba(0, 206, 201, 0.15);
}
.comm-comment-form-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}
.comm-comment-form-avatar .comm-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}
.comm-comment-form-input-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.comm-comment-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #f1f5f9;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    resize: vertical;
    min-height: 52px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}
.comm-comment-input:focus {
    border-color: #00cec9;
}
.comm-comment-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.comm-comment-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.comm-comment-hint {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
}
.comm-comment-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #00cec9, #0984e3);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.comm-comment-send-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 206, 201, 0.35);
}
.comm-comment-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Guest Prompt */
.comm-comment-guest-prompt {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
}
.comm-comment-guest-prompt i {
    color: #f59e0b;
    font-size: 1rem;
}
.comm-comment-login-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.5);
    color: #00cec9;
    border-radius: 6px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.comm-comment-login-btn:hover {
    background: #00cec9;
    color: #0a0a1a;
}

/* Comments List */
.comm-comments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.comm-comment-item {
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px 12px;
    transition: background 0.2s;
    animation: commCommentSlideIn 0.2s ease-out;
}
@keyframes commCommentSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.comm-comment-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
.comm-comment-item.is-admin-comment {
    border-left: 3px solid #e94560;
    background: rgba(233, 69, 96, 0.04);
}
.comm-comment-avatar-col {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}
.comm-comment-avatar-col .comm-author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.comm-comment-main-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.comm-comment-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.comm-comment-author {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 700;
}
.comm-comment-username {
    font-family: 'Minecraft', monospace;
}
.comm-comment-date {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.comm-comment-delete-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 3px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}
.comm-comment-delete-btn:hover {
    color: #e94560;
    background: rgba(233, 69, 96, 0.15);
}
.comm-comment-body {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.35;
    word-break: break-word;
    white-space: pre-wrap;
    margin: 0;
    padding: 0;
}

.comm-comments-empty {
    text-align: center;
    padding: 24px 16px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.comm-comments-empty i {
    font-size: 1.6rem;
    opacity: 0.4;
    color: #00cec9;
}

.comm-comments-loading,
.comm-comments-error {
    text-align: center;
    padding: 20px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.comm-comments-loading {
    color: #00cec9;
}
.comm-comments-error {
    color: #e94560;
}


/* Duel Mega & Dynamax buttons */
.tb-duel-mega-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 3px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #e0e0e0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
}
.tb-duel-mega-btn:hover {
    background: rgba(235, 77, 75, 0.2);
    border-color: #eb4d4b;
    color: #fff;
    transform: translateY(-1px);
}
.tb-duel-mega-btn.active {
    background: linear-gradient(135deg, rgba(235, 77, 75, 0.4), rgba(240, 147, 43, 0.4));
    border-color: #eb4d4b;
    color: #fff;
    box-shadow: 0 0 14px rgba(235, 77, 75, 0.45);
    font-weight: bold;
}
.tb-duel-mega-btn.opp:hover {
    background: rgba(230, 126, 34, 0.2);
    border-color: #e67e22;
}
.tb-duel-mega-btn.opp.active {
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.4), rgba(211, 84, 0, 0.4));
    border-color: #e67e22;
    box-shadow: 0 0 14px rgba(230, 126, 34, 0.45);
    color: #fff;
    font-weight: bold;
}

.tb-duel-dmax-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 3px 8px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    color: #e0e0e0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
}
.tb-duel-dmax-btn:hover {
    background: rgba(214, 48, 49, 0.2);
    border-color: #d63031;
    color: #fff;
    transform: translateY(-1px);
}
.tb-duel-dmax-btn.active {
    background: linear-gradient(135deg, rgba(214, 48, 49, 0.45), rgba(232, 67, 147, 0.45));
    border-color: #ff7675;
    color: #fff;
    box-shadow: 0 0 14px rgba(214, 48, 49, 0.5);
    font-weight: bold;
}
.tb-duel-dmax-btn.opp:hover {
    background: rgba(192, 57, 43, 0.2);
    border-color: #c0392b;
}
.tb-duel-dmax-btn.opp.active {
    background: linear-gradient(135deg, rgba(192, 57, 43, 0.45), rgba(142, 68, 173, 0.45));
    border-color: #e74c3c;
    box-shadow: 0 0 14px rgba(192, 57, 43, 0.5);
    color: #fff;
    font-weight: bold;
}


/* DYNAMAX & G-MAX MOVES STYLES */
.tb-move-max-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    padding: 3px 10px;
    margin-left: 20px;
    border-radius: 6px;
    margin-top: 3px;
    transition: all 0.2s;
    cursor: default;
    background: rgba(233, 69, 96, 0.12);
    border: 1px solid rgba(233, 69, 96, 0.45);
    color: #ff7675;
}
.tb-move-max-sub.gmax {
    background: rgba(255, 71, 87, 0.16);
    border: 1px solid rgba(255, 71, 87, 0.6);
    color: #ff7675;
}
.tb-move-max-sub:hover {
    background: rgba(233, 69, 96, 0.22);
    border-color: #ff7675;
}
.tb-move-max-title {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}
.tb-move-max-bp {
    color: #ff7675;
    font-weight: 700;
    font-family: 'Minecraft', monospace, sans-serif;
    font-size: 0.72rem;
    flex-shrink: 0;
    margin-left: auto;
}

.tb-tab-move-card.max-move-card {
    border-color: rgba(233, 69, 96, 0.6) !important;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.12), rgba(155, 89, 182, 0.12)) !important;
    box-shadow: 0 0 16px rgba(233, 69, 96, 0.3) !important;
}
.tb-tab-move-card.max-move-card.gmax {
    border-color: rgba(255, 71, 87, 0.8) !important;
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.18), rgba(197, 108, 240, 0.18)) !important;
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.45) !important;
}


/* ==========================================================================
   PROTECT / MAX GUARD & CANONICAL DB TAB ICONS
   ========================================================================== */

/* MAX GUARD DISTINCT STYLING */
.tb-duel-protect-btn.max-guard {
    border-color: rgba(233, 69, 96, 0.65) !important;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.18), rgba(155, 89, 182, 0.15)) !important;
    color: #ff7675 !important;
}

.tb-duel-protect-btn.max-guard:hover {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.35), rgba(155, 89, 182, 0.35)) !important;
    border-color: #e94560 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.55) !important;
}

.tb-duel-protect-btn.max-guard.active {
    background: linear-gradient(135deg, #e94560, #9b59b6) !important;
    border-color: #ff7675 !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.8) !important;
    animation: maxGuardPulse 1.8s infinite alternate ease-in-out !important;
}

@keyframes maxGuardPulse {
    0% {
        box-shadow: 0 0 12px rgba(233, 69, 96, 0.6);
    }
    100% {
        box-shadow: 0 0 22px rgba(155, 89, 182, 0.9);
    }
}


/* CANONICAL IN-GAME ICONS ENLARGEMENT */
.db-subtabs-container .tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    line-height: 1 !important;
    padding: 10px 18px !important;
}

.db-subtabs-container .tabs-row--games .tab-btn {
    padding: 10px 20px !important;
}

.db-subtabs-container .tabs-row--other .tab-btn {
    padding: 8px 16px !important;
}

.db-subtabs-container .tab-btn span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.db-tab-icon-img,
img.db-tab-icon-img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.tabs-row--games .db-tab-icon-img,
.tabs-row--games img.db-tab-icon-img {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
}

.tabs-row--other .db-tab-icon-img,
.tabs-row--other img.db-tab-icon-img {
    width: 19px !important;
    height: 19px !important;
    max-width: 19px !important;
    max-height: 19px !important;
}

.tab-btn:hover .db-tab-icon-img {
    transform: scale(1.18) !important;
}


/* ==========================================================================
   ENHANCED ITEM FILTER TAGS CONTAINER & SUBGROUPS
   ========================================================================== */
.db-item-tags-container {
    width: 100% !important;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.db-item-tags-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.db-tags-subgroups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    width: 100%;
}

.db-tag-subgroup {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.db-tag-subgroup-title {
    font-size: 0.7rem;
    font-family: Minecraft, monospace;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.db-tag-subgroup-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.db-tag-subgroup-pills .db-pill {
    padding: 4px 9px;
    font-size: 0.72rem;
}


/* Compact 1-line badges on cards */
.db-item-card .db-item-badges-row {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    margin-top: 4px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

.db-item-card .db-item-cat-badge,
.db-item-card .db-item-tag-badge {
    height: 18px !important;
    padding: 1px 6px !important;
    font-size: 0.52rem !important;
    border-radius: 4px !important;
    letter-spacing: 0.02em !important;
    flex-shrink: 0 !important;
    line-height: 14px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    max-width: 110px !important;
    overflow: hidden !important;
}


/* Modern 3D Sound Button Styles */
.db-sound-modern-btn {
    background: linear-gradient(135deg, rgba(54, 146, 220, 0.22) 0%, rgba(108, 92, 231, 0.28) 100%) !important;
    border-color: rgba(54, 146, 220, 0.45) !important;
    color: #74b9ff !important;
}
.db-sound-modern-btn:hover {
    background: linear-gradient(135deg, rgba(54, 146, 220, 0.38) 0%, rgba(108, 92, 231, 0.45) 100%) !important;
    box-shadow: 0 0 14px rgba(54, 146, 220, 0.45) !important;
    color: #fff !important;
}
.db-sound-modern-btn.playing {
    background: linear-gradient(135deg, #0984e3 0%, #6c5ce7 100%) !important;
    border-color: #74b9ff !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(116, 185, 255, 0.6) !important;
}


/* Sound Card 2-Row Actions Layout */
.db-sound-card-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: auto !important;
}

.db-sound-play-row {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
    align-items: stretch !important;
}

.db-sound-play-row .db-sound-play-btn {
    flex: 1 !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 7px 8px !important;
    font-size: 0.76rem !important;
    white-space: nowrap !important;
}

.db-sound-dl-row {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
}

.db-sound-dl-row .db-sound-dl-btn {
    flex: 1 !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 6px 4px !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
}

.db-sound-modern-dl {
    background: rgba(54, 146, 220, 0.15) !important;
    border-color: rgba(54, 146, 220, 0.35) !important;
    color: #74b9ff !important;
}

.db-sound-modern-dl:hover {
    background: rgba(54, 146, 220, 0.28) !important;
    border-color: #74b9ff !important;
    color: #fff !important;
}

/* ==========================================================================
   MULTI-HIT ATTACK SELECTOR & BADGES (DUEL CALCULATOR)
   ========================================================================== */
.tb-multihit-pill-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 206, 201, 0.35);
    border-radius: 6px;
    padding: 2px 5px;
    margin-left: 4px;
}

.tb-multihit-label {
    font-size: 10px;
    font-family: 'Minecraft', monospace;
    color: #81ecec;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 2px;
}

.tb-multihit-hit-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #dfe6e9;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Minecraft', monospace;
    padding: 1px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.2;
}

.tb-multihit-hit-btn:hover {
    background: rgba(0, 206, 201, 0.25);
    border-color: #00cec9;
    color: #fff;
}

.tb-multihit-hit-btn.active {
    background: #00cec9;
    border-color: #00cec9;
    color: #0d1117;
    font-weight: 800;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.5);
}

.tb-status-active-tag.tb-tag-sash-break {
    background: rgba(255, 118, 117, 0.2) !important;
    border: 1px solid #ff7675 !important;
    color: #ff7675 !important;
}

.tb-multihit-spec-tag {
    font-size: 10px;
    font-family: 'Minecraft', monospace;
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
}

.tb-multihit-breakdown {
    font-size: 0.75rem;
    color: #81ecec;
    font-family: 'Minecraft', monospace;
    margin-left: 4px;
    opacity: 0.9;
}

/* POPULATION BOMB & MULTI-HIT COMPACT STEPPER */
.tb-multihit-stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(0, 206, 201, 0.4);
    border-radius: 6px;
    padding: 2px 5px;
    margin-left: 4px;
}

.tb-stepper-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #81ecec;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.15s ease;
    padding: 0;
}

.tb-stepper-btn:hover:not(:disabled) {
    background: #00cec9;
    color: #0d1117;
    border-color: #00cec9;
    box-shadow: 0 0 6px rgba(0, 206, 201, 0.5);
}

.tb-stepper-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.08);
}

.tb-stepper-val {
    font-size: 11px;
    font-family: 'Minecraft', monospace;
    font-weight: 700;
    color: #00cec9;
    padding: 0 4px;
    min-width: 58px;
    text-align: center;
    letter-spacing: 0.3px;
}

.tb-stepper-max-btn {
    background: rgba(0, 206, 201, 0.15);
    border: 1px solid rgba(0, 206, 201, 0.35);
    color: #81ecec;
    font-size: 9px;
    font-family: 'Minecraft', monospace;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 2px;
}

.tb-stepper-max-btn:hover {
    background: #00cec9;
    color: #0d1117;
    border-color: #00cec9;
}

/* MULTI-HIT CRIT STEPPER */
.tb-crit-stepper {
    border-color: rgba(253, 203, 110, 0.35) !important;
    background: rgba(253, 203, 110, 0.08) !important;
}

.tb-crit-stepper.has-crits {
    border-color: rgba(253, 203, 110, 0.75) !important;
    background: rgba(253, 203, 110, 0.18) !important;
    box-shadow: 0 0 8px rgba(253, 203, 110, 0.35);
}

.tb-crit-stepper .tb-stepper-btn.tb-crit-btn {
    border-color: rgba(253, 203, 110, 0.3);
    color: #ffeaa7;
}

.tb-crit-stepper .tb-stepper-btn.tb-crit-btn:hover:not(:disabled) {
    background: #fdcb6e;
    color: #2d3436;
    border-color: #fdcb6e;
    box-shadow: 0 0 6px rgba(253, 203, 110, 0.6);
}

.tb-crit-stepper .tb-stepper-val.tb-crit-val {
    color: #b2bec3;
    min-width: 50px;
}

.tb-crit-stepper.has-crits .tb-stepper-val.tb-crit-val {
    color: #fdcb6e;
    font-weight: 700;
}

/* SIGNATURE ITEM LOCKED STYLE */
.tb-item-btn.tb-item-locked {
    border-color: rgba(253, 203, 110, 0.45) !important;
    background: rgba(253, 203, 110, 0.06) !important;
}
.tb-item-btn.tb-item-locked:hover {
    border-color: rgba(253, 203, 110, 0.75) !important;
    box-shadow: 0 0 8px rgba(253, 203, 110, 0.3) !important;
}


/* Anchor Pokemon Quick Search Dropdown */
.tb-gen-input-wrap {
    position: relative;
}
.tb-gen-anchor-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    min-width: 320px;
    max-width: 440px;
    background: #141b2d;
    border: 1px solid rgba(245, 158, 11, 0.6);
    border-radius: 10px;
    max-height: 290px;
    overflow-y: auto;
    z-index: 99999 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95), 0 0 15px rgba(245, 158, 11, 0.25);
}
.tb-gen-anchor-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
    user-select: none;
}
.tb-gen-anchor-item:last-child {
    border-bottom: none;
}
.tb-gen-anchor-item:hover,
.tb-gen-anchor-item.selected {
    background: rgba(245, 158, 11, 0.22);
}
.tb-gen-anchor-thumb {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}
.tb-gen-anchor-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    gap: 2px;
}
.tb-gen-anchor-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-gen-anchor-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-gen-anchor-dex {
    font-size: 0.7rem;
    color: #f59e0b;
    font-family: 'Minecraft', monospace;
    font-weight: bold;
    flex-shrink: 0;
}
.tb-gen-anchor-types {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
    align-items: center;
}
.tb-gen-anchor-type-pill {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.tb-gen-anchor-empty {
    padding: 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
}



/* --- Anchor Chips in Procedural Generator --- */
.tb-gen-anchor-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    font-size: 0.75rem !important;
    max-width: 100% !important;
}
.tb-gen-anchor-chip img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}
.tb-gen-anchor-remove {
    background: none !important;
    border: none !important;
    color: #ef4444 !important;
    cursor: pointer !important;
    padding: 0 3px !important;
    font-size: 0.75rem !important;
}

/* ========================================================
   MODERN FRIENDS DUEL INVITE MODAL OVERHAUL
   ======================================================== */
.gw-invite-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 10, 20, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
}

.game-invite-container {
    width: 100%;
    max-width: 680px;
    background: linear-gradient(155deg, rgba(22, 27, 46, 0.98), rgba(15, 17, 30, 0.99));
    border: 1px solid rgba(233, 69, 96, 0.35);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(233, 69, 96, 0.15);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    box-sizing: border-box;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    animation: gwModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gwModalFadeIn {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.game-invite-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.game-invite-close:hover {
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
    border-color: #e94560;
    transform: rotate(90deg);
}

.game-invite-header {
    text-align: center;
    margin-bottom: 20px;
}
.game-invite-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 20px;
    color: #ff6b81;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.game-invite-title {
    font-family: 'Minecraft', monospace;
    font-size: 1.35rem;
    color: #ffffff;
    margin: 0 0 6px 0;
    text-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
}
.game-invite-target {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}
.game-invite-target span {
    color: #e94560;
    font-weight: 700;
    font-family: 'Minecraft', monospace;
}

/* Category Tabs */
.invite-categories-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    background: rgba(10, 12, 22, 0.6);
    padding: 5px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 16px;
}
.invite-cat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.invite-cat-btn i {
    font-size: 0.85rem;
}
.invite-cat-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}
.invite-cat-btn.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.3), rgba(233, 69, 96, 0.15));
    color: #fff;
    border: 1px solid rgba(233, 69, 96, 0.5);
    box-shadow: 0 4px 12px rgba(233, 69, 96, 0.2);
}

/* Modes Grid */
.invite-modes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 4px;
}
.invite-modes-grid::-webkit-scrollbar {
    width: 5px;
}
.invite-modes-grid::-webkit-scrollbar-thumb {
    background: rgba(233, 69, 96, 0.3);
    border-radius: 10px;
}

.invite-mode-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.invite-mode-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(233, 69, 96, 0.4);
    transform: translateY(-2px);
}
.invite-mode-card.active {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.18), rgba(233, 69, 96, 0.06));
    border-color: #e94560;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.25);
}
.mode-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.mode-card-info {
    flex: 1;
    min-width: 0;
}
.mode-card-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 5px;
}
.mode-badge-new {
    background: #00cec9;
    color: #0b1320;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}
.mode-card-desc {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.mode-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e94560;
    color: #fff;
    font-size: 10px;
    display: none;
    align-items: center;
    justify-content: center;
}
.invite-mode-card.active .mode-card-check {
    display: flex;
}

/* Settings Container */
.invite-settings-wrapper {
    background: rgba(10, 12, 22, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
}
.invite-settings-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffb454;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.invite-section-group {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.invite-field-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.invite-field-value {
    color: #38bdf8;
    font-weight: 600;
    font-size: 0.72rem;
}

.invite-pill-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.invite-pill-btn {
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.invite-pill-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}
.invite-pill-btn.active {
    background: rgba(233, 69, 96, 0.2);
    border-color: #e94560;
    color: #ff6b81;
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.2);
}

.invite-custom-gens-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.invite-gen-toggle {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}
.invite-gen-toggle:hover {
    border-color: #38bdf8;
    color: #fff;
}
.invite-gen-toggle.active {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}

.invite-range-slider {
    width: 100%;
    margin-top: 6px;
    accent-color: #ffb454;
    cursor: pointer;
}

.invite-send-btn-modern {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #e94560 0%, #c0392b 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: 'Minecraft', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 18px rgba(233, 69, 96, 0.4);
    transition: all 0.25s ease;
}
.invite-send-btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(233, 69, 96, 0.6);
    filter: brightness(1.1);
}
.invite-send-btn-modern:active {
    transform: translateY(0);
}

@media (max-width: 600px) {
    .game-invite-container {
        padding: 16px;
        max-height: 92vh;
        display: flex;
        flex-direction: column;
    }
    .invite-categories-tabs {
        grid-template-columns: repeat(2, 1fr);
    }
    .invite-modes-grid {
        grid-template-columns: 1fr;
        max-height: 180px;
    }
    .invite-settings-wrapper {
        overflow-y: auto;
        flex: 1;
    }
}

/* Online Duel HUD actions */
.gw-btn-pass-turn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease !important;
}
.gw-btn-pass-turn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
}
.gw-btn-pass-turn:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.gw-btn-dim {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.8) !important;
    box-shadow: none !important;
}

/* ========================================================
   MINECRAFT FONT OVERHAUL FOR GAME INVITE MODAL
   ======================================================== */
.game-invite-container,
.game-invite-container * {
    font-family: 'Minecraft', monospace !important;
}

.game-invite-header-badge {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.5px !important;
}

.game-invite-title {
    font-family: 'Minecraft', monospace !important;
    font-size: 1.15rem !important;
    letter-spacing: 0.5px !important;
}

.game-invite-target {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.75rem !important;
}

.invite-cat-btn {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.3px !important;
}

.mode-card-title {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.2px !important;
}

.mode-card-desc {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.56rem !important;
    letter-spacing: 0px !important;
    opacity: 0.75 !important;
}

.mode-badge-new {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.52rem !important;
}

.invite-settings-header {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.5px !important;
}

.invite-field-label {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
}

.invite-field-value {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
}

.invite-pill-btn {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.65rem !important;
}

.invite-gen-toggle {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.68rem !important;
}

.invite-send-btn-modern {
    font-family: 'Minecraft', monospace !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.8px !important;
}

/* ============================================
   POKÉMON MINI-TAGS (ULTRA-COMPACT MICRO-BADGES)
   ============================================ */
.db-mini-tags-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 4px;
    vertical-align: middle;
}
.db-mini-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    font-family: 'Minecraft', monospace, sans-serif;
    font-size: 0.52rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.3px;
    vertical-align: middle;
    transition: all 0.2s ease;
    cursor: default;
    user-select: none;
}
.db-mini-tag.db-mtag-stage {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}
.db-mini-tag.db-mtag-final {
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}
.db-mini-tag.db-mtag-single {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}
.db-mini-tag.db-mtag-branch {
    background: rgba(168, 85, 247, 0.14);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #d8b4fe;
}
.db-mini-tag.db-mtag-mega {
    background: rgba(236, 72, 153, 0.14);
    border: 1px solid rgba(236, 72, 153, 0.45);
    color: #f472b6;
}
.db-mini-tag.db-mtag-gmax {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #f87171;
}
.db-mini-tag.db-mtag-tera {
    background: rgba(6, 182, 212, 0.14);
    border: 1px solid rgba(6, 182, 212, 0.45);
    color: #67e8f9;
}
.db-mini-tag.db-mtag-genderless {
    background: rgba(100, 116, 139, 0.14);
    border: 1px solid rgba(100, 116, 139, 0.35);
    color: #cbd5e1;
}
.db-mini-tag.db-mtag-male {
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}
.db-mini-tag.db-mtag-female {
    background: rgba(244, 114, 182, 0.14);
    border: 1px solid rgba(244, 114, 182, 0.4);
    color: #f472b6;
}
.db-mini-tag:hover {
    transform: translateY(-1px);
    filter: brightness(1.2);
}

.db-mini-tag.db-mtag-genderdiff {
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.45);
    color: #c084fc;
}

.db-mini-tag.db-mtag-regional {
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #6ee7b7;
}
.db-mini-tag.db-mtag-regcount {
    background: rgba(14, 165, 233, 0.14);
    border: 1px solid rgba(14, 165, 233, 0.45);
    color: #7dd3fc;
}

/* ============================================
   ИГРА «УГАДАЙ КТО?» — оформлена как DexID Оверлей
   ============================================ */
#gwOverlay { animation: dexidOverlayIn 0.3s ease forwards; }
#gwOverlay > div { animation: dexidModalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
#gwOverlay.overlay-out { animation: dexidOverlayOut 0.3s ease forwards !important; }
#gwOverlay.overlay-out > div { animation: dexidModalOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; }
#gwOverlay button[onclick*="gwClose"] {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}
#gwOverlay button[onclick*="gwClose"]:hover {
    transform: rotate(25deg) scale(1.1) !important;
    background: rgba(233, 69, 96, 0.3) !important;
    border-color: #e94560 !important;
    color: #e94560 !important;
}
#gwOverlay button[onclick*="gwClose"]:active {
    transform: rotate(25deg) scale(0.9) !important;
}


/* Champions Filter Button distinct styling */
.db-pill-champions {
    font-weight: bold;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.2s ease !important;
}
.db-pill-champions i {
    color: #f1c40f;
    margin-right: 3px;
}
.db-pill-champions:hover {
    border-color: rgba(233, 69, 96, 0.6) !important;
    background: rgba(233, 69, 96, 0.15) !important;
    color: #fff !important;
}
.db-pill-champions.active {
    background: linear-gradient(135deg, #e94560 0%, #ff0055 100%) !important;
    color: #ffffff !important;
    border-color: #ff3366 !important;
    box-shadow: 0 0 14px rgba(233, 69, 96, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.04) !important;
}
.db-pill-champions.active i {
    color: #ffeaa7 !important;
    text-shadow: 0 0 6px rgba(255, 234, 167, 0.8);
}

.tb-gen-accordion-content.is-open { display: flex !important; }

/* Cobblemon Move Translation Toggle */
.db-move-lang-mode-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 3px;
    gap: 3px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
.db-move-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.db-move-lang-btn i {
    font-size: 0.75rem;
    opacity: 0.75;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.db-move-lang-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}
.db-move-lang-btn:hover i {
    opacity: 1;
    transform: scale(1.1);
}
.db-move-lang-btn.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
.db-move-lang-btn.active i {
    opacity: 1;
}
.db-move-lang-btn[data-lang-mode="cobblemon"].active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

/* ========================================================== */
/* POKE-DIV USER REPORTS & MODERATION STYLES                  */
/* ========================================================== */

#userReportModal, #adminResolveReportModal {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(8, 9, 20, 0.75);
}

.chat-msg-report-btn {
    opacity: 0.35;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.chat-msg-report-btn:hover {
    opacity: 1 !important;
    color: #ff4757 !important;
    transform: scale(1.15);
}

#chatHeaderReportBtn {
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}

#chatHeaderReportBtn:hover {
    background: rgba(231, 76, 60, 0.3) !important;
    border-color: #ff4757 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

#adminSectionUserReports .admin-item {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

#adminSectionUserReports .admin-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 71, 87, 0.15);
}

/* Community & News Report Buttons */
.comm-user-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #ff4757;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 0.65rem;
    font-family: 'Minecraft', monospace;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 6px;
    vertical-align: middle;
}

.comm-user-report-btn:hover {
    background: rgba(231, 76, 60, 0.25);
    border-color: #ff4757;
    color: #ffffff;
    transform: translateY(-1px);
}

.comm-comment-report-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: rgba(231, 76, 60, 0.15) !important;
    border: 1px solid rgba(231, 76, 60, 0.35) !important;
    color: #ff4757 !important;
    border-radius: 4px !important;
    padding: 2px 7px !important;
    font-size: 0.62rem !important;
    font-family: 'Minecraft', monospace !important;
    cursor: pointer !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    opacity: 0.85 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.comm-comment-report-btn:hover {
    background: rgba(231, 76, 60, 0.35) !important;
    border-color: #ff4757 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    transform: translateY(-1px) scale(1.05) !important;
}

/* ============================================================
   CubeNet Cobblemon Partner Showcase Card
   ============================================================ */
.about-partner-container {
    margin-bottom: 24px;
}

.about-partner-card {
    background: linear-gradient(135deg, rgba(20, 24, 45, 0.9) 0%, rgba(13, 16, 32, 0.95) 100%);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 16px;
    padding: 22px 26px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(56, 189, 248, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.about-partner-card:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 35px rgba(56, 189, 248, 0.22);
}

.about-partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #38bdf8, #818cf8, #a855f7, #34d399);
}

.about-partner-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.about-partner-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.about-partner-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.35);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
}

.about-partner-tag-launcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.35);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
}

.about-partner-body {
    display: flex;
    align-items: center;
    gap: 22px;
}

.about-partner-logo-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 16px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(13, 16, 32, 0.95) 75%);
    border: 2px solid rgba(56, 189, 248, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.28);
    overflow: hidden;
    padding: 6px;
}

.about-partner-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.about-partner-card:hover .about-partner-logo-img {
    transform: scale(1.08) rotate(2deg);
}

.about-partner-info {
    flex: 1;
    min-width: 0;
}

.about-partner-header-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.about-partner-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.3px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.about-partner-sub {
    font-size: 0.9rem;
    font-weight: 600;
    color: #94a3b8;
}

.about-partner-launcher-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #c084fc;
    padding: 6px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.86rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.about-partner-launcher-pill:hover {
    background: rgba(168, 85, 247, 0.28);
    border-color: #c084fc;
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
    color: #fff;
}

.about-partner-desc {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #94a3b8;
}

.about-partner-desc strong {
    color: #38bdf8;
    font-weight: 700;
}

.about-partner-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.about-partner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.about-partner-btn.btn-site {
    background: linear-gradient(135deg, #0284c7, #2563eb);
    color: #fff;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}
.about-partner-btn.btn-site:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.5);
    color: #fff;
}

.about-partner-btn.btn-discord {
    background: rgba(88, 101, 242, 0.15);
    border-color: rgba(88, 101, 242, 0.4);
    color: #818cf8;
}
.about-partner-btn.btn-discord:hover {
    background: rgba(88, 101, 242, 0.28);
    border-color: #818cf8;
    transform: translateY(-2px);
    color: #fff;
}

.about-partner-btn.btn-telegram {
    background: rgba(36, 161, 222, 0.15);
    border-color: rgba(36, 161, 222, 0.4);
    color: #38bdf8;
}
.about-partner-btn.btn-telegram:hover {
    background: rgba(36, 161, 222, 0.28);
    border-color: #38bdf8;
    transform: translateY(-2px);
    color: #fff;
}

@media (max-width: 768px) {
    .about-partner-card {
        padding: 16px;
    }
    .about-partner-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .about-partner-logo-wrap {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }
    .about-partner-header-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .about-partner-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .about-partner-btn {
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }
}


/* ============================================================
   Credits & Attribution Section (.about-credits-section)
   ============================================================ */
.about-credits-section {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.about-credits-header {
    text-align: center;
    margin-bottom: 24px;
}

.about-credits-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.35);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.about-credits-title {
    margin: 0 0 8px 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.2px;
}

.about-credits-subtitle {
    margin: 0 auto;
    font-size: 0.88rem;
    color: #94a3b8;
    max-width: 650px;
    line-height: 1.5;
}

.about-credits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.about-credits-card {
    background: linear-gradient(135deg, rgba(20, 22, 42, 0.7) 0%, rgba(13, 14, 28, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.about-credits-card:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(168, 85, 247, 0.12);
}

.about-credits-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--card-accent, #8b5cf6);
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.2);
}

.about-credits-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.about-credits-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}

.about-credits-card-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: #a855f7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.about-credits-card-desc {
    margin: 0 0 14px 0;
    font-size: 0.84rem;
    color: #94a3b8;
    line-height: 1.5;
    flex: 1;
}

.about-credits-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #38bdf8;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    align-self: flex-start;
}

.about-credits-link:hover {
    color: #7dd3fc;
    transform: translateX(2px);
    text-decoration: underline;
}

.about-credits-note {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}


/* GLOBAL DYNAMIC THEME SYSTEM OVERRIDES */

/* ==========================================================================
   DYNAMIC GLOBAL THEME & PALETTE SYSTEM
   Provides instant live recoloring across all modes and components.
   ========================================================================== */

:root {
    --theme-primary: #e94560;
    --theme-primary-hover: #ff6b81;
    --theme-primary-glow: rgba(233, 69, 96, 0.5);
    --theme-primary-rgb: 233, 69, 96;
    --theme-radial-glow: rgba(233, 69, 96, 0.1);
    --theme-bg-grad: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    --theme-card-bg: rgba(15, 52, 96, 0.4);
    --theme-card-border: rgba(var(--theme-primary-rgb), 0.2);
}

/* 1. BRANDING & HEADER LOGO */
.pdl-text-div {
    color: var(--theme-primary) !important;
    background: rgba(var(--theme-primary-rgb), 0.15) !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 14px var(--theme-primary-glow) !important;
    text-shadow: 0 0 10px var(--theme-primary) !important;
    transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.pdl-text-poke {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 18px var(--theme-primary-glow) !important;
}

/* 2. MAIN SITE NAVIGATION MODES (Games / Teambuilder / Database / News) */
html[data-theme-active="true"] .site-mode-btn.active,
html[data-theme-active="true"] #modeBtnDatabase.site-mode-btn.active,
html[data-theme-active="true"] #modeBtnTeambuilder.site-mode-btn.active,
html[data-theme-active="true"] #modeBtnGames.site-mode-btn.active,
html[data-theme-active="true"] #modeBtnNews.site-mode-btn.active,
.site-mode-btn.active:not(#modeBtnDatabase):not(#modeBtnTeambuilder) {
    background: linear-gradient(135deg, var(--theme-primary) 0%, rgba(var(--theme-primary-rgb), 0.72) 100%) !important;
    border-color: var(--theme-primary-hover) !important;
    box-shadow: 0 0 22px var(--theme-primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

.site-mode-btn:hover {
    border-color: var(--theme-primary-glow) !important;
    box-shadow: 0 6px 20px rgba(var(--theme-primary-rgb), 0.25) !important;
}

/* 3. ENCYCLOPEDIA / DATABASE HEADER BANNER */
.db-header {
    border-color: rgba(var(--theme-primary-rgb), 0.25) !important;
    box-shadow: 0 10px 40px rgba(var(--theme-primary-rgb), 0.12) !important;
}

.db-header::before {
    background: linear-gradient(90deg, transparent, rgba(var(--theme-primary-rgb), 0.08), transparent) !important;
}

.db-header-icon {
    background: linear-gradient(135deg, var(--theme-primary), rgba(var(--theme-primary-rgb), 0.7)) !important;
    box-shadow: 0 4px 18px var(--theme-primary-glow) !important;
}

.db-header-text h2 {
    color: var(--theme-primary) !important;
    text-shadow: 0 0 15px var(--theme-primary-glow) !important;
}

.db-header-stat {
    border-color: rgba(var(--theme-primary-rgb), 0.2) !important;
}

.db-header-stat-value {
    color: var(--theme-primary) !important;
    text-shadow: 0 0 12px var(--theme-primary-glow) !important;
}

.db-chart-btn {
    border-color: rgba(var(--theme-primary-rgb), 0.3) !important;
}

.db-chart-btn i {
    color: var(--theme-primary) !important;
}

.db-chart-btn:hover {
    background: rgba(var(--theme-primary-rgb), 0.2) !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 4px 12px var(--theme-primary-glow) !important;
}

.db-autoscroll-btn {
    border-color: rgba(var(--theme-primary-rgb), 0.4) !important;
}

.db-autoscroll-btn:hover {
    background: rgba(var(--theme-primary-rgb), 0.3) !important;
    border-color: var(--theme-primary) !important;
}

.db-autoscroll-btn.active {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 15px var(--theme-primary-glow) !important;
}

.db-autoscroll-speed input[type="range"]::-webkit-slider-thumb {
    background: var(--theme-primary) !important;
}

.db-autoscroll-speed input[type="range"]::-moz-range-thumb {
    background: var(--theme-primary) !important;
}

.db-autoscroll-speed span {
    color: var(--theme-primary) !important;
}

/* 4. SUBTABS (Database, Minigames, Rooms) */
.db-subtabs-container #dbSubTabPokemon.active,
.tab-btn.game-tab.active:not(#dbSubTabAbilities):not(#dbSubTabMoves):not(#dbSubTabItems),
.game-tabs .tab-btn.active,
.db-tabs-container .tab-btn.active,
.tabs:not(.db-subtabs-container) .tab-btn.active,
.room-tab.active,
.duel-tab.active,
.subtab-btn.active,
.tab-btn.active:not(#dbSubTabAbilities):not(#dbSubTabMoves):not(#dbSubTabItems) {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.3), rgba(var(--theme-primary-rgb), 0.55)) !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 35px var(--theme-primary-glow), 0 0 70px rgba(var(--theme-primary-rgb), 0.15) !important;
}

.db-subtabs-container #dbSubTabPokemon.active::after,
.tab-btn.game-tab.active:not(#dbSubTabAbilities):not(#dbSubTabMoves):not(#dbSubTabItems)::after,
.room-tab.active::after,
.duel-tab.active::after {
    background: linear-gradient(90deg, transparent, var(--theme-primary), transparent) !important;
    box-shadow: 0 0 15px var(--theme-primary), 0 0 30px var(--theme-primary-glow) !important;
}

.db-subtabs-container #dbSubTabPokemon:hover i,
.db-subtabs-container #dbSubTabPokemon.active i {
    color: var(--theme-primary) !important;
    filter: drop-shadow(0 0 15px var(--theme-primary-glow)) !important;
}

/* 5. SEARCH BARS & INPUT FOCUS */
.db-search-wrapper:focus-within {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 15px var(--theme-primary-glow) !important;
}

.db-search-wrapper:focus-within .db-search-icon,
.db-search-icon.active {
    color: var(--theme-primary) !important;
}

.db-search-input:focus,
.search-bar input:focus,
.team-search input:focus,
.modal-content input:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.2) !important;
}

/* 6. FILTER CONTROLS, MODE BUTTONS & PILLS */
.db-mode-btn.active {
    background: var(--theme-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px var(--theme-primary-glow) !important;
}

.db-mode-btn:hover:not(.active) {
    background: rgba(var(--theme-primary-rgb), 0.2) !important;
}

.filter-toggle.active {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 12px var(--theme-primary-glow) !important;
}

.db-pill.active {
    background: linear-gradient(135deg, var(--theme-primary), rgba(var(--theme-primary-rgb), 0.75)) !important;
    color: #ffffff !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 2px 12px var(--theme-primary-glow) !important;
}

.db-pill.active.multi {
    background: rgba(var(--theme-primary-rgb), 0.6) !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 10px var(--theme-primary-glow) !important;
}

.db-pill:hover:not(.active) {
    border-color: rgba(var(--theme-primary-rgb), 0.5) !important;
}

.db-filter-reset-btn:hover {
    color: var(--theme-primary) !important;
}

/* Range sliders */
.db-slider::-webkit-slider-thumb,
.range-slider::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-thumb {
    background: var(--theme-primary) !important;
    box-shadow: 0 0 8px var(--theme-primary-glow) !important;
}

.db-slider::-moz-range-thumb,
.range-slider::-moz-range-thumb,
input[type="range"]::-moz-range-thumb {
    background: var(--theme-primary) !important;
    box-shadow: 0 0 8px var(--theme-primary-glow) !important;
}

.db-stat-slider-val {
    color: var(--theme-primary) !important;
}

/* 7. GENERAL BUTTONS & CTAs */
.btn-primary,
.auth-submit-btn,
.duel-btn-primary,
.cta-button,
.game-btn.primary,
.minigame-start-btn,
.game-play-btn,
.ambient-btn-done,
.theme-save-btn,
.team-action-btn.primary,
.teambuilder-save-btn {
    background: linear-gradient(135deg, var(--theme-primary), rgba(var(--theme-primary-rgb), 0.75)) !important;
    border-color: var(--theme-primary-hover) !important;
    box-shadow: 0 0 20px var(--theme-primary-glow) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.auth-submit-btn:hover,
.ambient-btn-done:hover,
.theme-save-btn:hover {
    box-shadow: 0 0 28px var(--theme-primary-glow), 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

/* 8. MODALS & POPUPS */
.modal-content,
.confirm-modal-content {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 45px var(--theme-primary-glow) !important;
}

.modal-content h3,
.confirm-modal-content h3 {
    color: var(--theme-primary) !important;
    text-shadow: 0 0 12px var(--theme-primary-glow) !important;
}

.ambient-modal-container {
    border-color: rgba(var(--theme-primary-rgb), 0.4) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 35px var(--theme-primary-glow) !important;
}

.ambient-header-icon-box {
    background: linear-gradient(135deg, var(--theme-primary), rgba(var(--theme-primary-rgb), 0.6)) !important;
    box-shadow: 0 4px 15px var(--theme-primary-glow) !important;
}

/* 9. TOP BAR, SOCIAL & USER ACTIONS */
.user-bar {
    border-color: rgba(var(--theme-primary-rgb), 0.3) !important;
}

.user-bar-level-fill {
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-primary-hover)) !important;
}

.user-bar-info i {
    color: var(--theme-primary) !important;
}

.top-bar-donate-btn:hover {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 15px var(--theme-primary-glow) !important;
}

.top-bar-donate-btn i {
    color: var(--theme-primary) !important;
}

.guest-bar-login:hover {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 15px var(--theme-primary-glow) !important;
}

.notif-badge-count {
    background: var(--theme-primary) !important;
    box-shadow: 0 0 10px var(--theme-primary-glow) !important;
}

.lang-switch-floating .lang-btn.active {
    background: var(--theme-primary) !important;
    box-shadow: 0 0 14px var(--theme-primary-glow) !important;
}

.social-toggle {
    border-color: rgba(var(--theme-primary-rgb), 0.5) !important;
    color: var(--theme-primary) !important;
}

.social-toggle:hover {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 16px var(--theme-primary-glow) !important;
    color: #fff !important;
}

.creator-name,
.social-credit i,
.auth-icon i {
    color: var(--theme-primary) !important;
}

/* 10. CARDS, SELECTION RINGS, HUD & SCROLLBAR */
.pokemon-card:hover,
.db-card:hover,
.game-card:hover {
    border-color: var(--theme-primary-glow) !important;
    box-shadow: 0 8px 30px var(--theme-primary-glow) !important;
}

.pokemon-card.active,
.pokemon-card.selected,
.db-card.active,
.teambuilder-slot.active,
.team-slot.active,
.active-team-slot,
.duel-hud-card.active,
.duel-player-card.active {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 22px var(--theme-primary-glow) !important;
}

.pagination-btn.active,
.db-pagination-btn.active,
.page-btn.active {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 15px var(--theme-primary-glow) !important;
}

.quiz-score-val,
.duel-score,
.duel-stat-highlight {
    color: var(--theme-primary) !important;
    text-shadow: 0 0 10px var(--theme-primary-glow) !important;
}

.duel-timer-bar-fill,
.duel-progress-fill {
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-primary-hover)) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--theme-primary) !important;
}

::selection {
    background: var(--theme-primary) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   MULTI-GAME CANON POKEDEX SELECTOR & CHIPS
   ========================================================================== */
.db-canon-games-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 8px 0 10px 0;
    max-height: 125px;
    overflow-y: auto;
    padding: 4px 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 206, 201, 0.4) transparent;
}

.db-canon-games-selector::-webkit-scrollbar {
    width: 4px;
}
.db-canon-games-selector::-webkit-scrollbar-thumb {
    background: rgba(0, 206, 201, 0.4);
    border-radius: 4px;
}

.db-canon-game-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 0.70rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    user-select: none;
    line-height: 1.2;
}

.db-canon-game-chip:hover {
    background: rgba(0, 206, 201, 0.15);
    border-color: rgba(0, 206, 201, 0.45);
    color: #e0f2fe;
    transform: translateY(-1px);
}

.db-canon-game-chip.active {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.3) 0%, rgba(9, 132, 227, 0.3) 100%);
    border-color: #00cec9;
    color: #38bdf8;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.3);
    font-weight: 700;
}

.db-canon-game-chip i {
    font-size: 0.65rem;
    opacity: 0.75;
}

.db-canon-game-chip.active i {
    color: #fcd34d;
    opacity: 1;
}


/* ==========================================================================
   SPLIT DESCRIPTION HEADER: STUDIO BUTTON (LEFT) & CANON GAME SELECT (RIGHT)
   ========================================================================== */
.db-desc-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.db-desc-src-btn-standalone {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.85);
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 5px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    user-select: none;
}

.db-desc-src-btn-standalone:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.28);
}

.db-desc-src-btn-standalone.active {
    background: rgba(0, 206, 201, 0.22);
    color: #00cec9;
    border: 1px solid rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.28);
    font-weight: 700;
}

.db-desc-src-btn-standalone.active i {
    color: #00cec9;
}

.db-canon-select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px;
    padding: 0 8px 0 10px;
    transition: all 0.2s ease;
    max-width: 100%;
}

.db-canon-select-wrapper:hover {
    border-color: rgba(0, 206, 201, 0.4);
    background: rgba(15, 23, 42, 0.95);
}

.db-canon-select-wrapper.active {
    background: rgba(0, 206, 201, 0.18);
    border: 1px solid rgba(0, 206, 201, 0.55);
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.28);
}

.db-canon-select-icon {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 6px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.db-canon-select-wrapper.active .db-canon-select-icon {
    color: #fcd34d;
}

.db-canon-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    padding: 5px 20px 5px 0;
    cursor: pointer;
    outline: none;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.db-canon-select-wrapper.active .db-canon-select {
    color: #00cec9;
    font-weight: 700;
}

.db-canon-select option {
    background: #0f172a;
    color: #e2e8f0;
    font-family: 'Minecraft', monospace;
    font-size: 0.75rem;
    padding: 6px 10px;
}

.db-canon-select-arrow {
    position: absolute;
    right: 8px;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.db-canon-select-wrapper.active .db-canon-select-arrow {
    color: #00cec9;
}


/* Teambuilder Smart Import (Beta) */
.tb-smart-import-btn:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.38), rgba(99, 102, 241, 0.38)) !important;
    border-color: #c084fc !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.35) !important;
    transform: translateY(-1px);
}