:root {
    --primary-color: #6200EE;
    --japanese-font: 'Klee One', 'Noto Sans JP', sans-serif;
    --primary-color-rgb: 98, 0, 238;
    --primary-variant: #3700B3;
    --secondary-color: #03DAC6;
    --background: #FFFFFF;
    --surface: #FFFFFF;
    --error: #B00020;
    --on-primary: #FFFFFF;
    --on-secondary: #000000;
    --on-background: #000000;
    --on-surface: #000000;
    --on-error: #FFFFFF;
    --shadow: rgba(0, 0, 0, 0.1);
    --border-radius: 12px;
    --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --elevation-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --elevation-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

[data-theme="dark"] {
    --primary-color: #BB86FC;
    --primary-variant: #3700B3;
    --secondary-color: #03DAC6;
    --background: #121212;
    --surface: #1E1E1E;
    --error: #CF6679;
    --on-primary: #000000;
    --on-secondary: #000000;
    --on-background: #FFFFFF;
    --on-surface: #FFFFFF;
    --on-error: #000000;
    --shadow: rgba(0, 0, 0, 0.3);
}

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

a,
a:visited {
    color: var(--primary-color);
}

a:hover,
a:focus-visible {
    color: var(--primary-variant);
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--background);
    color: var(--on-background);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

/* Font Family Support */
.japanese-text {
    font-family: var(--japanese-font);
}
.font-klee-one { --japanese-font: 'Klee One', 'Noto Sans JP', sans-serif; }
.font-noto-sans-jp { --japanese-font: 'Noto Sans JP', sans-serif; }
.font-zen-antique { --japanese-font: 'Zen Antique', 'Noto Sans JP', serif; }
.font-zen-maru-gothic { --japanese-font: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif; }
.font-hannari { --japanese-font: 'Hannari', 'Noto Sans JP', serif; }
.font-kokoro { --japanese-font: 'Kokoro', 'Noto Sans JP', serif; }
.font-hiragino-sans { --japanese-font: 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; }
.font-yu-gothic { --japanese-font: 'Yu Gothic', 'Meiryo', sans-serif; }
.font-meiryo { --japanese-font: 'Meiryo', sans-serif; }
.font-ms-gothic { --japanese-font: 'MS Gothic', monospace; }

.app-container {
    max-width: 800px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
.app-header {
    background-color: var(--primary-color);
    color: var(--on-primary);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--elevation-1);
    position: relative;
    z-index: 100;
}

.app-header h1 {
    font-size: 1.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-controls {
    display: flex;
    gap: 0.5rem;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--on-primary);
    font-size: 1.2rem;
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Footer */
.app-footer {
    padding: 0 1.5rem 1.5rem;
    margin-top: auto;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
    border-radius: 16px;
    /* iOS Translucent Light Background Blur */
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: var(--on-surface);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

.footer-text p {
    margin: 0;
}

.footer-jp {
    font-size: 0.95rem;
    margin-top: 0.2rem;
    opacity: 0.75;
}

.footer-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.footer-btn,
.footer-btn:visited,
.footer-btn:active {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    text-decoration: none !important;
    border-radius: 999px !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.95rem !important;
    background-color: var(--primary-color) !important;
    color: var(--on-primary) !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.footer-link,
.footer-link:visited,
.footer-link:active {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    text-decoration: none !important;
    border-radius: 999px !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.95rem !important;
    color: var(--primary-color) !important;
    background-color: rgba(var(--primary-color-rgb), 0.12) !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.footer-btn:hover,
.footer-link:hover {
    transform: translateY(-1px) !important;
    opacity: 0.9 !important;
}

[data-theme="dark"] .footer-content {
    /* iOS Translucent Dark Background Blur */
    background: rgba(30, 30, 30, 0.55) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Widget Controls */
.widget-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--surface);
    padding: 1rem;
    border-radius: var(--border-radius);
    box-shadow: var(--elevation-1);
}

.widget-controls label {
    font-weight: 500;
}

.widget-controls select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: var(--surface);
    color: var(--on-surface);
    font-family: inherit;
}

/* Kanji Widget Styles */
.kanji-widget {
    background-color: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--elevation-2);
    padding: 2rem;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* IF causes stroke animation error remove the webkit and user-select lines */
    /* Disables the tap highlight color on mobile devices */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.kanji-widget:hover {
    box-shadow: var(--elevation-3);
    transform: translateY(-2px);
}

.kanji-widget.small-widget {
    min-height: 150px;
}

.kanji-widget.large-widget {
    min-height: 300px;
}

.widget-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--primary-color);
}

.widget-loading i {
    font-size: 2rem;
}

.kanji-character {
    font-size: 4rem;
    font-weight: 300;
    margin-bottom: 1rem;
    color: var(--primary-color);
    transition: transform 0.2s ease;
}

.kanji-meaning {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--on-surface);
}

.kanji-readings {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.reading-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reading-label {
    font-size: 1rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.4rem;
    /* Slightly more breathing room before the text */
}

.reading-value {
    font-size: 1.45rem !important;
    /* Visibly enlarges the core Hiragana/Katakana text */
    font-weight: 700 !important;
    /* Makes the font bolder so it's easy to read */
    color: var(--on-surface);
}

.clickable-reading {
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    display: inline-block;
    margin: 0.1rem;
}

.clickable-reading:hover {
    color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), 0.1);
}

.kanji-examples {
    margin-top: 1rem;
    text-align: left;
}

.kanji-examples h4 {
    font-size: 1.05rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    text-align: center;
}

/* 1. The Main Row Container */
.example-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(150, 150, 150, 0.2);
    width: 100%;
    /* Prevents the row from bleeding off the screen */
}

/* 2. Target the invisible wrapper holding the Japanese text */
.example-item> :first-child {
    display: flex;
    flex-wrap: wrap;
    /* THE MAGIC: Drops furigana to the next line if squeezed! */
    align-items: baseline;
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    flex: 1 1 auto;
    /* Allows the left side to shrink and wrap */
}

/* 3. The Japanese Word */
.example-word {
    font-size: 1.35rem !important;
    font-weight: bold;
    color: var(--on-surface);
    white-space: nowrap;
}

/* 4. The Furigana */
.example-reading,
.reading-hiragana {
    font-size: 0.95rem !important;
    color: var(--primary-color);
    opacity: 0.95;
    font-weight: 500 !important;
    white-space: nowrap;
}

/* 5. The English Meaning */
.example-meaning {
    flex: 0 0 auto;
    /* Prevents the English side from getting crushed */
    max-width: 45%;
    /* Locks the right boundary */
    font-size: 1.1rem !important;
    color: var(--on-surface-variant);
    text-align: right;
    word-break: break-word;
    line-height: 1.4;
}

.example-word:hover {
    color: var(--primary-color);
}

.reading-hiragana {
    font-size: 1.05rem !important;
    /* Increased by ~10% for better readability */
    color: var(--primary-color);
    opacity: 0.95;
    /* Slightly increased opacity so it stands out clearer */
    font-weight: 500 !important;
    /* Slightly sharper font weight */
    margin-top: 0.2rem;
}

.widget-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
}

.master-action-btn {
    background-color: var(--secondary-color) !important;
    color: var(--on-secondary) !important;
}

.master-action-btn:hover {
    background-color: #00BFA5 !important;
}

.action-btn {
    background-color: var(--primary-color);
    color: var(--on-primary);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--elevation-1);
}

.action-btn:hover {
    background-color: var(--primary-variant);
    transform: scale(1.1);
}

.action-btn.jisho-btn {
    width: 44px;
    font-size: 0.95rem;
    background-color: rgba(var(--primary-color-rgb), 0.12);
    color: var(--primary-color);
    box-shadow: none;
}

.action-btn.jisho-btn:hover {
    background-color: rgba(var(--primary-color-rgb), 0.22);
}

.master-btn {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--secondary-color);
    color: var(--on-secondary);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--elevation-1);
}

.master-btn:hover {
    background-color: #00BFA5;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: var(--elevation-2);
}

/* Progress Section */
.progress-section {
    background-color: var(--surface);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--elevation-1);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.progress-header h3 {
    color: var(--primary-color);
}

.progress-stats {
    font-size: 0.9rem;
    color: var(--on-surface);
    opacity: 0.8;
}

/* ========================================== */
/* MASTER PROGRESS BAR SYSTEM                 */
/* ========================================== */

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: rgba(var(--primary-color-rgb), 0.2);
    border-radius: 4px;
    position: relative;
    overflow: visible;
    /* CRUCIAL: Replaces 'overflow: hidden' so icons can hang off the edge */
}

/* 50% Milestone (Midpoint) */
.progress-bar::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    /* Background layer */
    opacity: 0.8;
}

