/**
 * HackNet: Shadow Protocol - Responsive Stylesheet
 * Contains media queries for mobile and tablet devices
 */

/* ========================================
   TABLET BREAKPOINT (768px - 1024px)
   ======================================== */
@media screen and (max-width: 1024px) {
    /* Status Bar */
    #status-bar {
        padding: var(--spacing-xs) var(--spacing-sm);
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .status-left,
    .status-center,
    .status-right {
        gap: var(--spacing-sm);
    }

    .status-label {
        font-size: var(--font-size-xs);
    }

    /* Terminal */
    #terminal-output {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm);
    }

    /* Loading Screen */
    .ascii-logo {
        font-size: 8px;
    }

    .loading-bar {
        width: 250px;
    }

    /* Menus */
    .menu-btn {
        width: 220px;
    }

    /* Modals */
    .modal-content {
        max-width: 350px;
    }

    /* Minigames */
    #minigame-container {
        max-width: 500px;
    }

    .crack-matrix {
        max-width: 350px;
    }

    .crack-cell {
        font-size: var(--font-size-xs);
    }

    .firewall-grid {
        max-width: 300px;
    }

    .portscan-port {
        font-size: 56px;
    }
}

/* ========================================
   MOBILE BREAKPOINT (<768px)
   ======================================== */
@media screen and (max-width: 767px) {
    /* Root adjustments */
    :root {
        --font-size-xs: 9px;
        --font-size-sm: 11px;
        --font-size-md: 13px;
        --font-size-lg: 15px;
        --font-size-xl: 18px;
        --font-size-xxl: 22px;
        --spacing-xs: 3px;
        --spacing-sm: 6px;
        --spacing-md: 12px;
        --spacing-lg: 18px;
        --spacing-xl: 24px;
    }

    /* Status Bar - Compact mode */
    #status-bar {
        padding: var(--spacing-xs);
        font-size: var(--font-size-xs);
    }

    .status-left,
    .status-right {
        flex: 1;
    }

    .status-center {
        order: -1;
        flex-basis: 100%;
        justify-content: center;
        margin-bottom: var(--spacing-xs);
    }

    .status-item {
        gap: 2px;
    }

    .status-label {
        display: none;
    }

    #player-handle .status-label,
    #player-money .status-label {
        display: inline;
    }

    .trace-bar {
        width: 40px;
    }

    /* Terminal */
    #terminal-container {
        font-size: var(--font-size-sm);
    }

    #terminal-output {
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
        line-height: 1.4;
    }

    #terminal-input-line {
        padding: var(--spacing-sm);
        min-height: 48px;
    }

    #terminal-prompt {
        font-size: var(--font-size-sm);
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #terminal-input {
        font-size: var(--font-size-md);
    }

    /* Loading Screen */
    .ascii-logo {
        font-size: 6px;
        letter-spacing: -0.5px;
    }

    .loading-subtitle {
        font-size: var(--font-size-sm);
        letter-spacing: 4px;
    }

    .loading-bar {
        width: 200px;
    }

    /* Start Menu */
    .menu-logo .ascii-logo.small {
        font-size: 8px;
    }

    .menu-subtitle {
        font-size: var(--font-size-sm);
        letter-spacing: 2px;
    }

    .menu-options {
        gap: var(--spacing-xs);
    }

    .menu-btn {
        width: 200px;
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    .menu-footer {
        width: 200px;
    }

    /* Modals */
    .modal {
        padding: var(--spacing-sm);
    }

    .modal-content {
        max-width: 100%;
    }

    .modal-header {
        padding: var(--spacing-sm);
    }

    .modal-header h2 {
        font-size: var(--font-size-md);
    }

    .modal-body {
        padding: var(--spacing-sm);
    }

    /* Settings */
    .setting-group {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .setting-label {
        flex-basis: 100%;
    }

    input[type="range"] {
        width: 80px;
    }

    /* Notifications */
    #notification-area {
        top: auto;
        bottom: var(--spacing-md);
        right: var(--spacing-sm);
        left: var(--spacing-sm);
        max-width: none;
    }

    /* File listings */
    .file-entry {
        min-width: 100px;
        font-size: var(--font-size-xs);
    }

    /* Terminal table */
    .terminal-table {
        font-size: var(--font-size-xs);
    }

    .terminal-table th,
    .terminal-table td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* Minigame Overlay */
    #minigame-overlay {
        padding: var(--spacing-sm);
    }

    #minigame-container {
        max-width: 100%;
    }

    #minigame-header {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    #minigame-title {
        font-size: var(--font-size-md);
    }

    #minigame-timer {
        font-size: var(--font-size-lg);
    }

    #minigame-content {
        padding: var(--spacing-md);
        min-height: 250px;
    }

    /* Crack Game Mobile */
    .crack-target-item {
        width: 40px;
        height: 32px;
        font-size: var(--font-size-md);
    }

    .crack-matrix {
        grid-template-columns: repeat(6, 1fr);
        max-width: 280px;
    }

    .crack-cell {
        font-size: var(--font-size-xs);
    }

    /* Firewall Game Mobile */
    .firewall-grid {
        grid-template-columns: repeat(5, 1fr);
        max-width: 250px;
    }

    .firewall-controls-hint {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-sm);
    }

    /* Decrypt Game Mobile */
    .decrypt-cipher {
        font-size: var(--font-size-md);
        padding: var(--spacing-sm);
    }

    .decrypt-type {
        flex-wrap: wrap;
        justify-content: center;
    }

    .decrypt-type-btn {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* Port Scan Game Mobile */
    .portscan-port {
        font-size: 48px;
        min-height: 70px;
    }

    .portscan-input {
        font-size: var(--font-size-lg);
        padding: var(--spacing-sm);
    }

    .portscan-score {
        gap: var(--spacing-md);
    }

    /* Result Screen Mobile */
    .result-icon {
        font-size: 48px;
    }

    .result-title {
        font-size: var(--font-size-xl);
    }

    .result-stats {
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }

    /* Welcome message */
    .welcome-ascii {
        font-size: 6px;
    }

    /* Server info */
    .server-info-row {
        flex-direction: column;
    }

    .server-info-label {
        width: auto;
        margin-bottom: 2px;
    }

    /* Mail display */
    .mail-header {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    /* Mission display */
    .mission-header {
        padding: var(--spacing-xs);
    }

    .mission-title {
        font-size: var(--font-size-md);
    }
}

/* ========================================
   SMALL MOBILE (<480px)
   ======================================== */
@media screen and (max-width: 479px) {
    /* Even smaller fonts */
    :root {
        --font-size-xs: 8px;
        --font-size-sm: 10px;
        --font-size-md: 12px;
        --font-size-lg: 14px;
    }

    /* Status bar ultra compact */
    #status-bar {
        padding: 2px var(--spacing-xs);
    }

    #connection-status {
        padding: 2px var(--spacing-xs);
    }

    .trace-bar {
        width: 30px;
    }

    /* ASCII logo hidden on very small screens */
    .ascii-logo {
        display: none;
    }

    .loading-logo,
    .menu-logo {
        margin-bottom: var(--spacing-md);
    }

    .loading-subtitle,
    .menu-subtitle {
        font-size: var(--font-size-md);
    }

    /* Crack game - fewer columns */
    .crack-matrix {
        grid-template-columns: repeat(5, 1fr);
        max-width: 220px;
    }

    /* Firewall game - fewer columns */
    .firewall-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 180px;
    }

    /* Port scan */
    .portscan-port {
        font-size: 36px;
    }
}

