@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --bg-color: #faf5ff;       /* Purple 50 */
    --card-bg: #ffffff;
    --text-primary: #4c1d95;   /* Purple 900 (Lighter than 950) */
    --text-secondary: #7e22ce; /* Purple 700 */
    --accent-color: #7c3aed;   /* Violet 600 */
    --accent-hover: #6d28d9;   /* Violet 700 */
    --accent-light: #ddd6fe;   /* Violet 200 */
    --accent-subtle: #f5f3ff;  /* Violet 50 */
    
    --border-color: #e9d5ff;   /* Purple 200 */
    
    --shadow-sm: 0 1px 2px 0 rgba(124, 58, 237, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(124, 58, 237, 0.1), 0 2px 4px -1px rgba(124, 58, 237, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(124, 58, 237, 0.15), 0 4px 6px -2px rgba(124, 58, 237, 0.1);
    
    --font-family: 'Space Mono', monospace;
}

* {
    box-sizing: border-box; 
    font-family: var(--font-family);
}

::selection {
    background: var(--accent-color);
    color: var(--accent-light);
}

body {
    margin: 0;
    padding: 0.5rem;
    background-color: var(--bg-color);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

/* .fixed-background removed */

.app-container {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Header */
header {
    text-align: center;
    margin-bottom: 0.5rem;
}

h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--text-secondary), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.highlight {
    color: var(--accent-color);
    -webkit-text-fill-color: var(--accent-color);
}

.subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Views Management */
.view {
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.view.active {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

/* Menu Grid */
.stats-overview {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.score-pill {
    background: var(--card-bg);
    padding: 0.35rem 1rem;
    border-radius: 99px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.9rem;
}

.score-pill .label {
    text-transform: none; /* User requested sentence case/first word only */
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    margin-right: 0.5rem;
}
.score-pill .label::first-letter {
    text-transform: uppercase;
}

.score-pill .value {
    font-weight: 700;
    color: var(--text-primary);
}

.mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.mode-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.mode-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-color);
}

.mode-card:active {
    transform: translateY(-1px);
}

.mode-card .icon {
    font-size: 2rem;
    margin-bottom: 0.25rem;
    color: var(--accent-color);
}

.mode-card h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.mode-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.3;
}

.mode-card.special {
    background: linear-gradient(135deg, var(--accent-color), var(--text-secondary));
    border: none;
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 2rem;
}

.mode-card.special * {
    color: white !important;
    margin: 0;
}

.mode-card.special:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    filter: brightness(1.1);
}

.mode-card.special .special-text-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centered in portrait */
    text-align: center;
}

@media (orientation: landscape) {
    .mode-card.special .special-text-group {
        flex-direction: row;
        align-items: baseline;
        gap: 0.75rem;
    }
    .mode-card.special p {
        /* Adjust for baseline alignment */
        font-size: 0.9rem;
        opacity: 0.9;
        font-weight: 500;
    }
}

.footer-actions {
    text-align: center;
    margin-top: 1rem;
}

.text-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    font-weight: 600;
}

.text-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: var(--card-bg);
}

/* Quiz Interface */
.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
    position: relative; /* Context for absolute centering if needed, but flex handles centered element well if we use spacer */
}

.points-animation {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-color);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    text-shadow: 0 2px 4px rgba(255,255,255,0.8);
}

.points-animation.active {
    animation: floatPoints 1.5s ease-out forwards;
}

@keyframes floatPoints {
    0% { transform: translate(-50%, -10%) scale(0.5); opacity: 0; }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    80% { opacity: 1; transform: translate(-50%, -80%); }
    100% { transform: translate(-50%, -120%); opacity: 0; }
}

.back-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s;
}

.back-btn:hover {
    color: var(--accent-color);
}

.streak-badge {
    background: var(--accent-subtle);
    color: var(--accent-color);
    padding: 0.35rem 1rem;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.95rem;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.progress-indicator {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#quiz-mode-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-right: 0;
    margin-bottom: 0.4rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.05em;
}
#quiz-mode-label::first-letter {
    text-transform: uppercase;
}

.streak-badge .material-symbols-rounded {
    background: -webkit-linear-gradient(45deg, var(--accent-color), var(--text-secondary));
    -webkit-background-clip: text;
    background-clip: text; /* Standard property */
    -webkit-text-fill-color: transparent;
}

