/* Game Container */
#algebradrag-game-container {
    width: 100%;
    max-width: 450px;
    background-color: var(--card-bg); /* Use theme's card background */
    padding: 20px;
    border-radius: var(--radius); /* Use theme's border radius */
    box-shadow: var(--shadow); /* Use theme's shadow */
    /* Text color will be inherited from body based on theme */
}

/* Header */
#algebradrag-game-container h1 {
    /* Use a color derived from theme, e.g., a lighter primary or accent */
    color: var(--accent); /* Using accent color for headers */
    margin-bottom: 15px;
    font-size: 1.2em; /* Larger title */
    /* This color will adapt in light/dark mode based on the theme's --accent */
}

/* Level Label */
#algebradrag-puzzle-level-label {
    font-weight: bold;
    font-size: 0.9em; /* Adjusted size */
    margin-top: 5px;
    margin-bottom: 15px; /* Increased spacing */
    /* Use a color derived from theme, e.g., a brighter accent or a new variable */
    color: var(--accent); /* Using accent color */
    transition: transform 0.3s ease; /* Smooth transition */
}

/* Stats Bar */
#algebradrag-stats-bar {
    display: flex;
    justify-content: space-around;
    align-items: center; /* Vertically align items */
    margin-bottom: 15px; /* Increased spacing */
    background: var(--bg-tertiary); /* Use tertiary background for stats bar */
    padding: 5px;
    border-radius: 8px; /* Keep specific radius or use a variable */
    font-size: 0.75em; /* Slightly smaller font */
}
#algebradrag-stats-bar span {
    flex: 1; /* Distribute space evenly */
    text-align: center;
    color: var(--text-secondary); /* Use secondary text color */
}

/* Progress Bars (Badge & Streak) */
.algebradrag-progress-container {
    width: 100%;
    background: var(--bg-tertiary); /* Use tertiary background for progress track */
    border-radius: 10px; /* Keep specific radius or use a variable */
    overflow: hidden;
    height: 12px; /* Slightly thicker */
    margin-bottom: 20px; /* Increased spacing */
}

.algebradrag-progress-bar {
    width: 0%;
    height: 100%;
    transition: width 0.5s ease-out; /* Smoother transition */
    border-radius: 10px; /* Match container */
}

/* Using theme colors or derivatives for gradients */
#algebradrag-badge-progress-bar {
    /* Using theme primary and highlight, or katex gradient ends */
    background: linear-gradient(to right, var(--highlight), var(--primary));
}

#algebradrag-streak-progress-bar {
    /* These colors (green/cyan) are not in the primary theme palette.
       Consider adding specific variables if they are used elsewhere,
       or keep hardcoded if unique to this element, or derive from theme.
       Deriving from accent might be an option if you want them related.
       Let's try deriving from accent and a complementary color for correlation.
    */
    background: linear-gradient(to right,
        color-mix(in srgb, var(--accent) 80%, green 20%), /* Mix accent with green */
        var(--accent) /* Use accent color */
    );
    /* Alternative: Define specific game variables if these colors are important */
    /* background: linear-gradient(to right, var(--game-streak-start), var(--game-streak-end)); */
}

/* Puzzle Steps */
#algebradrag-puzzle-steps {
    background: var(--bg-tertiary); /* Use tertiary background for steps container */
    padding: 15px;
    border-radius: 8px; /* Keep specific radius or use a variable */
    margin-bottom: 20px; /* Spacing below steps */
    min-height: 100px; /* Ensure drop zone has height */
}

.algebradrag-puzzle-step {
    background: var(--bg-secondary); /* Use secondary background for individual steps */
    margin: 8px 0; /* Vertical spacing only */
    padding: 12px 15px; /* More padding */
    border-radius: 6px; /* Keep specific radius or use a variable */
    cursor: grab; /* Indicate draggable */
    border: 1px solid var(--text-secondary); /* Use secondary text color for subtle border */
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    color: var(--text-primary); /* Ensure text is primary text color */
    text-align: left; /* Align math steps left */
    display: flex;
    align-items: center;
}

.algebradrag-puzzle-step:hover {
     background-color: var(--bg-tertiary); /* Use tertiary background on hover */
}