/* ========================================
   LANDSCAPE MOBILE
   ======================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #status-bar {
        padding: 2px var(--spacing-sm);
    }

    .status-center {
        order: 0;
        flex-basis: auto;
        margin-bottom: 0;
    }

    #terminal-output {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* Minigame adjustments */
    #minigame-content {
        min-height: 200px;
        padding: var(--spacing-sm);
    }

    .portscan-port {
        font-size: 36px;
        min-height: 50px;
    }

    .result-icon {
        font-size: 36px;
    }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .menu-btn {
        min-height: 48px;
    }

    .crack-cell,
    .firewall-cell {
        min-width: 44px;
        min-height: 44px;
    }

    .lang-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .modal-close {
        min-width: 44px;
        min-height: 44px;
        font-size: var(--font-size-xxl);
    }

    /* Remove hover effects */
    .crack-cell:hover,
    .firewall-cell:hover {
        background-color: inherit;
        border-color: inherit;
    }

    /* Active states instead */
    .crack-cell:active {
        background-color: rgba(0, 255, 0, 0.2);
        border-color: var(--color-text);
    }

    .menu-btn:active:not(:disabled) {
        background-color: var(--color-text);
        color: var(--color-bg);
    }

    /* Disable text selection */
    .crack-matrix,
    .firewall-grid,
    .portscan-display {
        user-select: none;
        -webkit-user-select: none;
    }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */
@media (prefers-contrast: high) {
    :root {
        --color-text: #00ff00;
        --color-text-dim: #00cc00;
        --color-border: #00ff00;
        --color-border-dim: #009900;
    }

    #scanlines {
        display: none;
    }

    #crt-flicker {
        display: none;
    }
}

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

    #matrix-bg {
        display: none;
    }

    #scanlines {
        display: none;
    }

    #crt-flicker {
        display: none;
    }

    .typewriter-cursor,
    #terminal-cursor {
        animation: none;
        opacity: 1;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    #matrix-bg,
    #scanlines,
    #crt-flicker,
    #status-bar,
    #minigame-overlay,
    #notification-area,
    #loading-screen,
    #start-menu {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    #terminal-container {
        background: white;
    }

    #terminal-output {
        color: black;
    }

    .output-system,
    .output-error,
    .output-success,
    .output-warning {
        color: black;
    }
}

/* ========================================
   DARK MODE (default, but explicit)
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* Already dark by default, no changes needed */
}

/* ========================================
   LIGHT MODE OVERRIDE (if needed)
   ======================================== */
@media (prefers-color-scheme: light) {
    /* Game is designed for dark mode, but we could add a light theme option */
    /* Keeping dark for authenticity of hacker aesthetic */
}