/* 100% Milestone (Endpoint) */
/* 100% Milestone (Endpoint) */
.progress-bar::after {
    content: "";
    position: absolute;
    right: -29px;
    /* Adjusted to keep the larger icon perfectly centered */
    top: 50%;
    transform: translateY(-50%);
    width: 58px;
    /* Increased by 150% */
    height: 58px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

/* The Moving Fill Line */
.progress-fill {
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Smoother animation */
    width: 0%;
    border-radius: 4px;
    position: relative;
    z-index: 5;
    /* Pulls the actual bar IN FRONT of the 50% mark */
}

/* 1. Create the carried mid-mark (trailing just behind the big point) */
.progress-fill::before {
    content: "";
    position: absolute;
    right: -15px;
    /* Tucked tightly behind the main 56px point */
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    /* Increased by ~20% */
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 4;
    /* Safely tucked behind the thumb (z-index 10) */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* The Moving Point (Thumb Icon) */
.progress-fill::after {
    content: "";
    position: absolute;
    right: -28px;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    /* Highest layer: ALWAYS in front of everything */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    /* Adds a tiny shadow to the moving icon */
    transition: background-image 0.3s ease;
}

/* 4. ...and reveal the carried mark trailing behind the point! */
.progress-bar.past-midpoint .progress-fill::before {
    opacity: 0.92;
    /* Beautiful, slightly faded depth effect */
}

.progress-bar.past-midpoint::before {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.progress-bar.past-midpoint .progress-fill::before {
    opacity: 1;
}

/* ========================================== */
/* HOVER PERCENTAGE TOOLTIP                   */
/* ========================================== */

.progress-tooltip {
    position: absolute;
    right: 0;
    /* Anchors exactly to the tip of the moving bar */
    bottom: 200%;
    /* Pushes it above the icons */
    transform: translateX(50%) translateY(10px);
    /* Centers it and pushes it slightly down for the animation */
    background: var(--primary-color);
    color: var(--on-primary);
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--elevation-2);
    z-index: 20;
    pointer-events: none;
    /* Stops the tooltip from glitching your mouse hover */
    white-space: nowrap;
}

/* Tiny triangle arrow pointing down from the tooltip */
.progress-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    /* Bottom of the tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    /* Matches the tooltip color and creates a triangle */
    border-color: var(--primary-color) transparent transparent transparent;
}

/* The Hover & Click Animation */
/* We target the whole bar so the hit-box is generous for mobile tapping! */
.progress-bar:hover .progress-tooltip,
.progress-bar:active .progress-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(50%) translateY(0);
    /* Floats up into place! */
}

/* ========================================== */
/* THEME-SPECIFIC MILESTONE ICONS             */
/* ========================================== */

/* Yotsuba Theme Setup */
[data-theme="yotsuba"] .progress-fill::before {
    background-image: url('assets/icons/clover-mid.png');
}

[data-theme="yotsuba"] .progress-fill::after {
    background-image: url('assets/icons/clover-point.png');
}

[data-theme="yotsuba"] .progress-bar::before {
    background-image: url('assets/icons/clover-mid.png');
}

[data-theme="yotsuba"] .progress-bar::after {
    background-image: url('assets/icons/clover-end.png');
    border-radius: 50%;
    /* Smooths out the corners of the JPG */
}
/* ========================================== */
/* YOTSUBA 100% ANIMATION (Happy Reunion)     */
/* ========================================== */

