/* =========================================================
   BUGHUNT MOBILE STYLESHEET (css/mobile.css)
   Loaded exclusively on viewports <= 768px.
   Preserves 1920x1080 desktop canvas while providing a
   streamlined, responsive mobile layout down to 360px width.
   ========================================================= */

@media screen and (max-width: 768px) {

    /* ---------------------------------------------------------
       0. GENERAL MOBILE VIEWPORT RESETS
       --------------------------------------------------------- */
    html, body {
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
        touch-action: manipulation;
    }

    #game-container {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* ---------------------------------------------------------
       CRITICAL MOBILE SCREEN VISIBILITY GUARD:
       Ensure inactive screens hidden via display: none in inline style
       are NEVER forced visible by mobile flex/grid !important rules.
       --------------------------------------------------------- */
    #game-container > div[style*="display: none"],
    #game-container > div[style*="display:none"],
    #title-screen[style*="display: none"],
    #login-screen[style*="display: none"],
    #register-screen[style*="display: none"],
    #main-menu[style*="display: none"],
    #difficulty-selection[style*="display: none"],
    #codex-screen[style*="display: none"],
    #compiler-screen[style*="display: none"],
    #leaderboard-screen[style*="display: none"],
    #about-screen[style*="display: none"],
    #collection-screen[style*="display: none"],
    #shop-screen[style*="display: none"],
    #battle-screen[style*="display: none"],
    #admin-screen[style*="display: none"],
    #victory-screen[style*="display: none"],
    #defeat-screen[style*="display: none"],
    [id$="-screen"][style*="display: none"],
    [id$="-screen"][style*="display:none"],
    [style*="display: none"],
    [style*="display:none"] {
        display: none !important;
    }

    /* ---------------------------------------------------------
       0. AUTHENTICATION (TITLE, LOGIN & REGISTER) MOBILE POLISH
       --------------------------------------------------------- */
    #title-screen {
        min-height: 100vh !important;
        height: auto !important;
        padding: 30px 16px !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
    }

    #login-screen:not([style*="display: none"]):not([style*="display:none"]),
    #register-screen:not([style*="display: none"]):not([style*="display:none"]) {
        min-height: 100vh !important;
        height: auto !important;
        padding: 24px 14px 48px 14px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    #login-screen h1,
    #register-screen h1 {
        font-size: clamp(24px, 6.5vw, 36px) !important;
        margin: 8px 0 16px 0 !important;
        letter-spacing: 1px !important;
    }

    #login-screen h1::after {
        font-size: 11px !important;
        letter-spacing: 1.5px !important;
        margin-top: 6px !important;
    }

    .auth-role-tabs {
        width: 100% !important;
        max-width: 400px !important;
        margin-bottom: 12px !important;
        gap: 6px !important;
    }

    .auth-role-tab {
        min-height: 44px !important;
        font-size: 13.5px !important;
        padding: 8px 10px !important;
        touch-action: manipulation !important;
    }

    .auth-role-panel {
        width: 100% !important;
        max-width: 400px !important;
        box-sizing: border-box !important;
    }

    #student-login-form,
    #teacher-login-form {
        width: 100% !important;
        max-width: 400px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #login-screen input:not([type="hidden"]),
    #register-screen input:not([type="hidden"]) {
        font-size: 16px !important; /* CRITICAL: >= 16px prevents iOS Safari auto-zoom! */
        min-height: 48px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .auth-password-wrap {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 0 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
    }

    .auth-password-wrap input {
        width: 100% !important;
        margin: 0 !important;
        padding-right: 48px !important;
    }

    .password-toggle-btn {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 10 !important;
        color: #cbd5e1 !important;
        opacity: 0.8 !important;
        touch-action: manipulation !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .password-toggle-btn:active,
    .password-toggle-btn.password-showing {
        color: #a855f7 !important;
        opacity: 1 !important;
    }

    #login-button,
    #teacher-login-button,
    #register-button,
    #create-account-button,
    #back-to-login-button {
        min-height: 48px !important;
        font-size: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        touch-action: manipulation !important;
        box-sizing: border-box !important;
    }

    .auth-forgot-link {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13.5px !important;
        touch-action: manipulation !important;
    }

    /* ---------------------------------------------------------
       1. DIFFICULTY SELECTION SCREEN
       --------------------------------------------------------- */
    #difficulty-selection:not([style*="display: none"]):not([style*="display:none"]) {
        padding: 12px 10px 32px 10px !important;
        min-height: 100vh !important;
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        box-sizing: border-box !important;
    }

    .diff-header-row {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 4px !important;
        width: 100% !important;
    }

    .diff-back-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 8px 14px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        touch-action: manipulation !important;
        flex-shrink: 0 !important;
    }

    .diff-header-spacer {
        display: none !important;
    }

    .diff-title-wrap {
        text-align: right !important;
        flex: 1 !important;
    }

    .diff-title-wrap h2 {
        font-size: clamp(20px, 5.5vw, 26px) !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .diff-subtitle {
        font-size: 12.5px !important;
        color: #c4b5fd !important;
    }

    /* 1-Column Responsive Cards Layout for Mobile */
    .difficulty-cards-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 440px !important;
        margin: 0 auto !important;
        flex: none !important;
    }

    .diff-stage-card {
        min-height: auto !important;
        max-height: none !important;
        padding: 14px 12px !important;
        border-radius: 14px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }

    .card-badge-row {
        margin-bottom: 4px !important;
    }

    .card-star-badge,
    .card-powerup-badge {
        font-size: 12px !important;
        padding: 3px 8px !important;
        min-height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .diff-card-preview {
        height: 75px !important;
        margin: 2px 0 6px 0 !important;
    }

    .diff-boss-preview-img {
        max-height: 70px !important;
    }

    .card-title {
        font-size: 20px !important;
    }

    .card-domain {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .card-info-box {
        padding: 8px 10px !important;
        gap: 5px !important;
        margin-bottom: 8px !important;
    }

    .card-info-row {
        font-size: 12.5px !important;
    }

    .diff-play-btn {
        min-height: 48px !important;
        height: 48px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
    }

    /* ---------------------------------------------------------
       2. BATTLE ARENA TOP NAVIGATION & STATUS
       --------------------------------------------------------- */
    #battle-screen {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 32px !important;
    }

    #battle-top {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        margin: 0 auto 6px auto !important;
        width: 100% !important;
    }

    /* Top row inside #battle-top */
    .battle-top-nav-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    #battle-back-button {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 8px 14px !important;
        font-size: 13.5px !important;
        border-radius: 8px !important;
        touch-action: manipulation !important;
    }

    .battle-top-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #battle-guide-button {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        touch-action: manipulation !important;
    }

    .battle-top-center-cluster {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 4px 6px !important;
    }

    .battle-diff-pill,
    .battle-counter-text,
    .battle-timer-pill,
    .dfs-hud-pill {
        min-height: 36px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        touch-action: manipulation !important;
    }

    .cluster-sep {
        display: none !important;
    }

    /* ---------------------------------------------------------
       3. POKEMON BATTLE ARENA (COMBATANTS & CHALLENGE TERMINAL)
       --------------------------------------------------------- */
    #pokemon-battle-arena {
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        gap: 8px !important;
        padding: 4px 10px !important;
        overflow: visible !important;
    }

    /* Combat Visual Stage (Enemy on right, Player on left) */
    .pokemon-hud-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 10px !important;
        padding: 8px 12px !important;
    }

    .pokemon-hud-card.enemy-card {
        order: 1 !important;
        border-right: 4px solid #e0316d !important;
    }

    .pokemon-stage-wrap.enemy-stage {
        position: relative !important;
        order: 2 !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 120px !important;
        min-height: 100px !important;
        margin: 2px auto !important;
    }

    .pokemon-sprite.enemy-sprite,
    #enemy-sprite {
        max-height: 105px !important;
        max-width: 120px !important;
    }

    .pokemon-ground-pedestal.enemy-ground {
        width: 140px !important;
        height: 28px !important;
        bottom: 2px !important;
    }

    /* Challenge Terminal / Mission Box (Collapsible & Prominent) */
    .pokemon-challenge-terminal,
    #challenge-box {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 4px 0 !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    .mission-directive-header {
        gap: 6px !important;
    }

    .mission-challenge-title {
        font-size: 14px !important;
    }

    .mission-details-toggle-btn {
        min-width: 44px !important;
        min-height: 38px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        touch-action: manipulation !important;
    }

    .mission-question-card {
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    .mission-question-text {
        font-size: 13.5px !important;
        line-height: 1.35 !important;
    }

    .mission-goal-output-row {
        flex-direction: column !important;
        gap: 4px !important;
    }

    .mission-inline-goal,
    .mission-inline-output {
        font-size: 12.5px !important;
    }

    .rpg-expected-output-pre {
        font-size: 12.5px !important;
    }

    /* Player Area (Combatant HUD) */
    .pokemon-stage-wrap.player-stage {
        display: none !important; /* Hide back player sprite on mobile portrait to maximize space for code */
    }

    .pokemon-hud-card.player-card {
        order: 4 !important;
        border-left: 4px solid #00d2ff !important;
    }

    .combat-log-pill-btn {
        min-width: 44px !important;
        min-height: 36px !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
        touch-action: manipulation !important;
    }

    .pokemon-hearts-deck .heart {
        font-size: 20px !important;
    }

    /* ---------------------------------------------------------
       4. POKEMON BATTLE WORKSPACE & PARSONS TOUCH REORDERING
       --------------------------------------------------------- */
    .pokemon-battle-window {
        padding: 6px 8px 16px 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .parsons-workspace-container {
        padding: 8px 6px !important;
        border-radius: 10px !important;
    }

    .parsons-workspace-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .parsons-deck-badge {
        font-size: 11px !important;
    }

    .parsons-deck-tip {
        display: none !important; /* Save space on small screens */
    }

    .parsons-reset-btn {
        min-width: 44px !important;
        min-height: 38px !important;
        padding: 6px 12px !important;
        font-size: 12.5px !important;
        border-radius: 6px !important;
        touch-action: manipulation !important;
    }

    /* Scoped restrictions strictly on puzzle list & items */
    .parsons-blocks-list {
        gap: 8px !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    /* Parsons Puzzle Block Item */
    .parsons-block-item {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        padding: 8px 10px !important;
        min-height: 48px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        touch-action: pan-y !important;
    }

    .block-drag-handle {
        order: 1 !important;
        font-size: 16px !important;
        padding: 4px 6px !important;
        min-width: 20px !important;
        min-height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: none !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    .block-step-num,
    .block-distractor-badge,
    .clue-step-pill {
        order: 2 !important;
        font-size: 12px !important;
        padding: 4px 8px !important;
        min-height: 28px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Reorder Buttons (Up / Down) */
    .block-reorder-group {
        order: 3 !important;
        margin-left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    .block-btn.block-btn-up,
    .block-btn.block-btn-down {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        background: rgba(139, 92, 246, 0.22) !important;
        border: 1.5px solid rgba(168, 85, 247, 0.5) !important;
        color: #e9d5ff !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        padding: 0 !important;
        line-height: 1 !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    .block-btn.block-btn-up:active,
    .block-btn.block-btn-down:active {
        background: #7c3aed !important;
        color: #ffffff !important;
        transform: scale(0.94) !important;
    }

    .block-btn.block-btn-up:disabled,
    .block-btn.block-btn-down:disabled {
        opacity: 0.25 !important;
        cursor: not-allowed !important;
        border-color: rgba(100, 70, 150, 0.25) !important;
        pointer-events: none !important;
    }

    .block-controls {
        order: 4 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .block-btn.toggle-distractor,
    .block-btn.include-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        height: 44px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    /* Code Block wrapped into dedicated full-width line on mobile */
    .block-code-text {
        order: 5 !important;
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 14.5px !important;
        line-height: 1.45 !important;
        margin-top: 4px !important;
        padding: 6px 8px !important;
        background: rgba(12, 8, 24, 0.6) !important;
        border-radius: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    /* Submit Button */
    .parsons-submit-row {
        margin-top: 8px !important;
    }

    .parsons-submit-btn,
    #submit-button {
        min-height: 48px !important;
        height: 50px !important;
        font-size: 15.5px !important;
        font-weight: 800 !important;
        border-radius: 10px !important;
        touch-action: manipulation !important;
    }

    /* Tactical Power-ups Bar */
    .pokemon-tactics-bar {
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 8px !important;
        align-items: stretch !important;
    }

    .powerups-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }

    .powerup-action-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 6px 10px !important;
        font-size: 12.5px !important;
        border-radius: 8px !important;
        touch-action: manipulation !important;
        flex: 1 1 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
    }

    /* ---------------------------------------------------------
       5. OTHER BATTLE WORKSPACES (QUIZ, MEMORY, SPOT BUG)
       --------------------------------------------------------- */
    .quiz-options-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .quiz-option-btn {
        min-height: 44px !important;
        padding: 10px 12px !important;
        font-size: 13.5px !important;
        touch-action: manipulation !important;
    }

    .memory-cards-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }

    .memory-card {
        min-height: 52px !important;
    }

    .spotbug-code-line {
        min-height: 44px !important;
        padding: 8px 10px !important;
        font-size: 13.5px !important;
        touch-action: manipulation !important;
    }

    /* ---------------------------------------------------------
       6. REWARDS & VICTORY / DEFEAT DIALOGS
       --------------------------------------------------------- */
    #victory-screen:not([style*="display: none"]):not([style*="display:none"]),
    #defeat-screen:not([style*="display: none"]):not([style*="display:none"]) {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px 10px 36px 10px !important;
        box-sizing: border-box !important;
    }

    .victory-panel,
    .defeat-panel {
        width: 100% !important;
        max-width: 440px !important;
        margin: 8px auto !important;
        padding: 16px 12px !important;
        gap: 12px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .victory-title {
        font-size: clamp(20px, 6vw, 30px) !important;
        letter-spacing: 2px !important;
        line-height: 1.2 !important;
    }

    .defeat-title {
        font-size: clamp(20px, 6vw, 28px) !important;
        letter-spacing: 2px !important;
        line-height: 1.2 !important;
    }

    .end-panel-subtitle {
        font-size: 13.5px !important;
    }

    .end-panel-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .end-stat-row {
        padding: 8px 10px !important;
        gap: 3px !important;
    }

    .end-stat-value {
        font-size: 13px !important;
    }

    /* Stack reward cards vertically for clean mobile selection */
    .reward-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .reward-choice-card {
        padding: 12px 10px !important;
        min-height: 48px !important;
        border-radius: 12px !important;
        touch-action: manipulation !important;
    }

    .victory-stage-bonus-banner {
        flex-direction: column !important;
        padding: 12px !important;
        text-align: center !important;
        gap: 8px !important;
    }

    .stage-bonus-body {
        align-items: center !important;
    }

    .stage-bonus-calc-strip {
        justify-content: center !important;
    }

    .victory-btn,
    .defeat-btn {
        min-height: 48px !important;
        height: 50px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        touch-action: manipulation !important;
    }

    #defeat-frau {
        display: none !important; /* Hide background frau sprite to eliminate overlapping content */
    }

    .defeat-vignette {
        display: none !important;
    }

    /* ---------------------------------------------------------
       7. ADMIN SIDEBAR & OFF-CANVAS MOBILE DRAWER
       --------------------------------------------------------- */
    .admin-shell {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        flex-direction: column !important;
    }

    .admin-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: min(320px, 85vw) !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 1050 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.85) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .admin-sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    .admin-sidebar-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(5, 2, 12, 0.75) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 1040 !important;
        cursor: pointer !important;
    }

    .admin-sidebar-close-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 10px !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 8px !important;
        color: #ffffff !important;
        cursor: pointer !important;
        margin-left: auto !important;
        touch-action: manipulation !important;
    }

    .admin-sidebar-close-btn:hover {
        background: rgba(239, 68, 68, 0.25) !important;
        border-color: #ef4444 !important;
    }

    .admin-mobile-menu-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 8px 14px !important;
        background: var(--theme-card-bg-subtle, rgba(20, 14, 34, 0.8)) !important;
        border: 1px solid var(--theme-border, rgba(139, 92, 246, 0.4)) !important;
        border-radius: 8px !important;
        color: var(--theme-text-title, #ffffff) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        flex-shrink: 0 !important;
    }

    .admin-mobile-menu-btn:hover {
        border-color: var(--theme-accent, #38bdf8) !important;
        box-shadow: 0 0 12px var(--theme-glow, rgba(14, 165, 233, 0.4)) !important;
    }

    .admin-workspace {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .admin-workspace-header {
        height: auto !important;
        min-height: 56px !important;
        padding: 10px 12px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .admin-workspace-header .header-left {
        flex: 1 1 200px !important;
        min-width: 0 !important;
    }

    .admin-page-title {
        font-size: clamp(16px, 4.5vw, 20px) !important;
        line-height: 1.2 !important;
    }

    .admin-page-subtitle {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
    }

    .admin-workspace-header .header-right {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .admin-header-pill-btn {
        min-height: 44px !important;
        padding: 8px 12px !important;
        touch-action: manipulation !important;
        font-size: 12.5px !important;
    }

    .admin-badge-faculty {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 6px 12px !important;
    }

    .admin-nav-item {
        min-height: 48px !important;
        padding: 10px 12px !important;
        touch-action: manipulation !important;
    }

    .admin-logout-btn {
        min-height: 44px !important;
        touch-action: manipulation !important;
    }

    /* ---------------------------------------------------------
       8. LEADERBOARD TABLE & HORIZONTAL SCROLL STRIP
       --------------------------------------------------------- */
    #leaderboard-screen {
        padding: 12px 10px 40px 10px !important;
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .lb-top-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
        width: 100% !important;
    }

    .lb-back-btn {
        grid-column: 1 !important;
        justify-self: start !important;
        min-height: 44px !important;
        padding: 8px 14px !important;
        touch-action: manipulation !important;
        width: auto !important;
    }

    .lb-nav-actions {
        grid-column: 2 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
    }

    .lb-refresh-btn {
        min-height: 44px !important;
        padding: 8px 14px !important;
        touch-action: manipulation !important;
        width: auto !important;
    }

    .lb-header-titles {
        grid-column: 1 / -1 !important;
        order: 3 !important;
        text-align: center !important;
        width: 100% !important;
        margin-top: 4px !important;
    }

    .lb-main-title {
        font-size: clamp(20px, 5.5vw, 26px) !important;
    }

    .lb-subtitle {
        font-size: 12px !important;
    }

    .lb-player-hero-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 14px 12px !important;
        box-sizing: border-box !important;
    }

    .lb-player-stats-strip {
        display: flex !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .lb-stat-pill {
        flex: 1 1 95px !important;
        min-width: 85px !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
    }

    .lb-stat-label {
        font-size: 11px !important;
        letter-spacing: 0.5px !important;
    }

    .lb-stat-val {
        font-size: clamp(13px, 3.6vw, 15px) !important;
        word-break: break-word !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }

    .lb-podium-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .podium-card {
        width: 100% !important;
        max-width: 360px !important;
        min-height: auto !important;
        padding: 14px 16px !important;
        box-sizing: border-box !important;
    }

    .podium-card.podium-first {
        order: 1 !important; /* Display Champion first on mobile vertically */
    }

    .podium-card.podium-second {
        order: 2 !important;
    }

    .podium-card.podium-third {
        order: 3 !important;
    }

    .podium-points-pill {
        font-size: clamp(11.5px, 3.2vw, 13px) !important;
        padding: 5px 12px !important;
        max-width: 100% !important;
        word-break: break-word !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Controls Bar & Horizontal Category Tabs Strip */
    .lb-controls-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
        width: 100% !important;
    }

    .lb-filter-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        overscroll-behavior-x: contain !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 5px !important;
        gap: 6px !important;
        border-radius: 12px !important;
    }

    .lb-filter-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .lb-filter-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        min-height: 44px !important;
        padding: 8px 14px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
    }

    .lb-search-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .lb-search-input {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    /* Leaderboard Table Container & Horizontal Scroll */
    .lb-table-card {
        width: 100% !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .lb-table-card div[style*="overflow-x"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        overscroll-behavior-x: contain !important;
        max-width: 100% !important;
        display: block !important;
    }

    .lb-table {
        min-width: 580px !important;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    /* Sticky Rank Column */
    .lb-table thead th:first-child,
    .lb-table td.lb-rank-cell {
        position: sticky !important;
        left: 0 !important;
        z-index: 5 !important;
        background: var(--theme-card-bg, #120e1c) !important;
        min-width: 54px !important;
        max-width: 60px !important;
        width: 56px !important;
        box-shadow: 2px 0 6px rgba(0, 0, 0, 0.45) !important;
    }

    .lb-table thead th:first-child {
        z-index: 6 !important;
        background: var(--theme-card-bg-subtle, #1a1428) !important;
    }

    .lb-table tr.current-user-row td.lb-rank-cell {
        background: rgba(124, 58, 237, 0.28) !important;
    }

    /* Sticky Student Hunter Column */
    .lb-table tr:not(.lb-partition-row) thead th:nth-child(2),
    .lb-table thead tr th:nth-child(2),
    .lb-table tr:not(.lb-partition-row) td:nth-child(2) {
        position: sticky !important;
        left: 56px !important;
        z-index: 5 !important;
        background: var(--theme-card-bg, #120e1c) !important;
        box-shadow: 3px 0 6px rgba(0, 0, 0, 0.4) !important;
        min-width: 150px !important;
        max-width: 200px !important;
    }

    .lb-table thead tr th:nth-child(2) {
        z-index: 6 !important;
        background: var(--theme-card-bg-subtle, #1a1428) !important;
    }

    .lb-table tr.current-user-row td:nth-child(2) {
        background: rgba(124, 58, 237, 0.28) !important;
    }

    .lb-table th,
    .lb-table td {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }

    .lb-hunter-cell {
        min-width: 0 !important;
        gap: 8px !important;
    }

    .lb-hunter-name,
    .lb-hunter-username {
        max-width: 140px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ---------------------------------------------------------
       9. ADMIN FORMS, QUESTION BANK & MODALS
       --------------------------------------------------------- */
    .questions-split-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .form-grid-2cols,
    .form-grid-3cols {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .question-form-panel,
    .question-bank-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 12px !important;
    }

    .question-form-body {
        padding: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .bank-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .bank-tier-tabs {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .tier-tab-btn {
        min-height: 44px !important;
        padding: 8px 12px !important;
        flex: 1 1 auto !important;
        text-align: center !important;
        touch-action: manipulation !important;
        font-size: 13px !important;
    }

    .bank-search-wrap,
    .search-input-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    .bank-search-input,
    .search-input-wrap input {
        width: 100% !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    /* Admin Modals */
    .admin-modal-dialog {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
        max-height: 92vh !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .admin-modal-header {
        padding: 12px 14px !important;
    }

    .admin-modal-body {
        padding: 12px 14px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .admin-modal-body input,
    .admin-modal-body select,
    .admin-modal-body textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }

    .admin-modal-footer {
        flex-direction: column-reverse !important;
        padding: 12px 14px !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .admin-modal-footer button {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
        text-align: center !important;
        touch-action: manipulation !important;
    }

    .admin-user-profile-card {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        padding: 14px !important;
        box-sizing: border-box !important;
    }

    .profile-inputs-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .profile-metrics-strip {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .profile-text-input {
        min-height: 44px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    .profile-form-actions {
        flex-direction: column-reverse !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .profile-action-btn {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
        text-align: center !important;
        touch-action: manipulation !important;
    }

    .admin-controls-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .filter-controls-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .admin-select {
        min-height: 44px !important;
        width: 100% !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    .admin-stats-deck {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .admin-stat-card {
        min-height: auto !important;
        padding: 12px !important;
    }

    /* ---------------------------------------------------------
       10. DFS TELEMETRY STATUS INDICATORS
       --------------------------------------------------------- */
    .dfs-telemetry-deck {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    .dfs-telemetry-card.active-node-card {
        grid-column: 1 / -1 !important;
    }

    .dfs-telemetry-card {
        min-height: auto !important;
        padding: 8px 10px !important;
    }

    .dfs-drawer-content {
        padding: 10px 12px !important;
    }

    .dfs-scenario-drawer {
        padding: 10px 12px !important;
    }

    /* ---------------------------------------------------------
       13. GLOBAL ACCESS BAR & THEME CONTROLS (<= 768px)
       --------------------------------------------------------- */
    .global-access-bar {
        position: relative !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 8px 10px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    .access-tools-left,
    .access-tools-right {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    .access-pill-btn {
        min-height: 44px !important;
        height: auto !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        touch-action: manipulation !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    .access-pill-btn.tp-pill {
        min-height: 44px !important;
        height: auto !important;
        padding: 6px 10px !important;
    }

    .lang-switch-box {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
    }

    .lang-btn {
        min-height: 44px !important;
        min-width: 38px !important;
        padding: 6px 8px !important;
        touch-action: manipulation !important;
    }

    #theme-selector-btn-text {
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #global-profile-name {
        max-width: 85px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Theme Customizer Modal */
    .theme-modal-container {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        padding: 16px 12px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .theme-modal-header {
        padding-bottom: 10px !important;
        margin-bottom: 12px !important;
        gap: 8px !important;
    }

    .theme-modal-title {
        font-size: clamp(17px, 5vw, 22px) !important;
    }

    .theme-modal-desc {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .theme-modal-close-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 22px !important;
        touch-action: manipulation !important;
        flex-shrink: 0 !important;
    }

    .theme-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    .theme-card {
        padding: 12px 14px !important;
        min-height: 48px !important;
        touch-action: manipulation !important;
        box-sizing: border-box !important;
    }

    .theme-modal-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        font-size: 11px !important;
    }

    /* ---------------------------------------------------------
       14. PYTHON CODEX & LESSON DETAIL VIEW (<= 768px)
       --------------------------------------------------------- */
    #codex-screen:not([style*="display: none"]):not([style*="display:none"]) {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        padding: 8px 8px 24px 8px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .codex-header {
        height: auto !important;
        min-height: 56px !important;
        padding: 8px 10px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .codex-header-titles {
        width: 100% !important;
        order: -1 !important;
        text-align: center !important;
        padding: 0 !important;
        margin-bottom: 2px !important;
    }

    .codex-title {
        font-size: clamp(14px, 4.5vw, 18px) !important;
        letter-spacing: 1px !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }

    .codex-subtitle {
        font-size: 10.5px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }

    .codex-back-btn {
        min-height: 44px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        touch-action: manipulation !important;
        flex-shrink: 0 !important;
    }

    .codex-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
    }

    .codex-search-box {
        width: 100% !important;
        max-width: 190px !important;
        min-height: 44px !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    #codex-search-input {
        font-size: 13px !important;
        min-height: 38px !important;
    }

    /* Single-Row Nowrap Horizontal Scroll Strip for Difficulty Tabs */
    .codex-tabs-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        overscroll-behavior-x: contain !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 44px !important;
        padding: 4px 2px !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        margin: 6px 0 !important;
    }

    .codex-tabs-bar::-webkit-scrollbar {
        display: none !important;
    }

    .codex-tab {
        flex: 0 0 auto !important;
        min-width: 78px !important;
        min-height: 44px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        touch-action: manipulation !important;
    }

    .codex-tab .tab-sub {
        display: none !important;
    }

    .codex-body {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .codex-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 250px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }

    .codex-memory-toggle-btn {
        min-height: 48px !important;
        padding: 8px 10px !important;
        touch-action: manipulation !important;
    }

    .codex-topic-list {
        max-height: 180px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .codex-topic-card {
        min-height: 48px !important;
        padding: 8px 10px !important;
        touch-action: manipulation !important;
    }

    .codex-content-area {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding: 12px 10px !important;
        box-sizing: border-box !important;
    }

    .lesson-hero-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px 10px !important;
    }

    .hero-sprite-frame {
        width: 56px !important;
        height: 56px !important;
    }

    .lesson-hero-title {
        font-size: clamp(16px, 4.5vw, 20px) !important;
    }

    .codex-memory-launch-banner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 10px !important;
        text-align: center !important;
    }

    .mem-launch-text {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 4px !important;
    }

    .codex-launch-game-btn {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
        text-align: center !important;
        touch-action: manipulation !important;
        font-size: 12px !important;
    }

    .lesson-prose {
        padding: 12px 10px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        word-break: break-word !important;
    }

    .lesson-code-block-wrap {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .code-block-header {
        padding: 8px 10px !important;
    }

    .codex-copy-code-btn {
        min-height: 38px !important;
        padding: 6px 12px !important;
        touch-action: manipulation !important;
    }

    /* Horizontal code scrolling for long lines without layout breaks */
    .lesson-code-pre {
        padding: 12px 10px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: pre !important;
        word-break: normal !important;
        box-sizing: border-box !important;
    }

    .lesson-takeaways-card {
        padding: 12px 10px !important;
    }

    .lesson-takeaways-list li {
        font-size: 13.5px !important;
    }

    /* ---------------------------------------------------------
       15. STUDY MODE MEMORY MATCH & MODALS (<= 768px)
       --------------------------------------------------------- */
    #codex-screen.memory-game-mode {
        overflow-y: auto !important;
    }

    #codex-screen.memory-game-mode .codex-content-area {
        height: auto !important;
        overflow-y: visible !important;
        padding: 8px !important;
    }

    .codex-mem-game-wrap {
        height: auto !important;
        overflow: visible !important;
        gap: 8px !important;
    }

    .codex-mem-topbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }

    .codex-mem-topbar-left {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .codex-mem-back-btn {
        min-height: 44px !important;
        touch-action: manipulation !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    .codex-mem-heading {
        display: none !important;
    }

    .codex-mem-stats-group {
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 6px !important;
    }

    .codex-mem-stat-chip {
        flex: 1 1 28% !important;
        min-height: 38px !important;
        justify-content: center !important;
        padding: 4px 6px !important;
    }

    .codex-mem-reset-btn {
        min-height: 44px !important;
        touch-action: manipulation !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    .codex-mem-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: none !important;
        grid-auto-rows: minmax(95px, auto) !important;
        gap: 8px !important;
        height: auto !important;
        overflow: visible !important;
        perspective: none !important;
    }

    .codex-mem-card {
        min-height: 95px !important;
        height: auto !important;
        touch-action: manipulation !important;
    }

    .codex-mem-card-back {
        min-height: 95px !important;
        padding: 8px !important;
    }

    .codex-mem-card-front {
        min-height: 95px !important;
        padding: 8px 6px !important;
    }

    .codex-mem-rune {
        font-size: 22px !important;
    }

    .codex-mem-brand {
        font-size: 11px !important;
    }

    .codex-mem-text {
        font-size: 12.5px !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 5 !important;
    }

    /* Memory Victory Modal */
    .memory-victory-modal-backdrop {
        padding: 12px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .memory-victory-card {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 18px 14px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .victory-trophy-anim {
        font-size: 40px !important;
        margin-bottom: 8px !important;
    }

    .victory-title {
        font-size: clamp(14px, 4.5vw, 17px) !important;
    }

    .victory-sub {
        font-size: 13px !important;
        margin-bottom: 14px !important;
    }

    .victory-stats-row {
        flex-direction: column !important;
        gap: 6px !important;
        margin-bottom: 18px !important;
    }

    .vic-stat {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 6px 10px !important;
        font-size: 12.5px !important;
    }

    .victory-actions {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .vic-btn {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 12px !important;
        touch-action: manipulation !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Codex Interactive Challenge Modal */
    #codex-interactive-modal .modal-dialog {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
    }

    #codex-interactive-modal .modal-header {
        padding: 10px 12px !important;
    }

    #codex-interactive-modal .modal-title {
        font-size: 15px !important;
    }

    #codex-interactive-modal .modal-body {
        padding: 12px 10px !important;
        max-height: 70vh !important;
    }

    #codex-interactive-modal .modal-footer {
        padding: 10px 12px !important;
    }

    #codex-interactive-modal .modal-footer button {
        min-height: 44px !important;
        width: 100% !important;
        touch-action: manipulation !important;
    }

    /* ---------------------------------------------------------
       16. GLOW REDUCTION & SHARED MOBILE POLISH (<= 768px)
       --------------------------------------------------------- */
    .victory-panel,
    .defeat-panel,
    .memory-victory-card,
    .codex-modal-content,
    .theme-modal-container {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85) !important;
    }

    .codex-title,
    .lb-main-title,
    .compiler-title {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
    }

    .auth-modal-overlay {
        padding: 12px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .tutorial-modal-card {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 18px 14px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .tutorial-title {
        font-size: clamp(20px, 6vw, 26px) !important;
    }

    .tutorial-steps-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .tutorial-gotit-btn {
        min-height: 48px !important;
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
        touch-action: manipulation !important;
    }

    /* ---------------------------------------------------------
       17. EXTENDED MOBILE SCREEN POLISH (<= 768px)
       --------------------------------------------------------- */
    /* Main Menu Mobile Layout */
    #main-menu {
        padding: 20px 14px 34px 14px !important;
        min-height: 100vh !important;
        height: auto !important;
        justify-content: flex-start !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #main-menu .menu-decoration {
        display: none !important; /* Hide fixed-width 590px desktop decoration box */
    }

    #main-menu h1 {
        font-size: clamp(20px, 6vw, 32px) !important;
        letter-spacing: 1px !important;
        margin-top: 10px !important;
        margin-bottom: 8px !important;
    }

    #main-menu h1::after {
        font-size: 11px !important;
        letter-spacing: 1.5px !important;
        margin-top: 6px !important;
    }

    #welcome-message {
        font-size: 14px !important;
        padding: 6px 16px !important;
        white-space: normal !important;
        max-width: 90% !important;
        margin-bottom: 16px !important;
        text-align: center !important;
    }

    .menu-buttons-deck {
        width: 100% !important;
        max-width: 360px !important;
        gap: 10px !important;
    }

    .menu-btn {
        min-height: 48px !important;
        font-size: 15px !important;
        padding: 10px 16px !important;
    }

    /* Trophy Collection Screen Mobile Layout */
    #collection-screen,
    .steam-collection-screen {
        padding: 14px 10px 36px 10px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .steam-top-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding-bottom: 10px !important;
        margin-bottom: 12px !important;
    }

    #collection-back-button,
    .steam-back-btn {
        min-height: 44px !important;
        align-self: flex-start !important;
        touch-action: manipulation !important;
        padding: 8px 14px !important;
    }

    .steam-main-title {
        font-size: clamp(18px, 5.5vw, 24px) !important;
    }

    .steam-overall-progress {
        max-width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .steam-bar-track {
        width: 100% !important;
    }

    .steam-filter-bar {
        gap: 6px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    .trophy-filter-btn {
        min-height: 38px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        touch-action: manipulation !important;
    }

    .filter-sep {
        display: none !important;
    }

    .tier-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .tier-progress-cluster {
        width: 100% !important;
        min-width: 0 !important;
    }

    .steam-achievements-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .steam-achieve-card {
        padding: 8px 10px !important;
        min-height: 64px !important;
    }

    /* Python Online Compiler Screen Mobile Layout */
    #compiler-screen:not([style*="display: none"]):not([style*="display:none"]) {
        padding: 8px 6px 20px 6px !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .compiler-header {
        height: auto !important;
        min-height: auto !important;
        padding: 8px 10px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    .compiler-back-btn {
        min-height: 44px !important;
        align-self: flex-start !important;
        font-size: 12px !important;
        touch-action: manipulation !important;
    }

    .compiler-header-center {
        text-align: center !important;
        width: 100% !important;
    }

    .compiler-title {
        font-size: clamp(16px, 4.5vw, 20px) !important;
    }

    .compiler-header-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .compiler-run-btn {
        flex: 1 1 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
        touch-action: manipulation !important;
        font-size: 14px !important;
    }

    .compiler-tool-btn {
        flex: 1 1 28% !important;
        min-height: 38px !important;
        justify-content: center !important;
        font-size: 11px !important;
        touch-action: manipulation !important;
        padding: 4px 8px !important;
    }

    .compiler-workspace {
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
        gap: 10px !important;
        flex: none !important;
    }

    .compiler-topics-pane {
        width: 100% !important;
        max-height: 240px !important;
        height: auto !important;
    }

    .compiler-editor-console-pane {
        width: 100% !important;
        height: auto !important;
    }

    .compiler-editor-panel {
        min-height: 220px !important;
    }

    .compiler-textarea {
        font-size: 13px !important;
        min-height: 180px !important;
    }

    /* User Profile Card Mobile Layout */
    .user-profile-card {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 16px 12px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .profile-card-header {
        margin-bottom: 14px !important;
        padding-bottom: 12px !important;
    }

    .profile-title {
        font-size: 18px !important;
    }

    .profile-metrics-strip {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 10px 8px !important;
    }

    .metric-label {
        font-size: 10.5px !important;
    }

    .metric-value {
        font-size: 12px !important;
    }

    /* About Screen Mobile Layout */
    #about-screen {
        padding: 12px 10px 40px 10px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .archive-nav-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .about-back-nav-btn {
        min-height: 44px !important;
        align-self: flex-start !important;
        touch-action: manipulation !important;
    }

    .about-card-container {
        padding: 16px 12px !important;
    }
}

/* ---------------------------------------------------------
   11. MEDIUM-SMALL MOBILE & TABLET PORTRAIT (<= 480px)
   --------------------------------------------------------- */
@media screen and (max-width: 480px) {
    .dfs-telemetry-deck {
        grid-template-columns: 1fr !important;
    }

    .dfs-telemetry-card.active-node-card {
        grid-column: auto !important;
    }

    .admin-stats-deck {
        grid-template-columns: 1fr !important;
    }

    .lb-table tr:not(.lb-partition-row) thead th:nth-child(2),
    .lb-table thead tr th:nth-child(2),
    .lb-table tr:not(.lb-partition-row) td:nth-child(2) {
        min-width: 130px !important;
        max-width: 160px !important;
    }
}

/* ---------------------------------------------------------
   12. EXTRA SMALL DEVICES (<= 380px, e.g. 344px - 360px phones)
   --------------------------------------------------------- */
@media screen and (max-width: 380px) {
    .diff-title-wrap h2 {
        font-size: 19px !important;
    }

    .card-title {
        font-size: 18px !important;
    }

    .end-panel-stats {
        grid-template-columns: 1fr !important;
    }

    .block-btn.block-btn-up,
    .block-btn.block-btn-down {
        min-width: 40px !important;
        min-height: 40px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .powerup-action-btn {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    /* Batch 3: 344px Extreme Narrow Screen Polish */
    .global-access-bar {
        padding: 6px 6px !important;
        gap: 6px !important;
    }

    .access-pill-btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    #theme-selector-btn-text {
        max-width: 80px !important;
    }

    #global-profile-name {
        max-width: 55px !important;
    }

    .theme-modal-container {
        width: 96vw !important;
        padding: 12px 8px !important;
    }

    .codex-tab {
        min-width: 68px !important;
        font-size: 11px !important;
        padding: 5px 6px !important;
    }

    .codex-mem-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .codex-mem-card {
        min-height: 90px !important;
    }

    .codex-mem-text {
        font-size: 11.5px !important;
    }

    .lesson-code-pre {
        font-size: 12px !important;
        padding: 10px 8px !important;
    }
}

/* ---------------------------------------------------------
   8. MOBILE LANDSCAPE ORIENTATION (max-width: 768px)
   --------------------------------------------------------- */
@media screen and (max-width: 768px) and (orientation: landscape) {
    #pokemon-battle-arena {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .pokemon-hud-card.enemy-card {
        width: 48% !important;
    }

    .pokemon-hud-card.player-card {
        width: 48% !important;
    }

    .pokemon-stage-wrap.enemy-stage {
        height: 90px !important;
        width: 48% !important;
    }

    .pokemon-challenge-terminal,
    #challenge-box {
        width: 100% !important;
    }

    .reward-cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}