/* ========================================
   MOBILE-RESPONSIVE STYLES FOR 3D TIC-TAC-TOE
   ======================================== */

/* ========================================
   BASE STYLES (All Devices)
   ======================================== */

/* Ensure all elements use border-box sizing */
* {
    box-sizing: border-box;
}

/* Improve touch scrolling on mobile */
body {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    /* Improve layout stability - discourage unwanted zoom while maintaining accessibility */
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* Make containers fluid */
.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

/* Viewport stability - prevent layout shift from user zoom */
html {
    height: -webkit-fill-available;
}

/* Z-index management for overlays */
:root {
    --z-game-grid: 1;
    --z-layer-nav: 10;
    --z-modals: 1050;
    --z-blazor-error: 2000;
}

/* ========================================
   GAME GRID - RESPONSIVE
   ======================================== */

/* Base game grid - works on all screen sizes */
.game-grid {
    display: grid;
    gap: clamp(4px, 1vw, 10px); /* Responsive gap */
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    aspect-ratio: 1; /* Keep square */
}

/* Game cells - responsive sizing */
.game-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: clamp(4px, 1vw, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: bold;
    position: relative;
    /* Minimum touch target size (iOS/Android guidelines) */
    min-width: 44px;
    min-height: 44px;
}

.game-cell:hover:not(.disabled) {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-color: #2196f3;
    transform: scale(1.05);
}

.game-cell.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Cell content */
.cell-x {
    color: #dc3545;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.cell-o {
    color: #0d6efd;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.cell-coords {
    font-size: clamp(0.6rem, 1.5vw, 0.8rem);
    color: #6c757d;
    opacity: 0.7;
}

/* ========================================
   LAYER NAVIGATION - RESPONSIVE
   ======================================== */

/* Desktop: Vertical layer navigation */
.layer-navigation-vertical {
    position: absolute;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.layer-nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #0d6efd;
    background: rgba(255, 255, 255, 0.95);
    color: #0d6efd;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* Minimum touch target */
    min-width: 44px;
    min-height: 44px;
}

.layer-nav-btn:hover {
    background: rgba(13, 110, 253, 0.1);
    border-color: #0d6efd;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

.layer-nav-btn.active {
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    color: white;
    border-color: #0d6efd;
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.5);
    transform: scale(1.15);
}

/* Mobile: Horizontal layer navigation ABOVE grid (not fixed overlay) */
.layer-navigation-horizontal {
    display: none; /* Hidden by default */
    /* Static positioning instead of fixed overlay */
    position: static;
    background: rgba(255, 255, 255, 0.98);
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap; /* Allow natural wrapping when buttons don't fit */
}

/* Natural wrapping for all board sizes - buttons wrap only when they don't fit */
/* 3x3x3: 3 buttons in 1 row (always fits) */
/* 4x4x4: 4 buttons in 1 row (always fits) */
/* 5x5x5: Smart wrapping - 5 in a row if they fit, otherwise 3+2 */

/* Force 5x5x5 to wrap after 3rd button only on screens where 5 buttons won't fit */
@media (max-width: 380px) {
    .layer-navigation-horizontal.board-5x5x5 .layer-nav-btn:nth-child(3) {
        margin-right: 100%; /* Force 3 top, 2 bottom layout */
    }
}

/* ========================================
   LAYER OVERVIEW - RESPONSIVE
   ======================================== */

.layer-card {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    padding: clamp(8px, 2vw, 16px);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: clamp(100px, 20vw, 180px);
}

.layer-card:hover {
    border-color: #0d6efd;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
    transform: translateY(-2px);
}

.layer-card.layer-active {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.05);
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.3);
}

.layer-header {
    font-weight: bold;
    text-align: center;
    margin-bottom: 8px;
    color: #495057;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
}

.layer-grid {
    display: grid;
    gap: clamp(2px, 0.5vw, 4px);
    background: white;
    padding: clamp(4px, 1vw, 8px);
    border-radius: 8px;
}

.layer-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: clamp(0.7rem, 1.5vw, 1rem);
    font-weight: bold;
    min-width: 20px;
    min-height: 20px;
}

/* ========================================
   CARDS & PANELS - RESPONSIVE
   ======================================== */

.status-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
}

.card {
    margin-bottom: clamp(12px, 3vw, 20px);
}

.card-body {
    padding: clamp(12px, 3vw, 24px);
}

.card-header {
    padding: clamp(12px, 2vw, 16px);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
}

