/* ============================================
   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: 100000;
    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: 200px;
    object-fit: contain;
    margin-top: 10px;
    border-radius: 12px;
    border: 2px solid #e94560;
    background: #1a1a2e;
}
.image-preview {
    max-height: 200px;
    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: hidden;
    text-overflow: ellipsis;
}
.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: break-word;
    overflow-wrap: break-word;
    line-height: 1.25;
}
.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 {
    background: var(--pill-color, #FF0045);
    border: 1px solid #ffffff;
    font-weight: bold;
    letter-spacing: 0.03em;
}

/* Модалка движения */
.db-move-detail-table { display: flex; flex-direction: column; gap: 6px; }
.db-move-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    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; }
.db-move-detail-value { color: #fff; font-size: 0.78rem; font-family: 'Minecraft', monospace; }

/* Фильтры */
.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: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    max-width: 90px;
}

.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: 200px;
    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-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 {
    background: var(--pill-color, #FF0045);
    border: 1px solid #ffffff;
    font-weight: bold;
    letter-spacing: 0.03em;
}

.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;
}
.db-move-meta-tag {
    background: var(--tag-bg, #FF0045);
    color: #ffffff;
    font-family: 'Minecraft', monospace;
    font-size: 0.62rem;
    font-weight: bold;
    padding: 1px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    text-shadow: 1px 1px 0 #000;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
}
.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: 220px;
    max-width: 320px;
}
.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;
    right: 0;
    background: #141b2d;
    border: 1px solid rgba(16, 185, 129, 0.55);
    border-radius: 12px;
    max-height: 280px;
    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: 8px;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
}
.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: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}
.db-profile-search-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.db-profile-search-dex {
    font-size: 0.65rem;
    color: #10b981;
    font-family: 'Minecraft', monospace;
}
.db-profile-search-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-profile-search-types {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}
.db-profile-search-type-pill {
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 4px;
    color: #fff;
}
.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: 100000;
}

.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: 12px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 12px;
    white-space: pre-wrap;
}

.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: 100000;
    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-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    margin-left: 8px;
    padding-left: 20px;
    border-left: 2px solid rgba(0, 206, 201, 0.35);
}

.db-evo-branch-row {
    display: flex;
    align-items: center;
    position: relative;
}

.db-evo-branch-row::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    width: 20px;
    height: 2px;
    background: rgba(0, 206, 201, 0.35);
}

.db-evo-sub-branch {
    display: flex;
    align-items: center;
    position: relative;
}

.db-evo-sub-branch::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    width: 20px;
    height: 2px;
    background: rgba(0, 206, 201, 0.35);
}

.db-evo-branches-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    margin-left: 8px;
    padding-left: 20px;
    border-left: 2px solid rgba(0, 206, 201, 0.35);
}

/* 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.76rem;
    font-weight: 700;
    color: #f8fafc;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 120px;
    padding: 0 4px;
    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: 100000;
    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: 200px;
    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: flex !important;
    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: flex !important;
    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;
}