/* style.css - Dragon's Hoard v3 - Molten Gold & Stone Theme */
/* Diamond svg - by Paris 16 - https://commons.wikimedia.org/wiki/File:Blue_diamond_symbol.svg */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=Lato:wght@400;700&display=swap');

:root {
    --font-heading: 'IM Fell English SC', serif;
    --font-body: 'Lato', sans-serif;
    --color-stone-dark: #1a1816;
    --color-stone-light: #2a2725;
    --color-black: #000000;
    --color-text: #e8e0d4;
    --color-text-muted: #9e968b;
    --color-gold: #f7b733;
    --color-fire: #fc4a1a;
    --color-green: #2ecc71;
    --color-red: #e74c3c;
    --gradient-gold: linear-gradient(45deg, #f7b733, #fc4a1a);
    --gradient-red: linear-gradient(45deg, #c0392b, #fc4a1a);
    --gradient-green: linear-gradient(45deg, #ffebb8, #ffebb8);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    --bg-charred-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='280' viewBox='0 0 180 280'%3E%3Cdefs%3E%3ClinearGradient id='ember2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23fc4a1a;stop-opacity:0.2'/%3E%3Cstop offset='50%25' style='stop-color:%23f7b733;stop-opacity:0.1'/%3E%3Cstop offset='100%25' style='stop-color:%23fc4a1a;stop-opacity:0.2'/%3E%3C/linearGradient%3E%3CradialGradient id='charSpot' cx='50%25' cy='50%25'%3E%3Cstop offset='0%25' style='stop-color:%23000000;stop-opacity:0.2'/%3E%3Cstop offset='70%25' style='stop-color:%231a1816;stop-opacity:0.1'/%3E%3Cstop offset='100%25' style='stop-color:%232a2725;stop-opacity:0'/%3E%3C/radialGradient%3E%3ClinearGradient id='hotEmber' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23fc4a1a;stop-opacity:0.25'/%3E%3Cstop offset='30%25' style='stop-color:%23f7b733;stop-opacity:0.15'/%3E%3Cstop offset='70%25' style='stop-color:%23fc4a1a;stop-opacity:0.15'/%3E%3Cstop offset='100%25' style='stop-color:%23f7b733;stop-opacity:0.25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='180' height='280' fill='%230d0c0b' opacity='0'/%3E%3Cellipse cx='45' cy='70' rx='35' ry='50' fill='url(%23charSpot)' opacity='0.2'/%3E%3Cellipse cx='130' cy='150' rx='40' ry='60' fill='url(%23charSpot)' opacity='0.25'/%3E%3Cellipse cx='70' cy='220' rx='30' ry='45' fill='url(%23charSpot)' opacity='0.18'/%3E%3Cpath d='M20,0 Q25,40 20,80 Q15,120 22,160 Q18,200 20,240 Q22,260 20,280' stroke='%231a1816' stroke-width='15' fill='none' opacity='0.15'/%3E%3Cpath d='M50,0 Q45,50 48,100 Q52,150 47,200 Q49,240 50,280' stroke='%232a2725' stroke-width='18' fill='none' opacity='0.12'/%3E%3Cpath d='M85,0 Q88,45 85,90 Q82,135 87,180 Q85,230 85,280' stroke='%231a1816' stroke-width='12' fill='none' opacity='0.18'/%3E%3Cpath d='M115,0 Q110,55 113,110 Q118,165 112,220 Q115,250 115,280' stroke='%232a2725' stroke-width='16' fill='none' opacity='0.15'/%3E%3Cpath d='M145,0 Q148,48 145,95 Q142,142 146,190 Q144,235 145,280' stroke='%231a1816' stroke-width='14' fill='none' opacity='0.12'/%3E%3Cpath d='M40,20 Q42,65 40,110 Q38,155 41,200 Q39,240 40,280' stroke='url(%23hotEmber)' stroke-width='3' fill='none' opacity='0.2'/%3E%3Cpath d='M95,0 Q97,50 95,100 Q93,150 96,200 Q94,240 95,280' stroke='url(%23ember2)' stroke-width='2.5' fill='none' opacity='0.18'/%3E%3Cpath d='M135,10 Q137,55 135,100 Q133,145 136,190 Q134,235 135,280' stroke='url(%23hotEmber)' stroke-width='2' fill='none' opacity='0.2'/%3E%3C/svg%3E"),
                     radial-gradient(ellipse at top, #2a2725 0%, #1a1816 40%, #0d0c0b 100%);
}

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

body {
    font-family: var(--font-body);
    background: var(--bg-charred-wood);
    background-attachment: fixed;
    color: var(--color-text);
    margin: 0;
}

.dashboard-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    animation: fadeIn 0.8s ease-out;
}

/* Force dashboard container to a simple block layout in view-only mode */
.view-only .dashboard-container {
    display: block;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(247, 183, 51, 0.2);
}

.logo {
    font-family: var(--font-heading);
    font-size: 2.2em;
    display: flex;
    align-items: center;
    gap: 15px;
}
.logo-icon {
    width: 40px;
    height: 40px;
}

.header-actions .icon-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    text-decoration: none;
}
.header-actions .icon-button .icon {
    width: 24px;
    height: 24px;
    opacity: 0.7;
    transition: opacity 0.3s, transform 0.3s;
}
.header-actions .icon-button:hover .icon {
    opacity: 1;
    transform: scale(1.1);
}

.main-content {
    background: var(--color-black);
    border-radius: 12px;
    margin-top: 30px;
    padding: 30px;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.hoard-summary {
    text-align: center;
    margin-bottom: 30px;
}
.hoard-summary h2 {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.2em;
    color: var(--color-text-muted);
    margin: 0 0 10px 0;
}
.hoard-total {
    font-family: var(--font-heading);
    font-size: 4em;
    background-image: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    line-height: 1;
}

.main-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.main-controls .action-button {
    font-family: var(--font-heading);
    font-size: 1.3em;
    padding: 20px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.3s;
}
.action-button:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.4); }
.action-button .icon { width: 24px; height: 24px; }
.main-controls .add {
    background: var(--color-gold);
    color: var(--color-stone-dark);
}
.main-controls .spend {
    background: #c0392b; /* A darker, richer red */
    color: var(--color-text);
}

/* Tabs */
.tab-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}
.tab-button {
    font-family: var(--font-heading);
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 1.2em;
    color: var(--color-text-muted);
    position: relative;
    transition: color 0.3s;
}
.tab-button:hover { color: var(--color-text); }
.tab-button.active {
    color: var(--color-gold);
}
.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 10%;
    width: 80%;
    height: 2px;
    background: var(--gradient-gold);
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.5s; }

