/* responsive.css */

/* Загальні стилі для мобільних */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .main-container {
        padding: 10px;
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.2em;
    }
}

/* Навігація */
@media (max-width: 768px) {
    .navbar {
        padding: 10px 15px;
        flex-direction: column;
        gap: 10px;
    }

    .user-info {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .user-stats {
        gap: 10px;
    }

    .stat {
        padding: 3px 8px;
        font-size: 0.8em;
    }

    .nav-menu {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .nav-menu li a {
        padding: 5px 10px;
        font-size: 0.9em;
    }
}

/* Головна сторінка */
@media (max-width: 768px) {
    .welcome-section {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .quick-actions {
        width: 100%;
        justify-content: center;
    }

    .quick-action-btn {
        padding: 10px 15px;
        font-size: 0.9em;
    }

    .grid-2, .grid-3 {
        grid-template-columns: 1fr;
        gap: 15px;
    }

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

    .menu-item {
        padding: 15px;
    }

    .menu-icon {
        font-size: 2em;
    }
}

/* Локації */
@media (max-width: 768px) {
    .location-name {
        font-size: 2em;
    }

    .location-description {
        font-size: 1em;
        padding: 15px;
    }

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

    .travel-btn {
        padding: 15px;
    }

    .npc-item {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }

    .npc-avatar {
        width: 60px;
        height: 60px;
        font-size: 2em;
    }

    .npc-action {
        width: 100%;
        text-align: center;
    }

    .menu-panel {
        bottom: 10px;
        right: 10px;
        left: 10px;
        border-radius: 30px;
        justify-content: space-around;
        padding: 10px;
    }

    .menu-btn {
        width: 45px;
        height: 45px;
    }

    .menu-btn .icon {
        font-size: 1.2em;
    }

    .menu-btn .label {
        display: none;
    }
}

/* Битва */
@media (max-width: 768px) {
    .battle-container {
        padding: 10px;
    }

    .character-info {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .avatar {
        width: 50px;
        height: 50px;
        font-size: 1.5em;
    }

    .stats-text {
        font-size: 0.8em;
    }

    .table {
        gap: 10px;
        padding: 10px;
    }

    .card {
        width: 100px;
        height: 140px;
    }

    .card-name {
        font-size: 0.8em;
    }

    .card-art {
        font-size: 2em;
    }

    .card-stats {
        font-size: 0.8em;
        padding: 3px;
    }

    .hand {
        gap: 5px;
        padding: 10px;
    }

    .hand .card {
        width: 85px;
        height: 120px;
    }

    .controls {
        flex-direction: column;
        gap: 10px;
    }

    .btn {
        width: 100%;
        padding: 12px;
        font-size: 1em;
    }

    .log-panel {
        max-height: 100px;
        font-size: 0.9em;
    }
}

/* Таверна */
@media (max-width: 768px) {
    .main-container {
        grid-template-columns: 1fr;
    }

    .sidebar {
        margin-bottom: 15px;
    }

    .chat-container {
        height: 400px;
    }

    .chat-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .message {
        gap: 5px;
    }

    .message-avatar {
        width: 25px;
        height: 25px;
    }

    .message-header {
        flex-direction: column;
        gap: 5px;
    }

    .message-time {
        font-size: 0.7em;
    }

    .online-item {
        padding: 5px;
    }

    .online-avatar {
        width: 25px;
        height: 25px;
    }

    .dialog-item {
        padding: 8px;
    }

    .dialog-avatar {
        width: 30px;
        height: 30px;
    }
}

/* Профіль */
@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .profile-avatar {
        width: 100px;
        height: 100px;
    }

    .profile-name {
        font-size: 1.8em;
    }

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

    .stat-card {
        padding: 15px;
    }

    .stat-value {
        font-size: 1.8em;
    }

    .grid-2 {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .achievement-item {
        padding: 10px;
    }

    .achievement-icon {
        width: 40px;
        height: 40px;
        font-size: 1.5em;
    }

    .history-item {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }

    .cards-grid {
        max-height: 200px;
    }
}

/* Магазин */
@media (max-width: 768px) {
    .shop-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .gold-display {
        width: 100%;
        text-align: center;
    }

    .shop-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }

    .shop-card {
        padding: 15px;
    }

    .card-name {
        font-size: 1.1em;
    }

    .card-price {
        font-size: 1.1em;
    }

    .inventory-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .inventory-item {
        padding: 10px;
    }
}

/* Колекція */
@media (max-width: 768px) {
    .collection-header {
        padding: 20px;
    }

    .collection-title {
        font-size: 1.8em;
    }

    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }

    .card-item {
        padding: 10px;
    }

    .card-image {
        height: 80px;
    }

    .card-img {
        max-width: 60px;
        max-height: 60px;
    }

    .modal-card {
        padding: 20px;
    }

    .modal-card .card-name {
        font-size: 1.5em;
    }

    .modal-card .card-image {
        height: 120px;
    }

    .modal-card .card-img {
        max-width: 100px;
        max-height: 100px;
    }
}

/* PvP Арена */
@media (max-width: 768px) {
    .rating-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .battle-item {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .battle-info {
        width: 100%;
        justify-content: center;
    }

    .join-form {
        width: 100%;
    }

    .join-form select {
        width: 100%;
        margin: 5px 0;
    }

    .join-btn {
        width: 100%;
    }

    .player-item {
        padding: 8px;
    }

    .player-rank {
        width: 20px;
        height: 20px;
        font-size: 0.8em;
    }
}

/* Адмінка */
@media (max-width: 768px) {
    .admin-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    th, td {
        min-width: 100px;
        padding: 8px;
    }

    input, select, textarea {
        font-size: 14px;
    }

    button {
        padding: 8px 12px;
        font-size: 0.9em;
    }
}

/* Для дуже маленьких екранів */
@media (max-width: 480px) {
    .menu-grid {
        grid-template-columns: 1fr;
    }

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

    .user-stats {
        display: none;
    }

    .hand .card {
        width: 70px;
        height: 100px;
    }

    .hand .card .card-name {
        font-size: 0.7em;
    }

    .hand .card .card-stats {
        font-size: 0.7em;
    }

    .modal-card {
        padding: 15px;
    }

    .modal-card .card-name {
        font-size: 1.2em;
    }

    .modal-card .card-art {
        font-size: 3em;
    }

    .modal-card .card-stats {
        font-size: 1.2em;
        gap: 20px;
    }

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

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

/* Landscape орієнтація */
@media (max-width: 768px) and (orientation: landscape) {
    .hand {
        min-height: 120px;
    }

    .hand .card {
        width: 80px;
        height: 110px;
    }

    .chat-container {
        height: 300px;
    }

    .table {
        min-height: 150px;
    }
}

/* Touch-оптимізація */
@media (hover: none) and (pointer: coarse) {
    .btn:hover,
    .card:hover,
    .menu-item:hover,
    .nav-btn:hover {
        transform: none;
    }

    .btn:active,
    .card:active,
    .menu-item:active,
    .nav-btn:active {
        transform: scale(0.95);
        opacity: 0.8;
    }

    input, select, button {
        min-height: 44px; /* Мінімальний розмір для тапу */
    }

    a, button, .clickable {
        padding: 10px; /* Більша область для тапу */
    }
}