/* Mobile-first: Prevent pull-to-refresh and improve touch experience */
html {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
    width: 100%;
    height: 100%;
}

body {
    overscroll-behavior: none;
    width: 100%;
    min-height: 100%;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

/* Prevent text selection on touch */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow text selection in specific areas */
#question-math,
#explanation-text {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.debug-correct { 
    border: 2px dashed #facc15 !important; 
    position: relative; 
}

.debug-correct::after { 
    content: "✓ DEBUG"; 
    position: absolute; 
    top: -10px; 
    right: 10px; 
    background: #facc15; 
    color: black; 
    font-size: 9px; 
    padding: 2px 4px; 
    border-radius: 4px; 
    font-weight: bold; 
}

.fade-in { 
    animation: fadeIn 0.3s ease-out forwards; 
}

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

/* Floating Value Animation */
.float-up { 
    animation: floatUp 1s ease-out forwards; 
    color: #4ade80; 
}

.float-down { 
    animation: floatDown 1s ease-out forwards; 
    color: #f87171; 
}

@keyframes floatUp { 
    0% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(-20px); 
    } 
}

@keyframes floatDown { 
    0% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(20px); 
    }
}

/* Scroll indicator for answers below fold */
.scroll-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0;
    animation: scrollHint 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 50;
}

.scroll-indicator.visible {
    opacity: 1;
}

.scroll-indicator .chevron {
    width: 20px;
    height: 20px;
    border-right: 2px solid rgba(147, 197, 253, 0.6);
    border-bottom: 2px solid rgba(147, 197, 253, 0.6);
    transform: rotate(45deg);
}

.scroll-indicator .hint-text {
    font-size: 10px;
    color: rgba(147, 197, 253, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes scrollHint {
    0%, 100% { 
        opacity: 0.3;
        transform: translateX(-50%) translateY(0);
    }
    50% { 
        opacity: 0.8;
        transform: translateX(-50%) translateY(8px);
    }
}

/* Mobile UX Enhancements */
/* Ensure all interactive elements meet minimum touch target size (44x44px) */
button, 
.button, 
a.button,
input[type="button"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
    min-height: 44px;
    min-width: 44px;
}

/* Improve button spacing on mobile */
@media (max-width: 640px) {
    button {
        padding: 12px 16px;
    }
    
    /* Ensure modal buttons are properly sized */
    .modal-button {
        min-height: 48px;
        font-size: 16px;
    }
    
    /* Improve touch feedback */
    button:active,
    .button:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }
    
    /* Larger font sizes for better readability */
    body {
        font-size: 16px;
    }
    
    /* Increase spacing between UI elements */
    #app {
        margin: 0;
        border-radius: 0;
        max-width: 100%;
        height: 100vh;
    }
    
    /* Better spacing for question area */
    .question-area {
        padding: 24px 16px;
    }
    
    /* Improve header icons spacing */
    .header-icons button {
        padding: 8px;
    }
}

/* Tablet breakpoint improvements */
@media (min-width: 641px) and (max-width: 1024px) {
    #app {
        max-width: 90%;
    }
    
    button {
        min-height: 48px;
    }
}

/* High contrast mode for better accessibility */
@media (prefers-contrast: high) {
    button {
        border: 2px solid currentColor;
    }
    
    #app {
        border-width: 3px;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Toast Notification */
.toast { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 100;
    animation: toastPop 0.8s ease-out forwards;
}

@keyframes toastPop { 
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.5); 
    } 
    50% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1.2); 
    }
    70% { 
        transform: translate(-50%, -50%) scale(0.95); 
    }
    100% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1); 
    } 
}

/* Confetti Particles */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    z-index: 99;
    pointer-events: none;
}

@keyframes confettiFall {
    0% { 
        transform: translateY(0) rotate(0deg); 
        opacity: 1; 
    }
    100% { 
        transform: translateY(100vh) rotate(720deg); 
        opacity: 0; 
    }
}

