/* Duris Cards - Responsive Styles (mobile, tablet breakpoints) */
/* ============== MOBILE RESPONSIVE ============== */

/* Touch-friendly improvements */
.btn:active {
    transform: scale(0.95);
}
* {
    -webkit-tap-highlight-color: transparent;
}

/* Tablet breakpoint */
@media (max-width: 768px) {
    h1 { font-size: 1.6em; }
    .game-board { min-height: 400px; }
    .card { width: 75px; height: 105px; }
    .hero { gap: 5px; padding: 3px; }
    .hero-avatar { width: 60px; height: 78px; }
    .hero-avatar.class-icon-fallback { font-size: 36px; }
    .hero-info { min-width: 50px; }
    .hero .health { font-size: 18px; }
    .hero .name { font-size: 10px; }
    .hand { min-height: 115px; }
    .board-area { min-height: 95px; }
    .modal-content { max-width: 95%; }
    .modal-content.wide { max-width: 95%; }
    .game-combat-log { display: none !important; }
    .game-board {
        grid-template-columns: 1fr !important;
        grid-template-areas: "main" !important;
    }
    .help-btn { width: 32px; height: 32px; font-size: 16px; }
    .deck-builder-content { flex-direction: column; }
    .deck-panel { min-width: 100%; }
    .card-browser { max-height: 280px; }
    .card-browser-split { grid-template-columns: 1fr; }
    .deck-list { max-height: 180px; }
    .filters { flex-wrap: wrap; }
    .mana-display { font-size: 16px; padding: 5px 10px; }
    .deck-display { padding: 5px; }
    .deck-icon { font-size: 22px; }
    .deck-display span { font-size: 14px; }
}

/* Phone breakpoint */
@media (max-width: 480px) {
    .container { padding: 6px; }
    h1 { font-size: 1.3em; margin-bottom: 6px; }
    .status-bar {
        padding: 6px 10px;
        justify-content: center;
    }
    .status-bar > span:first-child { display: none; }
    .game-board { min-height: 340px; gap: 5px; }
    .card {
        width: 58px;
        height: 82px;
    }
    .card .card-name { font-size: 6px; padding: 2px; }
    .card .mana-cost { font-size: 9px; width: 16px; height: 16px; top: 2px; left: 2px; }
    .card .card-class-icon { width: 14px; height: 14px; font-size: 8px; top: 2px; right: 2px; }
    .card .attack, .card .health { font-size: 9px; width: 16px; height: 16px; }
    .card .attack { bottom: 2px; left: 2px; }
    .card .health { bottom: 2px; right: 2px; }
    .card .keywords { font-size: 5px; padding: 1px 2px; }
    .card .card-image { min-height: 30px; max-height: 40px; }
    .hero { gap: 4px; padding: 2px; }
    .hero-avatar { width: 48px; height: 62px; }
    .hero-avatar.class-icon-fallback { font-size: 28px; }
    .hero-info { min-width: 40px; }
    .hero .health { font-size: 15px; }
    .hero .name { font-size: 8px; }
    .hero .hero-class { font-size: 7px; }
    .hero .armor { font-size: 10px; }
    .mana-display { font-size: 14px; padding: 4px 8px; }
    .hand { min-height: 95px; padding: 6px; gap: 4px; }
    .board-area { min-height: 75px; padding: 6px; gap: 4px; }
    .player-area { gap: 6px; padding: 5px; }
    .turn-controls { gap: 6px; padding: 4px; }
    .turn-indicator { padding: 5px 10px; font-size: 12px; }
    .end-turn-btn { padding: 6px 12px; font-size: 12px; }
    .btn {
        padding: 8px 10px;
        font-size: 11px;
        min-height: 40px;
    }
    .modal-content { padding: 12px; margin: 8px; }
    .modal h2 { font-size: 1.3em; margin-bottom: 12px; }
    .modal input { padding: 10px; font-size: 14px; }
    .deck-builder h2 { font-size: 1.2em; }
    .filters select, .filters input {
        font-size: 11px;
        padding: 6px;
        min-height: 36px;
    }
    .card-browser { max-height: 200px; gap: 6px; }
    .deck-list { max-height: 150px; }
    .deck-card { padding: 4px 6px; font-size: 11px; }
    .help-btn { width: 30px; height: 30px; font-size: 15px; }
    .deck-display { padding: 4px; }
    .deck-display.opponent-deck { top: 5px; right: 5px; }
    .deck-display.your-deck { bottom: 5px; right: 5px; }
    .deck-icon { font-size: 18px; }
    .deck-display span { font-size: 12px; }
    .hand-count { font-size: 11px; margin-top: 2px; }
    .card-tooltip { display: none; }
    #profile-modal .modal-content { padding: 10px; }
}

/* Very small phones */
@media (max-width: 360px) {
    .card { width: 50px; height: 72px; }
    .hero { gap: 3px; padding: 2px; }
    .hero-avatar { width: 40px; height: 52px; }
    .hero-avatar.class-icon-fallback { font-size: 24px; }
    .hero-info { min-width: 35px; }
    .hero .health { font-size: 13px; }
    .hero .name { font-size: 7px; }
    .hero .hero-class { font-size: 6px; }
    h1 { font-size: 1.1em; }
    .btn { font-size: 10px; padding: 6px 8px; }
}