/* Transaction Table */
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
th {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-text-muted);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}
td { font-size: 1.1em; }
td.positive { color: var(--color-green); }
td.negative { color: var(--color-red); }
td:last-child { text-align: right; }

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
}
.modal-content {
    background: var(--color-stone-light);
    margin: 10% auto;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow);
    position: relative;
    border-top: 4px solid var(--color-gold);
    animation: fadeIn 0.4s;
}
.modal-content h2 {
    font-family: var(--font-heading);
    font-size: 2em;
    margin: 0 0 20px 0;
    text-align: center;
}
.close-button {
    color: var(--color-text-muted);
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}
.close-button:hover { color: var(--color-text); }

.modal-form label {
    font-size: 0.9em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.modal-form input {
    width: 100%;
    padding: 12px;
    margin: 8px 0 20px 0;
    box-sizing: border-box;
    border: 1px solid #444;
    border-radius: 5px;
    background: var(--color-stone-dark);
    color: var(--color-text);
    font-size: 1.1em;
}
.modal-form button {
    font-family: var(--font-heading);
    font-size: 1.2em;
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--color-stone-dark);
    font-weight: bold;
    border: none;
    background: var(--gradient-gold);
    transition: transform 0.3s;
}
.modal-form button:hover { transform: scale(1.02); }

.action-btn {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    margin-left: 5px;
    transition: background-color 0.3s;
    font-family: var(--font-body); /* Added for consistency */
}

.edit-btn,
.edit-goal-btn {
    background-color: var(--color-stone-dark);
    color: var(--color-text-muted);
    border: 1px solid #555;
}
.edit-btn:hover,
.edit-goal-btn:hover {
    background-color: var(--color-gold);
    color: var(--color-stone-dark);
    border-color: var(--color-gold);
}

.delete-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1em;
    padding: 5px;
}
.delete-btn:hover {
    color: var(--color-red);
}

/* Goal Styles */
.goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.goal-card {
    background: var(--color-stone-dark);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #444;
}

.goal-card h3 {
    font-family: var(--font-heading);
    margin: 0 0 15px 0;
    font-size: 1.5em;
    color: var(--color-gold);
}

.goal-progress {
    margin-bottom: 15px;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    margin-bottom: 5px;
    color: var(--color-text-muted);
}

.progress-bar-bg {
    background-color: #111;
    border-radius: 5px;
    height: 20px;
    overflow: hidden;
}

.progress-bar-fg {
    height: 100%;
    background: var(--gradient-gold);
    border-radius: 5px;
    transition: width 0.5s ease-out;
}

.goal-actions {
    text-align: right;
}

#add-goal-btn {
    font-family: var(--font-heading);
    font-size: 1.2em;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px dashed var(--color-gold);
    background: none;
    color: var(--color-gold);
    display: block;
    width: 100%;
    margin-top: 20px;
    transition: all 0.3s;
}
#add-goal-btn:hover {
    background: rgba(247, 183, 51, 0.1);
    border-style: solid;
}

/* --- FINAL HOARD STYLES --- */
.hoard-visualization {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Align stacks to the bottom */
    gap: 30px;
    padding: 20px;
    /* min-height removed to eliminate extra vertical space */
    flex-wrap: wrap;
}

.hoard-pile {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    grid-gap: 0;
}

.coin {
    border-radius: 50%;
    margin-top: -30px; /* This creates the stacking overlap */
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 3px 3px rgba(255,255,255,0.2), inset 0 -3px 3px rgba(0,0,0,0.2);
}
.hoard-pile .coin:first-child {
    margin-top: 0; /* The first coin in a stack doesn't get a negative margin */
}

/* Coin Types */
.coin.bronze {
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 10px 10px, #f0c0a0, #cd7f32);
    border: 2px solid #8c5620;
}
.coin.silver {
    width: 35px;
    height: 35px;
    background: radial-gradient(circle at 10px 10px, #f0f0f0, #b8b8b8);
    border: 2px solid #888;
}
.coin.gold {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 10px 10px, #fef08a, #f7b733);
    border: 2px solid #b38600;
}
.coin.diamond {
    width: 40px;
    height: 40px;
    /* The old CSS for faking a diamond is removed */
    /* NEW: Using your SVG as a background image */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 710 610'%3E%3Cg%3E%3Cpolygon fill='%23066EAE' points='705,185.771 355,605.022 505.434,226.293'/%3E%3Cpolygon fill='%2386B7D8' points='705,185.771 505.434,226.293 452.352,5.041 523.162,5.041'/%3E%3Cg%3E%3Cpolygon fill='%23C3DCEC' points='355,605.02 5.02,185.8 5,185.77 5.04,185.78 204.57,226.29'/%3E%3Cpolyline fill='none' points='5.01,185.81 5.02,185.8 5.04,185.78'/%3E%3C/g%3E%3Cpolygon fill='%23C3DCEC' points='505.43,226.29 204.57,226.29 257.65,5.04 452.35,5.04'/%3E%3Cpolygon fill='%2386B7D8' points='505.434,226.293 355,605.022 204.566,226.293'/%3E%3Cpolygon fill='%23FFFFFF' stroke='%23066EAE' stroke-width='0.25' stroke-miterlimit='10' points='452.35,5.04 257.65,5.04 204.57,226.29 5.04,185.78 186.85,5.02'/%3E%3Cpolyline fill='none' stroke='%23066EAE' stroke-width='0.25' stroke-miterlimit='10' points='186.85,5.02 5,185.77 5.02,185.8 355,605.02 705,185.77 523.16,5.04 452.35,5.04'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Reset properties from the old .coin style that are no longer needed */
    margin-top: -30px; /* Keep the stacking */
    box-shadow: none;
    border-radius: 0;
    border: none;
}

/* --- UPDATED LEGEND STYLES --- */
.hoard-legend-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px; /* Increased gap between items */
    padding: 15px;
    margin-top: 20px;
    background-color: var(--color-stone-dark);
    border-radius: 8px;
}