/* ========================================
   BUTTONS - TOUCH-FRIENDLY
   ======================================== */

.btn {
    /* Minimum touch target size */
    min-height: 44px;
    padding: clamp(8px, 2vw, 12px) clamp(16px, 3vw, 24px);
    font-size: clamp(0.9rem, 2vw, 1rem);
}

.btn-sm {
    min-height: 38px;
    padding: clamp(6px, 1.5vw, 8px) clamp(12px, 2vw, 16px);
    font-size: clamp(0.8rem, 1.8vw, 0.9rem);
}

.btn-lg {
    min-height: 50px;
    padding: clamp(10px, 2.5vw, 16px) clamp(20px, 4vw, 32px);
    font-size: clamp(1rem, 2.5vw, 1.2rem);
}

/* ========================================
   ALERTS & NOTIFICATIONS - RESPONSIVE
   ======================================== */

.alert {
    padding: clamp(12px, 3vw, 16px);
    font-size: clamp(0.9rem, 2vw, 1rem);
    border-radius: 8px;
    margin-bottom: clamp(12px, 3vw, 16px);
}

.alert h4, .alert h5, .alert h6 {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    margin-bottom: 8px;
}

/* ========================================
   MODALS & DIALOGS - RESPONSIVE
   ======================================== */

/* Make modals responsive on mobile - use flexbox for proper centering */
.modal {
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modals);
}

.modal-dialog {
    max-width: 95%;
    margin: 1rem;
}

.modal-content {
    border-radius: clamp(8px, 2vw, 12px);
}

.modal-header,
.modal-footer {
    padding: clamp(12px, 3vw, 16px);
}

.modal-body {
    padding: clamp(16px, 4vw, 24px);
    max-height: 70vh;
    overflow-y: auto;
}

.modal-title {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
}

/* Radzen dialog overrides for mobile - use flexbox centering */
.rz-dialog-mask {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: var(--z-modals) !important;
}

.rz-dialog {
    max-width: 95% !important;
    width: 95% !important;
    position: relative !important;
    margin: 1rem !important;
}

.rz-dialog-content {
    max-height: 70vh !important;
    overflow-y: auto !important;
}

/* ========================================
   BLAZOR RECONNECTION UI - CUSTOM STYLING
   ======================================== */

/* Blazor reconnect modal overlay */
#components-reconnect-modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: var(--z-blazor-error) !important;
    padding: 1rem !important;
}

/* Blazor reconnect dialog box */
#components-reconnect-modal > div {
    max-width: 90% !important;
    width: auto !important;
    padding: clamp(16px, 4vw, 24px) !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
    text-align: center !important;
    margin: 0 !important;
}

