/**
 * Wizard Battles - Tailwind Utilities Extension
 * FASE 1: Setup - Design tokens mapped to Tailwind
 *
 * Este archivo extiende Tailwind con clases personalizadas
 * usando los design tokens existentes del proyecto.
 */

/* ============================================
   WB CUSTOM UTILITIES
   ============================================ */

/* Touch Target Minimum (WCAG 48px, preferimos 56px) */
.wb-touch-target {
    min-width: 48px;
    min-height: 48px;
}

.wb-touch-target-lg {
    min-width: 56px;
    min-height: 56px;
}

/* Card Aspect Ratio */
.wb-card-aspect {
    aspect-ratio: 2.5 / 3.5;
}

/* Typography Shortcuts */
.wb-font-ui {
    font-family: var(--font-primary-ui);
}

.wb-font-magical {
    font-family: var(--font-magical);
}

.wb-font-numeric {
    font-family: var(--font-numeric);
}

/* ============================================
   WB COMPONENT CLASSES (preparación FASE 4)
   ============================================ */

/* Botones - preparación para migración */
.wb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-primary-ui);
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 200ms ease;
    cursor: pointer;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
}

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

.wb-btn:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 2px;
}

/* Card Container */
.wb-card-container {
    aspect-ratio: 2.5 / 3.5;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(42, 35, 40, 0.2);
}

/* Stat Chip - preparación para selector */
.wb-stat-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-family: var(--font-numeric);
    font-weight: 700;
    cursor: pointer;
    transition: all 200ms ease;
}

.wb-stat-chip:active {
    transform: scale(0.9);
}

/* Phase Indicator */
.wb-phase-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-family: var(--font-primary-ui);
    font-weight: 500;
}

/* ============================================
   RESPONSIVE HELPERS
   ============================================ */

/* Mobile-first bottom bar sticky */
.wb-bottom-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
}

/* Safe area padding for notched devices */
.wb-safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ============================================
   ANIMATION HELPERS
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .wb-btn,
    .wb-stat-chip,
    .wb-card-container {
        transition: none !important;
    }

    .wb-btn:active,
    .wb-stat-chip:active {
        transform: none !important;
    }
}

/* ============================================
   FASE 2: HUB SCREEN FIXES
   ============================================ */

/* DaisyUI carousel integration - no cropping */
#hub-carousel-track.carousel {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#hub-carousel-track.carousel::-webkit-scrollbar {
    display: none;
}

#hub-carousel-track .carousel-item {
    scroll-snap-align: center;
}

/* Override circular card to prevent image cropping */
#hub-carousel-track .hub-mode-card img {
    object-fit: contain !important;
    object-position: center center;
}

/* Ensure play button has adequate touch target */
#hub-play-btn.btn {
    min-height: 80px;
    font-family: var(--font-primary-ui);
    letter-spacing: 0.05em;
}

/* Hub dots override with Tailwind */
.hub-carousel-dots .hub-dot {
    transition: all 200ms ease;
}

.hub-carousel-dots .hub-dot.is-active {
    transform: scale(1.2);
}

/* ============================================
   FASE 3: ARENA LAYOUT FIXES
   ============================================ */

/* Game Header Sticky */
.wb-game-header {
    font-family: var(--font-numeric);
}

/* Phase Indicator */
#wb-phase-indicator {
    font-family: var(--font-primary-ui);
}

/* Bottom Bar Improvements */
#combat-bottom-bar.wb-bottom-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
}

/* Override legacy combat-bottom-bar styles for mobile */
@media (max-width: 768px) {
    #combat-bottom-bar {
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom, 8px);
    }

    .combat-bottom-actions {
        width: 100%;
    }

    /* Ensure buttons have proper touch targets */
    #combat-bottom-bar .btn {
        min-height: 48px;
    }
}

/* Hand dock scroll on mobile */
#player-hand.overflow-x-auto {
    display: flex;
    gap: 0;
    padding: 0;
    justify-content: center;
    overflow-x: hidden;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: auto;
}

#player-hand.overflow-x-auto > * {
    scroll-snap-align: none;
    flex-shrink: 0;
}