.legend-item {
    display: flex; /* This ensures icon and text are side-by-side */
    align-items: center;
    gap: 10px; /* Space between icon and text */
}

/* This makes the coins in the legend smaller */
.legend-item .coin {
    width: 20px !important;
    height: 20px !important;
    margin-top: 0 !important; /* Prevents stacking in the legend */
}
/* Specific size for the diamond in the legend */
.legend-item .coin.diamond {
    width: 28px !important;
    height: 28px !important;
}

.legend-item span {
    font-family: var(--font-body);
    font-size: 0.9em;
    color: var(--color-text-muted);
}

/* --- Styles for Interest & Progress Tabs --- */

.interest-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.interest-filters a {
    font-family: var(--font-body);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    background: var(--color-stone-dark);
    color: var(--color-text-muted);
    border: 1px solid #444;
    transition: all 0.3s;
}

.interest-filters a.active,
.interest-filters a:hover {
    color: var(--color-gold);
    border-color: var(--color-gold);
}

.interest-display {
    text-align: center;
}

.interest-total {
    font-family: var(--font-heading);
    font-size: 3em;
    background-image: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    line-height: 1;
}

.chart-container {
    position: relative;
    height: 400px;
    width: 100%;
}

/* --- Styles for Login & Registration Pages --- */

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    padding: 20px;
    box-sizing: border-box;
}

.auth-box {
    background: var(--color-stone-light);
    border-radius: 12px;
    padding: 40px;
    box-shadow: var(--shadow);
    border-top: 4px solid var(--color-gold);
    width: 100%;
    max-width: 400px;
    text-align: center;
    animation: fadeIn 0.5s ease-out;
}

.auth-logo {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
}

.auth-title {
    font-family: var(--font-heading);
    font-size: 2.5em;
    margin: 0 0 30px 0;
}

.auth-box form {
    text-align: left;
}

