/* mobile.css - Mobile playability fixes for Ultimate Combo (Game D)
   Targets 375x667 and smaller for perfect phone playability */

@media (max-width: 480px) {
    /* ===== GLOBAL ===== */
    body {
        font-size: 14px;
    }

    /* All buttons: min-height 52px, font-size 16px+ */
    .btn-menu, .btn-action, button {
        min-height: 52px;
        min-width: 120px;
        font-size: 16px !important;
        padding: 12px 20px !important;
        touch-action: manipulation;
    }
    .btn-menu.btn-small {
        min-height: 46px;
        min-width: 100px;
        font-size: 14px !important;
        padding: 10px 14px !important;
    }

    /* ===== MENU ===== */
    .menu-title {
        font-size: clamp(2rem, 10vw, 3rem) !important;
    }
    .menu-tagline {
        font-size: clamp(0.75rem, 2.5vw, 1rem);
        padding: 0 12px;
    }
    .menu-buttons {
        margin-top: 20px;
    }
    .menu-buttons .btn-menu {
        width: min(260px, 85vw);
        margin: 6px auto;
    }
    #scene-menu .menu-volume {
        margin-top: 8px;
    }
    /* Difficulty buttons in menu */
    #menu-difficulty {
        gap: 8px !important;
        flex-wrap: wrap;
        justify-content: center !important;
        padding: 0 10px;
    }
    #menu-difficulty .btn-menu,
    #menu-difficulty .btn-action,
    #menu-difficulty button {
        min-height: 46px;
        min-width: 80px;
        font-size: 14px !important;
        padding: 8px 16px !important;
    }

    /* ===== CLASS SELECT ===== */
    #scene-class-select {
        overflow-y: auto;
        padding: 12px 8px;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }
    #scene-class-select .scene-heading {
        margin-top: 8px;
        margin-bottom: 10px;
        flex-shrink: 0;
    }
    .class-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 4px;
        width: 100%;
        max-width: 375px;
    }
    .class-card {
        padding: 10px 8px;
    }
    .class-card-icon {
        font-size: 1.8rem;
        margin-bottom: 4px;
    }
    .class-card-name {
        font-size: 0.85rem;
    }
    .class-card-desc {
        font-size: 0.75rem;
        line-height: 1.3;
    }
    .class-card-stats {
        font-size: 0.7rem;
        gap: 4px;
    }

    /* ===== MAP ===== */
    .map-header {
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px 8px;
    }
    .map-player-info {
        gap: 6px;
    }
    .map-player-name {
        font-size: 0.75rem;
    }
    .map-floor-title {
        font-size: 0.8rem;
        order: -1;
        width: 100%;
        text-align: center;
    }
    .map-resources {
        gap: 8px;
        font-size: 0.75rem;
    }
    .map-body {
        padding: 8px 4px;
        padding-bottom: 60px;
    }
    .map-row {
        gap: 14px;
        padding: 10px 0;
    }
    /* Map nodes: 48px minimum */
    .map-node {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
        min-width: 48px;
        min-height: 48px;
    }
    .map-node.type-boss {
        width: 56px;
        height: 56px;
        font-size: 1.3rem;
    }
    .map-node-label {
        font-size: 0.5rem;
        bottom: -12px;
    }
    .map-deck-preview, .map-relic-btn {
        bottom: 8px;
        padding: 10px 14px;
        font-size: 0.75rem;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .map-deck-preview { left: 6px; }
    .map-relic-btn { right: 6px; }

    /* ===== BATTLE ===== */
    #scene-battle {
        padding: 4px;
        gap: 0;
    }
    .battle-top {
        flex-direction: column;
        gap: 4px;
        padding: 4px 6px;
        min-height: auto;
    }
    .battle-player-hud {
        min-width: auto;
        width: 100%;
        padding: 6px 10px;
    }
    .player-hud-name {
        font-size: 0.8rem;
    }
    .hud-bar {
        font-size: 0.75rem;
    }
    .hud-bar-track {
        height: 14px;
    }
    .hud-bar-text {
        font-size: 0.65rem;
    }
    .player-hud-resources {
        gap: 8px;
        font-size: 0.75rem;
    }

    /* Enemy area */
    .battle-enemy-area {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    .enemy-card .enemy-sprite {
        width: 60px;
        height: 60px;
    }
    .enemy-hp-bar {
        width: 74px;
        height: 10px;
    }
    .enemy-name {
        font-size: 0.65rem;
    }
    .enemy-intent {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
    .enemy-status {
        font-size: 0.55rem;
    }

    /* Dice tray: minimum 48px dice */
    .battle-middle {
        flex-direction: column;
        gap: 4px;
        padding: 4px 6px;
    }
    .battle-dice-tray {
        min-height: 56px;
        padding: 6px 10px;
        gap: 8px;
    }
    .die-slot {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
    .battle-info {
        font-size: 0.75rem;
        padding: 3px 10px;
    }

    /* Cards in hand: minimum 90px wide */
    .battle-bottom {
        padding: 4px 4px 8px;
        gap: 6px;
    }
    .battle-hand {
        flex-wrap: wrap;
        gap: 4px;
        max-width: 100%;
        overflow-x: visible;
        justify-content: center;
    }
    .game-card {
        width: 90px;
        min-width: 90px;
        padding: 6px;
        min-height: 48px;
    }
    .card-header {
        margin-bottom: 2px;
    }
    .card-cost {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }
    .card-type-icon {
        font-size: 0.65rem;
    }
    .card-art {
        height: 30px;
        margin-bottom: 3px;
    }
    .card-name {
        font-size: 0.6rem;
        min-height: 18px;
    }
    .card-desc {
        font-size: 0.55rem;
        min-height: 14px;
    }
    .card-dice-req {
        margin-top: 2px;
        padding-top: 2px;
    }
    .dice-req-item {
        width: 16px;
        height: 16px;
        font-size: 0.55rem;
    }

    /* Battle actions: END TURN prominent */
    .battle-actions {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .btn-action {
        min-height: 52px !important;
        min-width: 100px;
        font-size: 15px !important;
        padding: 10px 16px !important;
    }
    .btn-action.btn-end-turn {
        min-width: 160px;
        min-height: 52px !important;
        font-size: 18px !important;
        padding: 12px 24px !important;
        font-weight: 900;
    }

    /* Damage numbers */
    .damage-number {
        font-size: 1.2rem;
    }

    /* ===== OVERLAYS ===== */
    .overlay-panel {
        padding: 14px;
        width: 96%;
        max-height: 85vh;
    }
    .overlay-panel .btn-menu {
        min-height: 52px;
    }
    .scene-heading {
        font-size: clamp(1.1rem, 4vw, 1.8rem);
        margin-bottom: 12px;
    }

    /* Deck viewer */
    .deck-viewer-cards {
        max-height: 50vh;
    }
    .deck-viewer-cards .game-card {
        width: 80px;
        min-width: 80px;
    }

    /* Relic viewer */
    .relic-item {
        width: 60px;
        padding: 6px;
    }
    .relic-item img {
        width: 36px;
        height: 36px;
    }

    /* ===== TAVERN ===== */
    #scene-tavern {
        padding: 10px 8px;
        overflow-y: auto;
        justify-content: flex-start;
    }
    .tavern-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 4px;
    }
    .tavern-option {
        padding: 12px 8px;
        min-height: 52px;
    }
    .tavern-option-icon {
        font-size: 1.8rem;
        margin-bottom: 4px;
    }
    .tavern-option-name {
        font-size: 0.85rem;
    }
    .tavern-option-desc {
        font-size: 0.72rem;
    }
    .tavern-option-cost {
        font-size: 0.75rem;
    }

    /* Tavern sub-screens */
    .tavern-sub {
        max-width: 100%;
    }
    .tavern-sub-title {
        font-size: 1.1rem;
    }
    .tavern-leave .btn-menu {
        min-height: 52px;
    }

    /* Shop */
    .shop-grid {
        gap: 6px;
    }
    .shop-item {
        width: 48%;
        min-width: 100px;
        max-width: 160px;
        padding: 10px;
        min-height: 52px;
    }
    .shop-item-icon img {
        width: 36px;
        height: 36px;
    }
    .shop-item-name {
        font-size: 0.7rem;
    }
    .shop-item-desc {
        font-size: 0.62rem;
    }
    .shop-item-price {
        font-size: 0.8rem;
    }

    /* Gamble area */
    .gamble-die {
        width: 48px;
        height: 48px;
    }
    .gamble-dice-row {
        gap: 8px;
    }
    .gamble-result {
        font-size: 1rem;
    }
    .gamble-area {
        padding: 16px;
    }

    /* ===== REWARD ===== */
    #scene-reward {
        overflow-y: auto;
        padding: 20px 10px;
    }
    .reward-content {
        max-width: 100%;
    }
    .reward-card-option {
        margin: 0 4px;
    }
    .reward-card-option .game-card {
        width: 100px;
        min-width: 100px;
    }

    /* ===== GAME OVER ===== */
    .gameover-stats {
        padding: 12px 16px;
        min-width: auto;
        width: 95%;
    }
    .gameover-stat {
        font-size: 0.85rem;
    }

    /* ===== HOW TO PLAY ===== */
    .howto-panel {
        max-width: 95%;
    }
    .howto-section h3 {
        font-size: 0.9rem;
    }
    .howto-section p {
        font-size: 0.8rem;
    }

    /* ===== MINIGAME ===== */
    .minigame-header {
        font-size: 0.9rem;
    }
    .minigame-area {
        padding: 8px;
    }
    .minigame-controls {
        gap: 8px;
    }
    .minigame-controls .btn-action {
        min-height: 52px;
    }

    /* ===== TOOLTIPS ===== */
    .tooltip {
        max-width: 200px;
        font-size: 0.8rem;
        padding: 8px 10px;
    }

    /* ===== SCROLL OVERLAYS ===== */
    #scores-overlay, #achievements-overlay {
        padding: 1rem;
    }

    /* Hide keyboard hint text at bottom of battle/map scenes */
    #scene-battle > div:last-of-type[style*="pointer-events:none"],
    #scene-map > div:last-of-type[style*="pointer-events:none"] {
        display: none !important;
    }

    /* Prevent horizontal scroll */
    #game-container, .scene {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* Touch device specific: hide keyboard shortcut hints */
@media (hover: none) and (pointer: coarse) {
    #scene-battle > div[style*="pointer-events:none"][style*="font-size:10px"],
    #scene-map > div[style*="pointer-events:none"][style*="font-size:10px"] {
        display: none !important;
    }
}