/* Floating Points to Score */
.float-to-score {
    position: fixed;
    font-size: 24px;
    font-weight: bold;
    color: #4ade80;
    z-index: 98;
    pointer-events: none;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Controlled height for explanation box on desktop */
@media (min-width: 768px) {
    .explanation-overlay {
        max-height: 120px;
        overflow-y: auto;
    }
}

/* Graph/Chart Container Styles */
.graph-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.5); /* gray-900 with transparency */
    border-radius: 0.5rem;
    margin: 0 auto;
    max-width: 100%;
}

.graph-container.visible {
    display: flex;
}

/* Single graph display */
.graph-container .single-graph {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* Multiple graphs in grid (for MC questions with graph choices) */
.graph-container .graph-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.graph-container .graph-choice {
    background: rgba(31, 41, 55, 0.8); /* gray-800 */
    border: 2px solid #374151; /* gray-700 */
    border-radius: 0.5rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.graph-container .graph-choice:hover {
    border-color: #60a5fa; /* blue-400 */
    background: rgba(31, 41, 55, 1);
}

.graph-container .graph-choice.selected {
    border-color: #3b82f6; /* blue-500 */
    background: rgba(59, 130, 246, 0.1);
}

.graph-container .graph-choice-label {
    text-align: center;
    color: #d1d5db; /* gray-300 */
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Graph canvas/svg containers */
.graph-container canvas,
.graph-container svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Responsive adjustments for mobile */
@media (max-width: 640px) {
    .graph-container .single-graph {
        max-width: 100%;
    }
    
    .graph-container .graph-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .graph-container canvas,
    .graph-container svg {
        max-height: 250px;
    }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
    .graph-container .graph-grid {
        max-width: 90%;
    }
}

/* Mobile Optimizations */
/* Note: 1920px breakpoint targets mobile, tablet, and standard desktop screens
   Only ultra-wide monitors (>1920px) get desktop-specific styling */
/* Increase touch target sizes for mobile (minimum 44x44px recommended) */
@media (max-width: 1920px) {
    /* Make buttons larger and more touch-friendly */
    button {
        min-height: 56px;
        padding: 12px 16px;
        font-size: 16px;
    }
    
    /* Reduce header padding on mobile for better space usage */
    .bg-gray-750.p-4 {
        padding: 0.75rem !important; /* 12px instead of 16px */
    }
    
    /* Reduce header text for better fit on mobile - was too large at 1.75rem */
    #level-display,
    #accuracy-display {
        font-size: 0.875rem !important; /* 14px - much more appropriate for mobile */
        line-height: 1.2 !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Reduce header label font size for proportion */
    .text-gray-400.text-\[10px\] {
        font-size: 0.625rem !important; /* 10px */
    }
    
    /* Reduce mode badge and indicator sizes */
    #mode-badge {
        font-size: 0.625rem !important; /* 10px instead of 12px */
        padding: 0.25rem 0.5rem !important;
    }
    
    #search-range {
        font-size: 0.5rem !important; /* 8px */
    }
    
    #streak-indicator {
        font-size: 0.625rem !important; /* 10px */
    }
    
    /* Ensure header columns don't overflow */
    .bg-gray-750 .flex.flex-col {
        min-width: 0; /* Allow flex items to shrink below content size */
    }
    
    /* Optimize question display for mobile */
    #question-math {
        font-size: 2rem !important;
        padding: 1rem;
        min-height: 8rem;
    }
    
    /* Make instruction text larger */
    #instruction-text {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Improve spacing in grid layouts */
    .grid {
        gap: 0.75rem !important;
    }
    
    /* Add spacing between explanation/question area and controls on mobile */
    #controls-learning {
        margin-top: 0.5rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Ensure explanation wrapper has adequate bottom padding on mobile */
    .explanation-wrapper {
        padding-bottom: 0.5rem !important;
    }
    
    /* Ensure MC options grid has proper spacing */
    #mc-options {
        margin-bottom: 0.5rem !important;
    }
    
    /* Ensure app fills viewport on mobile */
    #app {
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100vh;
        height: auto;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
    }
    
    body {
        padding: 0 !important;
        justify-content: flex-start !important;
    }
    
    /* Subtle navigation arrows - smaller and faded */
    #history-nav-left,
    #history-nav-right {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
        opacity: 0.2 !important;
        background: transparent !important;
        transition: opacity 0.2s ease, background 0.2s ease;
    }
    
    #history-nav-left:hover,
    #history-nav-right:hover {
        opacity: 0.6 !important;
        background: rgba(55, 65, 81, 0.5) !important;
    }
    
    /* Optimize calibration controls */
    #controls-calibration button {
        min-height: 88px;
        font-size: 1.125rem;
    }
    
    #controls-calibration button span:first-child {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }
    
    /* Make multiple choice options larger */
    #mc-options button {
        min-height: 64px;
        padding: 1rem;
        font-size: 1.125rem;
    }
    
    /* Improve stats button visibility */
    button[onclick="StatsModal.show()"] svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    
    /* Adjust modal for mobile */
    .modal-content {
        max-width: 95vw !important;
        max-height: 90vh !important;
    }
}