.algebradrag-puzzle-step.algebradrag-dragging {
    opacity: 0.6;
    transform: scale(1.03); /* Slightly larger when dragging */
    /* Use a shadow derived from theme or a specific drag shadow variable */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* Keep specific shadow or use variable */
    cursor: grabbing; /* Indicate grabbing */
    background-color: var(--bg-tertiary); /* Use tertiary background when dragging */
}

/* Buttons */
.algebradrag-button {
    padding: 5px 10px; /* Larger padding */
    margin-top: 15px;
    cursor: pointer;
    border: none;
    border-radius: 5px; /* More rounded */
    background: var(--primary); /* Use primary color for button background */
    color: var(--on-surface-base); /* Use text color suitable for the primary background */
    font-size: 0.85em; /* Standard font size */
    font-weight: 600; /* Bolder text */
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
}

.algebradrag-button:hover:not(:disabled) {
    background: var(--highlight); /* Use highlight color on hover */
}

.algebradrag-button:active:not(:disabled) {
     transform: scale(0.98); /* Press effect */
}

.algebradrag-button:disabled {
    background-color: var(--bg-tertiary); /* Use tertiary background when disabled */
    color: var(--text-secondary); /* Use secondary text color when disabled */
    cursor: not-allowed;
    opacity: 0.7;
}

/* Utility Classes */
.algebradrag-hidden {
    display: none !important; /* Use important to override potential conflicts */
}

/* Messages & Popups */
#algebradrag-puzzle-message {
    margin-top: 15px;
    font-weight: 500;
    min-height: 1.5em; /* Reserve space */
    color: var(--alert); /* Use alert color for default (error) message */
}
#algebradrag-puzzle-message.algebradrag-correct {
     /* Use a color derived from theme, e.g., a success color */
     color: green; /* Keep hardcoded green or add --success-color to theme */
}

#algebradrag-puzzle-badge-popup {
    /* Use a gradient derived from theme colors */
    background: linear-gradient(to right, var(--highlight), var(--primary)); /* Match badge bar */
    color: var(--on-surface-base); /* Text color suitable for the gradient background */
    font-weight: bold;
    padding: 12px 18px;
    border-radius: 8px;
    margin-top: 15px;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: scale(0.9);
    opacity: 0;
    display: inline-block; /* Allow transform */
    pointer-events: none; /* Prevent interaction */
}

#algebradrag-puzzle-badge-popup.algebradrag-active {
    opacity: 1;
    transform: scale(1);
}

/* XP Float Animation */
.algebradrag-puzzle-xp-float {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px; /* Larger XP text */
    /* Use a color derived from theme, e.g., a success color or a bright accent */
    color: greenyellow; /* Keep hardcoded or add --success-color or similar */
    font-weight: bold;
    pointer-events: none;
    animation: algebradrag-floatXP 1.2s ease-out forwards; /* Longer animation */
    z-index: 9999;
    text-shadow: 0 0 5px rgba(0,0,0,0.5); /* Keep for visibility */
}

@keyframes algebradrag-floatXP {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -150%) scale(1.6); /* Float higher */
    }
}

/* Record Breaker Overlay */
#algebradrag-record-breaker-overlay {
    position: fixed; /* Cover entire screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use a darker background color derived from theme */
    background: color-mix(in srgb, var(--bg-primary) 90%, black 10%); /* Slightly darker than primary background */
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000; /* Highest z-index */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bounce effect */
}

#algebradrag-record-breaker-overlay.algebradrag-show {
    opacity: 1;
    transform: scale(1);
}

.algebradrag-record-breaker-popup {
    text-align: center;
    color: var(--text-primary); /* Use primary text color */
    background: var(--card-bg); /* Use card background */
    padding: 30px 40px;
    border-radius: var(--radius); /* Use theme radius */
    box-shadow: var(--shadow); /* Use theme shadow */
}

.algebradrag-record-icon {
    font-size: 72px; /* Larger icon */
    margin-bottom: 15px;
    /* Use a color derived from theme, e.g., a specific gold or accent */
    color: gold; /* Keep hardcoded gold or add --game-gold-color to theme */
}

.algebradrag-record-title {
    font-size: 28px; /* Larger title */
    margin-bottom: 10px;
     /* Use a color derived from theme, e.g., a lighter gold or primary */
    color: var(--primary); /* Using primary color */
    font-weight: 700;
}