/* Blazor error notification - Mobile optimizations (keep original bar style) */
.blazor-error-boundary {
    /* Full screen red overlay only for error boundary (actual crashes) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(220, 53, 69, 0.95) !important;
    color: white !important;
    z-index: var(--z-blazor-error) !important;
    padding: clamp(12px, 3vw, 20px) !important;
    text-align: center !important;
    font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
}

/* #blazor-error-ui should remain as yellow bar (defined in _Layout.cshtml) */
/* Mobile-specific improvements only - don't override the display/position/color */
#blazor-error-ui {
    /* Make it more touch-friendly on mobile */
    font-size: clamp(0.85rem, 2vw, 1rem) !important;
    padding: clamp(10px, 2vw, 16px) clamp(12px, 3vw, 20px) !important;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    padding: 8px 12px;
    font-weight: bold;
    /* Touch-friendly tap target */
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   TABLET DEVICES (768px - 1024px)
   ======================================== */

@media (max-width: 1024px) and (min-width: 768px) {
    /* Tablet: Show vertical nav but smaller */
    .layer-navigation-vertical {
        left: 1rem;
    }
    
    .layer-nav-btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
    
    /* Game grid scales nicely */
    .game-grid {
        max-width: 500px;
    }
    
    /* Stack game controls on top of board */
    .col-md-3 {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .col-md-9 {
        width: 100%;
    }
}

/* ========================================
   MOBILE PHONES (< 768px)
   ======================================== */

@media (max-width: 767px) {
    /* Hide desktop vertical navigation */
    .layer-navigation-vertical {
        display: none !important;
    }
    
    /* Show mobile horizontal navigation */
    .layer-navigation-horizontal {
        display: flex !important;
    }
    
    /* Full width game board */
    .game-grid {
        max-width: 100%;
        width: calc(100vw - 30px);
        margin: 0 auto;
    }
    
    /* Smaller game cells on very small screens */
    .game-cell {
        font-size: clamp(1.2rem, 5vw, 2.5rem);
        min-width: 40px;
        min-height: 40px;
    }
    
    /* Stack all columns vertically */
    .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    
    /* Game controls at top */
    .col-md-3 {
        order: 1;
        margin-bottom: 20px;
    }
    
    /* Game board below controls */
    .col-md-9 {
        order: 2;
    }
    
    /* Reduce padding on mobile */
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Card headers smaller */
    .card-header h3,
    .card-header h5 {
        font-size: clamp(1rem, 4vw, 1.25rem);
    }
    
    /* Compact layer overview */
    .layer-card {
        min-width: clamp(80px, 25vw, 140px);
        padding: 8px;
    }
    
    .layer-header {
        font-size: 0.85rem;
        margin-bottom: 6px;
    }
    
    .layer-grid {
        gap: 2px;
        padding: 4px;
    }
    
    .layer-cell {
        font-size: 0.7rem;
        min-width: 16px;
        min-height: 16px;
    }
    
    /* Button groups stack vertically */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group > .btn {
        width: 100%;
        margin-bottom: 8px;
    }
    
    /* Form inputs full width */
    .form-control,
    .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* ? REMOVED: No longer need bottom padding since layer nav is not fixed overlay */
    
    /* Modal/Dialog responsive sizing on mobile */
    .modal-dialog {
        max-width: 98%;
        margin: 0.5rem;
    }
    
    .modal-body {
        max-height: 60vh;
    }
    
    .rz-dialog {
        max-width: 98% !important;
        width: 98% !important;
        margin: 0.5rem !important;
    }
    
    /* Blazor reconnect modal - mobile specific */
    #components-reconnect-modal > div {
        max-width: 95% !important;
        padding: 16px !important;
    }
    
    /* Layer navigation button wrapping - mobile */
    .layer-navigation-horizontal {
        padding: 10px;
        gap: 10px;
    }
}

/* ========================================
   SMALL MOBILE PHONES (< 480px)
   ======================================== */

@media (max-width: 479px) {
    /* Extra small screens */
    .game-grid {
        gap: 3px;
        width: calc(100vw - 20px);
    }
    
    .game-cell {
        font-size: clamp(1rem, 6vw, 2rem);
        border-width: 1px;
        min-width: 35px;
        min-height: 35px;
    }
    
    .cell-coords {
        font-size: 0.5rem;
    }
    
    /* Smaller layer nav buttons */
    .layer-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    /* Compact alerts */
    .alert {
        padding: 10px;
        font-size: 0.85rem;
    }
    
    /* Smaller badges */
    .badge {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
    
    /* Hide layer overview on extra small screens (optional) */
    .layer-card {
        min-width: 70px;
    }
    
    .layer-header {
        font-size: 0.75rem;
    }
}

/* ========================================
   LANDSCAPE MODE ON MOBILE
   ======================================== */

@media (max-width: 767px) and (orientation: landscape) {
    /* Landscape: Use more horizontal space */
    .game-grid {
        max-width: 60vh;
    }
    
    /* ? Landscape: Keep layer nav inline (same as portrait) */
    .layer-navigation-horizontal {
        /* Keep static positioning - no special landscape treatment */
        flex-direction: row; /* Keep horizontal layout even in landscape */
    }
}

/* ========================================
   ACCESSIBILITY & INTERACTIONS
   ======================================== */

/* Remove hover effects on touch devices */
@media (hover: none) {
    .game-cell:hover:not(.disabled) {
        transform: none;
    }
    
    .layer-card:hover {
        transform: none;
    }
    
    .layer-nav-btn:hover {
        transform: none;
    }
}

/* Active state for touch feedback */
.game-cell:active:not(.disabled) {
    background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
    transform: scale(0.95);
}

.layer-nav-btn:active {
    transform: scale(0.9);
}

/* Focus styles for keyboard navigation */
.game-cell:focus-visible,
.layer-nav-btn:focus-visible,
.btn:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

/* ========================================
   SAFE AREAS FOR NOTCHED DEVICES (iPhone X+)
   ======================================== */

@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    .layer-navigation-horizontal {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .layer-navigation-vertical,
    .layer-navigation-horizontal,
    .btn,
    .card-header {
        display: none;
    }
    
    .game-grid {
        max-width: 100%;
        page-break-inside: avoid;
    }
}