/* Desktop adjustments - keep centered layout */
@media (min-width: 1921px) {
    #app {
        max-width: 768px !important;
        width: auto !important;
        height: auto !important;
        min-height: auto;
    }
    
    body {
        justify-content: center !important;
        padding: 1rem !important;
    }
    
    button {
        min-height: 48px;
    }
}

/* Very small phones (below 360px width) */
@media (max-width: 360px) {
    #question-math {
        font-size: 1.5rem !important;
        min-height: 3rem !important;
    }
    
    #controls-calibration button {
        font-size: 0.875rem;
        min-height: 56px !important;
    }
    
    /* Further reduce header text on very small phones */
    #level-display,
    #accuracy-display {
        font-size: 0.75rem !important; /* 12px */
    }
    
    /* Reduce header padding even more */
    .bg-gray-750.p-4 {
        padding: 0.5rem !important; /* 8px */
    }
    
    /* Reduce mode badge further */
    #mode-badge {
        font-size: 0.5rem !important; /* 8px */
        padding: 0.125rem 0.375rem !important;
    }
    
    .question-area {
        min-height: 100px !important;
    }
}

/* Break Splash Screen Animations */
.animate-fade-in {
    animation: fadeInSplash 0.4s ease-out forwards;
}

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

.animate-scale-in {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* High resolution displays - prevent too small text */
@media (min-resolution: 2dppx) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Portrait orientation specific styles */
@media (orientation: portrait) and (max-width: 768px) {
    /* Optimize vertical space usage */
    #app {
        display: flex;
        flex-direction: column;
        height: auto !important;
        min-height: 100vh;
        overflow-y: visible;
    }
    
    .p-8 {
        padding: 1rem !important;
    }
    
    /* Reduce vertical padding where possible */
    #controls-learning {
        padding: 0.75rem !important;
        margin-top: 0.5rem !important;
    }
    
    /* Reduce question area min-height on mobile portrait */
    #question-math {
        min-height: 4rem !important;
        padding: 0.75rem 3.5rem !important;
    }
    
    /* Reduce instruction text margin */
    #instruction-text {
        margin-bottom: 0.75rem !important;
    }
    
    /* Reduce explanation box reserved space on mobile */
    .explanation-wrapper {
        min-height: 40px !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* Make calibration buttons more compact on mobile portrait */
    #controls-calibration button {
        min-height: 56px !important;
        max-height: 64px !important;
        padding: 6px 10px !important;
    }
    
    #controls-calibration button span:first-child {
        font-size: 0.9rem !important;
        margin-bottom: 0.2rem !important;
    }
    
    #controls-calibration button span:last-child {
        font-size: 0.5rem !important;
    }
    
    /* Reduce main area padding */
    .question-area {
        padding: 1rem !important;
        padding-bottom: 1.5rem !important;
        min-height: 120px !important;
    }
    
    /* Reduce MC button padding for better fit - increased for wrapping */
    #mc-options button {
        padding: 0.5rem 0.4rem !important;
        min-height: 60px !important;
    }
}