/* The joyful double-bounce keyframes */
@keyframes happy-bounce {

    0%,
    100% {
        transform: translateY(-50%) scale(1) rotate(0deg);
    }

    /* First big jump up and tilt left */
    15% {
        transform: translateY(calc(-50% - 12px)) scale(1.1) rotate(-15deg);
    }

    /* Lands and squishes down slightly */
    30% {
        transform: translateY(-50%) scale(0.9, 1.1) rotate(0deg);
    }

    /* Second smaller jump up and tilt right */
    45% {
        transform: translateY(calc(-50% - 6px)) scale(1.05) rotate(10deg);
    }

    /* Lands back to normal */
    60%,
    80% {
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
}

/* Apply the happy bounce to the Yotsuba POINT (progress-fill::after) */
[data-theme="yotsuba"] .progress-bar.is-complete .progress-fill::after {
    /* 1.2s loop, delayed by 0.6s so it waits to arrive first */
    animation: happy-bounce 1.2s ease-in-out 0.6s infinite !important;
    z-index: 10;
    /* Ensures it bounces cleanly in front of the others */
}


/* Candy Theme Setup */
/* ========================================== */
/* CANDY THEME SETUP (Custom Sizing)          */
/* ========================================== */

/* 1. The main moving point (50% smaller) */
[data-theme="candy"] .progress-fill::after {
    background-image: url('assets/icons/candy-point.svg');
    width: 28px;
    height: 28px;
    right: -14px;
    /* Recalculated to keep the smaller icon perfectly centered */
}

/* 2. The stationary 50% mark (10% larger) */
[data-theme="candy"] .progress-bar::before {
    background-image: url('assets/icons/candy-mid.svg');
    width: 35px;
    /* Increased by ~10% (from 32px) */
    height: 45px;
}

/* 3. The carried 50% mark (10% larger) */
[data-theme="candy"] .progress-fill::before {
    background-image: url('assets/icons/candy-mid.svg');
    width: 44px;
    /* Increased by 10% (from 40px) */
    height: 56px;
    right: -25px;
    /* Adjusted to tuck perfectly behind the tiny thumb! */
}

/* 4. The 100% finish line (Inherits the master 58px size) */
[data-theme="candy"] .progress-bar::after {
    background-image: url('assets/icons/candy-end.svg');
}
/* ========================================== */
/* CANDY 100% ANIMATION (The Faster Sugar Dance) */
/* ========================================== */

/* The continuous jumping keyframes */
@keyframes candy-dance {

    0%,
    100% {
        transform: translateY(-50%) scale(1) rotate(0deg);
    }

    40% {
        /* Peak of the jump */
        transform: translateY(calc(-50% - 12px)) scale(1.1) rotate(15deg);
    }

    75% {
        /* Land and squish */
        transform: translateY(-50%) scale(0.9, 1.1) rotate(-10deg);
    }

    90% {
        /* Settle back to normal just before jumping again */
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
}

/* 1. The Main Candy (Point) */
[data-theme="candy"] .progress-bar.is-complete .progress-fill::after {
    /* Lowered to 0.8s for a faster loop */
    animation: candy-dance 0.8s ease-in-out 0.6s infinite !important;
    z-index: 10;
}

/* 2. The Carried Candy (Mid) */
[data-theme="candy"] .progress-bar.is-complete .progress-fill::before {
    /* Delayed by 0.4s (exactly half the loop time) for the perfect alternating seesaw! */
    animation: candy-dance 0.8s ease-in-out 1.0s infinite !important;
    z-index: 10;
}


/* ========================================== */
/* DARK THEME SETUP (Car & Trailer)           */
/* ========================================== */

/* 1. The Car (Main Point) */
[data-theme="dark"] .progress-fill::after {
    background-image: url('assets/icons/dark-point.svg');
    /* The Car */
    width: 55px;
    height: 55px;
    right: -22px;
    /* Keeps the car perfectly centered on the progress line */
}

/* 2. The Waiting Trailer (Stationary 50% Mark) */
[data-theme="dark"] .progress-bar::before {
    background-image: url('assets/icons/dark-mid.svg');
    /* The Trailer */
    width: 30px;
    /* Starts smaller */
    height: 30px;
}

/* 3. The Hitched Trailer (Carried 50% Mark) */
[data-theme="dark"] .progress-fill::before {
    background-image: url('assets/icons/dark-mid.svg');
    /* The Trailer (Attached) */
    width: 40px;
    /* Increased in size when attached! */
    height: 40px;
    /* This positive value pushes the trailer to the left, behind the car */
    right: 25px;
    z-index: 4;
    /* Ensures the hitch goes slightly beneath the car */
    /*opacity: 1;*/
    /* Keeps it fully solid instead of faded for this theme */
}
[data-theme="dark"] .progress-bar.past-midpoint .progress-fill::before {
    opacity: 1;
}

/* 4. The Gas Station (100% Finish Line) */
[data-theme="dark"] .progress-bar::after {
    background-image: url('assets/icons/dark-end.svg');
    /* The Gas Station */
    width: 45px;
    /* Nice and large */
    height: 45px;
    right: -32px;
    top: -50%;
    /* Centered on the end edge */
}
/* ========================================== */
/* DARK THEME 100% ANIMATIONS (Pit Stop)      */
/* ========================================== */

/* 1. Gas Station Machine Rumble Keyframes */
@keyframes gas-pump-rumble {

    0%,
    100% {
        transform: translateY(-50%) translate(0, 0);
    }

    25% {
        transform: translateY(-50%) translate(-1px, 0.5px);
    }

    50% {
        transform: translateY(-50%) translate(1px, -0.5px);
    }

    75% {
        transform: translateY(-50%) translate(-0.5px, -1px);
    }
}

/* 2. Car Taillight / Handbrake Soft Red Glow Keyframes */
@keyframes taillight-pulse {

    0%,
    100% {
        /* Dim initial red glow on the tail of the car */
        filter: drop-shadow(-4px 0px 4px rgba(255, 30, 30, 0.4));
    }

    50% {
        /* Bright firefly pulse like brake lights glowing in the dark */
        filter: drop-shadow(-6px 0px 8px rgba(255, 0, 0, 0.95)) drop-shadow(-2px 0px 12px rgba(255, 50, 50, 0.6));
    }
}

/* Apply Rumble to the Gas Station */
[data-theme="dark"] .progress-bar.is-complete::after {
    /* Fast 0.2s vibration, starts after 0.6s slide delay */
    animation: gas-pump-rumble 0.2s linear 0.6s infinite !important;
}

/* Apply Red Handbrake Glow to the Car */
[data-theme="dark"] .progress-bar.is-complete .progress-fill::after {
    /* Smooth 1.5s firefly pulse */
    animation: taillight-pulse 1.5s ease-in-out 0.6s infinite !important;
}


/* ========================================== */
/* FOREST THEME                               */
/* ========================================== */

/* 1. Base Thumb (1 Tree) */
[data-theme="forest"] .progress-fill::after {
    background-image: url('assets/icons/forest-point.svg');
    width: 32px;
    height: 32px;
    right: -16px;
    transition: background-image 0.2s ease, opacity 0.2s ease, width 0.2s ease;
}

/* 2. Stationary 50% Mark (2 Trees) */
[data-theme="forest"] .progress-bar::before {
    background-image: url('assets/icons/forest-mid.svg');
    width: 40px;
    height: 40px;
}

/* 3. When passing 50%, thumb BECOMES the 2 Trees */
[data-theme="forest"] .progress-bar.past-midpoint .progress-fill::after {
    background-image: url('assets/icons/forest-mid.svg');
    width: 40px;
    /* Scales up slightly to match */
    height: 40px;
    right: -20px;
}

/* 4. Stationary 100% Mark (3 Trees) */
[data-theme="forest"] .progress-bar::after {
    background-image: url('assets/icons/forest-end.svg');
    width: 48px;
    height: 48px;
    right: -24px;
    z-index: 6;
}

/* 5. At 100%, moving thumb vanishes, leaving only the stationary 3 Trees */
[data-theme="forest"] .progress-bar.is-complete .progress-fill::after {
    opacity: 0;
}

/* ========================================== */
/* FOREST 100% ANIMATION (The Wind Sway)      */
/* ========================================== */

/* The slow, gentle breeze keyframes */
@keyframes forest-sway {

    0%,
    100% {
        transform: translateY(-50%) rotate(0deg);
    }

    25% {
        transform: translateY(-50%) rotate(-3deg);
    }

    75% {
        transform: translateY(-50%) rotate(3deg);
    }
}

/* Trigger the sway on the 3-tree icon when progress hits 100% */
[data-theme="forest"] .progress-bar.is-complete::after {
    /* 4 seconds long so it feels calm and peaceful */
    animation: forest-sway 4s ease-in-out infinite;

    /* Anchors the rotation to the bottom/roots of the trees */
    transform-origin: center bottom;
}

/* Hide by default on all other themes */
.forest-warning-text {
    display: none;
    text-align: center;
    color: #81C784;
    /* Soft, natural forest green */
    font-size: 18px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 10px;
    margin-bottom: 15px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Reveal ONLY when Forest theme is active */
[data-theme="forest"] .forest-warning-text {
    display: block;
}

/* Hover effect for the clickable link */
.forest-warning-text:hover {
    color: #ffffff;
    /* Brightens to white on hover */
    text-decoration: underline;
    transform: scale(1.02);
}

/* ========================================== */
/* PAPER THEME SETUP (The Ink Dip)            */
/* ========================================== */

/* 1. Base Thumb (The Fountain Pen) */
[data-theme="paper"] .progress-fill::after {
    background-image: url('assets/icons/paper-point.svg');
    width: 35px;
    height: 35px;
    right: -17px;
    transition: opacity 0.2s ease;
}

/* 2. Stationary 50% Mark (The Full Inkwell) */
[data-theme="paper"] .progress-bar::before {
    background-image: url('assets/icons/paper-mid.svg');
    width: 44px;
    /* Starts about 10% larger than base */
    height: 44px;
    opacity: 1;
    /* Adds a smooth animation for when the size and opacity change */
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

/* 3. At 50%, the pen "uses" the ink! Inkwell shrinks and fades. */
[data-theme="paper"] .progress-bar.past-midpoint::before {
    width: 35px;
    /* Shrinks down by ~20% total */
    height: 35px;
    opacity: 0.4;
    /* Becomes translucent to look used/empty */
}

/* 4. We aren't carrying anything in this theme, so we hide the trailer layer */
[data-theme="paper"] .progress-fill::before {
    display: none;
}

/* 5. Stationary 100% Mark (The Letter) */
[data-theme="paper"] .progress-bar::after {
    background-image: url('assets/icons/paper-end.svg');
    width: 55px;
    height: 55px;
    right: -35px;
    z-index: 4;
    /* Pulls the letter to the front so the pen slides cleanly behind it */
}

/* ========================================== */
/* PAPER 100% ANIMATION (Infinite Stamp)      */
/* ========================================== */

/* The lifting and slamming keyframes, adjusted for looping */
@keyframes wax-stamp {

    0%,
    100% {
        transform: translateY(-50%) scale(1);
    }

    40% {
        /* Pen rests for the first part of the loop */
        transform: translateY(-50%) scale(1);
    }

    60% {
        /* Lifts up */
        transform: translateY(calc(-50% - 10px)) scale(1.4);
    }

    80% {
        /* Slams down */
        transform: translateY(-50%) scale(0.9);
    }

    90% {
        /* Recoil bounce */
        transform: translateY(-50%) scale(1.05);
    }
}

/* Apply the animation to the PEN (progress-fill::after) */
[data-theme="paper"] .progress-bar.is-complete .progress-fill::after {
    /* Set to 1.5s and infinite to keep it stamping smoothly! */
    animation: wax-stamp 1.5s ease-out 0.6s infinite !important;
    z-index: 10;
}
/* ========================================== */
/* MIDNIGHT THEME SETUP (Deep Space Tow)      */
/* ========================================== */
/*0. WHole progress line */
[data-theme="midnight"] .progress-fill {
    z-index: auto !important;
}

/* 1. The Rocket (Main Point) */
[data-theme="midnight"] .progress-fill::after {
    background-image: url('assets/icons/midnight-point.svg');
    width: 40px;
    height: 40px;
    right: -20px;
    /* Keeps the rocket perfectly centered on the line */
    z-index: 5;
}

/* 2. The Waiting Satellite (Stationary 50% Mark) */
[data-theme="midnight"] .progress-bar::before {
    background-image: url('assets/icons/midnight-mid.svg');
    width: 32px;
    height: 32px;
}

/* 3. The Towed Satellite (Carried 50% Mark) */
[data-theme="midnight"] .progress-fill::before {
    background-image: url('assets/icons/midnight-mid.svg');
    width: 32px;
    height: 32px;
    /* This positive value pushes the satellite to the left, tethering it behind the rocket */
    right: 25px;
    z-index: 4;
    opacity: 0;
    /* Stays hidden in the void until 50% */
    transition: opacity 0.3s ease;
}

/* 3.5 Reveal the towed satellite ONLY when the rocket hits 50% */
[data-theme="midnight"] .progress-bar.past-midpoint .progress-fill::before {
    opacity: 1;
    /* Docking complete! Solidifies the satellite so it can be towed */
}

/* 4. The Space Station (100% Finish Line) */
[data-theme="midnight"] .progress-bar::after {
    background-image: url('assets/icons/midnight-end.svg');
    width: 60px;
    /* Nice and large for the final destination */
    height: 60px;
    right: -30px;
    z-index: 3;
}

/* ========================================= */
/* Space Theme Micro-Activism                */
/* ========================================= */

/* Hide by default on all other themes */
.space-warning-text {
    display: none;
    text-align: center;
    color: #FDE047;
    /* Bright starlight yellow */
    font-size: 18px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 10px;
    margin-bottom: 15px;
    text-shadow: 0px 2px 6px rgba(253, 224, 71, 0.4);
    /* Slight yellow glow effect */
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Reveal ONLY when Space theme is active */
[data-theme="midnight"] .space-warning-text {
    display: block;
}

/* Hover effect for the clickable link */
.space-warning-text:hover {
    color: #ffffff;
    /* Brightens to pure white on hover */
    text-decoration: underline;
    transform: scale(1.02);
}


/* ========================================== */
/* MIDNIGHT 100% ANIMATIONS (Zero-G Docking)  */
/* ========================================== */

/* The slow, smooth upward drift */
@keyframes zero-g-hover-up {

    0%,
    100% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(calc(-50% - 4px));
        /* Drifts up */
    }
}

/* The slow, smooth downward drift */
@keyframes zero-g-hover-down {

    0%,
    100% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(calc(-50% + 4px));
        /* Drifts down */
    }
}

/* 1. The Space Station (End) */
[data-theme="midnight"] .progress-bar.is-complete::after {
    /* 4-second slow loop, drifting upwards */
    animation: zero-g-hover-up 4s ease-in-out 0.6s infinite !important;
}

/* 2. The Rocket (Point) */
[data-theme="midnight"] .progress-bar.is-complete .progress-fill::after {
    /* 3-second loop, drifting downwards (opposite of the station) */
    animation: zero-g-hover-down 3s ease-in-out 0.6s infinite !important;
}

/* 3. The Towed Satellite (Mid) */
[data-theme="midnight"] .progress-bar.is-complete .progress-fill::before {
    /* Same as the rocket, but with a 0.9s delay so it bobs a split-second 
       after the rocket moves, making the invisible tether feel flexible! */
    animation: zero-g-hover-down 3s ease-in-out 0.9s infinite !important;
}
/* ========================================== */
/* MIDNIGHT COSMIC EFFECTS (Full Page!)       */
/* ========================================== */

/* 1. Ensure the progress section doesn't trap our stars */
[data-theme="midnight"] .progress-section {
    position: relative;
    overflow: visible !important; /* FIX: Changed to visible so meteors can fly out */
}

/* ========================================== */
/* MIDNIGHT STARFIELD UPGRADE (Density & Shine)*/
/* ========================================== */

/* 2. The Twinkling Starfield (Now covers the whole screen) */
.midnight-stars {
    display: none;
    position: fixed;
    /* Breaks out of the widget to cover the viewport */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Full screen width and height */
    pointer-events: none;
    z-index: -10;
    /* Pushed way back behind all your KanjiWidgets */

    /* MASSIVE UPGRADE: Added significantly more stars and many "super-shiny" ones */
    background-image:
        /* --- Deep Background Tiny Dots --- */
        radial-gradient(1px 1px at 10% 10%, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 40% 70%, rgba(160, 224, 240, 0.4), rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 50% 15%, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 70% 85%, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 80% 40%, rgba(253, 224, 71, 0.3), rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 90% 60%, #fff, rgba(0, 0, 0, 0)),

        /* --- Middle Ground Medium Stars --- */
        radial-gradient(1.5px 1.5px at 15% 75%, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 25% 15%, #A0E0F0, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 60% 50%, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 85% 20%, #FDE047, rgba(0, 0, 0, 0)),

        /* --- SUPER SHINY FOREGROUND STARS (Multi-layered for bloom) --- */
        /* Shiny Star 1 (Top Left) */
        radial-gradient(2px 2px at 5% 5%, #fff 100%, rgba(0, 0, 0, 0)),
        radial-gradient(6px 6px at 5% 5%, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0) 100%),

        /* Shiny Star 2 (Center Right) */
        radial-gradient(2px 2px at 75% 45%, #fff 100%, rgba(0, 0, 0, 0)),
        radial-gradient(8px 8px at 75% 45%, rgba(160, 224, 240, 0.2) 0%, rgba(0, 0, 0, 0) 100%),

        /* Shiny Star 3 (Bottom Center) */
        radial-gradient(2.5px 2.5px at 45% 90%, #fff 100%, rgba(0, 0, 0, 0)),
        radial-gradient(10px 10px at 45% 90%, rgba(253, 224, 71, 0.15) 0%, rgba(0, 0, 0, 0) 100%),

        /* Shiny Star 4 (Far Right) */
        radial-gradient(2px 2px at 95% 70%, #fff 100%, rgba(0, 0, 0, 0)),
        radial-gradient(5px 5px at 95% 70%, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 100%);

    background-repeat: repeat;
    background-size: 400px 400px;
    /* Increased size so the repetition is less obvious across the full screen */

    /* Faster twinkle with higher opacity peaks */
    animation: twinkle-stars-shiny 3s ease-in-out infinite alternate;
}

/* ========================================== */
/* UPDATED ANIMATION FOR SHINIER TWINKLE      */
/* OPTIMIZED ANIMATION FOR 144HZ PERFORMANCE  */
/* ========================================== */
@keyframes twinkle-stars-shiny {
    0% {
        opacity: 0.3;
        transform: scale(1) translateZ(0);
    }

    100% {
        opacity: 1;
        transform: scale(1.02) translateZ(0);
    }
}

/* 3. The Random Meteor (Now flies across the whole page) */
.midnight-meteor {
    display: none;
    position: fixed; /* FIX: Pinned to the viewport */
    top: 15vh; /* Starts near the top 15% of the screen */
    left: 0; 
    width: 120px; 
    height: 2px;
    
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #A0E0F0 100%);
    transform: rotate(45deg);
    pointer-events: none;
    z-index: -10;
    
    animation: shooting-star-fullscreen 8s linear infinite; /* Increased to 8s for a longer flight */
}

/* Reveal stars and meteors only on midnight theme */
[data-theme="midnight"] .midnight-stars,
[data-theme="midnight"] .midnight-meteor {
    display: block;
}

/* 4. The Animations */
@keyframes twinkle-stars {
    0% { opacity: 0.2; }
    100% { opacity: 0.8; transform: scale(1.01); }
}

@keyframes shooting-star-fullscreen {
    0% {
        transform: rotate(45deg) translateX(-200px);
        opacity: 0;
    }
    5% {
        opacity: 1; /* Bright flash as it enters the screen */
    }
    15% {
        transform: rotate(45deg) translateX(150vw); /* Flies completely off the screen */
        opacity: 0;
    }
    100% {
        transform: rotate(45deg) translateX(150vw);
        opacity: 0;
    }
}

/* ========================================== */
/* MIDNIGHT DEEP SPACE EXTRAS (Stars & Comets)*/
/* ========================================== */

/* 1. Big Named Stars Container */
.midnight-named-stars {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -9;
    /* Just above the background stars */
}

[data-theme="midnight"] .midnight-named-stars {
    display: block;
}

/* 2. Individual Named Star Styling */
.named-star {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* The glowing star dot */
.named-star::before {
    content: "";
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 50%;
    animation: pulse-big-star 3s infinite alternate;
}

/* The faint text label */
.named-star span {
    color: rgba(255, 255, 255, 0.25);
    font-size: 11px;
    font-family: monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    user-select: none;
}

/* Positioning & Custom Glowing for specific stars */
.named-star.pos-1 {
    top: 15vh;
    left: 20vw;
}

.named-star.pos-1::before {
    box-shadow: 0 0 12px 3px rgba(253, 224, 71, 0.7);
    /* Warm Yellow */
    animation-delay: 0s;
}

.named-star.pos-2 {
    top: 65vh;
    right: 15vw;
}

.named-star.pos-2::before {
    box-shadow: 0 0 12px 3px rgba(160, 224, 240, 0.8);
    /* Bright Blue */
    animation-delay: 1.5s;
}

.named-star.pos-3 {
    bottom: 25vh;
    left: 25vw;
}

.named-star.pos-3::before {
    box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.8);
    /* Pure White */
    animation-delay: 0.7s;
}

/* 3. The Second Meteor */
.midnight-meteor.meteor-2 {
    top: 60vh;
    /* Lower on the screen */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #FDE047 100%);
    /* Yellow tail */
    animation: shooting-star-fullscreen 14s linear infinite 5s;
    /* Slower, with a 5s delay */
}

/* 4. The Slow Comet */
.midnight-comet {
    display: none;
    position: fixed;
    top: 5vh;
    left: 0;
    width: 350px;
    /* Massive long tail */
    height: 3px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(160, 224, 240, 0.5) 80%, #ffffff 100%);
    transform: rotate(20deg);
    border-radius: 50% 0 0 50%;
    pointer-events: none;
    filter: drop-shadow(0 0 12px #A0E0F0) blur(1px);
    /* Soft, glowing blur */
    z-index: -11;
    /* Way back in deep space */
    animation: majestic-comet 25s linear infinite;
}

[data-theme="midnight"] .midnight-comet {
    display: block;
}

/* 5. New Animations */
@keyframes pulse-big-star {
    0% {
        transform: scale(0.9);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.4);
        opacity: 1;
    }
}

@keyframes majestic-comet {
    0% {
        transform: rotate(20deg) translateX(-400px);
        opacity: 0;
    }

    5% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        transform: rotate(20deg) translateX(130vw);
        opacity: 0;
    }
}

/* ========================================== */
/* BUG FIX: HIDING THE GHOST ICONS            */
/* ========================================== */

/* 1. Hide the stationary 50% midpoint icon once the rocket passes it */
[data-theme="midnight"] .progress-bar.past-midpoint::before {
    opacity: 0 !important;
}

/* 2. Hide the original 0% Start Icon (if your base theme uses a specific class for it) */
/* Adjust '.start-icon' to whatever class your HTML uses for the 0% mark, if it has one! */
[data-theme="midnight"] .start-icon {
    display: none !important;
}

/* ========================================== */
/* MIDNIGHT THEME: MOBILE & GLASS TWEAKS      */
/* ========================================== */

/* 1. THE PREMIUM FROSTED GLASS EFFECT */
/* Targeted specifically to your Kanji, Progress, and Journey widgets */
[data-theme="midnight"] .kanji-widget,
[data-theme="midnight"] .progress-section,
[data-theme="midnight"] .journey-section {
    /* Changes solid color to a semi-transparent deep space blue */
    background-color: rgba(15, 20, 35, 0.65) !important;

    /* Creates the frosted glass blur effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Safari support */

    /* Adds a faint, starlight-like border to define the edges */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

/* 2. SMARTPHONE SCREEN ADJUSTMENTS */
@media (max-width: 768px) {

    /* Pack the stars twice as tight so they fit in the narrow mobile margins */
    .midnight-stars {
        background-size: 200px 200px !important;
    }

    /* Move named stars into the extreme top/bottom corners so they aren't covered */
    .named-star.pos-1 {
        top: 2vh;
        left: 5vw;
    }

    .named-star.pos-2 {
        top: 92vh;
        right: 5vw;
    }

    .named-star.pos-3 {
        bottom: 10vh;
        left: 50vw;
        transform: translateX(-50%);
    }

    /* Bring the comet lower down so it sweeps dramatically across the bottom of the phone */
    .midnight-comet {
        top: 85vh;
        width: 200px;
        /* Slightly shorter tail so it doesn't overwhelm a small screen */
    }
}

/* ========================================== */
/* ANDROID SCROLL JANK & HARDWARE ACCELERATION*/
/* ========================================== */

/* 1. Force the background elements onto their own GPU rendering layer */
.midnight-stars,
.midnight-meteor,
.midnight-comet,
.midnight-named-stars {
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 2. Optimize the frosted glass panels so they don't repaint on scroll */
[data-theme="midnight"] .kanji-widget,
[data-theme="midnight"] .progress-section,
[data-theme="midnight"] .journey-section {
    will-change: transform;
    transform: translate3d(0, 0, 0);
}



/* ========================================== */
/* SUNRISE THEME (Transparent Crossfade Fix)  */
/* ========================================== */

/* 1. The Moving Moon (Point) */
[data-theme="sunrise"] .progress-fill::after {
    background-image: url('assets/icons/sunrise-point.svg');
    width: 35px;
    height: 35px;
    right: -17px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* 2. The Moving Cloud (Hidden initially, travels invisibly with the Moon) */
[data-theme="sunrise"] .progress-fill::before {
    background-image: url('assets/icons/sunrise-mid.svg');
    width: 45px;
    height: 45px;
    right: -22px;
    /* Centered perfectly */
    opacity: 0;
    /* Invisible until 50% */
    transition: opacity 0.3s ease;
}

/* 3. The Stationary Cloud (Waiting at 50%) */
[data-theme="sunrise"] .progress-bar::before {
    background-image: url('assets/icons/sunrise-mid.svg');
    width: 45px;
    height: 45px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* ========================================== */
/* THE ANIMATION TRIGGERS                     */
/* ========================================== */

/* 4. AT 50%: The Crossfade! */
/* Moon fades out */
[data-theme="sunrise"] .progress-bar.past-midpoint .progress-fill::after {
    opacity: 0;
}

/* Moving Cloud fades in */
[data-theme="sunrise"] .progress-bar.past-midpoint .progress-fill::before {
    opacity: 1;
}

/* Stationary Cloud fades out so their transparent outlines don't overlap! */
[data-theme="sunrise"] .progress-bar.past-midpoint::before {
    opacity: 0;
}

/* 5. The Stationary Sun (Waiting at 100%) */
[data-theme="sunrise"] .progress-bar::after {
    background-image: url('assets/icons/sunrise-end.svg');
    width: 55px;
    height: 55px;
    right: -27px;
    z-index: 6;
    /* Kept in the back */
}

/* 6. AT 100%: The Moving Cloud vanishes into the Sun! */
[data-theme="sunrise"] .progress-bar.is-complete .progress-fill::before {
    opacity: 0;
}

/* ========================================== */
/* 100% CELEBRATION ANIMATIONS                */
/* ========================================== */

/* The Wiggle Keyframes */
@keyframes sun-wiggle {
    0%, 100% { transform: translateY(-50%) rotate(0deg) scale(1); }
    20% { transform: translateY(-50%) rotate(-15deg) scale(1.1); }
    40% { transform: translateY(-50%) rotate(10deg) scale(1.1); }
    60% { transform: translateY(-50%) rotate(-10deg) scale(1.1); }
    80% { transform: translateY(-50%) rotate(5deg) scale(1.1); }
}

/* Trigger the wiggle on the Sun when progress hits 100% */
[data-theme="sunrise"] .progress-bar.is-complete::after {
    /* Runs the 1-second wiggle animation, loops infinitely */
    animation: sun-wiggle 1s ease-in-out infinite; 
}

/* ========================================== */
/* NORD THEME SETUP (The Melting Journey)     */
/* ========================================== */

/* Cold arctic blue progress line and fill */
[data-theme="nord"] .progress-bar {
    background-color: rgba(60, 90, 110, 0.4);
}

[data-theme="nord"] .progress-fill {
    background-color: #A0E0F0;
    z-index: auto !important;
}

/* 1. Melting Start Shelf (The Transform Loop) */
[data-theme="nord"] .progress-bar::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    left: -30px;
    top: 50%;
    /* FIX: Shifted it UP so the blue lake aligns with the progress line */
    transform: translateY(calc(-50% - 9px));
    background-image: url('assets/icons/ice-shelf.svg');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
    /*alternate for boomerang effect*/
    animation: start-shelf-melts 8s linear infinite !important;
}
/* 2. Polar Bear (Moving Point) */
[data-theme="nord"] .progress-fill::after {
    background-image: url('assets/icons/polar-bear-4-feet.svg');
    width: 44px;
    height: 44px;
    right: -5px;
    z-index: 5;
    transform-origin: bottom center;
    /* Proper base transform so it doesn't teleport */
    transform: translateY(calc(-100% + 8px));
}

/* 3. Towed Penguin (Revealed Past 50%) */
[data-theme="nord"] .progress-bar .progress-fill::before {
    background-image: url('assets/icons/arctic-penguin.svg');
    width: 33px;
    height: 33px;
    right: 30px;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.3s ease;
    transform-origin: bottom center;
    /* FIX: Removed !important so the bowing animation is allowed to run! */
    transform: translateY(calc(-100% + 0px));
}
/* 3.5 Reveal towed penguin only PAST 50% */
[data-theme="nord"] .progress-bar.past-midpoint .progress-fill::before {
    opacity: 1;
}

/* 4. The Sad Melting Glacier (Stationary 100% End) */
[data-theme="nord"] .progress-bar::after {
    /* Start with the normal glacier */
    background-image: url('assets/icons/glacier.svg');
    width: 50px;
    height: 50px;
    right: -25px;
    transform-origin: bottom center;
    /* Keeping this centered, or tweak the -50% if this one is also misaligned! */
    transform: translateY(-50%);
    z-index: 3;
}

/* Hide by default on all other themes */
.nord-warning-text {
    display: none;
    text-align: center;
    color: #A0E0F0;
    /* FIX: Matching icy blue theme color */
    font-size: 18px;
    /* FIX: Bigger text */
    font-style: italic;
    font-weight: 700;
    /* FIX: Thicker text */
    letter-spacing: 0.5px;
    margin-top: 10px;
    margin-bottom: 15px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
    text-decoration: none;
    /* Removes the default ugly link underline */
    transition: all 0.3s ease;
    /* Smooth animation for the hover effect */
}

/* Reveal ONLY when Nord is active */
[data-theme="nord"] .nord-warning-text {
    display: block;
}

/* Hover effect so users know it's a clickable link */
.nord-warning-text:hover {
    color: #ffffff;
    /* Brightens to white on hover */
    text-decoration: underline;
    /* Adds underline on hover */
    transform: scale(1.02);
    /* Slight pop out effect */
}

/* ========================================== */
/* NORD THEME ANIMATIONS (Pit Stop & Warning) */
/* ========================================== */

@keyframes start-shelf-melts {

    /* 1. Hold the normal ice */
    0%,
    40% {
        background-image: url('assets/icons/ice-shelf.svg');
        opacity: 1;
    }

    /* 2. Fade it out smoothly */
    45% {
        background-image: url('assets/icons/ice-shelf.svg');
        opacity: 0;
    }

    /* 3. Swap the image while it's invisible to prevent flickering */
    50% {
        background-image: url('assets/icons/ice-shelf-broken.svg');
        opacity: 0;
    }

    /* 4. Fade the broken ice in and hold it */
    55%,
    85% {
        background-image: url('assets/icons/ice-shelf-broken.svg');
        opacity: 1;
    }

    /* 5. Fade the broken ice out */
    90% {
        background-image: url('assets/icons/ice-shelf-broken.svg');
        opacity: 0;
    }

    /* 6. Swap back to normal ice and fade in for a seamless loop */
    95%,
    100% {
        background-image: url('assets/icons/ice-shelf.svg');
        opacity: 1;
    }
}

/* 2. 100% Sad Pit Stop - Bear */
@keyframes bear-sad-end {

    0%,
    100% {
        transform: translateY(calc(-100% + 7px)) rotate(0deg) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateY(calc(-100% + 8px)) rotate(2deg) scale(0.95);
        opacity: 0.7;
    }
}

/* 2.5 100% Sad Pit Stop - Penguin */
@keyframes penguin-sad-end {

    0%,
    100% {
        /* FIX: Matches the new setup height exactly so it doesn't glitch! */
        transform: translateY(calc(-100% - 0px)) rotate(0deg) scale(1);
        opacity: 1;
    }

    50% {
        /* Bows down slightly (adds 2px of upward movement) */
        transform: translateY(calc(-100% + 2px)) rotate(2deg) scale(0.95);
        opacity: 0.7;
    }
}

/* 3. 100% Sad Pit Stop - Glacier Cracks (No Movement) */
@keyframes glacier-crack {

    0%,
    100% {
        /* Locked perfectly in place */
        transform: translateY(-50%) scale(1);
        opacity: 1;
        background-image: url('assets/icons/glacier.svg');
    }

    45%,
    55% {
        /* Still locked in place, just swapping the image and dimming slightly */
        transform: translateY(-50%) scale(1);
        opacity: 0.8;
        background-image: url('assets/icons/glacier-broken.svg');
    }
}

@keyframes warning-fade {

    0%,
    100% {
        opacity: 0;
    }

    20%,
    80% {
        opacity: 0.8;
    }
}


/* APPLYING THE ANIMATIONS AT 100% COMPLETE */

/* 1. Bear Point */
/* 1. Bear Point (is-complete) */
[data-theme="nord"] .progress-bar.is-complete .progress-fill::after {
    /* Triggers the Bear's specific animation */
    animation: bear-sad-end 1.5s ease-in-out 0.6s infinite !important;
}

/* 2. Carried Penguin (is-complete) */
[data-theme="nord"] .progress-bar.is-complete .progress-fill::before {
    /* Triggers the Penguin's specific animation */
    animation: penguin-sad-end 1.4s ease-in-out 0.6s infinite !important;
}

/* 3. Melting Glacier (is-complete) */
[data-theme="nord"] .progress-bar.is-complete::after {
    /* Changed to the new cracking animation, 2s smooth loop */
    animation: glacier-crack 2s ease-in-out 0.6s infinite !important;
}

/* Kanji Journey */
.journey-section {
    background-color: var(--surface);
    padding: 1.25rem;
    border-radius: var(--border-radius);
    box-shadow: var(--elevation-1);
}

.journey-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    width: 100%;
}

.journey-header h3 {
    color: var(--primary-color);
    margin: 0;
}

.journey-summary {
    font-size: 0.9rem;
    color: var(--on-surface);
    opacity: 0.8;
}

.journey-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.journey-pill {
    border: none;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    font-size: 1.05rem;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.journey-pill:hover {
    transform: translateY(-1px);
}

.journey-pill.mastered {
    background-color: rgba(var(--primary-color-rgb), 0.16);
    color: var(--primary-color);
}

.journey-pill.pending {
    background-color: rgba(120, 120, 120, 0.14);
    color: rgba(var(--on-surface), 0.55);
}

/* Recent Section */
.recent-section h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 1rem;
}

.recent-item {
    background-color: var(--surface);
    padding: 1rem;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--elevation-1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.recent-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
}

.recent-kanji {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.recent-meaning {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Modal/Sidebar Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    animation: fadeIn 0.3s ease;
}

.modal.show {
    display: block;
}

.modal-content {
    position: fixed;
    right: -400px;
    top: 0;
    width: 400px;
    height: 100vh;
    background-color: var(--surface);
    opacity: 0.97;
    backdrop-filter: blur(10px);
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    animation: slideInSidebar 0.3s ease forwards;
    overflow-y: auto;
}

.modal.show .modal-content {
    animation: slideInSidebar 0.3s ease forwards;
}

.modal:not(.show) .modal-content {
    animation: slideOutSidebar 0.3s ease forwards;
}

@keyframes slideInSidebar {
    to {
        right: 0;
    }
}

@keyframes slideOutSidebar {
    from {
        right: 0;
    }
    to {
        right: -400px;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(var(--on-surface), 0.1);
    flex-shrink: 0;
    background-color: var(--surface);
}

.modal-header h2 {
    color: var(--primary-color);
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--on-surface);
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-btn:hover {
    background-color: rgba(var(--on-surface), 0.1);
    transform: rotate(90deg);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.setting-group {
    margin-bottom: 1.5rem;
}

.setting-group label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: var(--on-surface);
}

.setting-group select,
.setting-group input[type="checkbox"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid rgba(var(--on-surface), 0.3);
    border-radius: 8px;
    background-color: var(--surface);
    color: var(--on-surface);
    font-family: inherit;
}

.setting-group input[type="checkbox"] {
    width: auto;
    transform: scale(1.2);
}

/* Font Preview Grid */
.font-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.font-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border: 2px solid rgba(var(--on-surface), 0.2);
    border-radius: 8px;
    background-color: var(--surface);
    cursor: pointer;
    transition: all 0.3s ease;
}

.font-option:hover {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-color), 0.05);
    transform: translateY(-2px);
}

.font-option.active {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-color), 0.1);
    box-shadow: 0 0 10px rgba(var(--primary-color), 0.3);
}

.font-sample {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
    color: var(--on-surface);
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.font-name {
    font-size: 0.65rem;
    text-align: center;
    color: var(--on-surface-variant);
    font-weight: 500;
}

.reset-btn {
    background-color: var(--error);
    color: var(--on-error);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.reset-btn:hover {
    background-color: #8B0000;
    transform: translateY(-1px);
}

.backup-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.backup-btn {
    background-color: var(--primary-color);
    color: var(--on-primary);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 120px;
}

.backup-btn:hover {
    background-color: var(--primary-variant);
    transform: translateY(-1px);
}

/* Stroke Order */
.stroke-order-section {
    margin-top: 1rem;
    border-top: 1px solid rgba(var(--primary-color-rgb), 0.16);
    padding-top: 0.85rem;
}

.stroke-order-header {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stroke-order-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.45rem;
}

.stroke-order-play {
    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    background: rgba(var(--primary-color-rgb), 0.12);
    color: var(--primary-color);
    cursor: pointer;
}

.stroke-order-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
    padding: 0.5rem;
    border-radius: 12px;
    background: rgba(var(--primary-color-rgb), 0.05);
    color: var(--primary-color);

    /* NEW: Make it look and feel clickable */
    cursor: pointer;
    transition: background 0.2s ease;
}

/* NEW: Add a subtle highlight when hovering */
.stroke-order-container:hover {
    background: rgba(var(--primary-color-rgb), 0.08);
}

.stroke-order-container svg {
    width: 100%;
    max-width: 220px;
    height: auto;
}

.stroke-order-container path {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    /*vector-effect: non-scaling-stroke; /* STROKE BUG stroke order bug fixed rn dont change!!! */
}

.stroke-order-container svg text {
    font-size: 8px !important;
    font-family: sans-serif !important;
    fill: rgba(255, 255, 255, 0.4) !important;
    /* Makes numbers subtly dim and clean */
}

.stroke-order-loading,
.stroke-order-empty {
    color: var(--on-surface);
    opacity: 0.72;
    font-size: 0.95rem;
}

/* Font size classes */
.font-size-small .kanji-character {
    font-size: 3rem !important;
}

.font-size-small .kanji-meaning {
    font-size: 1.2rem !important;
}

.font-size-small .reading-value {
    font-size: 0.9rem !important;
}

.font-size-medium .kanji-character {
    font-size: 4rem !important;
}

.font-size-medium .kanji-meaning {
    font-size: 1.5rem !important;
}

.font-size-medium .reading-value {
    font-size: 1.1rem !important;
}

.font-size-large .kanji-character {
    font-size: 5rem !important;
}

.font-size-large .kanji-meaning {
    font-size: 1.8rem !important;
}

.font-size-large .reading-value {
    font-size: 1.3rem !important;
}

.font-size-extra-large .kanji-character {
    font-size: 6rem !important;
}

.font-size-extra-large .kanji-meaning {
    font-size: 2rem !important;
}

.font-size-extra-large .reading-value {
    font-size: 1.5rem !important;
}

/* Clickable readings for pronunciation */
.reading-value {
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 0.25rem;
    border-radius: 4px;
}

.reading-value:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
}

/* Toast Notification */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--surface);
    color: var(--on-surface);
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--elevation-3);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    pointer-events: auto;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse-animation {
    animation: pulse 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-content {
        padding: 1rem;
    }
    
    .kanji-character {
        font-size: 3rem;
    }
    
    .widget-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .progress-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .recent-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }
    
    .modal-content {
        width: 80%;
        max-width: 100%;
        right: -80%;
    }
    
    .font-preview-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .journey-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
}

@media (max-width: 480px) {
    .app-header {
        padding: 1rem;
    }
    
    .app-header h1 {
        font-size: 1.25rem;
    }
    
    .kanji-character {
        font-size: 2.5rem;
    }
    
    .kanji-readings {
        flex-direction: column;
        gap: 0.5rem;
    }
}

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

/* Focus styles for keyboard navigation */
button:focus,
select:focus,
input:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --shadow: rgba(0, 0, 0, 0.5);
    }
    
    .kanji-widget {
        border: 2px solid var(--on-surface);
    }
}

.journey-toggle-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

#toggleJourneyBtn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
    border-radius: 20px;
    transition: all 0.2s ease;
}