/* Card slots optimized for touch on mobile */
@media (max-width: 520px) {
    .card-slot {
        width: clamp(96px, 25vw, 110px);
        height: clamp(134px, 35vw, 154px);
        border-width: 2px;
        border-radius: 10px;
    }

    .rival-zone .card-slot {
        width: clamp(88px, 23vw, 102px);
        height: clamp(123px, 32vw, 142px);
    }

    .slot-wrapper {
        transform: none;
        gap: 4px;
    }

    /* Mejorar feedback visual al seleccionar slot */
    .card-slot.active {
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5),
                    0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* Arena más compacta pero usable */
    .battle-arena {
        padding: 12px 8px;
        gap: 8px;
    }

    .battle-arena.classic-mode .arena-rows {
        gap: 10px;
    }

    /* Pos labels más legibles en móvil */
    .pos-label-vertical {
        font-size: 0.75rem;
        padding: 4px 6px;
        min-width: 28px;
        min-height: 28px;
        font-weight: 700;
    }
}

/* Stat Selector Chips (preparación para FASE 3) */
.wb-stat-selector {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 8px;
}

.wb-stat-selector .wb-stat-chip {
    background: var(--color-paper-light);
    border: 2px solid var(--color-ink-secondary);
    color: var(--color-ink-primary);
}

.wb-stat-selector .wb-stat-chip:hover,
.wb-stat-selector .wb-stat-chip:focus {
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
}

.wb-stat-selector .wb-stat-chip.is-selected {
    background: var(--color-accent-gold);
    border-color: var(--color-ink-primary);
    color: white;
}

/* ============================================
   FASE 5: MOBILE-FIRST POLISH
   ============================================ */

/* Global Focus Styles */
*:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 2px;
}

button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
    outline: 3px solid var(--color-accent-gold);
    outline-offset: 2px;
}

/* Touch Feedback - Active states */
button:active,
[role="button"]:active,
.wb-touch-target:active {
    transform: scale(0.97);
}

/* Ensure all interactive elements have adequate size */
button,
[role="button"],
input[type="button"],
input[type="submit"],
.btn {
    min-height: 44px;
    min-width: 44px;
}

/* Touch target helper - force minimum size */
.wb-touch-target {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wb-touch-target-lg {
    min-width: 56px;
    min-height: 56px;
}

/* Consistent Spacing System (4px base) */
.wb-space-1 { margin: 4px; }
.wb-space-2 { margin: 8px; }
.wb-space-3 { margin: 12px; }
.wb-space-4 { margin: 16px; }
.wb-space-5 { margin: 20px; }
.wb-space-6 { margin: 24px; }

.wb-gap-1 { gap: 4px; }
.wb-gap-2 { gap: 8px; }
.wb-gap-3 { gap: 12px; }
.wb-gap-4 { gap: 16px; }

.wb-p-1 { padding: 4px; }
.wb-p-2 { padding: 8px; }
.wb-p-3 { padding: 12px; }
.wb-p-4 { padding: 16px; }

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Hide scrollbars but keep functionality */
.wb-scroll-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wb-scroll-hidden::-webkit-scrollbar {
    display: none;
}

/* Prevent text selection on game elements */
.wb-no-select {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Tap highlight removal for game elements */
.wb-no-tap-highlight {
    -webkit-tap-highlight-color: transparent;
}

/* Safe Area Insets */
.wb-safe-top {
    padding-top: env(safe-area-inset-top, 0);
}

.wb-safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.wb-safe-left {
    padding-left: env(safe-area-inset-left, 0);
}

.wb-safe-right {
    padding-right: env(safe-area-inset-right, 0);
}

/* Loading State */
.wb-loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.wb-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid var(--color-accent-gold);
    border-right-color: transparent;
    border-radius: 50%;
    animation: wb-spin 0.6s linear infinite;
}

@keyframes wb-spin {
    to { transform: rotate(360deg); }
}

/* Accessibility: Skip Link */
.wb-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    padding: 8px 16px;
    background: var(--color-ink-primary);
    color: var(--color-paper-light);
    z-index: 9999;
    transition: top 200ms ease;
}

.wb-skip-link:focus {
    top: 0;
}

/* Screen Reader Only */
.wb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    *:focus-visible {
        outline-width: 3px;
    }

    .wb-btn-primary,
    .wb-btn-secondary {
        border-width: 3px;
    }
}

/* Reduced Motion - Global */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    button:active,
    [role="button"]:active,
    .wb-touch-target:active {
        transform: none;
    }
}