/* Landscape orientation on mobile */
@media (orientation: landscape) and (max-height: 500px) {
    #question-math {
        font-size: 1.5rem !important;
        min-height: 4rem !important;
    }
    
    #controls-calibration button {
        min-height: 64px;
    }
    
    .p-8 {
        padding: 1rem !important;
    }
}

/* Override MathJax italic font in answer buttons - use upright Roman font */
/* This ensures answer buttons display in normal upright text, not italic serif */
/* The unicode 𝑓 character itself is already italic, so we keep normal Roman font for everything else */

/* Fix for clickability: Make MathJax elements non-interactive so clicks pass through to button */
#mc-options button mjx-container,
#mc-options button mjx-container * {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Font style for MathJax elements in answer buttons */
#mc-options button mjx-container * {
    font-style: normal !important;
}

#mc-options button mjx-math * {
    font-style: normal !important;
}

/* Force upright font for MathJax variables (mi = math identifier) */
#mc-options button mjx-mi {
    font-style: normal !important;
    -webkit-text-stroke: 0 !important;
}

/* Target MathJax italic class specifically */
#mc-options button .mjx-i {
    font-style: normal !important;
}

#mc-options button mjx-container mjx-mi[class*="mjx-i"] {
    font-style: normal !important;
}

/* Override any inline styles MathJax might apply */
#mc-options button mjx-c {
    font-style: normal !important;
    /* Ensure proper vertical alignment to prevent clipping */
    vertical-align: baseline !important;
}

#mc-options button .MathJax * {
    font-style: normal !important;
}

/* Timeout Bar Animation */
#timeout-bar {
    height: 100%;
    transform-origin: top;
}

@keyframes shrinkBar {
    from {
        transform: scaleY(1);
    }
    to {
        transform: scaleY(0);
    }
}

.timeout-bar-shrinking {
    animation: shrinkBar 15s linear forwards;
}

/* MathJax Word Wrapping and Line Breaking Support */
/* Enable word wrapping and line breaking for MathJax content */
#question-math mjx-container,
#mc-options mjx-container {
    display: inline-block !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    overflow: visible !important; /* Ensure content is never clipped */
    box-sizing: border-box !important;
}

/*
Removed, not necessary in MathJax 4
/ * Allow MathJax content to wrap on mobile * /
#question-math mjx-container[display="true"] {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100% !important;
} */

/* Ensure MathJax math elements can break */
#question-math mjx-math,
#mc-options mjx-math {
    display: inline-block !important;
    max-width: 100% !important;
    overflow: visible !important; /* Prevent clipping of math content */
}

/* Support for line breaks in display mode */
#question-math {
    overflow-wrap: break-word;
    white-space: normal !important;
}

/* Make answer buttons wrap text properly with reduced padding */
#mc-options button {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important; /* Enable automatic hyphenation for long words */
    text-align: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: center !important; /* Center content vertically when wrapping */
    justify-content: center !important;
    padding: 0.6rem 0.4rem !important;
    min-height: 60px !important;
    height: auto !important;
    max-height: none !important; /* Ensure buttons can grow as needed */
    line-height: 1.4 !important; /* Increased from 1.3 for better readability */
    overflow: visible !important; /* Never clip button content */
    box-sizing: border-box !important;
}

/* Ensure wrapped content in buttons is properly spaced */
#mc-options button mjx-container {
    margin: 0.25rem !important;
    display: inline-block !important;
    max-width: 100% !important;
    width: 100% !important; /* Force container to use full width for better wrapping */
    box-sizing: border-box !important;
    overflow: visible !important; /* Prevent clipping */
}

/* Add word spacing for plain text in buttons to make it readable */
#mc-options button mjx-container mjx-math {
    word-spacing: 0.2em !important;
    letter-spacing: 0.02em !important;
    margin: 0.15rem !important; /* Slightly reduced margin */
    overflow: visible !important; /* Ensure math never gets clipped */
}