#toggleJourneyBtn:hover {
    background: var(--primary-color);
    color: var(--on-primary);
    transform: translateY(-1px);
}

/* Clean layout grid wrapper for the truncated journey view */
.compact-fade-wrapper {
    padding: 6px;
    margin: -6px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
    gap: 0.5rem;
    width: 100%;
    padding-bottom: 25px;
    /* Adds soft padding cushion space at the bottom boundary */

    /* THE FIX: Gracefully fades the actual kanji grid visibility out to 0% transparency at the bottom */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
}

/* Ensure the background match remains perfect when dark mode theme attributes are active */
[data-theme="dark"] .compact-fade-wrapper::after {
    background: rgba(18, 18, 18, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* Center the horizontal trail dots beautifully right inside the grid card flow */
.journey-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: var(--text-color);
    font-size: 0.9rem;
    border-radius: 8px;
    min-height: 40px;
    opacity: 0.6;
    animation: pulse 2s infinite ease-in-out;
}

/* Hover rule animation match for the custom bottom chevron toggle */
#toggleJourneyBottomBtn:hover {
    background: var(--primary-color) !important;
    color: var(--on-primary) !important;
    border-color: transparent !important;
    transform: translateY(-1px);
}

/* Layout rule to pull checkboxes onto a clean single row */
.setting-group.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Pushes the text to the left, checkbox to the far right */
    gap: 1rem;
    padding: 0.4rem 0;
}