.algebradrag-record-subtitle {
    font-size: 18px;
    margin-bottom: 25px;
    color: var(--text-secondary); /* Use secondary text color */
}

/* Sound Toggle */
.algebradrag-puzzle-control-row {
    display: flex;
    justify-content: flex-end; /* Align to the right */
    align-items: center;
    gap: 8px;
    margin-top: 20px; /* Space above toggle */
    padding-top: 15px; /* Add padding above */
    border-top: 1px solid var(--bg-tertiary); /* Use tertiary background for separator */
}

.algebradrag-puzzle-toggle-group {
    display: flex;
    align-items: center;
    gap: 8px; /* Increased gap */
    font-size: 14px;
    color: var(--text-secondary); /* Use secondary text color */
}

.algebradrag-sound-switch {
    position: relative;
    display: inline-block;
    width: 44px; /* Slightly wider */
    height: 24px; /* Slightly taller */
}
.algebradrag-sound-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.algebradrag-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-color: var(--bg-tertiary); /* Use tertiary background */
    border-radius: 34px; /* Keep specific radius */
    transition: background-color 0.3s;
}
.algebradrag-slider:before {
    position: absolute;
    content: "";
    height: 18px; /* Larger handle */
    width: 18px;
    left: 3px; /* Adjusted position */
    bottom: 3px; /* Adjusted position */
    background-color: var(--text-primary); /* Use primary text color for handle */
    border-radius: 50%;
    transition: transform 0.3s;
}
.algebradrag-sound-switch input:checked + .algebradrag-slider {
    background-color: var(--primary); /* Use primary color when checked */
}
.algebradrag-sound-switch input:checked + .algebradrag-slider:before {
    transform: translateX(20px); /* Adjusted travel distance */
}

/* Game Summary Section */
#algebradrag-game-summary {
    background: var(--card-bg); /* Use card background */
    border-radius: var(--radius); /* Use theme radius */
    padding: 10px;
    margin-top: 30px; /* More space above summary */
    text-align: center;
    color: var(--text-primary); /* Ensure text is primary text color */
}

#algebradrag-game-summary h2 {
    font-size: 14px; /* Keep specific size or use theme variable */
    margin-bottom: 10px;
    color: var(--accent); /* Use accent color for section title */
}

#algebradrag-summary-results {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* More gap */
    margin-bottom: 10px;
    font-size: 1em; /* Slightly larger text */
}
#algebradrag-summary-results p {
     margin: 0; /* Remove default margin */
     color: var(--text-secondary); /* Use secondary text color */
}
#algebradrag-summary-results strong {
    font-weight: 600;
    color: var(--text-primary); /* Use primary text color for numbers */
    margin-left: 5px; /* Space before number */
}
#algebradrag-summary-results span { /* Target the number spans */
     display: inline-block;
     min-width: 20px; /* Ensure space for numbers */
     text-align: left;
 }

/* Summary Chart */
#algebradrag-summary-chart-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 125px; /* Taller chart area */
    gap: 20px;
    margin-bottom: 5px;
    padding: 10px 0;
    background: var(--bg-tertiary); /* Use tertiary background for chart area */
    border-radius: 8px; /* Keep specific radius */
}

.algebradrag-summary-chart-bar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px; /* Fixed width for container */
}

.algebradrag-summary-chart-bar {
    width: 35px; /* Wider bars */
    /* Use a color derived from theme for correct bars */
    background-color: green; /* Keep hardcoded or add --success-color to theme */
    border-radius: 5px 5px 0 0; /* Keep specific radius */
    transition: height 0.5s ease-out; /* Slower, smoother transition */
    height: 0; /* Start at height 0 */
}

.algebradrag-summary-chart-bar.algebradrag-incorrect-bar {
    background-color: var(--alert); /* Use alert color for incorrect bars */
}

.algebradrag-summary-chart-bar-label {
    font-size: 12px; /* Keep specific size or use theme variable */
    color: var(--text-secondary); /* Use secondary text color for labels */
    margin-top: 6px;
    text-transform: capitalize; /* Capitalize labels */
}

/* Puzzle History Section */
#algebradrag-puzzle-history {
    background: var(--card-bg); /* Use card background */
    padding: 10px;
    margin-top: 30px;
    border-radius: var(--radius); /* Use theme radius */
    color: var(--text-primary); /* Ensure text is primary text color */
}