/* Ensure MathJax text elements wrap properly and don't get clipped */
#mc-options button mjx-mtext {
    display: inline !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
    line-height: 1.4 !important;
}

/* Ensure plain text spans in buttons also wrap properly */
#mc-options button span {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Plain text answers extracted from \text{} - ensure proper wrapping */
#mc-options button .plain-text-answer {
    display: inline-block !important;
    max-width: 100% !important;
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    text-align: center !important;
    line-height: 1.4 !important;
    padding: 0.25rem 0 !important;
}

/* Mobile-specific MathJax improvements */
@media (max-width: 768px) {
    /* Reduce MathJax font size on mobile for better wrapping */
    #question-math mjx-container {
        font-size: 0.85em !important; /* Reduced from 0.9em for long questions */
        max-width: 100% !important;
    }
    
    #mc-options mjx-container {
        font-size: 1em !important; /* Increased to 1em for better readability */
    }
    
    /* Add spacing between wrapped lines */
    #question-math mjx-math {
        line-height: 1.4 !important; /* Reduced from 1.5 for more compact display */
    }
    
    #mc-options button mjx-math {
        line-height: 1.4 !important; /* Increased from 1.3 to match button line-height */
    }
    
    /* Further reduce button padding on mobile */
    #mc-options button {
        padding: 0.5rem 0.4rem !important;
    }
    
    /* Reduce question area vertical padding on mobile - use less padding to maximize space */
    #question-math {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        padding-left: 3.5rem !important;
        padding-right: 3.5rem !important;
        overflow-x: auto !important; /* Allow horizontal scroll for very wide formulas */
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    }
}

/* Very small screens - more aggressive scaling */
@media (max-width: 480px) {
    #question-math mjx-container {
        font-size: 0.75em !important; /* More aggressive reduction for small phones */
    }
    
    /* Maintain navigation button clearance on small screens */
    #question-math {
        padding-left: 3.5rem !important;
        padding-right: 3.5rem !important;
    }
    
    #mc-options mjx-container {
        font-size: 1em !important;
    }
}

/* Extra small screens (older iPhones, small Androids) */
@media (max-width: 360px) {
    #question-math mjx-container {
        font-size: 0.65em !important;
    }
    
    /* Maintain navigation button clearance even on very small screens */
    #question-math {
        padding-left: 3.5rem !important;
        padding-right: 3.5rem !important;
    }
}

/* Improve spacing between multiple display math blocks in questions */
#question-math mjx-container[display="true"] + mjx-container[display="true"] {
    margin-top: 0.75em !important;
}

/* Add proper line spacing for multi-line questions */
#question-math {
    line-height: 1.6 !important;
    /* Change from flex to block when containing multiple display blocks */
    display: block !important;
}

/* Ensure each MathJax display container is on its own line */
#question-math mjx-container[display="true"] {
    display: block !important;
    margin: 0.5em auto !important;
}

/* Reduce vertical margin in question container to compensate for taller buttons */
.question-area {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* Additional padding for mobile to prevent nav button overlap */
@media (max-width: 768px) {
    .question-area {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        overflow: visible !important; /* Ensure questions never get clipped */
    }
    
    /* Ensure question text has enough space on sides to avoid nav button overlap */
    #question-math {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        overflow-x: auto !important; /* Allow horizontal scroll for very wide formulas */
        max-width: 100% !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Scale down button text for very long answers */
#mc-options button mjx-container {
    font-size: 1em !important;
}

/* For very long button text, scale down slightly */
#mc-options button:has(mjx-container mjx-math[style*="width"]) mjx-container {
    font-size: 0.95em !important;
}

/* Container-level overflow prevention for answer grid */
#mc-options {
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure grid layout doesn't cause overflow */
#mc-options.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    overflow: visible !important;
}

/* Make sure answer button container has proper spacing */
#controls-learning {
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* Debug mode indicator positioning - override default absolute positioning margins */
#debug-mode-indicator {
    margin: 0;
}

button.absolute, 
.absolute {
    margin: 5px; /* Adjust the pixel value as needed */
}