/* Ensure the tiny checkboxes align smoothly center-wise with the label baseline text */
.setting-row input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* Fix for KanjiVG stroke order numbers visibility across light/dark themes */
#strokeOrderContainer svg text {
    fill: var(--text-color) !important;
    /* Forces the numbers to match your theme's text color */
    opacity: 0.6;
    /* Makes them slightly subtle so they don't distract from the main strokes */
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 500;
}

.premium-kana-btn {
    flex: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 0.8rem;
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.premium-kana-btn .kana-icon {
    font-size: 1.2rem;
    opacity: 0.8;
}

.premium-kana-btn:hover {
    background: rgba(187, 134, 252, 0.15);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(187, 134, 252, 0.2);
}

.premium-kana-btn:active {
    transform: translateY(0);
}
/* Premium Kana Gojuon Grid Layout */
#kanjiJourney.kana-layout,
#kanjiJourney.kana-layout .compact-fade-wrapper {
    display: grid !important;
    grid-template-rows: repeat(5, auto);
    /* Forces exactly 5 rows (a, i, u, e, o) */
    grid-auto-flow: column;
    /* Flows items top-to-bottom, then moves to next column */
    justify-content: start;
    gap: 0.6rem;
    overflow-x: auto;
    /* Allows swiping left/right on mobile */

    /* THE FIX: Added breathing room for focus rings/shadows so they don't clip */
    padding-top: 0.4rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    padding-bottom: 0.8rem;
}

