/* ========================================
   MOBILE-RESPONSIVE STYLES FOR TickyTac.3d
   ======================================== */

/* ========================================
   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.show {
    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;
    }
}

/* ========================================
   MOBILE GAME SHELL — FULL REDESIGN
   Applies only on phones (< 768px)
   ======================================== */

/* ── Desktop: hide mobile-only chrome ── */
@media (min-width: 768px) {
    .mob-topbar,
    .mob-move-banner,
    .mob-tabbar,
    .mob-sheet,
    .mob-backdrop {
        display: none !important;
    }
    /* All layers overview stays visible on desktop */
    .mob-hide-desktop {
        display: none !important;
    }
}

@media (max-width: 767px) {

    /* ─────────────────────────────────────
       1. GAME OUTER SHELL — FULL SCREEN
    ───────────────────────────────────── */
    .mp-game-outer {
        position: fixed !important;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 500;
        overflow: hidden;
        background: #1a1a2e;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Hide the outer bootstrap row/col chrome */
    .mp-game-outer > .row {
        height: 100%;
        margin: 0;
    }

    .mp-game-outer > .row > [class*="col"] {
        padding: 0;
        height: 100%;
        position: relative;
    }

    /* The main status card loses its card appearance */
    .mp-game-card {
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Original card-header replaced by mob-topbar */
    .mp-game-card > .card-header {
        display: none !important;
    }

    /* Card body fills the area between topbar and tabbar */
    .mp-game-card > .card-body {
        flex: 1 !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: relative !important;
    }

    /* Hide alerts, invitations inside card body on mobile */
    .mp-game-card > .card-body > .alert,
    .mp-game-card > .card-body > div.alert {
        display: none !important;
    }

    /* Invitation panel hidden on mobile (use mob-sheet instead) */
    .mp-invite-section {
        display: none !important;
    }

    /* All layers overview hidden on mobile (layers in sheet) */
    .mob-hide-mobile {
        display: none !important;
    }

    /* ─────────────────────────────────────
       2. mp-layout: position context
    ───────────────────────────────────── */
    .mp-layout {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: block !important;
        overflow: hidden !important;
        flex-wrap: nowrap !important;
    }

    /* Offset for topbar (48px) and tabbar (56px) */
    .mp-game-outer .mp-layout {
        top: 48px !important;
        bottom: 56px !important;
    }

    /* When move banner is showing, push layout down an extra 44px */
    .mp-game-outer.mob-has-banner .mp-layout {
        top: 92px !important;
    }

    /* ─────────────────────────────────────
       3. 3D BOARD COLUMN — THE HERO
    ───────────────────────────────────── */
    .mp-col-3d {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        right: 0 !important; bottom: 0 !important;
        max-width: none !important;
        flex: none !important;
        padding: 0 !important;
        z-index: 1;
    }

    /* Strip the card frame from the 3D column */
    .mp-col-3d > .status-card {
        height: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #1a1a1a !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .mp-col-3d > .status-card > .card-header {
        display: none !important;
    }

    .mp-col-3d > .status-card > .card-body {
        height: 100% !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* MoveTimerPanel inside 3D: hide it (move banner handles this on mobile) */
    .mp-col-3d .move-timer-panel-wrapper {
        display: none !important;
    }

    /* Game3DControls bar hidden on mobile (accessed via sheet) */
    .mp-col-3d .game3d-controls-compact {
        display: none !important;
    }

    /* 3D board container fills entire hero */
    #mp-3d-board-container {
        height: 100% !important;
        border-radius: 0 !important;
    }

    /* "Click to play" tip hidden on mobile */
    .mp-col-3d .card-body > .text-muted.small {
        display: none !important;
    }

    /* ─────────────────────────────────────
       4. INFO + 2D BOARD COLUMNS: HIDDEN
          (exposed via bottom sheets / view toggle)
    ───────────────────────────────────── */
    .mp-col-info {
        display: none !important;
    }

    .mp-col-board {
        display: none !important;
    }

    /* ─────────────────────────────────────
       5. 2D VIEW MODE — TOGGLE STATE
    ───────────────────────────────────── */

    /* When in 2D view: show 2D board, hide 3D */
    .mp-game-outer.mp-view-2d .mp-col-3d {
        display: none !important;
    }

    .mp-game-outer.mp-view-2d .mp-col-board {
        display: block !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        right: 0 !important; bottom: 0 !important;
        overflow-y: auto !important;
        background: #fff;
        padding: 0 !important;
    }

    /* Strip the card around the 2D board in mobile view */
    .mp-game-outer.mp-view-2d .mp-col-board > .status-card {
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        min-height: 100%;
    }

    .mp-game-outer.mp-view-2d .mp-col-board .card-header {
        background: #0d6efd !important;
        border-radius: 0 !important;
        padding: 10px 16px !important;
        position: sticky;
        top: 0;
        z-index: 5;
    }

    /* Layer nav in 2D view: horizontal strip */
    .mp-game-outer.mp-view-2d .layer-navigation-vertical {
        display: none !important;
    }

    .mp-game-outer.mp-view-2d .layer-navigation-horizontal {
        display: flex !important;
        margin: 8px 8px 4px;
        padding: 8px;
    }

    /* Game grid in 2D view */
    .mp-game-outer.mp-view-2d .game-grid {
        max-width: calc(100vw - 16px);
        width: calc(100vw - 16px);
        margin: 0 auto;
        padding: 0 8px;
    }

    /* ─────────────────────────────────────
       6. MOBILE TOP BAR
    ───────────────────────────────────── */
    .mob-topbar {
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 48px;
        background: rgba(0, 0, 0, 0.92);
        border-bottom: 1px solid #2a2a3a;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        z-index: 20;
        gap: 8px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .mob-topbar-left,
    .mob-topbar-right {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .mob-topbar-center {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .mob-icon-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: none;
        background: rgba(255, 255, 255, 0.08);
        color: #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1rem;
        text-decoration: none;
        transition: background 0.15s;
        -webkit-tap-highlight-color: transparent;
    }

    .mob-icon-btn:hover,
    .mob-icon-btn:active {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }

    .mob-icon-btn.muted {
        color: #555;
    }

    .mob-game-id {
        font-family: 'Consolas', monospace;
        font-size: 0.8rem;
        color: #61dafb;
        background: rgba(97, 218, 251, 0.1);
        padding: 3px 8px;
        border-radius: 4px;
        letter-spacing: 0.04em;
    }

    /* Turn chip in topbar */
    .mob-turn-chip {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 700;
        transition: all 0.3s;
    }

    .mob-turn-chip.mob-turn-mine {
        background: linear-gradient(135deg, #28a745, #20c997);
        color: #fff;
        animation: mobTurnPulse 2s infinite;
    }

    .mob-turn-chip.mob-turn-theirs {
        background: rgba(255, 255, 255, 0.1);
        color: #aaa;
    }

    @keyframes mobTurnPulse {
        0%, 100% { box-shadow: 0 0 8px rgba(40, 167, 69, 0.4); }
        50%       { box-shadow: 0 0 16px rgba(40, 167, 69, 0.8); }
    }

    .mob-turn-sym {
        font-size: 1.1rem;
        font-weight: 900;
        line-height: 1;
    }

    .mob-gameover-chip {
        background: linear-gradient(135deg, #ffc107, #ff9800);
        color: #fff;
        font-weight: 800;
        font-size: 0.8rem;
        padding: 5px 12px;
        border-radius: 20px;
    }

    .mob-waiting-chip {
        color: #888;
        font-size: 0.75rem;
        font-style: italic;
    }

    /* ─────────────────────────────────────
       7. MOVE CONFIRMATION BANNER
    ───────────────────────────────────── */
    .mob-move-banner {
        position: absolute;
        top: 48px; left: 0; right: 0;
        height: 44px;
        background: linear-gradient(135deg, #28a745, #20c997);
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        z-index: 21;
        animation: mobSlideDown 0.2s ease;
    }

    @keyframes mobSlideDown {
        from { transform: translateY(-100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    .mob-move-banner-info {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .mob-move-timer-badge {
        background: rgba(0, 0, 0, 0.25);
        color: #fff;
        font-weight: 800;
        font-size: 0.85rem;
        padding: 1px 7px;
        border-radius: 10px;
        min-width: 26px;
        text-align: center;
    }

    .mob-move-banner-actions {
        display: flex;
        gap: 6px;
    }

    .mob-confirm-btn,
    .mob-cancel-btn {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        cursor: pointer;
        transition: transform 0.1s;
        -webkit-tap-highlight-color: transparent;
    }

    .mob-confirm-btn {
        background: rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    .mob-cancel-btn {
        background: rgba(0, 0, 0, 0.25);
        color: #fff;
    }

    .mob-confirm-btn:active,
    .mob-cancel-btn:active {
        transform: scale(0.9);
    }

    /* ─────────────────────────────────────
       8. BOTTOM TAB BAR
    ───────────────────────────────────── */
    .mob-tabbar {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 56px;
        background: rgba(10, 10, 20, 0.97);
        border-top: 1px solid #2a2a3a;
        display: flex !important;
        align-items: stretch;
        z-index: 20;
        padding-bottom: env(safe-area-inset-bottom, 0);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .mob-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        color: #666;
        cursor: pointer;
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        padding: 6px 4px;
        transition: color 0.2s;
        -webkit-tap-highlight-color: transparent;
        text-transform: uppercase;
    }

    .mob-tab i {
        font-size: 1.25rem;
        line-height: 1;
        margin-bottom: 1px;
    }

    .mob-tab.active {
        color: #61dafb;
    }

    .mob-tab.active i {
        color: #61dafb;
    }

    /* Subtle active indicator */
    .mob-tab.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 2px;
        background: #61dafb;
        border-radius: 0 0 2px 2px;
    }

    /* View toggle tab: highlight differently based on current mode */
    .mob-tab.mob-tab-view-active {
        color: #ffc107;
    }

    .mob-tab.mob-tab-view-active i {
        color: #ffc107;
    }

    /* ─────────────────────────────────────
       9. BOTTOM SHEETS
    ───────────────────────────────────── */
    .mob-sheet {
        position: fixed;
        left: 0; right: 0;
        bottom: 56px; /* sits on top of tab bar */
        z-index: 600;
        transform: translateY(110%);
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
        pointer-events: none;
        max-height: 72vh;
        display: flex !important;
        flex-direction: column;
    }

    .mob-sheet.open {
        transform: translateY(0);
        pointer-events: auto;
    }

    .mob-sheet-content {
        background: #15152a;
        border-radius: 18px 18px 0 0;
        padding-bottom: 16px;
        overflow-y: auto;
        max-height: 72vh;
        border-top: 1px solid #2a2a4a;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    }

    .mob-sheet-handle {
        width: 40px;
        height: 4px;
        background: #333;
        border-radius: 2px;
        margin: 12px auto 6px;
        flex-shrink: 0;
    }

    .mob-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px 12px;
        border-bottom: 1px solid #1e1e38;
        color: #fff;
        font-weight: 700;
        font-size: 0.9rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .mob-playing-as-badge {
        font-size: 0.72rem;
        color: #888;
        text-transform: none;
        font-weight: 400;
        letter-spacing: 0;
    }

    .mob-playing-as-badge strong {
        color: #61dafb;
    }

    .mob-sheet-body {
        padding: 14px 16px;
    }

    /* Backdrop */
    .mob-backdrop {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 590;
        animation: mobFadeIn 0.2s ease;
    }

    @keyframes mobFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* ─────────────────────────────────────
       10. INFO SHEET CONTENT STYLES
    ───────────────────────────────────── */
    .mob-info-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid #1e1e38;
    }

    .mob-info-row:last-of-type {
        border-bottom: none;
        margin-bottom: 4px;
    }

    .mob-info-sym {
        font-size: 1.4rem;
        font-weight: 900;
        width: 32px;
        text-align: center;
        flex-shrink: 0;
    }

    .mob-sym-x { color: #ff4d4d; }
    .mob-sym-o { color: #4d88ff; }

    .mob-info-name {
        flex: 1;
        font-size: 0.9rem;
        font-weight: 600;
        color: #eee;
        word-break: break-word;
    }

    .mob-you-tag {
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        background: #61dafb;
        color: #000;
        padding: 2px 7px;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .mob-info-divider {
        height: 1px;
        background: #1e1e38;
        margin: 6px 0;
    }

    .mob-turn-status {
        border-radius: 10px;
        padding: 12px 14px;
        margin-bottom: 12px;
        border: 2px solid transparent;
    }

    .mob-turn-status-mine {
        background: linear-gradient(135deg, rgba(40,167,69,0.2), rgba(32,201,151,0.1));
        border-color: rgba(40, 167, 69, 0.5);
        animation: mobInfoPulse 2s infinite;
    }

    .mob-turn-status-theirs {
        background: rgba(255, 255, 255, 0.04);
        border-color: #333;
    }

    @keyframes mobInfoPulse {
        0%, 100% { box-shadow: 0 0 6px rgba(40, 167, 69, 0.2); }
        50%       { box-shadow: 0 0 14px rgba(40, 167, 69, 0.5); }
    }

    .mob-turn-status-label {
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        color: #aaa;
        margin-bottom: 4px;
    }

    .mob-turn-status-mine .mob-turn-status-label {
        color: #7dffb3;
    }

    .mob-turn-status-hint {
        font-size: 0.82rem;
        color: #ccc;
    }

    .mob-waiting-status {
        padding: 12px 0;
    }

    .mob-copy-link-btn {
        margin-top: 8px;
        width: 100%;
        padding: 10px;
        background: rgba(13, 110, 253, 0.15);
        border: 1px solid rgba(13, 110, 253, 0.4);
        border-radius: 8px;
        color: #61dafb;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        -webkit-tap-highlight-color: transparent;
    }

    /* Game over in info sheet */
    .mob-gameover-section {
        padding: 12px 0;
    }

    .mob-gameover-result {
        font-size: 1.4rem;
        font-weight: 900;
        text-align: center;
        padding: 12px;
        border-radius: 10px;
        margin-bottom: 12px;
    }

    .mob-win {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.1));
        color: #ffd700;
        border: 2px solid rgba(255, 215, 0, 0.4);
    }

    .mob-lose {
        background: rgba(255, 255, 255, 0.04);
        color: #9ca3af;
        border: 2px solid #333;
    }

    .mob-draw {
        background: rgba(59, 130, 246, 0.1);
        color: #60a5fa;
        border: 2px solid rgba(59, 130, 246, 0.3);
    }

    .mob-endgame-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    .mob-endgame-actions .btn {
        flex: 1;
        min-width: 80px;
    }

    .mob-sheet-action {
        margin-top: 12px;
    }

    /* Info meta row */
    .mob-info-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #1e1e38;
    }

    .mob-info-meta-item {
        font-size: 0.75rem;
        color: #777;
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .mob-full3d-link {
        color: #61dafb !important;
        margin-left: auto;
    }

    /* ─────────────────────────────────────
       11. LAYERS SHEET CONTENT STYLES
    ───────────────────────────────────── */
    .mob-layer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }

    .mob-layer-tile {
        background: rgba(255, 255, 255, 0.04);
        border: 2px solid #2a2a3a;
        border-radius: 10px;
        padding: 10px 8px;
        cursor: pointer;
        transition: all 0.2s;
        -webkit-tap-highlight-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .mob-layer-tile:active {
        transform: scale(0.96);
    }

    .mob-layer-tile.active {
        border-color: #0d6efd;
        background: rgba(13, 110, 253, 0.12);
        box-shadow: 0 0 12px rgba(13, 110, 253, 0.3);
    }

    .mob-layer-tile-label {
        font-size: 0.75rem;
        font-weight: 700;
        color: #aaa;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .mob-layer-tile.active .mob-layer-tile-label {
        color: #61dafb;
    }

    .mob-layer-tile-mini {
        display: grid;
        gap: 2px;
        background: rgba(0, 0, 0, 0.3);
        padding: 4px;
        border-radius: 4px;
        width: 100%;
    }

    .mob-layer-mini-cell {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
        font-weight: 700;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 2px;
        color: #555;
    }

    .mob-layer-mini-cell.has-x { color: #ff4d4d; background: rgba(255, 77, 77, 0.15); }
    .mob-layer-mini-cell.has-o { color: #4d88ff; background: rgba(77, 136, 255, 0.15); }

    /* ─────────────────────────────────────
       12. INVITE SHEET STYLES
    ───────────────────────────────────── */
    .mob-sheet-content .form-control,
    .mob-sheet-content .form-control:focus {
        background: rgba(255, 255, 255, 0.07);
        border-color: #333;
        color: #eee;
    }

    .mob-sheet-content .form-label {
        color: #aaa;
        font-size: 0.82rem;
    }

    /* ─────────────────────────────────────
       13. PLAY3D PAGE — MOBILE OVERRIDES
       Controls are in the topbar; board area is a centered square.
       play3dFixMobileLayout() sets explicit height on play3d-main and
       explicit square dimensions on play3d-board-wrapper via JS.
    ───────────────────────────────────── */

    /* Board area: centering flex container below the topbar.
       Height is set by play3dFixMobileLayout() JS. */
    .play3d-main {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
        min-height: 0 !important;
        /* No margin-bottom — mobilebar is hidden */
    }

    /* Board wrapper: square dimensions set by play3dFixMobileLayout() JS */
    .play3d-board-wrapper {
        position: relative !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        /* Do NOT use absolute fill — JS sets explicit width/height */
    }

    /* Board container fills the square wrapper */
    .play3d-board {
        width: 100% !important;
        height: 100% !important;
    }

    /* ── Mobilebar hidden — controls moved to topbar ── */
    .play3d-mobilebar {
        display: none !important;
    }

    /* Turn chip */
    .pmb-turn {
        font-size: 0.7rem;
        font-weight: 700;
        padding: 3px 7px;
        border-radius: 6px;
        white-space: nowrap;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .pmb-my-turn {
        background: rgba(40, 167, 69, 0.28);
        border: 1px solid rgba(40, 167, 69, 0.55);
        color: #7dffb3;
    }

    .pmb-their-turn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid #444;
        color: #777;
    }

    .pmb-gameover {
        background: rgba(255, 193, 7, 0.12);
        border: 1px solid rgba(255, 193, 7, 0.35);
        color: #ffc107;
    }

    .pmb-sym-x { color: #ff6b6b; font-weight: 900; }
    .pmb-sym-o { color: #6bb3ff; font-weight: 900; }

    /* Native select dropdowns — browser opens native picker on mobile */
    .pmb-select {
        flex: 1;
        min-width: 0;
        height: 34px;
        background: #12121e;
        color: #dde;
        border: 1px solid #3a3a4a;
        border-radius: 6px;
        padding: 0 4px;
        font-size: 0.78rem;
        font-weight: 600;
        -webkit-appearance: auto;
        appearance: auto;
    }

    .pmb-select:focus {
        outline: none;
        border-color: #61dafb;
    }

    /* Amber 2D back button */
    .pmb-2d-btn {
        background: #ffc107;
        color: #111 !important;
        border-radius: 6px;
        padding: 0 10px;
        font-weight: 700;
        font-size: 0.78rem;
        text-decoration: none !important;
        white-space: nowrap;
        height: 34px;
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    .pmb-2d-btn:active {
        background: #e0ac00;
    }
}

/* ─────────────────────────────────────
   DESKTOP: hide play3d mobile-only elements
───────────────────────────────────── */
@media (min-width: 768px) {
    .play3d-mobilebar {
        display: none !important;
    }
    .play3d-tabbar {
        display: none !important;
    }
    .play3d-controls-backdrop {
        display: none !important;
    }
    /* Mobile cam grid hidden on desktop — desktop uses .camera-buttons-expanded */
    .mob-cam-grid {
        display: none !important;
    }
}

/* ========================================
   ENHANCED MOBILE CONTROLS & ALIGNMENT
   ======================================== */

/* ── 5x5x5 game grid: ensure it fits within mobile viewport ── */
@media (max-width: 767px) {
    /* 5x5x5 2D game grid: constrain max cell size so grid doesn't overflow */
    .game-grid[style*="repeat(5"] {
        max-width: min(calc(100vw - 24px), 360px);
        gap: clamp(2px, 0.8vw, 6px);
    }

    /* 5x5x5 cells need tighter sizing on mobile */
    .game-grid[style*="repeat(5"] .game-cell {
        font-size: clamp(0.9rem, 4vw, 1.8rem);
        min-width: 36px;
        min-height: 36px;
        border-width: 1px;
        border-radius: 4px;
    }

    /* Better alignment for mobile game controls in bottom sheets */
    .mob-sheet-body .btn {
        text-align: center;
        justify-content: center;
    }

    .mob-endgame-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mob-endgame-actions .btn {
        min-width: 0;
        flex: none;
        width: 100%;
    }

    /* Full-width for the history button (3rd item) */
    .mob-endgame-actions .btn:nth-child(3) {
        grid-column: 1 / -1;
    }

    /* Better spacing for mobile info rows */
    .mob-info-row {
        padding: 12px 4px;
    }

    /* Fix invite sheet form alignment */
    .mob-sheet-content .mb-3 {
        text-align: left;
    }

    /* Mobile game card body: prevent scroll bounce */
    .mp-game-card > .card-body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Ensure 3D container fills available space properly */
    #mp-3d-board-container {
        min-height: 200px;
    }
}

/* Extra small phones: tighter 5x5x5 layout */
@media (max-width: 379px) {
    .game-grid[style*="repeat(5"] {
        max-width: calc(100vw - 16px);
        gap: 2px;
    }

    .game-grid[style*="repeat(5"] .game-cell {
        font-size: clamp(0.75rem, 4vw, 1.4rem);
        min-width: 30px;
        min-height: 30px;
        padding: 2px;
    }

    /* Hide coordinate labels on very small phones for 5x5x5 */
    .game-grid[style*="repeat(5"] .cell-coords {
        font-size: 0.4rem;
    }

    /* Compact layer tiles for 5x5x5 on small screens */
    .mob-layer-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 6px;
    }
}

/* ========================================
   TABLET RESPONSIVE IMPROVEMENTS
   (768px - 1199px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1199px) {
    /* Tablet: game info panel as compact horizontal bar */
    .mp-col-info .card-body {
        padding: 12px;
    }

    .mp-col-info .alert {
        padding: 10px 14px;
        margin-bottom: 10px;
        font-size: 0.9rem;
    }

    .mp-col-info .alert .fs-1 {
        font-size: 1.8rem !important;
    }

    /* Tablet: side-by-side boards need proportional 3D height */
    .mp-col-3d {
        --3d-board-height: clamp(300px, 40vh, 420px);
    }

    /* Better button sizing for tablets */
    .btn {
        min-height: 42px;
    }

    /* Layer cards in overview: better tablet fit */
    .layer-card {
        min-width: clamp(90px, 18vw, 160px);
    }

    /* 5x5x5 game grid on tablet: keep it manageable */
    .game-grid[style*="repeat(5"] {
        max-width: min(calc(100% - 16px), 420px);
    }

    /* Card headers: tablet-appropriate sizing */
    .card-header h3,
    .card-header h5 {
        font-size: clamp(1rem, 2.2vw, 1.3rem);
    }

    /* Tablet game info: compact player rows */
    .mp-col-info .d-flex.flex-column.gap-2 > div {
        padding: 6px 10px;
    }
}

/* Tablet portrait mode: optimize for taller viewport */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* In portrait, stack boards vertically with more height */
    .mp-col-board,
    .mp-col-3d {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .mp-col-3d {
        --3d-board-height: clamp(300px, 45vh, 500px);
    }

    /* Center the game grid */
    .game-grid {
        max-width: min(480px, 80vw);
        margin: 0 auto;
    }
}

/* Tablet landscape: side by side works well, optimize sizing */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
    .mp-col-board {
        flex: 0 0 46% !important;
        max-width: 46% !important;
    }

    .mp-col-3d {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        --3d-board-height: clamp(250px, 50vh, 400px);
    }

    /* Hide info column in landscape tablet to give boards more space */
    .mp-col-info {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        order: 3 !important;
    }

    /* Compact info as horizontal bar in landscape */
    .mp-col-info .card {
        margin-bottom: 8px;
    }

    .mp-col-info .card-body {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding: 8px 12px;
    }

    .mp-col-info .card-body > .mb-3 {
        margin-bottom: 0 !important;
        flex: 1;
        min-width: 150px;
    }
}

/* ========================================
   MAUI APP INSTALL BANNER
   Shown to mobile browser users to promote
   the native MAUI app
   ======================================== */

.app-install-banner {
    display: none; /* Hidden by default; shown via JS */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
    color: #fff;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    animation: bannerSlideUp 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes bannerSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.app-install-banner.visible {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.app-banner-text {
    flex: 1;
    min-width: 0;
}

.app-banner-title {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
}

.app-banner-subtitle {
    font-size: 0.75rem;
    opacity: 0.8;
    line-height: 1.3;
}

.app-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.app-banner-install {
    background: #fff;
    color: #1e3a8a;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.app-banner-install:active {
    transform: scale(0.95);
}

.app-banner-dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.app-banner-dismiss:hover {
    color: #fff;
}

/* When banner is visible, push the game tabbar and sheets up */
@media (max-width: 767px) {
    body.has-app-banner .mob-tabbar {
        bottom: 68px;
    }

    body.has-app-banner .mob-sheet {
        bottom: calc(56px + 68px);
    }
}

/* ========================================
   DEEP LINK INVITE BANNER
   Shown when user arrives via app-invite link
   ======================================== */

.invite-deep-link-banner {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #fff;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    text-align: center;
}

.invite-deep-link-banner h5 {
    font-weight: 800;
    margin-bottom: 8px;
}

.invite-deep-link-banner .btn {
    background: #fff;
    color: #059669;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
}

/* ========================================
   MOBILE-FIRST UTILITY CLASSES
   ======================================== */

/* Hide on tablets and above */
@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* Hide on mobile */
@media (max-width: 767px) {
    .tablet-up-only {
        display: none !important;
    }
}