.auth-box .message {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.auth-box .success { background-color: rgba(46, 204, 113, 0.2); color: #2ecc71; }
.auth-box .error { background-color: rgba(231, 76, 60, 0.2); color: #e74c3c; }

.auth-switch-link {
    margin-top: 20px;
    font-size: 0.9em;
}
.auth-switch-link a {
    color: var(--color-gold);
    text-decoration: none;
    font-weight: bold;
}
.auth-switch-link a:hover {
    text-decoration: underline;
}

/* Add this with your other main styles */
.hamburger-menu {
    display: none;
}

/* --- Footer Dragon Styles --- */
.footer-dragon-container {
    /* Use negative margins to break out of the parent's padding */
    margin: 30px -30px -45px -30px;
}

.footer-dragon-container img {
    width: 100%;
    height: auto;
    display: block; /* Removes extra space below the image */
}

/* --- RESPONSIVE STYLES FOR MOBILE --- */
@media (max-width: 880px) {

    body {
        padding: 10px; /* Reduce overall padding on mobile */
    }

    .dashboard-container {
        padding: 10px;
    }

    .header {
        flex-direction: column; /* Stack logo and actions on top of each other */
        gap: 15px;
    }
    
    .hoard-total {
        font-size: 3em; /* Slightly smaller total font size */
    }

    .main-controls {
        grid-template-columns: 1fr; /* Stack Add/Spend buttons */
    }
    
    .tab-nav {
        gap: 5px; /* Reduce gap between tab buttons */
    }
    
    .tab-button {
        padding: 8px 10px;
        font-size: 1em;
    }

    .goals-grid {
        grid-template-columns: 1fr; /* Stack goal cards */
    }
    
    .chart-container {
        height: auto; /* Let the browser calculate the height */
        aspect-ratio: 2 / 1; /* Make it twice as wide as it is tall */
    }
    
    /* Make modals take up more screen width */
    .modal-content {
        width: 90%;
        margin: 15% auto;
        padding: 20px;
    }
    
    /* Auth pages */
    .auth-box {
        padding: 20px;
    }
    
    /* --- Hamburger Menu & Button Fixes --- */

    /* Make the large action buttons smaller on mobile */
    .main-controls .action-button {
        font-size: 1.1em;
        padding: 15px;
        gap: 10px;
    }
    
    /* Hide the standard tab navigation on mobile */
    .tab-nav {
        display: none;
        border-bottom: none;
    }
    
    /* Styles for the new hamburger button */
    .hamburger-menu {
        display: block; /* Show the hamburger button on mobile */
        position: relative;
        width: 30px;
        height: 22px;
        margin: 20px auto;
        cursor: pointer;
    }
    .hamburger-menu .bar {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--color-text-muted);
        border-radius: 3px;
        position: absolute;
        transition: all 0.3s ease-in-out;
    }
    .hamburger-menu .bar:nth-child(1) { top: 0; }
    .hamburger-menu .bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .hamburger-menu .bar:nth-child(3) { bottom: 0; }

    /* Animate hamburger to an 'X' when active */
    .hamburger-menu.active .bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
    .hamburger-menu.active .bar:nth-child(2) { opacity: 0; }
    .hamburger-menu.active .bar:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

    /* Styles for the mobile navigation when it's open */
    .tab-nav.mobile-nav-open {
        display: flex;
        flex-direction: column; /* Stack the links vertically */
        width: 100%;
        margin-top: 10px;
        border-top: 1px solid rgba(247, 183, 51, 0.2);
    }
    .tab-nav.mobile-nav-open .tab-button {
        text-align: center;
        padding: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .tab-nav.mobile-nav-open .tab-button.active::after {
        display: none; /* Hide the underline on mobile */
    }
    
    /* --- Transaction Table Mobile Fixes --- */

    /* Reduce padding and font size in table cells on mobile */
    #transactions table th,
    #transactions table td {
        font-size: 0.9em;
        padding: 12px 8px;
    }
    
    /* --- Hoard Tab Mobile Zoom Fix --- */

    /* Reduce the gap between treasure piles */
    .hoard-visualization {
        gap: 15px;
    }

    /* Give each coin type a specific overlap margin for better stacking */
    .hoard-pile .coin.bronze { margin-top: -16px; }
    .hoard-pile .coin.silver { margin-top: -19px; }
    .hoard-pile .coin.gold { margin-top: -22px; }
    .hoard-pile .coin.diamond { margin-top: -22px; }
    .coin.bronze { width: 18px; height: 18px; }
    .coin.silver { width: 24px; height: 24px; }
    .coin.gold { width: 26px; height: 26px; }
    .coin.diamond { width: 26px; height: 26px; }

    /* --- Footer Dragon Mobile Fix --- */

    /* First, adjust the main content padding on mobile */
    .main-content {
        padding: 20px 20px 0 20px; /* Reduces side padding and removes bottom padding */
    }

    /* Adjust the negative margins to match the new padding */
    .footer-dragon-container {
        margin: 20px -20px -5px -20px;
    }
}

/* --- LANDING PAGE STYLES --- */
.landing-page {
    background: var(--bg-charred-wood);
    background-attachment: fixed;
}

.landing-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: var(--color-stone-light);
    border-bottom: 1px solid rgba(247, 183, 51, 0.2);
    
    /* --- NEW STYLES TO MAKE IT STICKY --- */
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensures it stays on top of other content */
}
.landing-nav .logo { font-size: 1.5em; }
.nav-button {
    text-decoration: none;
    color: var(--color-text);
    background-color: var(--color-gold);
    color: var(--color-stone-dark);
    font-family: var(--font-heading);
    padding: 8px 18px;
    border-radius: 5px;
    margin-left: 10px;
    transition: transform 0.2s;
}
/* Add this new rule to style.css */
.landing-nav-links {
    display: flex;
    align-items: center;
}
.landing-nav-links .nav-button:hover { transform: scale(1.05); }

.landing-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

.landing-container section {
    padding: 35px 0; /* Reduced from 50px */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.landing-container section:last-child { border-bottom: none; }

.hero { text-align: center; }
.hero h1 { font-family: var(--font-heading); font-size: 3.5em; margin: 0 0 10px 0; line-height: 1.1; }
.hero .subtitle { font-size: 1.2em; color: var(--color-text-muted); }

.preview-box {
    background: var(--color-stone-light);
    border-radius: 12px;
    margin: 40px auto;
    box-shadow: var(--shadow);
    border-top: 4px solid var(--color-gold);
    text-align: left;
}
.preview-header {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-family: var(--font-heading);
    font-size: 1.2em;
}
.preview-content { padding: 20px; font-family: var(--font-body); }
.preview-item { margin-bottom: 10px; color: var(--color-text-muted); }

.features h2 { text-align: center; font-family: var(--font-heading); font-size: 2.5em; }
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; }
.feature-card { background: var(--color-stone-light); padding: 25px; border-radius: 8px; }
.feature-card h3 { font-family: var(--font-heading); color: var(--color-gold); margin: 0 0 10px 0; }
.feature-card p { color: var(--color-text-muted); line-height: 1.6; }

/* Dragons Showcase Section */
.dragons-showcase { margin-top: 0; margin-bottom: 0; }
.dragons-showcase h2 { text-align: center; font-family: var(--font-heading); font-size: 2.5em; margin-bottom: 30px; }

.dragon-showcase-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.dragon-showcase-filter-btn {
    padding: 8px 16px;
    border: 2px solid #444;
    border-radius: 5px;
    background: var(--color-stone-light);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.2s;
}

.dragon-showcase-filter-btn:hover {
    border-color: var(--color-gold);
    transform: translateY(-2px);
}

.dragon-showcase-filter-btn.active {
    border-color: var(--color-gold);
    background: rgba(247, 183, 51, 0.1);
    color: var(--color-gold);
}

.dragon-showcase-panels {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.dragon-showcase-list {
    background: var(--color-black);
    border-radius: 8px;
    padding: 15px;
    overflow-y: auto;
    max-height: 500px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.dragon-showcase-item {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--color-stone-dark);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
}

.dragon-showcase-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(247, 183, 51, 0.3);
}

.dragon-showcase-item.active {
    border-left: 4px solid var(--color-gold);
    background: rgba(247, 183, 51, 0.1);
}

.dragon-showcase-thumb {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-right: 15px;
    flex-shrink: 0;
}

.dragon-showcase-text {
    flex: 1;
}

.dragon-showcase-name {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: 5px;
}

.dragon-showcase-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.dragon-showcase-preview {
    background: var(--color-black);
    border-radius: 8px;
    padding: 30px 30px 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 350px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.dragon-showcase-full {
    max-width: 100%;
    height: 400px;
    width: auto;
    object-fit: contain;
    margin-top: auto;
}

.dragon-showcase-preview-name {
    font-family: var(--font-heading);
    font-size: 1.5em;
    color: var(--color-gold);
    text-align: center;
    margin: 0 0 20px 0;
}

.privacy h2, .contact h2 { text-align: center; font-family: var(--font-heading); font-size: 2.5em; }
.privacy p, .contact p { max-width: 700px; margin: 15px auto; text-align: center; line-height: 1.7; color: var(--color-text-muted); }
.contact-details { font-size: 1.1em; line-height: 1.8; }

/* Mobile styles for landing page */
@media (max-width: 880px) {
    .landing-nav {
        flex-direction: column;
        gap: 15px;
        padding: 30px;
    }
    .hero h1 { font-size: 2.5em; }
    .features-grid { grid-template-columns: 1fr; }

    /* Stack dragon showcase panels vertically on mobile */
    .dragon-showcase-panels {
        grid-template-columns: 1fr;
    }

    .dragon-showcase-list {
        max-height: 400px;
    }

    .dragon-showcase-preview {
        min-height: 250px;
    }

    .dragon-showcase-full {
        height: 250px;
    }
}

/* --- CAROUSEL STYLES --- */
.carousel-container {
    position: relative;
    max-width: 800px;
    margin: 40px auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.carousel-viewport {
    overflow: hidden;
    /* NEW: Give the viewport a consistent shape */
    aspect-ratio: 16 / 9; 
    background-color: #000; /* Black background for any letterboxing */
}
.carousel-strip {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.carousel-strip img {
    width: 100%;
    /* NEW: Fill the container height and use object-fit */
    height: 100%;
    object-fit: cover; /* This is the key property */
    flex-shrink: 0;
    display: block;
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 2em;
    cursor: pointer;
    padding: 5px 15px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s;
}
.carousel-container:hover .carousel-btn {
    opacity: 1;
}
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }
.carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}
.carousel-dot.active {
    background-color: white;
}

/* --- Link style for Login/Register page header --- */
a.auth-header-link {
    text-decoration: none;
    color: inherit;
    display: block; /* Makes the whole area clickable */
}

/* REVISED CSS for fade effect */
#success-video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Properties for the fade effect */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.4s;
}

/* This class will be added by JavaScript to trigger the fade-in */
#success-video-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* New wrapper gets the border, shadow, and size constraints */
#video-wrapper {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    border: 3px solid #f7b733;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(247, 183, 51, 0.25);
    overflow: hidden; /* This clips the video corners */
    line-height: 0; /* Prevents small gaps */
}