/* Make the grid pills perfectly square so they look like a chart */
#kanjiJourney.kana-layout .journey-pill {
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

/* --- Light Themes --- */
[data-theme="yotsuba"] {
    --primary-color: #789922;
    --background: #F0EAD6;
    --surface: #FFFFFF;
    --on-surface: #333;
}

[data-theme="paper"] {
    --primary-color: #222222;
    --background: #FFFFFF;
    --surface: #F5F5F5;
    --on-surface: #000;
}

[data-theme="candy"] {
    --primary-color: #FF80AB;
    --background: #FFF5F7;
    --surface: #FFFFFF;
    --on-surface: #4A148C;
}

[data-theme="sunrise"] {
    --primary-color: #FF9800;
    --background: #FFFDE7;
    --surface: #FFFFFF;
    --on-surface: #5D4037;
}

/* --- Dark Themes --- */
[data-theme="dracula"] {
    --primary-color: #BD93F9;
    --background: #282A36;
    --surface: #44475A;
    --on-surface: #F8F8F2;
}

[data-theme="nord"] {
    --primary-color: #88C0D0;
    --background: #2E3440;
    --surface: #3B4252;
    --on-surface: #ECEFF4;
}

[data-theme="midnight"] {
    --primary-color: #2979FF;
    --background: #0D1117;
    --surface: #161B22;
    --on-surface: #C9D1D9;
}

