/* Modern N-Back Training Styles - Main Menu Only */

:root {
    /* NEUE FARBPALETTE */
    --color-dark-blue: #193e4e;      /* Dunkelblau - Primary Dark */
    --color-medium-blue: #2b7483;    /* Mittelblau - Primary */
    --color-light-blue: #d7e9f2;     /* Hellblau - Light Text/Backgrounds */
    --color-muted-blue: #80b3ba;     /* Gedämpftes Blau - Secondary */
    --color-accent-blue: #16537e;    /* Akzentblau - Accent */

    /* Gradients mit neuer Palette */
    --primary-gradient: linear-gradient(135deg, #16537e 0%, #2b7483 100%);
    --secondary-gradient: linear-gradient(135deg, #2b7483 0%, #80b3ba 100%);
    --success-gradient: linear-gradient(135deg, #2b7483 0%, #80b3ba 100%);

    /* Warnungen und Hinweise UNVERÄNDERT */
    --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);

    /* Backgrounds mit neuer Palette */
    --bg-primary: #193e4e;
    --bg-secondary: #16537e;
    --bg-surface: #2b7483;
    --bg-card: rgba(128, 179, 186, 0.1);
    --bg-glass: rgba(215, 233, 242, 0.1);

    /* Text Farben */
    --text-primary: #d7e9f2;
    --text-secondary: #80b3ba;
    --text-muted: #2b7483;

    /* Borders & Shadows */
    --border-color: rgba(128, 179, 186, 0.3);
    --shadow-light: 0 4px 20px rgba(25, 62, 78, 0.2);
    --shadow-medium: 0 8px 40px rgba(25, 62, 78, 0.3);
    --shadow-heavy: 0 20px 60px rgba(25, 62, 78, 0.5);

    --border-radius: 12px;
    --border-radius-lg: 20px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Standard Quadrat-Farbe - wird durch Settings überschrieben */
    --square-color: #2b7483;

    /* ========== MOBILE PORTRAIT: Grid Positioning Variables ========== */
    /* Cross position (higher than desktop to make room for buttons) */
    --cross-x-mobile: 50%;
    --cross-y-mobile: 25%;  /* ⚠️ 25% instead of 50% - moved UP for button space */

    /* Square offsets from cross center (90px squares with 10px gaps) */
    /* Row 0 (Top) */
    --square-0-offset-x-mobile: -100px;  /* Top-Left */
    --square-0-offset-y-mobile: -100px;

    --square-1-offset-x-mobile: 0px;     /* Top-Center */
    --square-1-offset-y-mobile: -100px;

    --square-2-offset-x-mobile: 100px;   /* Top-Right */
    --square-2-offset-y-mobile: -100px;

    /* Row 1 (Middle) */
    --square-3-offset-x-mobile: -100px;  /* Middle-Left */
    --square-3-offset-y-mobile: 0px;

    --square-4-offset-x-mobile: 0px;     /* Middle-Center (same as cross) */
    --square-4-offset-y-mobile: 0px;

    --square-5-offset-x-mobile: 100px;   /* Middle-Right */
    --square-5-offset-y-mobile: 0px;

    /* Row 2 (Bottom) */
    --square-6-offset-x-mobile: -100px;  /* Bottom-Left */
    --square-6-offset-y-mobile: 100px;

    --square-7-offset-x-mobile: 0px;     /* Bottom-Center */
    --square-7-offset-y-mobile: 100px;

    --square-8-offset-x-mobile: 100px;   /* Bottom-Right */
    --square-8-offset-y-mobile: 100px;

    /* ========== DESKTOP: Grid Positioning Variables ========== */
    /* Cross position (center of screen) */
    --cross-x-desktop: 50%;
    --cross-y-desktop: 50%;

    /* Square offsets from cross center (200px squares) */
    /* Row 0 (Top) */
    --square-0-offset-x-desktop: -260px;  /* Top-Left */
    --square-0-offset-y-desktop: -180px;

    --square-1-offset-x-desktop: 0px;     /* Top-Center */
    --square-1-offset-y-desktop: -135px;

    --square-2-offset-x-desktop: 260px;   /* Top-Right */
    --square-2-offset-y-desktop: -180px;

    /* Row 1 (Middle) */
    --square-3-offset-x-desktop: -200px;  /* Middle-Left */
    --square-3-offset-y-desktop: 20px;

    --square-4-offset-x-desktop: 0px;     /* Middle-Center */
    --square-4-offset-y-desktop: 20px;

    --square-5-offset-x-desktop: 200px;   /* Middle-Right */
    --square-5-offset-y-desktop: 20px;

    /* Row 2 (Bottom) */
    --square-6-offset-x-desktop: -260px;  /* Bottom-Left */
    --square-6-offset-y-desktop: 220px;

    --square-7-offset-x-desktop: 0px;     /* Bottom-Center */
    --square-7-offset-y-desktop: 171px;

    --square-8-offset-x-desktop: 260px;   /* Bottom-Right */
    --square-8-offset-y-desktop: 220px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-primary);
    background-image: radial-gradient(circle at 20% 80%, rgba(43, 116, 131, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(128, 179, 186, 0.2) 0%, transparent 50%);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    color: var(--text-primary);
}

/* Settings Button - rechts oben */
.settings-btn {
    position: absolute;
    left: 50%;
    top: 10%;
    width: 50px;
    height: 50px;
    border: 2px solid var(--color-muted-blue);
    border-radius: 50%;
    background: var(--color-accent-blue);
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(22, 83, 126, 0.4);
    z-index: 1000;
    transition: all 0.3s ease;
}

.settings-btn:hover {
    background: var(--color-medium-blue);
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(43, 116, 131, 0.5);
}

/* ========== AD CONTAINER STYLES ========== */

.ad-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(43, 116, 131, 0.95);
    border: 2px solid #80b3ba;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(22, 83, 126, 0.5);
}

.ad-label {
    font-size: 10px;
    color: #80b3ba;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ad-leaderboard-bottom {
    /* ✅ FIX: Changed from fixed to relative to not block UI */
    position: relative;
    margin: 20px auto 0 auto;
    z-index: 10; /* Low z-index to stay behind interactive elements */
    width: auto;

    /* ✅ Optional: Uncomment to hide ad completely */
    /* display: none; */
}

.ad-medium-rectangle {
    width: 320px;
    margin: 20px auto;
}

.ad-large-rectangle {
    width: 356px;
    margin: 20px auto;
}

/* Responsive ads for mobile */
@media (max-width: 768px) {
    .ad-leaderboard {
        width: 100%;
        max-width: 320px;
    }

    .ad-leaderboard .adsbygoogle {
        width: 320px !important;
        height: 50px !important;
    }
}

/* ========== MAIN WINDOW STYLES (MODERNIZED) ========== */

.main-window {
    width: 100vw;
    height: 100vh;
    position: relative;
    backdrop-filter: blur(10px);
}

.title-bar {
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
}

.window-controls {
    display: flex;
    gap: 8px;
}

.control-btn {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: white;
    font-size: 10px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-btn:hover {
    transform: scale(1.1);
}

.minimize {
    background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
}
.maximize {
    background: linear-gradient(135deg, #55efc4, #00b894);
}
.close {
    background: linear-gradient(135deg, #fd79a8, #e84393);
}

.content-area {
    padding: 40px;
    height: calc(100vh - 40px);
    position: relative;
}

.labels-section {
    position: absolute;
    left: 24%;
    top: 10%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.input-section {
    position: absolute;
    left: 48%;
    top: 18%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.button-column {
    position: absolute;
    left: 5%;
    top: 10%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkboxes-section {
    position: absolute;
    left: 24%;
    top: 36%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-btn {
    width: 240px;
    height: 56px;
    background: var(--color-medium-blue);
    backdrop-filter: blur(20px);
    border: 2px solid var(--color-muted-blue);
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.main-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(215, 233, 242, 0.15), transparent);
    transition: left 0.5s;
}

.main-btn:hover::before {
    left: 100%;
}

.main-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(43, 116, 131, 0.4);
    background: var(--color-medium-blue);
    border-color: var(--color-light-blue);
}

.main-btn:active {
    transform: translateY(0);
    background: var(--color-dark-blue);
}

.main-btn:disabled {
    background: rgba(128, 179, 186, 0.2);
    color: var(--text-muted);
    border-color: rgba(128, 179, 186, 0.3);
    cursor: not-allowed;
    transform: none;
    opacity: 0.5;
}

.info-label {
    width: 320px;
    height: 40px;
    background: rgba(43, 116, 131, 0.3);
    backdrop-filter: blur(20px);
    border: 2px solid var(--color-muted-blue);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* ========== LOGIN SYSTEM STYLES (MODERNIZED) ========== */

.login-btn {
    background: var(--success-gradient);
    color: white;
    border: none;
}

.login-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 30px rgba(79, 172, 254, 0.3);
}

.logout-btn {
    background: var(--danger-gradient);
    color: white;
    border: none;
}

.logout-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 30px rgba(250, 112, 154, 0.3);
}

.login-modal {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
}

.login-modal.visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-content {
    background: var(--color-dark-blue);
    backdrop-filter: blur(30px);
    border: 2px solid var(--color-muted-blue);
    border-radius: var(--border-radius-lg);
    padding: 0;
    width: 450px;
    max-width: 90vw;
    box-shadow: var(--shadow-heavy);
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.login-header {
    background: var(--primary-gradient);
    color: white;
    padding: 30px 40px;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.login-form {
    padding: 40px;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 12px;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

.login-input {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid var(--color-muted-blue);
    border-radius: var(--border-radius);
    font-size: 16px;
    background: rgba(22, 83, 126, 0.3);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    transition: var(--transition);
    box-sizing: border-box;
}

.login-input:focus {
    outline: none;
    border-color: var(--color-light-blue);
    box-shadow: 0 0 0 3px rgba(43, 116, 131, 0.3);
    background: rgba(43, 116, 131, 0.4);
}

.login-input::placeholder {
    color: var(--text-muted);
}

.login-actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

.login-submit-btn,
.register-btn {
    flex: 1;
    padding: 16px 24px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.login-submit-btn {
    background: var(--primary-gradient);
    color: white;
}

.login-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.login-submit-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.register-btn {
    background: transparent;
    color: #667eea;
    border: 2px solid #667eea;
}

.register-btn:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
}

.login-status {
    margin-top: 20px;
    padding: 16px;
    border-radius: var(--border-radius);
    font-size: 14px;
    text-align: center;
    display: none;
    backdrop-filter: blur(10px);
}

.login-status.error {
    background: rgba(248, 113, 113, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, 0.3);
    display: block;
}

.login-status.success {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
    display: block;
}

.login-status.info {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
    display: block;
}

.info-label.user-status {
    background: var(--success-gradient);
    color: white;
    font-weight: 600;
}

.info-label.user-status.logged-out {
    background: rgba(107, 114, 128, 0.3);
    color: var(--text-secondary);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.input-field {
    width: 80px;
    height: 40px;
    text-align: center;
    border: 2px solid var(--color-muted-blue);
    border-radius: var(--border-radius);
    font-size: 14px;
    background: rgba(22, 83, 126, 0.3);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    transition: var(--transition);
}

.input-field:focus {
    outline: none;
    border-color: var(--color-light-blue);
    box-shadow: 0 0 0 3px rgba(43, 116, 131, 0.3);
    background: rgba(43, 116, 131, 0.4);
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--color-medium-blue);
    cursor: pointer;
}

.checkbox-label {
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}

.language-menu {
    position: absolute;
    right: 40px;
    top: 60px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    transition: var(--transition);
}

.language-menu:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-light);
}

.language-flags {
    position: absolute;
    right: 40px;
    top: 120px;
    display: none;
    flex-direction: column;
    gap: 8px;
}

.language-flags.visible {
    display: flex;
}

.flag-btn {
    width: 48px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: var(--transition);
    backdrop-filter: blur(10px);
}

.flag-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-light);
}

.version-info {
    position: absolute;
    bottom: 40px;
    right: 120px;
    font-size: 12px;
    color: var(--text-muted);
}

.user-file-path {
    position: absolute;
    left: 5%;
    bottom: 50%;
    width: 450px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ========== GOOGLE LOGIN STYLES (MODERNIZED) ========== */

.google-signin-container {
    margin-bottom: 24px;
}

.google-signin-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 20px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 500;
    color: #3c4043;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.google-signin-btn:hover {
    box-shadow: var(--shadow-light);
    transform: translateY(-1px);
}

.google-signin-btn:active {
    background-color: #f8f9fa;
    transform: translateY(0);
}

.google-signin-btn:disabled {
    background-color: #f8f9fa;
    color: #9aa0a6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.divider {
    position: relative;
    margin: 24px 0;
    text-align: center;
}

.divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
}

.divider span {
    background: var(--bg-surface);
    padding: 0 20px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin-left: 12px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-email {
    font-size: 14px;
    opacity: 0.9;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login-status.loading {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
    display: block;
}

.guest-btn {
    background: rgba(107, 114, 128, 0.3);
    color: white;
    border: 1px solid rgba(107, 114, 128, 0.5);
}

.guest-btn:hover {
    background: rgba(107, 114, 128, 0.5);
    transform: translateY(-2px);
}

/* ========== ORIGINAL TRAINING SCREEN STYLES (UNCHANGED) ========== */

.training-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    z-index: 1000;
}

.training-container.active {
    display: block;
}

/* Ad in Results Screen - special styling */
.results-display .ad-container {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #333333;
}

.results-display .ad-label {
    color: #888888;
}

/* ========== EXIT MODAL WITH AD ========== */

.exit-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exit-modal-content {
    background: var(--bg-primary);
    border: 2px solid var(--color-muted-blue);
    border-radius: var(--border-radius-lg);
    padding: 40px;
    max-width: 500px;
    text-align: center;
    box-shadow: var(--shadow-heavy);
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.exit-modal-content h2 {
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 28px;
}

.exit-modal-content p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 16px;
}

.exit-modal-close-btn {
    width: 100%;
    max-width: 300px;
    height: 50px;
    background: var(--color-accent-blue);
    border: 2px solid var(--color-muted-blue);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 20px;
}

.exit-modal-close-btn:hover {
    background: var(--color-medium-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(43, 116, 131, 0.4);
}

/* Manual Display (Java: manual) */
.manual-display {
    position: absolute;
    top: 30px;
    left: 20px;
    color: white;
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 5px;
    display: none;
}

.manual-text {
    line-height: 1.4;
    position: absolute;
    top: 30px;
    left: 20px;
    color: white;
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 5px;
    display: none;
    white-space: pre-line; /* Erhält Zeilenumbrüche */
    z-index: 2100; /* ✅ Above pause overlay (2000) for full visibility */
}

.manual-text.visible {
    display: block;
}

/* N-Back Level Display (Java: lbl_n_Back) */
.nback-display {
    position: absolute;
    top: 37%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    display: none;
}

.nback-display.visible {
    display: block;
}

.nback-text {
    font-size: 80px;
    color: #ffffff;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

/* Trial Results Display (Java: lbl_Results) */
.results-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    display: none;
    background-color: black;
    padding: 20px;
    border-radius: 10px;
}

.results-display.visible {
    display: block;
}

.results-text {
    font-size: 40px;
    color: #ffffff;
    line-height: 1.5;
    font-family: Arial, sans-serif;
}

/* Press Space Instructions (Java: lbl_PressSpace) */
.press-space-display {
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    display: none;
    z-index: 2100; /* ✅ Above pause overlay (2000) for full visibility */
}

.press-space-display.visible {
    display: block;
}

.press-space-text {
    font-size: 25px;
    color: #ffffff;
    font-family: Arial, sans-serif;
}

/* Training Info */
.training-info {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #ffffff;
    font-size: 14px;
    text-align: right;
}

/* Trial Progress Indicator (Java: passedTrialsInfoPane) */
.trial-progress {
    position: fixed; /* ✅ Changed from absolute - now a sibling of training-container */
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 400px;
    z-index: 3100; /* ✅ Above pause overlay (3000) - escapes training-container stacking context */
}

.trial-indicator {
    width: 20px;
    height: 13px;
    background-color: #555555;
    border: 1px solid #333333;
    border-radius: 2px;
}

.trial-indicator.current {
    background-color: #ff0000;
    border-color: #ffffff;
}

.trial-indicator.completed {
    background-color: #00ff00;
    border-color: #ffffff;
}

.trial-indicator.overtime {
    background-color: #0087ff;
    border-color: #ffffff;
}

.trial-indicator.duration-mode {
    background-color: transparent;
}

/* Training Area */
.training-area {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 660px;
    height: 500px;
}

.grid-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Fixation Cross (Java: cross) */
.fixation-cross {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.fixation-cross.visible {
    display: block;
}

.cross-horizontal {
    position: absolute;
    left: -7.5px;
    top: -1.25px;
    width: 15px;
    height: 2.5px;
    background-color: #ffffff;
}

.cross-vertical {
    position: absolute;
    left: -1.25px;
    top: -7.5px;
    width: 2.5px;
    height: 15px;
    background-color: #ffffff;
}

/* Center Rectangle for color-only mode */
.center-rect-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 206px;
    height: 206px;
    background-color: #1e1e1e;
    border: 2px solid #333333;
    display: none;
}

.center-rect {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: var(--square-color, #ffffff);
    left: 3px;
    top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 125px;
    color: #ffffff;
    font-weight: bold;
}

/* Grid Rectangles for position mode */
.grid-rect {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: var(--square-color, #ffffff);
    border: 3px solid #1e1e1e;
    display: none;
    cursor: pointer;
    transition: opacity 0.1s;
}

/* CSS Variable-based positions (customizable, matches Legacy - Kopie 31) */
.pos-0 {
    left: calc(var(--cross-x-desktop) + var(--square-0-offset-x-desktop) - 100px);
    top: calc(var(--cross-y-desktop) + var(--square-0-offset-y-desktop) - 100px);
}
.pos-1 {
    left: calc(var(--cross-x-desktop) + var(--square-1-offset-x-desktop) - 100px);
    top: calc(var(--cross-y-desktop) + var(--square-1-offset-y-desktop) - 100px);
}
.pos-2 {
    left: calc(var(--cross-x-desktop) + var(--square-2-offset-x-desktop) - 100px);
    top: calc(var(--cross-y-desktop) + var(--square-2-offset-y-desktop) - 100px);
}
.pos-3 {
    left: calc(var(--cross-x-desktop) + var(--square-3-offset-x-desktop) - 100px);
    top: calc(var(--cross-y-desktop) + var(--square-3-offset-y-desktop) - 100px);
}
.pos-4 {
    left: calc(var(--cross-x-desktop) + var(--square-4-offset-x-desktop) - 100px);
    top: calc(var(--cross-y-desktop) + var(--square-4-offset-y-desktop) - 100px);
}
.pos-5 {
    left: calc(var(--cross-x-desktop) + var(--square-5-offset-x-desktop) - 100px);
    top: calc(var(--cross-y-desktop) + var(--square-5-offset-y-desktop) - 100px);
}
.pos-6 {
    left: calc(var(--cross-x-desktop) + var(--square-6-offset-x-desktop) - 100px);
    top: calc(var(--cross-y-desktop) + var(--square-6-offset-y-desktop) - 100px);
}
.pos-7 {
    left: calc(var(--cross-x-desktop) + var(--square-7-offset-x-desktop) - 100px);
    top: calc(var(--cross-y-desktop) + var(--square-7-offset-y-desktop) - 100px);
}
.pos-8 {
    left: calc(var(--cross-x-desktop) + var(--square-8-offset-x-desktop) - 100px);
    top: calc(var(--cross-y-desktop) + var(--square-8-offset-y-desktop) - 100px);
}

/* Color classes */
.color-red {
    background-color: red !important;
}
.color-blue {
    background-color: blue !important;
}
.color-green {
    background-color: green !important;
}
.color-yellow {
    background-color: yellow !important;
}
.color-orange {
    background-color: orange !important;
}
.color-purple {
    background-color: purple !important;
}
.color-pink {
    background-color: pink !important;
}
.color-cyan {
    background-color: cyan !important;
}
.color-lime {
    background-color: lime !important;
}

.match-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 20;
}

/* Progress Bars (Java: progressBars) */
.progress-bars {
    position: absolute;
    bottom: 50px;
    left: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2100; /* ✅ Above pause overlay (2000) for full visibility */
}

.mode-progress-bar {
    height: 10px;
    background-color: #333;
    border-radius: 5px;
    position: relative;
    display: none;
}

.mode-progress-bar.visible {
    display: block;
}

.mode-progress-fill {
    height: 100%;
    border-radius: 5px;
    width: 0%;
    transition: width 0.3s;
}

.mode-progress-fill.audio {
    background-color: #28b463;
}
.mode-progress-fill.position {
    background-color: #2e86c1;
}
.mode-progress-fill.color {
    background-color: #e74c3c;
}

.mode-progress-label {
    position: absolute;
    left: 5px;
    top: -2px;
    font-size: 12px;
    color: white;
}

/* Main Progress Bar */
.progress-bar {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    height: 10px;
    background-color: #333;
    border-radius: 5px;
    display: block;
}

.progress-fill {
    height: 100%;
    background-color: #4caf50;
    border-radius: 5px;
    width: 0%;
    transition: width 0.3s;
}

/* ========== PAUSE OVERLAY (Java: ESC Menu) ========== */

.pause-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 3000; /* ✅ FIX: Higher than press-space-display (2100) to catch clicks */
    cursor: default;
}

.pause-overlay.visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pause-content {
    position: absolute;
    top: 37%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    color: white;
}

.pause-label {
    font-size: 40px;
    font-family: Arial, sans-serif;
    margin-bottom: 30px;
    color: whitesmoke;
}

.pause-nback-info {
    font-size: 80px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    margin-bottom: 20px;
    color: whitesmoke;
}

.pause-instructions {
    font-size: 30px;
    font-family: Arial, sans-serif;
    margin-bottom: 30px;
    color: whitesmoke;
}

.exit-button {
    width: 100px;
    height: 30px;
    background-color: darkred;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

.exit-button:hover {
    background-color: #8b0000;
}

/* ========== COUNTDOWN OVERLAY ========== */

.countdown-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 2500;
    cursor: default;
}

.countdown-overlay.visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

.countdown-content {
    text-align: center;
}

.countdown-number {
    font-size: 120px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #4CAF50;
    animation: countdownPulse 1s ease-in-out;
}

@keyframes countdownPulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========== DEBUG INFO ========== */

.debug-info {
    position: absolute;
    bottom: 100px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.4;
}

.debug-info div {
    margin-bottom: 5px;
}

/* ========== RESPONSIVE DESIGN (MAIN MENU ONLY) ========== */

@media (max-width: 1024px) {
    .content-area {
        padding: 30px;
    }

    .button-column {
        left: 3%;
    }

    .main-btn {
        width: 220px;
        height: 52px;
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .content-area {
        padding: 20px;
    }

    .button-column {
        left: 2%;
        top: 8%;
    }

    .main-btn {
        width: 200px;
        height: 48px;
        font-size: 14px;
    }

    .info-label {
        width: 280px;
        height: 36px;
        font-size: 13px;
    }

    .login-content {
        margin: 20px;
        width: calc(100vw - 40px);
    }

    .login-form {
        padding: 30px;
    }

    .language-menu {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .flag-btn {
        width: 44px;
        height: 28px;
    }

    /* Training styles remain unchanged on mobile */
    .nback-text {
        font-size: 60px;
    }

    .results-text {
        font-size: 28px;
    }

    .press-space-text {
        font-size: 18px;
    }

    .training-area {
        width: 90vw;
        height: 70vh;
    }

    .grid-rect,
    .center-rect {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .title-bar {
        height: 36px;
        padding: 0 15px;
    }

    .control-btn {
        width: 14px;
        height: 14px;
        font-size: 9px;
    }

    .content-area {
        padding: 15px;
        height: calc(100vh - 36px);
    }

    .button-column {
        gap: 12px;
    }

    .main-btn {
        width: 180px;
        height: 44px;
        font-size: 13px;
    }

    .info-label {
        width: 250px;
        height: 32px;
        font-size: 12px;
    }

    .login-content {
        margin: 15px;
        width: calc(100vw - 30px);
    }

    .login-header {
        padding: 25px 30px;
    }

    .login-header h2 {
        font-size: 20px;
    }

    .login-form {
        padding: 25px;
    }

    .google-signin-btn {
        font-size: 14px;
        padding: 14px 18px;
        gap: 12px;
    }

    .login-input {
        padding: 14px 18px;
        font-size: 15px;
    }

    .login-submit-btn,
    .register-btn {
        padding: 14px 20px;
        font-size: 15px;
    }
}

/* ========== UTILITY CLASSES ========== */

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-out {
    animation: fadeOut 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* ========== CUSTOM SCROLLBAR (MAIN MENU ONLY) ========== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2, #667eea);
}

/* ========== SELECTION STYLES ========== */

::selection {
    background: rgba(102, 126, 234, 0.3);
    color: var(--text-primary);
}

::-moz-selection {
    background: rgba(102, 126, 234, 0.3);
    color: var(--text-primary);
}

/* ========== FOCUS STYLES (MAIN MENU ONLY) ========== */

*:focus {
    outline: 2px solid rgba(102, 126, 234, 0.5);
    outline-offset: 2px;
}

button:focus,
.main-btn:focus,
.login-btn:focus,
.logout-btn:focus,
.guest-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

/* ========== ACCESSIBILITY IMPROVEMENTS ========== */

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

@media (prefers-color-scheme: light) {
    :root {
        --bg-primary: #f8fafc;
        --bg-secondary: #f1f5f9;
        --bg-surface: #ffffff;
        --bg-card: rgba(0, 0, 0, 0.05);
        --bg-glass: rgba(0, 0, 0, 0.1);

        --text-primary: #1e293b;
        --text-secondary: #475569;
        --text-muted: #64748b;

        --border-color: rgba(0, 0, 0, 0.15);
    }

    body {
        background: var(--bg-primary);
        background-image: radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(240, 147, 251, 0.08) 0%, transparent 50%);
    }
}

/* ========== FULLSCREEN ENFORCEMENT PROMPT ========== */
.fullscreen-prompt {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 3000; /* Above everything */
    justify-content: center;
    align-items: center;
}

.fullscreen-prompt.visible {
    display: flex;
}

.fullscreen-prompt-content {
    text-align: center;
    color: white;
}

.fullscreen-prompt-icon {
    font-size: 120px;
    margin-bottom: 30px;
}

.fullscreen-prompt-text {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 15px;
}

.fullscreen-prompt-subtext {
    font-size: 18px;
    color: #aaa;
}

/* ========== FOCUS ENFORCEMENT PROMPT ========== */
.focus-prompt {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 2500; /* Below fullscreen prompt (3000), above pause (2000) */
    justify-content: center;
    align-items: center;
    cursor: default;
}

.focus-prompt.visible {
    display: flex;
}

.focus-prompt-content {
    text-align: center;
    color: white;
}

.focus-prompt-icon {
    font-size: 100px;
    margin-bottom: 20px;
}

.focus-prompt-text {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
}

.focus-prompt-subtext {
    font-size: 16px;
    color: #aaa;
}

/* ========== PAUSE SCREEN BUTTONS (CENTERED, LARGE) ========== */

.pause-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.pause-continue-button,
.pause-exit-button {
    width: 200px;
    height: 60px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: all 0.3s ease;
}

.pause-continue-button {
    background-color: #4CAF50;
    color: white;
}

.pause-continue-button:hover {
    background-color: #45a049;
    transform: scale(1.05);
}

.pause-exit-button {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: white;
}

.pause-exit-button:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    transform: scale(1.05);
}

/* ✅ Hide large desktop pause exit button on mobile */
@media (max-width: 1366px) {
    .pause-exit-button {
        display: none !important;
    }
}

/* ========== ANDROID-STYLE CONTROL BUTTONS (MOBILE ONLY) ========== */

/* Desktop: VERSTECKT (wie Legacy) */
.training-controls-android {
    display: none !important;
}

/* Mobile: SICHTBAR (nur ≤ 768px) */
@media (max-width: 768px) {
    .training-controls-android {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        gap: 8px;  /* Space between Color and Position/Audio rows */
        z-index: 5000;  /* ✅ Above unified overlay (3000) so buttons clickable during pause */
        width: 90vw;
        max-width: 400px;
        pointer-events: auto !important; /* ✅ FIX: Ensure buttons are clickable */
    }

    .android-btn-row {
        display: flex;
        gap: 10px;
    }

    .android-btn {
        /* ✅ ANDROID COLORS from colors.xml */
        background-color: rgba(198, 198, 198, 0.5);  /* #80C6C6C6 - Default Gray */
        border: 1px solid rgba(174, 174, 174, 0.5);  /* #80AEAEAE */
        color: #7C7A7A;  /* buttonTextColor - Dark Gray Text */
        border-radius: 3px;  /* Android corner radius */
        font-family: Arial, sans-serif;
        font-weight: bold;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.15s ease;
        padding: 10px;
        pointer-events: auto !important; /* ✅ FIX: Buttons must always be clickable */
    }

    .android-btn:active {
        /* ✅ ANDROID PRESSED STATE */
        background-color: rgba(205, 205, 205, 0.5);  /* #80CDCDCD */
        border-color: rgba(205, 205, 205, 0.2);      /* #34CDCDCD */
        color: rgba(214, 220, 220, 0.5);             /* #80D6DCDC */
        transform: scale(0.98);
    }

    .android-btn:disabled,
    .android-btn.disabled {
        /* ✅ ANDROID DISABLED STATE */
        background-color: rgba(198, 198, 198, 0.38); /* #61C6C6C6 */
        border-color: rgba(174, 174, 174, 0.5);      /* #80AEAEAE */
        color: rgba(159, 166, 166, 0.48);            /* #7A9FA6A6 */
        cursor: not-allowed;
        opacity: 0.3;  /* 30% dimmed for inactive modes */
        pointer-events: auto !important; /* ✅ FIX: Even disabled buttons should be clickable (for INTERRUPTION/RESULTS screens) */
    }

    .android-btn-color {
        width: 100%;      /* Volle Breite */
        height: 80px;     /* ~80% von 101dp */
    }

    .android-btn-position,
    .android-btn-audio {
        flex: 1;          /* Je 50% Breite (nebeneinander) */
        height: 110px;    /* ~78% von 140dp */
        font-size: 14px;
    }
}

/* ========== MOBILE PORTRAIT: Grid Positioning (≤768px Portrait) ========== */
/* Moves grid UP to make room for Android buttons at bottom */
@media (max-width: 768px) and (orientation: portrait) {
    /* ✅ MOBILE: Training area dimensions */
    .training-area {
        width: 90vw;
        height: 70vh;
    }

    /* ✅ MOBILE: 90px squares (scaled down from desktop 115px) */
    .grid-rect,
    .center-rect {
        width: 90px;
        height: 90px;
    }

    /* ✅ MOBILE: Fixation cross uses mobile position (25% from top) */
    .fixation-cross {
        left: var(--cross-x-mobile);
        top: var(--cross-y-mobile);
    }

    /* ✅ MOBILE: CSS Variable-based square positions */
    /* Formula: square-left = cross-x-mobile + offset-x-mobile - 45px (half of 90px) */
    /* Formula: square-top = cross-y-mobile + offset-y-mobile - 45px (half of 90px) */

    .pos-0 {
        left: calc(var(--cross-x-mobile) + var(--square-0-offset-x-mobile) - 45px);
        top: calc(var(--cross-y-mobile) + var(--square-0-offset-y-mobile) - 45px);
    }
    .pos-1 {
        left: calc(var(--cross-x-mobile) + var(--square-1-offset-x-mobile) - 45px);
        top: calc(var(--cross-y-mobile) + var(--square-1-offset-y-mobile) - 45px);
    }
    .pos-2 {
        left: calc(var(--cross-x-mobile) + var(--square-2-offset-x-mobile) - 45px);
        top: calc(var(--cross-y-mobile) + var(--square-2-offset-y-mobile) - 45px);
    }
    .pos-3 {
        left: calc(var(--cross-x-mobile) + var(--square-3-offset-x-mobile) - 45px);
        top: calc(var(--cross-y-mobile) + var(--square-3-offset-y-mobile) - 45px);
    }
    .pos-4 {
        left: calc(var(--cross-x-mobile) + var(--square-4-offset-x-mobile) - 45px);
        top: calc(var(--cross-y-mobile) + var(--square-4-offset-y-mobile) - 45px);
    }
    .pos-5 {
        left: calc(var(--cross-x-mobile) + var(--square-5-offset-x-mobile) - 45px);
        top: calc(var(--cross-y-mobile) + var(--square-5-offset-y-mobile) - 45px);
    }
    .pos-6 {
        left: calc(var(--cross-x-mobile) + var(--square-6-offset-x-mobile) - 45px);
        top: calc(var(--cross-y-mobile) + var(--square-6-offset-y-mobile) - 45px);
    }
    .pos-7 {
        left: calc(var(--cross-x-mobile) + var(--square-7-offset-x-mobile) - 45px);
        top: calc(var(--cross-y-mobile) + var(--square-7-offset-y-mobile) - 45px);
    }
    .pos-8 {
        left: calc(var(--cross-x-mobile) + var(--square-8-offset-x-mobile) - 45px);
        top: calc(var(--cross-y-mobile) + var(--square-8-offset-y-mobile) - 45px);
    }
}

/* ========== SIMPLE MOBILE CONTROL BUTTONS ========== */
/* Positioned directly above trial indicators */

.simple-mobile-buttons {
    position: fixed !important;
    bottom: 50px !important; /* Directly above trial indicators (at bottom: 8px) */
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: none !important; /* Controlled by JavaScript */
    flex-direction: row !important;
    gap: 10px !important;
    width: 90% !important;
    max-width: 400px !important;
    z-index: 5100 !important; /* Above everything */
    pointer-events: auto !important;
}

.simple-btn {
    flex: 1 !important;
    height: 48px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.15s ease !important;
}

.simple-btn-fullscreen {
    background: linear-gradient(135deg, #4CAF50, #45a049) !important;
    color: white !important;
}

.simple-btn-fullscreen:active {
    background: linear-gradient(135deg, #45a049, #3d8b40) !important;
}

.simple-btn-exit {
    background: linear-gradient(135deg, #f44336, #da190b) !important;
    color: white !important;
}

.simple-btn-exit:active {
    background: linear-gradient(135deg, #da190b, #c41808) !important;
}

.simple-btn-continue {
    background: linear-gradient(135deg, #2196F3, #0b7dda) !important;
    color: white !important;
}

.simple-btn-continue:active {
    background: linear-gradient(135deg, #0b7dda, #0a6bc4) !important;
}

/* Mobile Landscape adjustments */
@media (max-width: 1366px) and (orientation: landscape) {
    .simple-mobile-buttons {
        bottom: 50px !important;
    }
}

/* Mobile Portrait adjustments */
@media (max-width: 768px) and (orientation: portrait) {
    .simple-mobile-buttons {
        bottom: 70px !important; /* Higher on portrait to avoid training controls */
    }
}