/* The video just fills the wrapper */
#success-video {
    display: block;  /* This is the fix for the small gap */
    width: 100%;
    height: 100%;
}

/* The button is now positioned relative to the wrapper */
#unmute-button {
    display: none;
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 8px;
    cursor: pointer;
    z-index: 2001;
}

#unmute-button:hover {
    background: rgba(0, 0,0, 0.7);
}

#unmute-button .icon-unmuted { display: none; }
#unmute-button.is-unmuted .icon-muted { display: none; }
#unmute-button.is-unmuted .icon-unmuted { display: block; }

/* The media query now targets the wrapper */
@media (max-width: 880px) {
    #video-wrapper {
        width: 90%;
        height: auto;
        max-height: none;
        aspect-ratio: 854 / 480;
    }
}

/* Add these styles, for example, after your .modal-content rule */
.share-link-container {
    display: flex;
    gap: 10px;
}
#share-link-display {
    flex-grow: 1;
    background-color: var(--color-stone-dark);
    border: 1px solid #444;
    color: var(--color-text-muted);
    padding: 12px;
    border-radius: 5px;
    font-size: 0.9em;
    overflow-x: auto;
}
#copy-link-btn {
    padding: 0 20px;
    font-family: var(--font-body);
    font-weight: bold;
    background: var(--color-gold);
    color: var(--color-stone-dark);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#pin-message.success { background-color: rgba(46, 204, 113, 0.2); color: #2ecc71; padding: 1rem; border-radius: 4px; }
#pin-message.error { background-color: rgba(231, 76, 60, 0.2); color: #e74c3c; padding: 1rem; border-radius: 4px; }

/* Add this new style to your style.css */
.btn-destructive {
    width: 100%;
    background: transparent;
    color: var(--color-red);
    border: 1px solid var(--color-red);
}

.btn-destructive:hover {
    background: rgba(231, 76, 60, 0.1); /* A subtle red glow on hover */
    color: var(--color-red);
}

/* Add this at the end of style.css */

/* Hides the header's bottom border ONLY in the read-only kid's view */
.view-only .header {
    border-bottom: none;
}

/* Add this at the end of style.css */

/* --- Profile Switcher Styles --- */
#profile-switcher-container {
    position: absolute;
    top: 20px;
    right: 25px;
    z-index: 50;
}

.profile-switcher {
    position: relative;
}

.profile-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-stone-dark);
    border: 1px solid #444;
    color: var(--color-text);
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.9em;
}

.profile-button svg {
    width: 18px;
    height: 18px;
    fill: var(--color-text-muted);
}

.profile-button span {
    color: var(--color-text-muted);
}

.profile-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background: var(--color-stone-dark);
    border: 1px solid #444;
    border-radius: 8px;
    min-width: 150px;
    width: max-content;
    box-shadow: var(--shadow);
}

.profile-switcher.open .profile-dropdown {
    display: block;
}

.profile-dropdown ul {
    list-style: none;
    padding: 5px;
    margin: 0;
}

.profile-dropdown li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--color-text);
    border-radius: 5px;
    font-size: 0.9em;
}

.profile-dropdown li a:hover {
    background-color: var(--color-stone-light);
}

.profile-dropdown li.separator {
    height: 1px;
    background-color: #444;
    margin: 5px 0;
}

.auth-box .message a {
    color: var(--color-gold);
    font-weight: bold;
    text-decoration: underline;
}

.auth-box .message a:hover {
    text-decoration: none;
}

/* Add this at the end of style.css */

/* --- Dragon Selection Modal --- */
.dragon-selection-list {
    display: grid;
    gap: 8px; /* Reduced space between rows */
    margin-top: 20px;
}
.dragon-choice {
    display: flex;
    align-items: center;
    gap: 12px;    /* Reduced space between thumbnail and name */
    padding: 0px; /* Reduced padding inside each row */
    background: var(--color-stone-dark);
    border: 2px solid #444;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s;
    position: relative;
}
.dragon-choice:hover {
    border-color: var(--color-text-muted);
}
.dragon-choice.active {
    border-color: var(--color-gold);
}
.dragon-thumb {
    width: 75px;
    height: 75px;
    border-radius: 5px;
    object-fit: cover;
}
.dragon-name {
    font-family: var(--font-heading);
    font-size: 1.5em;
}
.dragon-checkmark {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 2em;
    color: var(--color-gold);
    opacity: 0;
    transition: opacity 0.3s;
}
.dragon-choice.active .dragon-checkmark {
    opacity: 1;
}

/* Add this to style.css */
#refresh-button {
    position: absolute;
    top: 20px;
    left: 25px;
    z-index: 50;
}

/* Default state: Show text, hide icon */
#refresh-button .button-text { display: inline; }
#refresh-button .button-icon { display: none; }

/* Reduces the space above the main content box in the kid's view */
.view-only .main-content {
    margin-top: 0px;
}

/* Styles for screens 560px wide or smaller */
@media (max-width: 560px) {
        /* Hide the last column (Actions) in the transactions table on mobile */
    #transactions table th:last-child,
    #transactions table td:last-child {
        display: none;
    }
}

/* Styles for screens 480px wide or smaller */
@media (max-width: 480px) {
    /* Make buttons more square for the icon-only view */
    #refresh-button,
    .profile-switcher .profile-button {
        padding: 8px;
    }

    /* For the Refresh button, hide the text and show the icon */
    #refresh-button .button-text {
        display: none;
    }
    #refresh-button .button-icon {
        display: inline-block;
        /* Fix for vertical alignment */
        line-height: 0;
    }

    /* For the Profile button, just hide the text span */
    .profile-switcher .profile-button > span {
        display: none;
    }
    
    .dragon-name .dragon-suffix {
        display: none;
    }
    
    .modal-form input[type="date"] {
        width: auto; /* Allow the date input to shrink to its natural size */
    }
    
    .chart-container {
        aspect-ratio: 3 / 2; /* Make the chart taller on very small screens */
        min-height: 300px; /* Ensure charts are readable on small screens */
    }

}