[data-theme="forest"] {
    --primary-color: #81C784;
    --background: #1B262C;
    --surface: #2F4858;
    --on-surface: #E0F2F1;
}

/* ========================================== */
/* Quick Level Dropdown Menu */
/* ========================================== */
.level-dropdown {
    display: none;
    position: absolute;
    top: 130%;
    right: 0;
    background-color: var(--surface);
    border: 1px solid rgba(150, 150, 150, 0.2);
    border-radius: 12px;
    box-shadow: var(--elevation-3);
    padding: 0.5rem;
    min-width: 170px;
    z-index: 1000;
    flex-direction: column;
    gap: 0.2rem;
    animation: fadeIn 0.2s ease;
}

.level-dropdown.show {
    display: flex;
}

.level-option {
    background: none;
    border: none;
    color: var(--on-surface);
    padding: 0.6rem 1rem;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.level-option .kana-icon {
    font-family: var(--japanese-font);
    font-weight: bold;
    color: var(--primary-color);
    width: 24px;
    text-align: center;
}

.level-option:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
}

.level-option.active {
    background-color: var(--primary-color);
    color: var(--on-primary);
}

.level-option.active .kana-icon {
    color: var(--on-primary);
}

.dropdown-divider {
    height: 1px;
    background-color: rgba(150, 150, 150, 0.2);
    margin: 0.3rem 0;
}

/* ========================================== */
/* Daily Streak Badge */
/* ========================================== */
.streak-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #FF9A9E, #FF5252);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1.15rem;
    box-shadow: 0 4px 10px rgba(255, 82, 82, 0.3);
    transition: all 0.3s ease;
    cursor: default;
}

.streak-badge:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 14px rgba(255, 82, 82, 0.4);
}

.streak-badge i {
    color: #FFE082;
    /* Golden flame core */
    font-size: 1.2rem;
    animation: flicker 2s infinite alternate;
}

/* Grayed out state when streak is 0 */
.streak-badge.inactive {
    background: rgba(150, 150, 150, 0.15);
    color: var(--on-surface);
    opacity: 0.6;
    box-shadow: none;
}

.streak-badge.inactive i {
    color: inherit;
    animation: none;
}

