/* Mobile Controls - Shared Styles for Arcade Games */

@media (max-width: 768px) {
    .game-wrapper { padding: 1rem 0; }
    .game-header { flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
    .game-header h1 { font-size: 1.2rem; }
    .game-container { width: 95vw !important; max-width: 420px; }
    #gameCanvas { width: 100% !important; height: auto !important; }
    .game-ui { padding: 0.75rem 1rem; }
    .game-stat-value { font-size: 0.8rem; }
    .game-stat-label { font-size: 0.5rem; }
    .game-controls { display: none; }
}

/* Touch Control Overlay */
.touch-controls {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    padding: 1rem 1.25rem; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(10,10,26,0.97) 0%, rgba(10,10,26,0.85) 70%, transparent 100%);
    z-index: 1000; user-select: none; -webkit-user-select: none; touch-action: none;
}

@media (max-width: 768px) {
    .touch-controls { display: flex; justify-content: space-between; align-items: center; }
    .game-container { margin-bottom: 150px; }
}

/* ===== D-PAD - Ergonomic Cross Design ===== */
.d-pad { position: relative; width: 170px; height: 170px; flex-shrink: 0; }
.d-pad::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 28px; height: 28px; background: rgba(96,165,250,0.08); border-radius: 6px; pointer-events: none;
}

.d-pad-btn {
    position: absolute; width: 56px; height: 56px;
    background: rgba(96,165,250,0.1); border: 2px solid rgba(96,165,250,0.3);
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: rgba(96,165,250,0.7); transition: all 0.08s ease;
    -webkit-tap-highlight-color: transparent; outline: none;
}

.d-pad-btn:active, .d-pad-btn.active {
    background: rgba(96,165,250,0.35); border-color: rgba(96,165,250,0.8);
    color: rgba(96,165,250,1); transform: translateX(-50%) scale(0.93) !important;
    box-shadow: 0 0 16px rgba(96,165,250,0.3), inset 0 1px 4px rgba(96,165,250,0.2);
}

.d-pad-up { top: 4px; left: 50%; transform: translateX(-50%); border-radius: 14px 14px 8px 8px; }
.d-pad-down { bottom: 4px; left: 50%; transform: translateX(-50%); border-radius: 8px 8px 14px 14px; }
.d-pad-left { left: 4px; top: 50%; transform: translateY(-50%); border-radius: 14px 8px 8px 14px; }
.d-pad-right { right: 4px; top: 50%; transform: translateY(-50%); border-radius: 8px 14px 14px 8px; }
.d-pad-btn:active.d-pad-left, .d-pad-btn.active.d-pad-left { transform: translateY(-50%) scale(0.93) !important; }
.d-pad-btn:active.d-pad-right, .d-pad-btn.active.d-pad-right { transform: translateY(-50%) scale(0.93) !important; }

/* ===== Action Buttons ===== */
.action-buttons { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }

.action-btn {
    width: 60px; height: 60px; background: rgba(167,139,250,0.1);
    border: 2px solid rgba(167,139,250,0.3); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-family: 'Press Start 2P', monospace;
    color: rgba(167,139,250,0.7); transition: all 0.08s ease;
    -webkit-tap-highlight-color: transparent; outline: none;
}

.action-btn:active, .action-btn.active {
    background: rgba(167,139,250,0.35); border-color: rgba(167,139,250,0.8);
    color: rgba(167,139,250,1); transform: scale(0.93);
    box-shadow: 0 0 16px rgba(167,139,250,0.3), inset 0 1px 4px rgba(167,139,250,0.2);
}

.action-btn.action-primary {
    width: 72px; height: 72px; background: rgba(96,165,250,0.15);
    border-color: rgba(96,165,250,0.4); font-size: 0.55rem; color: rgba(96,165,250,0.8);
}

.action-btn.action-primary:active, .action-btn.action-primary.active {
    background: rgba(96,165,250,0.4); border-color: rgba(96,165,250,0.9);
    color: rgba(96,165,250,1); box-shadow: 0 0 20px rgba(96,165,250,0.35), inset 0 1px 4px rgba(96,165,250,0.2);
}

.action-btn.action-pause {
    width: 48px; height: 48px; font-size: 1.1rem;
    background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.25); color: rgba(148,163,184,0.7);
}

.action-btn.action-pause:active, .action-btn.action-pause.active {
    background: rgba(148,163,184,0.25); border-color: rgba(148,163,184,0.6); color: rgba(148,163,184,1);
}

/* ===== Swipe Zone (on canvas) ===== */
.swipe-zone { display: none; }

@media (max-width: 768px) {
    .swipe-zone {
        display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        z-index: 5; touch-action: none; cursor: pointer;
    }
    .swipe-hint {
        position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
        background: rgba(10,10,26,0.7); color: rgba(96,165,250,0.5);
        font-family: 'Press Start 2P', monospace; font-size: 0.35rem;
        padding: 4px 8px; border-radius: 4px; pointer-events: none; z-index: 6;
        opacity: 1; transition: opacity 2s ease;
    }
    .swipe-hint.hidden { opacity: 0; }
}

/* ===== Touch-drag zone for paddle games ===== */
.drag-zone { display: none; }

@media (max-width: 768px) {
    .drag-zone {
        display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        z-index: 5; touch-action: none; cursor: grab;
    }
    .drag-zone:active { cursor: grabbing; }
}

/* Landscape mode adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .touch-controls { padding: 0.5rem 1rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }
    .d-pad { width: 130px; height: 130px; }
    .d-pad-btn { width: 46px; height: 46px; font-size: 1rem; }
    .action-btn { width: 52px; height: 52px; font-size: 0.6rem; }
    .action-btn.action-primary { width: 60px; height: 60px; }
    .action-btn.action-pause { width: 40px; height: 40px; }
    .game-container { margin-bottom: 85px; }
}

@media (max-width: 768px) { body.game-active { position: fixed; width: 100%; height: 100%; overflow: hidden; } }

.orientation-warning {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10,10,26,0.95); z-index: 2000; justify-content: center; align-items: center;
    flex-direction: column; gap: 1rem; color: #60a5fa; font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem; text-align: center; padding: 2rem;
}

@media (max-width: 768px) and (orientation: landscape) { .orientation-warning { display: none !important; } }

@keyframes hapticPulse {
    0% { box-shadow: 0 0 0 0 rgba(96,165,250,0.4); }
    100% { box-shadow: 0 0 0 14px rgba(96,165,250,0); }
}

.d-pad-btn.haptic, .action-btn.haptic { animation: hapticPulse 0.3s ease-out; }

@keyframes btnRipple {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.8); opacity: 0; }
}

.d-pad-btn::after, .action-btn::after {
    content: ''; position: absolute; width: 100%; height: 100%;
    border-radius: inherit; background: rgba(96,165,250,0.3); opacity: 0; pointer-events: none;
}

.d-pad-btn:active::after, .action-btn:active::after { animation: btnRipple 0.4s ease-out; }