/* Add this to the end of your style.css file */

/* --- Dragon Button Positioning --- */
#dragon-button {
    position: absolute;
    bottom: 20px;
    right: 25px;
    z-index: 50;
}

#dragon-button .button-text {
    display: inline;
}
#dragon-button svg {
    width: 18px; /* Ensure icon size is consistent */
    height: 18px;
}

/* On smaller screens, hide the "Dragon" text */
@media (max-width: 480px) {
    #dragon-button .button-text {
        display: none;
    }
    #dragon-button {
        padding: 8px; /* Make it more square */
    }
}

/* Add this to the end of style.css */

/* --- Tooltip Styles --- */
.tooltip-wrapper {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    line-height: 1;
    position: relative; /* Add this */
    top: -1px;          /* Add this to nudge the icon up */
}
/* Add this new rule right after the .tooltip-wrapper rule */
h1 .tooltip-wrapper,
h2 .tooltip-wrapper {
    top: -7px; /* Apply a stronger nudge only for headings */
}
h3 .tooltip-wrapper {
    top: -2px; /* Apply a stronger nudge only for headings */
}
.info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background-color: var(--color-gold); /* Darker theme green */
    border: 1px solid var(--color-gold);  /* Matching border for a solid look */
    color: var(--color-stone-dark);             /* White 'i' for the best contrast */
    border-radius: 50%;
    font-family: serif;
    font-style: italic;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}
.tooltip-wrapper a.tooltip-mobile-link {
    text-decoration: none; /* Removes underline from mobile link version */
}
.tooltip-desktop-container:hover .info-icon {
    background-color: var(--color-red);
    color: #ffffff;
    border-color: var(--color-red);
}
.tooltip-popup {
    position: absolute;
    z-index: 100;
    width: 250px;
    background: var(--color-stone-dark);
    border: 1px solid #555;
    padding: 15px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    transform: translateX(-50%);
    left: 50%;
    bottom: calc(20px);
    font-size: 0.9rem;
    font-family: var(--font-body);

    /* CORRECTED: Fade out over 0.2s, then turn off visibility/clicks */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0s linear 0.2s;
}
.tooltip-desktop-container {
    position: relative; /* Anchor for the popup */
    display: inline-block; /* Required for padding to work correctly */
    padding-bottom: 10px; /* Invisible space to bridge the hover gap */
    margin-bottom: -10px; /* Prevents the padding from adding extra space to the layout */
}
.tooltip-desktop-container:hover .tooltip-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* CORRECTED: Wait 0.3s, then fade in. Visibility becomes active instantly. */
    transition: opacity 0.2s ease-in-out 0.3s, visibility 0s;
}
.tooltip-text {
    color: var(--color-text);
    line-height: 1.5;
    margin: 0 0 10px 0;
}
.tooltip-more-link {
    color: var(--color-gold);
    text-decoration: none;
    /* Add some padding to make it easier to click */
    display: inline-block;
    padding: 4px;
    border-radius: 4px;
    line-height: 0; /* Ensures tight fit around the SVG */
}
.tooltip-more-link:hover {
    text-decoration: underline;
}

/* --- Logic for showing/hiding on Mobile vs Desktop --- */
.tooltip-mobile-link { display: none; }
.tooltip-desktop-container { display: inline-block; }

/* On touch devices/small screens, swap them */
@media (hover: none), (max-width: 880px) {
    .tooltip-mobile-link { display: inline-block; }
    .tooltip-desktop-container { display: none; }
}

/* Add this to the end of your style.css file */

/* --- Styles for Small, Inline Icon Links --- */
.tooltip-wrapper-small {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    position: relative;
    top: -2px; /* Nudge for alignment with normal text */
}

.info-icon-small {
    width: 13px;
    height: 13px;
    font-size: 10px;
}

/* Changes the small info icon to red on hover */
.tooltip-wrapper-small a:hover .info-icon {
    background-color: var(--color-red);
    color: #ffffff;
    border-color: var(--color-red);
}

/* Add this to the end of your style.css file */

/* --- Pulsing Button Animation for New Dragons --- */

/* 1. Define the animation */
@keyframes pulse-red {
    0% {
        background-color: var(--color-stone-dark);
        border-color: #444;
    }
    50% {
        background-color: #96281b; /* A deeper, darker red */
        border-color: #c0392b;     /* A slightly less dark red for the border glow */
    }
    100% {
        background-color: var(--color-stone-dark);
        border-color: #444;
    }
}

.pulse-dragon-btn {
    animation: pulse-red 2.5s infinite; /* Slower pulse duration */
}

/* 1. Define the animation */
@keyframes pulse-darkred {
    0% {
        background-color: var(--color-stone-dark);
    }
    50% {
        background-color: #4A1B14; /* A deeper, darker red */
    }
    100% {
        background-color: var(--color-stone-dark);
    }
}

.dragon-choice.newly-released {
    animation: pulse-darkred 2.5s infinite;
}

/* Add this new block to style.css */

.nav-button.nav-button-icon-only {
    padding: 8px;
    /* NEW: Add flex properties to center the icon */
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.nav-button.nav-button-icon-only svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* --- Email Verification Styles --- */
.form-label-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* Space between this and the input field */
}
.form-label-container label {
    margin-bottom: 0; /* Remove default margin from the label */
}
.status-verified, .status-unverified {
    font-size: 0.9em;
    font-weight: bold;
}
.status-verified {
    color: var(--color-green);
}
.status-unverified {
    color: var(--color-red);
}
#send-verification-btn {
    /* Inherit styles from the main modal button */
    font-family: var(--font-heading);
    font-size: 1.2em;
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    border: none;
    transition: transform 0.3s;

    /* Apply new custom styles */
    background: var(--gradient-red);
    color: #ffffff; /* White text */
    margin-bottom: 20px; /* Space below the button */
}
#send-verification-btn:hover {
    transform: scale(1.02);
}