.quiz-content {
    background: var(--card-bg);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.question-text {
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

.interaction-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

/* Main Canvas */
canvas {
    border-radius: 1rem;
    background-color: #fff;
    border: 2px solid var(--border-color);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    touch-action: none;
    max-width: 100%;
    cursor: crosshair;
    transition: height 0.3s ease;
}

canvas.small-height {
    max-height: 300px; /* Increased from 250px */
    object-fit: contain;
}

/* Options Grid */
.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width: 100%;
}

.option-btn {
    background: white;
    border: 2px solid var(--border-color);
    padding: 1rem;
    border-radius: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.option-btn:hover {
    border-color: var(--accent-color);
    background-color: var(--accent-subtle);
}

.option-btn.selected {
    border-color: var(--accent-color);
    background-color: var(--accent-subtle);
    box-shadow: 0 0 0 2px var(--accent-color);
}

/* Purple Feedback */
.option-btn.correct {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    color: white;
}
.option-btn.correct canvas {
    border: 2px solid white;
}

/* Filled Option Logic for Pick Plot */
.option-btn.filled-plot {
    padding: 0;
    overflow: hidden;
    height: 180px; /* Fixed height for consistency */
    display: flex;
    align-items: center;
    justify-content: center;
}
.option-btn.filled-plot canvas {
    width: 100%;
    height: 100%;
    border-radius: 0; /* Let container handle radius */
    border: none;
    background: transparent;
}

/* Animations */
@keyframes fillPurple {
    0% { background-color: white; transform: scale(1); }
    50% { background-color: var(--accent-light); transform: scale(1.02); }
    100% { background-color: var(--accent-color); transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.option-btn { position: relative; } /* For absolute positioned icon */

.option-btn.animating {
    animation: fillPurple 0.2s ease-out forwards; /* Faster */
    border-color: var(--accent-color);
    color: white !important;
}

/* Hide content during animation */
.option-btn.animating > *:not(.option-status-icon) {
    opacity: 0;
    transition: opacity 0.1s;
}

/* For wrong-final, we might want to show text again?
   User said "hide text below" when X appears.
   Usually you want to see what the wrong answer was after.
   But let's stick to hiding it during animation. 
   If user wants it hidden permanently, I'll keep opacity 0.
   Let's toggle opacity back for final state unless it's the solid purple fill.
   Actually, .correct-final is white bg with purple border. Text should be purple.
   If I hide text, it's empty. That's weird.
   User said: "when x or check appear... hide the text below".
   Maybe they mean JUST during animation? Or permanently replaced by icon?
   Let's assume during animation. And maybe keep it hidden if the icon stays? 
   No, my logic removes the icon after animation!
   So text must come back.
   
   Wait, logic: 
   1. Animating (Fill Purple) -> Icon Appears. Text hidden.
   2. End Animation -> Icon Removed -> Final State. Text MUST be visible.
   
   Exception: User "make the check/cross animation a bit faster".
   
   So:
   .option-btn.animating > *:not(.option-status-icon) { opacity: 0; }
   
   That's it. When 'animating' class is removed, opacity grid-template-columns back to 1 (default).
*/
.option-btn.animating > *:not(.option-status-icon) {
    opacity: 0;
}

.option-status-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 3rem;
    color: white;
    z-index: 10;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* Faster */
}

.option-btn.show-icon .option-status-icon {
    transform: translate(-50%, -50%) scale(1);
}

/* Final States */
.option-btn.correct-final {
    background-color: white;
    /* Use same border-width as base (2px) to prevent layout shift */
    border: 2px solid var(--accent-color);
    /* Add external ring for emphasis instead of thickening border */
    box-shadow: 0 0 0 4px var(--accent-light);
    color: var(--accent-color);
}

.option-btn.wrong-final {
    background-color: var(--accent-subtle);
    border: 2px solid var(--text-secondary);
    color: var(--text-secondary);
    opacity: 1; /* Keep visible */
}

/* Overriding previous .correct/.wrong to minimal base styles if needed, 
   but logic in JS will handle class switching */

/* Feedback Area (Legacy/Hidden) */
.feedback-area { display: none; }

/* Feedback Popup */
.feedback-popup {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 95%; /* Wider */
    max-width: 500px; /* Wider max */
    z-index: 1000;
    animation: slideUpPopup 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpPopup {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.popup-content {
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: row; /* Default: Row */
    align-items: center;
    justify-content: center;
    gap: 1.5rem; /* Reduced gap */
    width: fit-content; /* Shrink wrap */
    max-width: 90vw;
    /* Ensure mobile centering with fixed pos */
    margin: 0 auto; 
}

/* Column Mode Modifier (for Draw Plot/Type Eq detailed feedback) */
.popup-content.column-mode {
    flex-direction: column;
    align-items: stretch; /* Full width items */
    gap: 0.5rem; /* Tighter vertical spacing */
    width: 90vw;
    max-width: 450px;
    padding: 1.25rem;
}

.popup-divider {
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    margin: 0.25rem 0; /* Minimal margin */
    display: none; /* Hidden by default */
}
.popup-content.column-mode .popup-divider {
    display: block;
}

/* Specific button row layout */
.popup-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.popup-content.column-mode .popup-actions {
    width: 100%;
    justify-content: space-between; /* Bin left, others right? Check JS logic */
}

.feedback-message {
    font-size: 1.1rem; /* Slightly smaller base */
    font-weight: 700;
    margin: 0;
    text-align: left;
    /* Allow HTML content like lists */
}

.feedback-details-list {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 500;
    list-style-type: disc;
    color: var(--text-primary);
}
.feedback-details-list li {
    margin-bottom: 0.25rem;
}

/* Only Purple Tones */
.feedback-message.success {
    color: var(--accent-color);
    font-size: 0.9rem;
}
.feedback-message.error {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.popup-actions {
    display: flex;
    gap: 0.5rem;
}

.next-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 99px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(124, 58, 237, 0.2);
    transition: transform 0.2s;
    white-space: nowrap;
}

.next-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

.retry-btn {
    background: transparent;
    color: var(--text-secondary); /* or danger color? */
    border: 2px solid var(--border-color);
    width: 44px; /* Slightly bigger */
    height: 44px;
    border-radius: 50%; /* Circle */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.retry-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: var(--accent-subtle);
}

@media (orientation: portrait) and (max-height: 900px) {
    #main-canvas:not(.small-height) {
        min-height: 400px; /* Taller on mobile portrait for drawing */
    }
}

/* Landscape Mobile protection */
@media (orientation: landscape) and (max-height: 600px) {
    #main-canvas {
        min-height: auto; /* Default or smaller */
        height: 70vh;
    }
}

.show-solution-btn {
    background: transparent;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    padding: 0.5rem 0.75rem;
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    margin-right: 0.5rem;
}
.show-solution-btn:hover {
    background: var(--accent-subtle);
}

.hidden { display: none !important; }

/* Mobile Tweaks */
@media (max-width: 600px) {
    h1 { font-size: 2rem; }
    .app-container { gap: 1rem; }
    .mode-grid { grid-template-columns: 1fr; }
    .options-grid { grid-template-columns: 1fr; }
    canvas { height: auto; }
}

/* Modern Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

code {
    font-family: 'Space Mono', monospace;
    color: var(--accent-color);
    font-weight: 700;
    /* Removed background/padding globally, will re-apply for question text only if needed? 
       No, user said "options... go back... simple text". 
       But "color the equation in the text purple" (previous request) -> I did that.
       User says "equation in the options... simple text".
    */
    background: transparent;
    padding: 0;
}

.question-text code {
    background: var(--accent-subtle);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    display: inline-block;
    margin-top: 0.75rem; /* Space between question and equation */
}

/* Animations */
@keyframes slideDownPopup {
    from { opacity: 1; transform: translate(-50%, 0); }
    to { opacity: 0; transform: translate(-50%, 20px); }
}

.feedback-popup.closing {
    animation: slideDownPopup 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Input Styles */
.equation-input {
    color: #a78bfa !important;
    border-color: var(--accent-color) !important;
    caret-color: #a78bfa;
}
.equation-input::placeholder {
    color: #a78bfa;
    opacity: 0.6;
}

.equation-input:focus {
    outline: none;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 4px var(--accent-light);
}