/* Otimizações específicas para Stylus e dispositivos touch */

/* Configurações globais para stylus */

/* Configurações Fullscreen Globais */
html {
    height: 100vh;
    overflow: hidden;
    position: fixed;
    width: 100vw;
}

body {
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    margin: 0;
    padding: 0;
}

*{
    /* Melhor precisão para stylus */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* Elementos interativos gerais */
button, .btn, [role="button"], .clickable {
    /* Área mínima de toque recomendada (44x44px) */
    min-height: 44px;
    min-width: 44px;
    
    /* Otimizações de toque */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    
    /* Feedback tátil mais rápido */
    transition: all 0.15s ease;
}

/* Botões pequenos precisam de área maior */
.small-btn {
    padding: 8px 16px;
    min-height: 44px;
    min-width: 60px;
}

/* Cards e elementos de jogo */
.card, .game-element, .interactive-element {
    /* Área de toque expandida */
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.card::before, .game-element::before, .interactive-element::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    z-index: -1;
}

/* Otimizações específicas para stylus (pointer: fine) */
@media (pointer: fine) {
    /* Transições mais rápidas para stylus */
    button, .btn, [role="button"], .clickable {
        transition: all 0.1s ease;
    }
    
    /* Hover mais sutil para stylus */
    .card:hover, .game-element:hover {
        transform: translateY(-2px) scale(1.02);
    }
    
    /* Feedback visual imediato */
    .letter-card:hover, .color-card:hover, .animal-card:hover {
        transform: scale(1.05);
        transition: transform 0.1s ease;
    }
}

/* Otimizações para touch (pointer: coarse) */
@media (pointer: coarse) {
    /* Elementos maiores para dedos */
    button, .btn, [role="button"], .clickable {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 20px;
    }
    
    /* Cards maiores para touch */
    .card, .game-element {
        padding: 20px;
        margin: 8px;
    }
    
    /* Feedback mais pronunciado */
    .card:active, .game-element:active {
        transform: scale(0.98);
        transition: transform 0.05s ease;
    }
}

/* Otimizações para tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Tamanhos intermediários para tablets */
    button, .btn {
        min-height: 46px;
        min-width: 46px;
    }
    
    .card, .game-element {
        padding: 18px;
    }
}

/* Prevenção de zoom acidental */
.no-zoom {
    touch-action: manipulation;
    -ms-content-zooming: none;
    -ms-touch-select: none;
}

/* Área de arraste otimizada */
.draggable {
    touch-action: none;
    -webkit-user-drag: element;
    -webkit-touch-callout: none;
    cursor: grab;
}

.draggable:active {
    cursor: grabbing;
}

/* Elementos de drop zone */
.drop-zone {
    min-height: 60px;
    min-width: 60px;
    touch-action: manipulation;
}

/* Feedback visual para stylus */
@media (pointer: fine) {
    .drop-zone:hover {
        background-color: rgba(76, 175, 80, 0.1);
        border: 2px dashed #4CAF50;
    }
}

/* Botões de navegação otimizados */
.nav-btn, .back-btn, .next-btn {
    min-height: 50px;
    min-width: 80px;
    padding: 12px 24px;
    touch-action: manipulation;
}

/* Elementos de quiz e jogos */
.quiz-option, .game-option {
    min-height: 50px;
    padding: 15px;
    margin: 5px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Otimizações para modais */
.modal-content {
    touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
}

.close-modal {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
    touch-action: manipulation;
}

/* Prevenção de seleção de texto em elementos de jogo */
.game-area, .play-area, .interactive-zone {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Otimizações para performance */
.animated-element {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Scroll suave para stylus */
.scrollable {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Feedback háptico simulado */
@media (pointer: fine) {
    .haptic-feedback:active {
        animation: hapticPulse 0.1s ease;
    }
}

@keyframes hapticPulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

/* Otimizações específicas para Windows Ink */
@media (-ms-high-contrast: none) {
    .ink-optimized {
        -ms-touch-action: manipulation;
        -ms-content-zooming: none;
    }
}

/* Suporte para Surface Pen */
.surface-pen-optimized {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

.surface-pen-optimized:hover {
    transition: all 0.05s ease;
}