/* --- Dragon Request Button Styles --- */
.dragon-choice.dragon-request {
    border-style: dashed;
    text-decoration: none;
}
.dragon-thumb-placeholder {
    width: 75px;
    height: 75px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* REMOVED: background-color: var(--color-stone-dark); */
    flex-shrink: 0;
}
/* NEW: Style the SVG icon */
.dragon-thumb-placeholder svg {
    width: 48px;
    height: 48px;
    fill: var(--color-text-muted); /* Light gray color */
}
/* NEW: Style the text */
.dragon-choice.dragon-request .dragon-name {
    color: var(--color-gold);
}

/* Add this to the end of style.css */
.footer-privacy-notice {
    text-align: center;
    font-size: 0.9em;
    color: var(--color-text-muted);
    padding: 20px;
}

.footer-privacy-notice a {
    color: var(--color-text-muted);
    text-decoration: underline;
}

.footer-privacy-notice a:hover {
    color: var(--color-gold);
}

/* Add this to the end of your style.css file */

/* --- Styles for Form Checkboxes --- */
.form-checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    text-align: left;
}
.form-checkbox-container input[type="checkbox"] {
    margin-top: 3px; /* Aligns checkbox with the first line of text */
    flex-shrink: 0;
}
.form-checkbox-container label {
    font-size: 0.9em;
    color: var(--color-text-muted);
    font-weight: normal;
    text-transform: none;
    line-height: 1.5;
    text-align: left; /* Add this line */
}
.form-checkbox-container a {
    color: var(--color-gold);
    text-decoration: underline;
}
/* Add this new rule to your style.css */
.modal-form input[type="checkbox"] {
    width: auto; /* Override the 100% width for checkboxes */
}

/* --- Dragon Tag Styles --- */
.dragon-choice {
    display: flex;
    flex-direction: row; /* Lays out items side-by-side */
    align-items: center; /* Vertically centers the items */
    gap: 12px;
    padding: 8px; /* A little padding inside the choice row */
}

.dragon-text-content {
    display: flex;
    flex-direction: column; /* Stacks name and tags vertically */
    gap: 6px;
}

.dragon-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    /* No longer need left padding */
}

.dragon-tag {
    font-family: var(--font-body);
    font-size: 0.7em; /* Made tags slightly smaller */
    font-weight: bold;
    padding: 2px 7px; /* Adjusted padding */
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* "Ghost" style changes */
    background-color: transparent;
    border: 1px solid #777; /* Default border color */
    color: #999;           /* Default text color */
}

/* --- Custom Tag Colors (Ghost Style) --- */
.dragon-tag.tag-classic { color: #7f8c8d; border-color: #7f8c8d; }
.dragon-tag.tag-elemental { color: #8e44ad; border-color: #8e44ad; }
.dragon-tag.tag-techy { color: #2980b9; border-color: #2980b9; }
.dragon-tag.tag-beautiful { color: var(--color-gold); border-color: var(--color-gold); }
.dragon-tag.tag-holiday { color: var(--color-green); border-color: var(--color-green); }
.dragon-tag.tag-crystal { color: #1abc9c; border-color: #1abc9c; }
.dragon-tag.tag-crazy { color: #e67e22; border-color: #e67e22; }
.dragon-tag.tag-cute { color: #e91e63; border-color: #e91e63; }
.dragon-tag.tag-electric { color: #f1c40f; border-color: #f1c40f; }
.dragon-tag.tag-ethereal { color: #caa5d9; border-color: #caa5d9; }
.dragon-tag.tag-hybrid { color: #16a085; border-color: #16a085; }

/* --- Dragon Filter Navigation --- */
.dragon-filter-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* This is the new line */
    gap: 8px;
    margin-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #444;
}

.filter-btn {
    /* --- New lines for alignment --- */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* --- Existing styles --- */
    font-family: var(--font-body);
    font-size: 0.9em;
    padding: 6px 12px;
    border: 1px solid #555;
    background-color: var(--color-stone-dark);
    color: var(--color-text-muted);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.filter-btn.active {
    background-color: var(--color-gold);
    color: var(--color-stone-dark);
    border-color: var(--color-gold);
    font-weight: bold;
}

/* --- Favorite Button Styles --- */
.favorite-btn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    line-height: 0; /* Helps align SVG consistently */
}

.favorite-btn svg {
    width: 24px;
    height: 24px;
    fill: #555; /* Default Grey color */
    transition: fill 0.2s, transform 0.2s;
}

.favorite-btn:hover svg {
    fill: #888;
}

.favorite-btn.is-favorite svg {
    fill: #e74c3c; /* Red color for favorites */
    transform: scale(1.1);
}

/* --- Pagination Styles --- */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0;
    margin-top: 5px;
    font-size: 0.9em;
    gap: 10px;
}

.pagination-show, .pagination-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination-container a {
    text-decoration: none;
    color: var(--color-text-muted);
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.pagination-container a:hover {
    color: var(--color-text);
    border-color: #555;
}

.pagination-container a.active {
    color: var(--color-gold);
    border-color: var(--color-gold);
    font-weight: bold;
}

.pagination-container a.disabled {
    color: #555;
    pointer-events: none; /* Makes the link unclickable */
    cursor: default;
}

/* On smaller screens, stack the controls */
@media (max-width: 560px) {
    .pagination-container {
        flex-direction: column;
        justify-content: center;
    }
}
/* --- Dragon Fact Tooltip Styles --- */
#fact-button {
    position: relative;
}

.fact-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background: var(--color-stone-dark);
    border: 2px solid var(--color-gold);
    border-radius: 12px;
    padding: 20px;
    width: 320px;
    max-width: calc(100vw - 50px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    animation: fadeIn 0.3s ease-in-out;
}

.fact-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    border: 8px solid transparent;
    border-top-color: var(--color-gold);
}

.fact-tooltip h3 {
    margin: 0 0 12px 0;
    font-family: var(--font-heading);
    font-size: 1.2em;
    color: var(--color-gold);
    text-align: center;
}

.fact-tooltip p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--color-text);
}

/* Desktop hover behavior */
@media (hover: hover) and (pointer: fine) {
    #fact-button:hover .fact-tooltip {
        display: block;
    }
}

/* Mobile/touch - controlled by JavaScript */
.fact-tooltip.show {
    display: block;
}

/* Adjust position on small screens */
@media (max-width: 880px) {
    .fact-tooltip {
        width: 280px;
        bottom: calc(100% + 5px);
    }
}

/* Further adjustments for very narrow screens (like iPhone vertical) */
@media (max-width: 560px) {
    .fact-tooltip {
        /* Account for: button left position (25px) + main-content right padding (20px) + safety margin (10px) */
        width: calc(100vw - 120px);
        max-width: 280px;
        padding: 15px;
        font-size: 0.9em;
    }

    .fact-tooltip h3 {
        font-size: 1.1em;
        margin-bottom: 10px;
    }
}

@media (max-width: 400px) {
    .fact-tooltip {
        /* Even tighter on very narrow screens */
        width: calc(100vw - 120px);
        max-width: none;
        padding: 12px;
    }

    .fact-tooltip h3 {
        font-size: 1em;
    }

    .fact-tooltip p {
        font-size: 0.85em;
    }
}

/* --- Fact Button Positioning --- */
#fact-button {
    position: absolute;
    bottom: 20px;
    left: 25px;
    z-index: 50;
}

#fact-button .button-text {
    display: inline;
}

/* On smaller screens, hide the "Fact" text */
@media (max-width: 480px) {
    #fact-button .button-text {
        display: none;
    }
    #fact-button {
        padding: 8px;
    }
}