@keyframes flicker {
    0% {
        transform: scale(1) rotate(-2deg);
        opacity: 0.9;
    }

    25% {
        transform: scale(1.05) rotate(2deg);
        opacity: 1;
    }

    50% {
        transform: scale(0.95) rotate(-1deg);
        opacity: 0.85;
    }

    75% {
        transform: scale(1.08) rotate(3deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.9;
    }
}

/* 1. Smooth Progress Bar Animation */
.progress-fill {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Tactile Button Clicks */
.action-btn:active,
.icon-btn:active,
.premium-kana-btn:active,
.level-option:active,
.journey-pill:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

/* Prevent Kanji from colliding with action buttons on mobile screens */
@media (max-width: 600px) {
    .kanji-character {
        margin-top: 30px;
    }
}
/* ========================================== */
/* 波 (NAMI) THEME SETUP (Neon Moon Lake)     */
/* ========================================== */

/* 1. The Color Palette */
[data-theme="nami"] {
    --primary-color: #00E5FF;
    /* Electric Cyan */
    --primary-variant: #00B8D4;
    --secondary-color: #FF00FF;
    /* Neon Magenta */
    --background: #050505;
    /* Pitch Black */
    --surface: #111111;
    /* Very dark grey for contrast */
    --error: #FF1744;
    --on-primary: #000000;
    --on-secondary: #FFFFFF;
    --on-background: #FFFFFF;
    --on-surface: #FFFFFF;
    --shadow: rgba(0, 229, 255, 0.2);
    /* Cyan glowing shadows */
}

/* 2. The Canvas Container */
.nami-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    /* Sits in front of the body background */
    pointer-events: none;
    /* Allows clicking through the wave */
}

[data-theme="nami"] .nami-background {
    display: block;
}

/* 3. Apply Frosted Glass to Nami */
[data-theme="nami"] .kanji-widget,
[data-theme="nami"] .progress-section,
[data-theme="nami"] .journey-section {
    background-color: rgba(10, 10, 10, 0.65) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.15);
    /* Faint cyan border */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* 4. Nami Progress Bar Colors */
[data-theme="nami"] .progress-bar {
    background-color: rgba(255, 0, 255, 0.2);
    /* Magenta track */
}

[data-theme="nami"] .progress-fill {
    background-color: var(--primary-color);
    /* Cyan fill */
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
    /* Glow effect */
}

/* 5. Push the app container safely in front of the canvas */
.app-container {
    position: relative;
    /* Must be relative for z-index to work! */
    z-index: 1;
    /* Ensures widgets sit on top of the wave */
    max-width: 800px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* ========================================== */
/* LUMEN THEME SETUP (Chromatic WebGL Wave)   */
/* ========================================== */

/* 1. The Color Palette (High contrast to make the RGB wave pop) */
[data-theme="lumen"] {
    --primary-color: #FFFFFF;
    /* Pure white light */
    --primary-variant: #CCCCCC;
    --secondary-color: #FF0055;
    /* A subtle punchy accent */
    --background: #000000;
    /* Pitch Black */
    --surface: #0A0A0A;
    /* Deepest grey */
    --error: #FF1744;
    --on-primary: #000000;
    --on-secondary: #FFFFFF;
    --on-background: #FFFFFF;
    --on-surface: #FFFFFF;
    --shadow: rgba(255, 255, 255, 0.1);
}

/* 2. The Canvas Container */
.lumen-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    /* Behind the app, in front of the body */
    pointer-events: none;
}

[data-theme="lumen"] .lumen-background {
    display: block;
}

/* 3. Apply Premium Frosted Glass */
[data-theme="lumen"] .kanji-widget,
[data-theme="lumen"] .progress-section,
[data-theme="lumen"] .journey-section {
    background-color: rgba(10, 10, 10, 0.5) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    /* Sharp white glass edge */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.9);
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* 4. Lumen Progress Bar */
[data-theme="lumen"] .progress-bar {
    background-color: rgba(255, 255, 255, 0.15);
}

[data-theme="lumen"] .progress-fill {
    background-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
    /* White glowing core */
}
/* ========================================== */
/* YUKI FOOTER CREDIT (Lumen Theme Exclusive) */
/* ========================================== */

/* Hide by default on all other themes */
.yuki-credit {
    display: none;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Style the link to match your theme but stand out slightly */
.yuki-credit a {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.yuki-credit a:hover {
    text-decoration: underline;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
    /* Slight cyan glow on hover */
}

/* Reveal ONLY when Lumen theme is active */
[data-theme="lumen"] .yuki-credit {
    display: block;
    animation: fadeInCredit 0.5s ease forwards 0.2s;
    /* Slight delay so it fades in smoothly */
}

@keyframes fadeInCredit {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 0.85;
        transform: translateY(0);
    }
}
/* ========================================== */
/* お化け (OBAKE) THEME SETUP (Spectral Ghost) */
/* ========================================== */

[data-theme="obake"] {
    --primary-color: #bb86fc;
    /* Soft, glowing amethyst */
    --primary-variant: #9965f4;
    --secondary-color: #03dac6;
    /* Soft teal for the eyes */
    --background: #050508;
    /* Deep void blue-black */
    --surface: #111116;
    --error: #cf6679;
    --on-primary: #000000;
    --on-secondary: #000000;
    --on-background: #e0e0e0;
    --on-surface: #e0e0e0;
    --shadow: rgba(187, 134, 252, 0.15);
}

.obake-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

[data-theme="obake"] .obake-background {
    display: block;
}

[data-theme="obake"] .kanji-widget,
[data-theme="obake"] .progress-section,
[data-theme="obake"] .journey-section {
    background-color: rgba(10, 10, 15, 0.6) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(187, 134, 252, 0.1);
    /* Soft purple border */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.9);
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

[data-theme="obake"] .progress-bar {
    background-color: rgba(187, 134, 252, 0.15);
}

[data-theme="obake"] .progress-fill {
    background-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(187, 134, 252, 0.4);
    /* Soft glow */
}
/* ========================================== */
/* OBAKE THEME: HEADER POLISH                 */
/* ========================================== */

/* 1. Frosted Glass Header */
[data-theme="obake"] .app-header {
    background-color: rgba(10, 10, 15, 0.4) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(187, 134, 252, 0.15);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    color: var(--on-background);
}

/* 2. Glowing Text and Icons */
[data-theme="obake"] .app-header h1,
[data-theme="obake"] .app-header .icon-btn i {
    color: var(--primary-color) !important;
    text-shadow: 0 0 12px rgba(187, 134, 252, 0.4);
}

/* 3. Level Switcher Button Restyling */
[data-theme="obake"] #levelToggleBtn {
    background: rgba(187, 134, 252, 0.12) !important;
    border: 1px solid rgba(187, 134, 252, 0.3) !important;
    color: var(--primary-color) !important;
    box-shadow: 0 0 10px rgba(187, 134, 252, 0.15);
}
/* ========================================== */
/* FILIP FOOTER CREDIT (Obake Theme Exclusive)*/
/* ========================================== */

/* Hide by default on all other themes */
.filip-credit {
    display: none;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Style the link to match your theme */
.filip-credit a {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.filip-credit a:hover {
    text-decoration: underline;
    text-shadow: 0 0 8px rgba(187, 134, 252, 0.4);
    /* Soft amethyst glow on hover */
}

/* Reveal ONLY when Obake theme is active */
[data-theme="obake"] .filip-credit {
    display: block;
    animation: fadeInCredit 0.5s ease forwards 0.2s;
    /* Uses the same animation keyframes as Yuki's */
}

/* ========================================== */
/* 糸 (ITO) THEME SETUP (Neon Tubes)          */
/* ========================================== */

[data-theme="ito"] {
    --primary-color: #f967fb;
    /* Neon Pink */
    --primary-variant: #6958d5;
    /* Cyber Purple */
    --secondary-color: #53bc28;
    /* Acid Green */
    --background: #000000;
    --surface: #0a0a0f;
    --error: #FF1744;
    --on-primary: #000000;
    --on-secondary: #000000;
    --on-background: #ffffff;
    --on-surface: #e0e0e0;
    --shadow: rgba(249, 103, 251, 0.15);
}

.ito-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    /* Lets clicks pass through to the document */
}

[data-theme="ito"] .ito-background {
    display: block;
}

/* Frosted Glass UI panels */
[data-theme="ito"] .kanji-widget,
[data-theme="ito"] .progress-section,
[data-theme="ito"] .journey-section,
[data-theme="ito"] .app-header {
    background-color: rgba(10, 10, 15, 0.5) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(249, 103, 251, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
}

/* Header Text Glow */
[data-theme="ito"] .app-header h1,
[data-theme="ito"] .app-header .icon-btn i {
    color: var(--primary-color) !important;
    text-shadow: 0 0 12px rgba(249, 103, 251, 0.5);
}

/* Footer Credit Reveal */
.soju-credit {
    display: none;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.soju-credit a {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.soju-credit a:hover {
    text-decoration: underline;
    text-shadow: 0 0 8px rgba(249, 103, 251, 0.4);
}

[data-theme="ito"] .soju-credit {
    display: block;
    animation: fadeInCredit 0.5s ease forwards 0.2s;
}