#algebradrag-puzzle-history h2 {
    font-size: 16px; /* Keep specific size or use theme variable */
    margin-bottom: 10px;
    text-align: left;
    color: var(--accent); /* Use accent color for section title */
}

#algebradrag-puzzle-history-list {
    text-align: left;
    font-size: 12px; /* Keep specific size or use theme variable */
    line-height: 1.4; /* Increased line height */
    margin-bottom: 10px;
    max-height: 250px; /* Increased max height */
    overflow-y: auto; /* Add scrollbar if needed */
    padding-right: 5px; /* Space for scrollbar */
    background-color: var(--bg-tertiary); /* Use tertiary background for list area */
    border-radius: 8px; /* Keep specific radius */
    padding: 8px; /* Padding inside list */
}

#algebradrag-puzzle-history-list div.algebradrag-history-entry {
    display: grid;
    grid-template-columns: auto 1fr auto auto; /* Time | XP/Badge | Puzzles */
    align-items: center;
    padding: 12px 0; /* Vertical padding only */
    margin-bottom: 8px;
    border-bottom: 1px solid var(--bg-secondary); /* Use secondary background for separator */
    gap: 15px; /* Increased gap */
}
#algebradrag-puzzle-history-list div.algebradrag-history-entry:last-child {
     border-bottom: none; /* Remove border for last item */
 }

.algebradrag-history-time,
.algebradrag-history-xp,
.algebradrag-history-badge,
.algebradrag-history-puzzles {
    display: flex;
    align-items: center;
    gap: 6px; /* Space between icon and text */
    font-size: 0.9em; /* Keep specific size or use theme variable */
}

.algebradrag-history-time { color: var(--text-secondary); } /* Use secondary text color */
.algebradrag-history-xp {
    /* Use a color derived from theme, e.g., a gold or highlight color */
    color: gold; /* Keep hardcoded gold or add --game-gold-color to theme */
}
.algebradrag-history-badge { color: var(--accent); } /* Use accent color */
.algebradrag-history-puzzles {
    /* Use a color derived from theme, e.g., a success color */
    color: green; /* Keep hardcoded green or add --success-color to theme */
    justify-self: end; /* Align right */
}

/* SVG Icons in History */
#algebradrag-puzzle-history-list svg {
     width: 16px; /* Keep specific size */
     height: 16px; /* Keep specific size */
     fill: currentColor; /* Use text color for icon */
 }

/* History Chart */
#algebradrag-history-chart-container {
    margin-top: 20px;
    background-color: var(--bg-tertiary); /* Use tertiary background */
    padding: 15px;
    border-radius: 8px; /* Keep specific radius */
}
#algebradrag-history-chart {
    display: block; /* Ensure canvas takes block space */
    width: 100%;
    height: 150px; /* Fixed height for chart */
}

/* Clear History Button */
#algebradrag-clear-history-btn {
     background-color: var(--alert); /* Use alert color */
     margin-top: 20px; /* Space above button */
}
#algebradrag-clear-history-btn:hover {
     /* Use a darker or lighter shade based on theme */
    background-color: color-mix(in srgb, var(--alert) 80%, black 20%); /* Slightly darker on hover (default/light) */
}
/* Dark mode clear history button hover override */
body.theme-dark #algebradrag-clear-history-btn:hover {
    background-color: color-mix(in srgb, var(--alert) 80%, white 20%); /* Slightly lighter on hover (dark) */
}
#algebradrag-clear-history-btn svg {
     width: 18px; /* Keep specific size */
     height: 18px; /* Keep specific size */
     fill: var(--on-surface-base); /* Fill with text color suitable for button background */
 }

/* KaTeX Alignment and Styling */
/* These are mostly layout and size, not color-related, so kept as is */
.katex {
    font-size: 1.1em; /* Slightly larger math font */
    text-align: left; /* Ensure left alignment */
    /* Color will be inherited from the parent element (puzzle step) */
}
.katex-display {
     margin: 0; /* Remove default margin */
     text-align: left;
}
/* Ensure block display for fractions within steps */
.algebradrag-puzzle-step .katex-display > .katex-html {
     display: block;
     text-align: left;
}
 .algebradrag-puzzle-step .katex {
     width: 100%; /* Make KaTeX span full width */
 }