/* Fix vertical alignment of question mark icon */
#fact-button .button-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/* ==================== CHORE TRACKING STYLES ==================== */

.chores-controls {
    padding: 20px;
    background: var(--color-stone-light);
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.chore-toggle-label {
    font-size: 1.1em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.chore-toggle-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.chore-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px auto 30px auto;
    max-width: 700px;
}

.chore-action-buttons .action-button.chore-btn {
    font-family: var(--font-heading);
    font-size: 1.3em;
    padding: 20px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.3s;
    background: var(--gradient-green);
    color: var(--color-stone-dark);
}

.chore-action-buttons .action-button.chore-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

.chore-action-buttons .action-button .icon {
    width: 24px;
    height: 24px;
}

/* Candy action buttons - 3 columns */
.candy-action-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 20px auto 30px auto;
    max-width: 900px;
}

.candy-action-buttons .action-button.candy-btn {
    font-family: var(--font-heading);
    font-size: 1.1em;
    padding: 15px 10px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    background: var(--gradient-green);
    color: var(--color-stone-dark);
}

.candy-action-buttons .action-button.candy-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

/* Modal action buttons */
.modal-action-btn {
    font-family: var(--font-body);
    font-size: 1em;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    font-weight: 700;
}

.modal-action-btn.primary {
    background: var(--gradient-green);
    color: var(--color-stone-dark);
}

.modal-action-btn.secondary {
    background: linear-gradient(135deg, #555, #777);
    color: var(--color-text);
}

.modal-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Archived toggle styling */
.archived-toggle-container {
    margin-top: 30px;
    padding: 15px;
    border-top: 1px solid rgba(158, 150, 139, 0.3);
    text-align: center;
}

.archived-toggle-label {
    font-size: 0.95em;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.archived-toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-gold);
}

.chores-list {
    max-height: 500px;
    overflow-y: auto;
}

.chore-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chore-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(247, 183, 51, 0.3);
}

.drag-handle {
    cursor: grab;
    user-select: none;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    min-height: 50px;
}

.drag-handle:active {
    cursor: grabbing !important;
}

.sortable-ghost {
    opacity: 0.4;
    background: var(--color-gold) !important;
}

.sortable-chosen {
    opacity: 0.5;
}

.sortable-drag {
    opacity: 0.8;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.sortable-fallback {
    opacity: 1 !important;
    background: var(--color-stone-dark) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7) !important;
    cursor: grabbing !important;
    transform: rotate(2deg);
    z-index: 9999 !important;
}

/* Chore report table styling */
#chore-reports-tbody td {
    vertical-align: middle;
}

/* Custom checkbox styling for chore reports */
.chore-checkbox-label {
    display: flex !important;
    align-items: center !important;
    padding: 10px;
    margin-bottom: 5px;
    background: var(--color-stone-dark);
    border-radius: 5px;
    cursor: pointer;
}

.chore-checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gold);
    border-radius: 3px;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
    background: var(--color-stone-light);
    flex-shrink: 0;
    align-self: center;
    margin-top: 19px;
}

.chore-checkbox-label input[type="checkbox"]:checked {
    background: var(--color-gold);
}

.chore-checkbox-label input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-stone-dark);
    font-size: 14px;
    font-weight: bold;
}

.chore-checkbox-label .chore-color-box {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    margin-right: 10px;
    flex-shrink: 0;
    align-self: center;
}

/* Extra chores input styling - needs higher specificity to override modal-form input */
.modal-form input.extra-chores-input {
    flex: 1;
    padding: 6px 10px !important;
    border: 1px solid #444;
    border-radius: 5px;
    background: var(--color-stone-light);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.95em;
    margin-left: 10px;
    margin-top: 0;
    margin-bottom: 0;
}

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

.extra-chores-item {
    flex-wrap: wrap;
}

/* Responsive chore and candy action buttons */
@media (max-width: 600px) {
    .chore-action-buttons {
        grid-template-columns: 1fr;
    }

    .chore-action-buttons .action-button.chore-btn {
        font-size: 1.1em;
        padding: 15px;
        gap: 10px;
    }

    .candy-action-buttons {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .candy-action-buttons .action-button.candy-btn {
        font-size: 1.1em;
        padding: 15px;
    }

    .chore-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }

    .chore-item > div {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Hide chore and candy ledgers on mobile devices (easier to view on desktop) */
@media (max-width: 480px) {
    .chore-ledger-section {
        display: none !important;
    }
}

/* ==================== END CHORE TRACKING STYLES ==================== */

/* ==================== EMBER PARTICLE EFFECT ==================== */
.ember {
    position: fixed;
    bottom: -10px;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, var(--color-gold), var(--color-fire));
    border-radius: 50%;
    pointer-events: none;
    animation: floatEmber var(--duration) linear infinite;
    box-shadow: 0 0 6px rgba(247, 183, 51, 0.8);
    z-index: -1;
}

@keyframes floatEmber {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
    }
    95% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-110vh) translateX(var(--drift)) scale(0.5);
        opacity: 0;
    }
}
/* ==================== END EMBER PARTICLE EFFECT ==================== */