:root {
    /* Core Winter colors */
    --winter-jordyblue: #90b7ed;
    --winter-cloudburst: #222162;
    --winter-harvestgold: #e1c181;
    --winter-monarchred: #8b082a;
    --winter-goldendream: #edc721;

    --mint: var(--winter-jordyblue);
    --teal: var(--winter-cloudburst);
    --peach: var(--winter-harvestgold);
    --orange: var(--winter-goldendream);
    --taupe: var(--winter-harvestgold);

    --ink: var(--winter-cloudburst);
    --ink-soft: #3c4a80;
    --muted: #5a6472;
    --white: #ffffff;

    /* Component-specific helpers (used by Beanstalk / shop bits) */
    --summer-bg: var(--mint);
    --summer-border: var(--teal);
    --chip-bg: #e4ecfb;
    --chip-text: var(--ink);
    --focus: rgba(144, 183, 237, 0.13);

    /* Misc */
    --radius: 18px;

    /* Extra base tokens used below */
    --winter-navy: var(--winter-cloudburst);
    --winter-card-bg: #ffffff;

    /* H1 feature gradient (more wintery: gold → blue) */
    --feature-h1-gradient-1: #edc721;
    --feature-h1-gradient-2: #e1c181;
    --feature-h1-gradient-3: #90b7ed;
    --feature-h1-shadow: #ffffff;

    /* H2 */
    --feature-h2-color: #90b7ed;
    --feature-h2-border: #8b082a;

    /* H3 banner */
    --feature-h3-bg: #e1c181;

    /* Tutorial listing */
    --listing-bg: #e7edf8;
    --listing-text: #222162;
    --listing-border-left: #90b7ed;
    --listing-icon: #8b082a;

    /* Quote box */
    --quote-bg: var(--winter-harvestgold);
    --quote-border: var(--winter-cloudburst);
    --quote-text: #333333;

    /* Bonus section */
    --bonus-section-bg: #f4f7ff;
    --bonus-section-border: var(--winter-cloudburst);
    --bonus-title-text: var(--winter-navy);

    --bonus-card-bg: var(--winter-card-bg);
    --bonus-card-border: var(--winter-cloudburst);
    --bonus-image-bg: #f7faf7;
    --bonus-image-border: rgba(0, 0, 0, 0.05);

    --bonus-label-bg: var(--winter-cloudburst);
    --bonus-label-text: #ffffff;

    --bonus-badge-bg: var(--winter-goldendream);
    --bonus-badge-text: var(--winter-cloudburst);
    --bonus-badge-border: rgba(0, 0, 0, 0.06);

    /* ===== Winter Missions Table Variables ===== */
    --mission-section-bg: #f4f7ff;
    --mission-section-border: #90b7ed;
    --mission-title-color: #222162;
    --mission-card-bg: #ffffff;
    --mission-card-border: #90b7ed;

    --mission-level-bg: #edc721;
    --mission-level-text: #222162;

    --mission-image-bg: #f7faf7;
    --mission-image-border: rgba(0, 0, 0, 0.05);

    --mission-label-bg: #90b7ed;
    --mission-label-text: #ffffff;
    --mission-card-glow: #edc721;

    --mission-shadow-soft: rgba(0, 0, 0, 0.06);
    --mission-shadow-hover: rgba(0, 0, 0, 0.10);

    /* === Easter Egg Hunts === */
    --egg-field-border: #e4e8f5;
    --egg-btn-text: #fff;
    --egg-btn-secondary-text: #fff;
    --egg-counter-text: #333333;
    --egg-levelbar-text: #222162;

    --egg-card-bg-1: #ffffff;
    --egg-card-bg-2: #fffeff;
    --egg-card-shadow: rgba(0, 0, 0, 0.06);

    --egg-box-border: #e7dfd2;
    --egg-box-text: #263238;

    --egg-prize-img-border: #eeeeee;
    --egg-prize-text: #33374a;

    --egg-dot-bg: #d9d9e3;
    --egg-dot-border: #cfd0ea;

    /* === Latest News === */
    --news-accent: #90b7ed;
    --news-month-bg: #e1c181;
    --news-month-text: #ffffff;
    --news-day-color: #90b7ed;
    --news-year-color: #c6ac8f;
    --news-title-color: #8b082a;
    --news-body-color: #444444;
    --news-divider-start: #e1c181;
    --news-divider-mid: #90b7ed;
    --news-divider-end: #edc721;

    /* Guides / Standards tables */
    --guide-card-border: #d5ccbf;
    --guide-card-shadow: rgba(213, 204, 191, 0.1);
    --guide-link-color: #90b7ed;
    --guide-link-hover: #8b082a;

    --standards-border: #d5ccbf;
    --standards-header-bg: #d3e1d3;
    --standards-label-color: #90b7ed;

    /* Weather blocks (Mara Green) */
    --mara-green: #51CEA0;
    --mara-green-pill-bg: rgba(81, 206, 160, 0.09);
    --mara-green-pill-text: #2b5b4a;
    --mara-weather-hover-bg: #f5fffb;

    /* Experiences table */
    --exp-border: #97b3ae;
    --exp-header-bg: #97b3ae;
    --exp-header-text: #4e4e4e;
    --exp-row-bg: #fffdfb;
    --exp-name-color: #97b3ae;
    --exp-btn-from: #97b3ae;
    --exp-btn-to: #d3e1d3;

    /* Modal */
    --modal-overlay: rgba(0, 0, 0, 0.65);
    --modal-bg: #ffffff;
    --modal-shadow: rgba(0, 0, 0, 0.2);
    --modal-close: #d80032;
    --modal-close-hover: #ef233c;

    /* DNA table */
    --dna-btn-bg: var(--teal);
    --dna-btn-text: #ffffff;
    --dna-card-border: var(--winter-goldendream);
    --dna-card-heading: var(--teal);

    /* Glowing Eggs */
    --glow-search-border: var(--teal);
    --glow-table-border: var(--taupe);
    --glow-header-bg: var(--mint);
    --glow-name-color: var(--teal);
    --glow-count-color: var(--teal);
    --glow-count-emphasis: #61412a;

    /* Medicine */
    --medicine-search-border: var(--winter-goldendream);
    --medicine-table-border: var(--taupe);
    --medicine-header-bg: var(--mint);
    --medicine-name-color: var(--teal);
    --medicine-icon-color: #48bdbd;

    /* Tools */
    --tools-border: var(--taupe);
    --tools-header-bg: var(--mint);
    --tools-label-color: var(--teal);
    --tools-thumb-bg: var(--peach);
    --tools-name-color: #ef715b;
    --tools-row-shadow: rgba(213, 204, 191, 0.1);

    /* Retired game prizes */
    --prize-cell-bg: #fdf8f9;
    --prize-cell-border: var(--winter-goldendream);
    --prize-date-color: var(--teal);
    --prize-text-color: #c25425;

    /* Beanstalk / shop-style table */
    --shop-bg: var(--mint);
    --shop-border: var(--teal);
    --shop-head-grad-top: #e5efe7;
    --shop-head-grad-bottom: #f2f7f3;
    --shop-row-border: #e4eee7;
    --shop-row-hover-bg: #f7fbf8;

    /* Safari 2018 */
    --badge-date-color: var(--teal);
    --score-card-bg: #eeeeee;
    --score-card-border: var(--teal);
    --score-date-color: #c25425;
    --score-points-color: var(--teal);

    /* Scrooge checklist */
    --scrooge-border: #b8a568;
    --scrooge-checked-bg: #6d6d6d;
    --scrooge-name-color: var(--teal);

    /* Sidebar stats */
    --sidebar-bg: var(--mint);
    --sidebar-border: var(--teal);
    --sidebar-heading-color: #3c5a4f;
    --sidebar-heading-border: var(--teal);
    --sidebar-pill-border: var(--winter-goldendream);
    --sidebar-pill-hover-bg: #fdf7e6;

    /* Mission name accent */
    --mission-name-color: #61412a;

    /* Last Updated badge */
    --last-updated-bg: var(--mint);
    --last-updated-border: var(--teal);
    --last-updated-text-color: #2d2d2d;
    --last-updated-icon: #8b082a;
}

/* ==============================
        MAIN BODY
   ============================== */

/* Header Stylings */
h1.feature {
    font-size: 35px;
    font-weight: 900;
    background: linear-gradient(90deg,
            var(--feature-h1-gradient-1),
            var(--feature-h1-gradient-2),
            var(--feature-h1-gradient-3));
    border-radius: 15px;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    text-shadow: 1px 1px 0 var(--feature-h1-shadow);
}

h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--feature-h2-color);
    border-left: 6px solid var(--feature-h2-border);
    padding-left: 12px;
    margin: 30px 0 15px;
    font-family: 'Poppins', sans-serif;
}

h3 {
    position: relative;
    font-size: 1.5rem;
    color: #ffffff;
    background-color: var(--feature-h3-bg);
    padding: 10px 40px 10px 10px;
    margin: 20px 0;
    text-align: center;
}

h3::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: url('https://images.maraholic.org/layout/main/addow_ok.png') no-repeat center center;
    background-size: contain;
    width: 30px;
    height: 30px;
}

/* === Tutorial List === */
.listing {
    list-style: none;
    padding: 0;
    margin: 1em 0;
    font-family: 'Roboto', sans-serif;
}

.listing li {
    background: var(--listing-bg);
    color: var(--listing-text);
    padding: 10px 15px;
    margin-bottom: 10px;
    border-left: 5px solid var(--listing-border-left);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.listing li i {
    color: var(--listing-icon);
}

/* === Quote Box used for Page Descriptions === */
.quote-box {
    background: var(--quote-bg);
    padding: 15px;
    margin-top: 20px;
    border-left: 5px solid var(--quote-border);
    font-style: italic;
    color: var(--quote-text);
    border-radius: 5px;
}

/* === Bonus Prizes - Missions === */
.bonus-section {
    background: var(--bonus-section-bg);
    border: 2px solid var(--bonus-section-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 3px 10px var(--winter-soft-shadow);
}

.bonus-title {
    margin: 0 0 12px;
    text-align: center;
    font-size: 1.2rem;
    color: var(--bonus-title-text);
}

.bonus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.bonus-card {
    background: var(--bonus-card-bg);
    border: 2px solid var(--bonus-card-border);
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.bonus-body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bonus-figure {
    position: relative;
    width: 80px;
    height: 80px;
    display: block;
}

.bonus-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    background: var(--bonus-image-bg);
    border: 1px solid var(--bonus-image-border);
    z-index: 1;
}

.bonus-figure .item-overlay {
    --img-size: 80px !important;
    position: relative;
    width: 80px !important;
    height: 80px !important;
    display: block;
    border-radius: 8px;
    background: var(--bonus-image-bg);
    border: 1px solid var(--bonus-image-border);
    z-index: 1;
}

.bonus-figure .item-overlay img {
    width: var(--img-size) !important;
    height: var(--img-size) !important;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}

.bonus-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    z-index: 3;
    background: var(--bonus-label-bg);
    color: var(--bonus-label-text);
    font-size: .8rem;
    line-height: 1.2;
    padding: 4px 8px;
    border-radius: 6px;
    text-align: center;
    width: 190%;
    max-width: 190%;
    white-space: normal;
    word-break: break-word;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.bonus-badge {
    position: absolute;
    left: -34px;
    z-index: 4;
    padding: 3px 8px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: .72rem;
    background: var(--bonus-badge-bg);
    color: var(--bonus-badge-text);
    border: 1px solid var(--bonus-badge-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    pointer-events: none;
}

/* === Missions Table === */

/* Section + title */
.summer-prize-section {
    background: var(--mission-section-bg);
    border: 2px solid var(--mission-section-border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 3px 10px var(--mission-shadow-soft);
}

.summer-prize-title {
    margin: 0 0 14px;
    text-align: center;
    font-size: 1.35rem;
    color: var(--mission-title-color);
}

/* Grid */
.summer-prize-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width:1100px) {
    .summer-prize-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width:900px) {
    .summer-prize-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:600px) {
    .summer-prize-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Card */
.prize-card {
    background: var(--mission-card-bg);
    border: 2px solid var(--mission-card-border);
    border-radius: 12px;
    padding: 10px 10px 12px;
    text-align: center;
    position: relative;
    overflow: visible;
    box-shadow: 0 2px 6px var(--mission-shadow-soft);
    transition: transform .18s ease, box-shadow .18s ease;

    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 180px;
}

.prize-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px var(--mission-shadow-hover);
}

.prize-level {
    display: inline-block;
    background: var(--mission-level-bg);
    color: var(--mission-level-text);
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid rgba(0, 0, 0, .06);
}

.prize-body {
    display: grid;
    place-items: center;
}

.prize-image-wrap {
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
}

.prize-images {
    display: grid;
    grid-auto-flow: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    justify-items: center;
}

.prize-images.stack {
    grid-auto-flow: row;
}

.prize-figure {
    position: relative;
    width: 80px;
    height: 80px;
    display: block;
}

/* Normal image */
.prize-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    background: var(--mission-image-bg);
    border: 1px solid var(--mission-image-border);
    z-index: 1;
}

.prize-figure .item-overlay {
    --img-size: 80px;
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 8px;
    background: var(--mission-image-bg);
    border: 1px solid var(--mission-image-border);
    z-index: 1;
}

.prize-figure .item-overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}

.prize-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -12px;
    z-index: 3;
    background: var(--mission-label-bg);
    color: var(--mission-label-text);
    font-size: .8rem;
    line-height: 1.2;
    padding: 4px 8px;
    border-radius: 6px;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    width: 180%;
    max-width: 180%;
    box-shadow: 0 2px 6px var(--mission-shadow-soft);
}

.prize-card::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg,
            transparent,
            var(--mission-card-glow),
            transparent);
    opacity: .6;
}

.summer-prize-section .prize-figure {
    width: 80px;
    height: 80px;
}

.summer-prize-section .prize-figure .item-overlay {
    --img-size: 80px !important;
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    position: relative;
    border-radius: 8px;
    background: var(--mission-image-bg);
    border: 1px solid var(--mission-image-border);
    z-index: 1;
}

.summer-prize-section .prize-figure .item-overlay img {
    width: var(--img-size) !important;
    height: var(--img-size) !important;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}

.summer-prize-section .prize-body,
.summer-prize-section .prize-image-wrap,
.summer-prize-section .prize-images {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.summer-prize-section .prize-images.stack {
    flex-direction: column;
    gap: 12px;
}

.summer-prize-section .prize-label {
    background: var(--mission-label-bg);
    color: var(--mission-label-text);
}

/* Easter Egg Hunts */
.guide-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.guide-header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mint), var(--taupe));
    padding: 12px 14px;
    border-radius: 16px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .06);
}

.controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.controls .field {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--white);
    border: 2px solid var(--egg-field-border);
    border-radius: 12px;
    padding: 6px 10px;
}

.controls select,
.controls input {
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    min-width: 120px;
}

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

.egg-btn {
    border: 0;
    background: var(--teal);
    color: var(--egg-btn-text);
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
    transition: transform .08s ease, opacity .2s ease, filter .2s ease;
}

.egg-btn.secondary {
    background: var(--peach);
    color: var(--egg-btn-secondary-text);
}

.egg-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.2);
}

.egg-btn:active {
    transform: translateY(1px);
}

.counter {
    font-size: 13px;
    color: var(--egg-counter-text);
    padding: 0 6px;
}

.field label {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* ==== HEADER ==== */
.levelbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 18px auto 10px;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 900;
    color: var(--egg-levelbar-text);
}

/* ==== CARD ==== */
.egg-card {
    background: linear-gradient(160deg,
            var(--egg-card-bg-1) 60%,
            var(--egg-card-bg-2));
    border: 3px solid var(--taupe);
    border-radius: var(--radius);
    margin: 18px 0;
    padding: 18px;
    box-shadow: 0 10px 16px var(--egg-card-shadow);
}

.row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

/* ==== SECTION BOXES ==== */
.kv {
    background: var(--white);
    border: 2px dashed var(--egg-box-border);
    border-radius: 14px;
    padding: 12px;
}

.kv .hbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: -6px -6px 10px;
    padding: 8px 10px;
    border-radius: 10px;
    font-weight: 800;
    color: var(--egg-box-text);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 12px;
}

.hbar.clue {
    background: var(--taupe);
}

.hbar.hint {
    background: var(--peach);
}

.hbar.answer {
    background: var(--mint);
}

.hbar.prizes {
    background: var(--winter-goldendream);
}

.kv p {
    margin: 0;
    line-height: 1.55;
}

/* ==== ANSWER ACCORDION ==== */
.answer {
    border: 2px solid var(--mint);
}

.answer .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.answer .toggle {
    border: 0;
    cursor: pointer;
    font-weight: 900;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--teal), #83a49f);
    color: #fff;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .07);
    transition: transform .08s ease, filter .2s ease;
}

.answer .toggle:hover {
    filter: brightness(1.05);
}

.answer .toggle:active {
    transform: translateY(1px);
}

.answer .content {
    display: none;
    padding-top: 8px;
}

.answer[aria-expanded="true"] .content {
    display: block;
}

/* ==== PRIZES ==== */
.prizes {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    gap: 14px;
    align-items: start;
}

.prize {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.prize img {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    border: 2px solid var(--egg-prize-img-border);
    background: var(--white);
}

.prize span {
    margin-top: 6px;
    font-size: 12px;
    color: var(--egg-prize-text);
}

/* ==== DOTS ==== */
.dots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    justify-content: center;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--egg-dot-bg);
    border: 1px solid var(--egg-dot-border);
    cursor: pointer;
}

.dot.active {
    background: var(--teal);
}

@media (min-width:700px) {
    .row {
        grid-template-columns: 1.1fr .9fr;
    }
}

/* === Latest News === */
.news-entry {
    display: block;
    margin-bottom: 40px;
    padding-bottom: 20px;
    position: relative;
}

.news-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0 0 14px 0;
    grid-column: 1 / -1;
}

#news-search {
    flex: 1 1 420px;
    max-width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--news-accent);
    border-radius: 12px;
    font: inherit;
}

#news-count {
    margin-left: 10px;
    opacity: .8;
    white-space: nowrap;
    font-size: 0.95rem;
}

.news-list,
.news-pagination {
    width: 100%;
    grid-column: 1 / -1;
    clear: both;
}

.news-list {
    visibility: hidden;
}

.news-list.is-ready {
    visibility: visible;
}

.news-pagination {
    display: flex;
    background-color: var(--white);
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 18px 0 8px;
}

.news-pagination button,
.news-pagination a {
    border: 2px solid var(--news-accent);
    background: var(--white);
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.news-pagination .is-active {
    background: var(--news-accent);
    color: #fff;
    pointer-events: none;
}

.news-pagination .is-disabled {
    opacity: .5;
    pointer-events: none;
}

.news-header {
    margin-bottom: 10px;
    position: relative;
    display: flex;
}

.news-date {
    position: relative;
    width: 70px;
    text-align: center;
    font-family: 'Arial Rounded MT Bold', sans-serif;
}

.news-date .month {
    position: absolute;
    top: 4px;
    left: 65%;
    transform: translateX(-50%);
    background-color: var(--news-month-bg);
    color: var(--news-month-text);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 8px;
    z-index: 3;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
}

.day-wrapper {
    position: relative;
    display: inline-block;
}

.news-date .day {
    font-size: 3.5rem;
    color: var(--news-day-color);
    font-weight: bold;
    position: relative;
    top: 1px;
    z-index: 2;
}

.news-date .year {
    position: absolute;
    bottom: -3px;
    left: 25%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 900;
    color: var(--news-year-color);
    z-index: 1;
    pointer-events: none;
}

.news-title {
    font-size: 24px;
    color: var(--news-title-color);
    padding: 10px;
    margin: 8px 0 10px 10px;
}

.news-body p {
    font-size: 16px;
    color: var(--news-body-color);
    line-height: 1.6;
    margin: 0;
}

.news-divider {
    margin-top: 20px;
    height: 4px;
    width: 100%;
    background: linear-gradient(to right,
            var(--news-divider-start),
            var(--news-divider-mid),
            var(--news-divider-end));
    border-radius: 2px;
}

/* Small screens */
@media (max-width:700px) {
    .news-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    #news-count {
        margin: 0;
    }
}

/* ==== Main Tables for Guides, Tutorials, Trackers Pages ==== */
table.guides {
    width: 100%;
    border-spacing: 20px;
    text-align: center;
}

table.guides td {
    background: var(--white);
    border: 1px solid var(--guide-card-border);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 3px 6px var(--guide-card-shadow);
    width: 50%;
}

table.guides td img {
    width: 300px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin: 0 auto 10px;
}

table.guides td a {
    display: block;
    color: var(--guide-link-color);
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.3s ease;
}

table.guides td a:hover {
    color: var(--guide-link-hover);
}

/* === Retired Games Guides === */
table.standards {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 20px 0;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    background: var(--white);
    border: 1px solid var(--standards-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(213, 204, 191, 0.15);
}

table.standards thead {
    background-color: var(--standards-header-bg);
}

table.standards thead th {
    padding: 12px 16px;
    text-align: center;
    font-weight: 600;
    color: #2d2d2d;
}

table.standards thead th:last-child {
    border-right: none;
}

table.standards tbody td {
    padding: 14px 16px;
    text-align: center;
    color: #444;
    border-top: 1px solid #eee;
}

table.standards tbody td img {
    max-width: 200px;
    height: auto;
    margin-top: 8px;
    border-radius: 6px;
}

table.standards tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

@media screen and (max-width: 768px) {

    table.standards,
    table.standards thead,
    table.standards tbody,
    table.standards th,
    table.standards td,
    table.standards tr {
        display: block;
        width: 100%;
    }

    table.standards thead {
        display: none;
    }

    table.standards tbody td {
        text-align: left;
        padding: 10px 12px;
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
    }

    table.standards tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 4px;
        color: var(--standards-label-color);
    }

    table.standards tbody tr {
        margin-bottom: 15px;
        background: var(--white);
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 10px;
    }
}

/* ==== WEATHER PAGES ==== */
.mara-weather-list {
    list-style: none;
    margin: 20px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mara-weather-list li {
    position: relative;
    padding: 10px 12px 10px 42px;
    border-radius: 12px;
    background: var(--white);
    border: 2px solid var(--mara-green);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
}

.mara-weather-list li::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mara-green);
    transform: translateY(-50%);
}

.mara-weather-list .weather-label {
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--mara-green-pill-bg);
    color: var(--mara-green-pill-text);
    border: 1px solid var(--mara-green);
    margin-bottom: 3px;
}

.mara-weather-list .weather-note {
    display: block;
    font-size: 13px;
    color: #444;
}

.mara-weather-list li:hover {
    background: var(--mara-weather-hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.06);
}

/* ==== EXPERIENCES TABLE ==== */
/* Experience Table - Winter style via vars */
.exp-table-container {
    max-width: 800px;
    background-color: var(--white);
    border: 3px solid var(--exp-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

.experience-table {
    width: 100%;
    border-collapse: collapse;
    background: #fefefe;
    border-radius: 10px;
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
}

.experience-table th {
    background: var(--exp-header-bg);
    color: var(--exp-header-text);
    padding: 14px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}

.experience-table td {
    padding: 8px;
    text-align: center;
    vertical-align: middle;
    background: var(--exp-row-bg);
}

.exp-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.exp-cell img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.exp-name {
    font-weight: bold;
    margin-top: 5px;
    color: var(--exp-name-color);
    font-size: 14px;
    text-shadow: 0 1px 0 var(--white);
}

/* Preview Button */
.preview-btn {
    margin-top: 6px;
    font-size: 13px;
    font-weight: bold;
    background: linear-gradient(to right, var(--exp-btn-from), var(--exp-btn-to));
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
}

.preview-btn:hover {
    background: linear-gradient(to right, var(--exp-btn-to), var(--exp-btn-from));
}

/* Modal Styling */
.modal {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-overlay);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: var(--modal-bg);
    padding: 20px;
    position: relative;
    max-width: 90%;
    max-height: 80%;
    border-radius: 12px;
    box-shadow: 0 6px 20px var(--modal-shadow);
}

#previewImage {
    width: 100%;
    max-height: 400px;
    margin-top: 20px;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#closeModal {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: var(--modal-close);
    transition: color 0.2s;
}

#closeModal:hover {
    color: var(--modal-close-hover);
}

/* ==== DNA Table ==== */
.view-toggle button {
    margin: 10px;
    padding: 8px 15px;
    background-color: var(--dna-btn-bg);
    color: var(--dna-btn-text);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.mode {
    margin-top: 30px;
}

#dnaSelect {
    padding: 10px;
    font-size: 16px;
    margin: 10px 0;
}

.dna-result {
    margin-top: 20px;
    padding: 15px;
    border: 2px dashed #ccc;
    background-color: var(--white);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.dna-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.dna-card {
    background: var(--white);
    border: 2px solid var(--dna-card-border);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
    margin: 10px;
}

.dna-card h4 {
    font-size: 14px;
    margin: 10px 0;
    color: var(--dna-card-heading);
}

.dna-card img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin: 5px;
}

/* ==== Glowing Eggs Guide ==== */
/* Glowing Eggs */
.glowing-egg-search {
    text-align: right;
    margin-bottom: 10px;
}

.glowing-egg-search input {
    padding: 8px;
    border: 2px solid var(--glow-search-border);
    border-radius: 5px;
    font-size: 14px;
    width: 250px;
}

.glowing-egg-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    margin: 0 auto 30px;
    background: var(--white);
    border: 1px solid var(--glow-table-border);
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    box-shadow: 0 4px 8px rgba(213, 204, 191, 0.1);
}

.glowing-egg-table thead {
    background-color: var(--glow-header-bg);
}

.glowing-egg-table th,
.glowing-egg-table td {
    padding: 12px 10px;
    color: #333;
    vertical-align: middle;
}

.glowing-egg-table img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid var(--white);
    background: var(--white);
}

.egg-name {
    font-weight: bold;
    font-size: 15px;
    color: var(--glow-name-color);
}

.hex-colors {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hex-box {
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    min-width: 70px;
    text-align: center;
    display: inline-block;
    background-clip: padding-box;
    color: #000000;
}

.egg-count {
    text-align: center;
    font-size: 14px;
    color: var(--glow-count-color);
    font-weight: bold;
    margin: 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.egg-count span {
    font-weight: bold;
    color: var(--glow-count-emphasis);
}

/* ==== Medicine Table ==== */
.medicine-controls {
    text-align: center;
    margin-bottom: 20px;
}

#searchInput {
    margin: 0 auto 20px auto;
    padding: 8px;
    width: 250px;
    border: 2px solid var(--medicine-search-border);
    border-radius: 5px;
}

.medicine-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    margin-top: 20px;
    border: 1px solid var(--medicine-table-border);
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    box-shadow: 0 4px 8px rgba(213, 204, 191, 0.1);
}

.medicine-table thead {
    background-color: var(--medicine-header-bg);
}

.medicine-table th,
.medicine-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    text-align: center;
    vertical-align: middle;
}

.medicine-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.medicine-item img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    transition: transform 0.3s;
}

.medicine-item img:hover {
    transform: scale(1.05);
}

.medicine-name {
    margin-top: 8px;
    font-weight: bold;
    color: var(--medicine-name-color);
    font-size: 14px;
}

.medicine-table td i {
    margin-right: 5px;
    color: var(--medicine-icon-color);
}

/* ==== TOOLS TABLE ==== */
.tools-controls {
    margin-bottom: 15px;
    text-align: right;
}

.tools-controls input {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--tools-border);
    border-radius: 6px;
    width: 100%;
    max-width: 300px;
    font-family: 'Poppins', sans-serif;
}

.tools-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border: 1px solid var(--tools-border);
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    box-shadow: 0 4px 8px var(--tools-row-shadow);
}

.tools-table thead {
    background: var(--tools-header-bg);
}

.tools-table th,
.tools-table td {
    padding: 15px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.tools-table th {
    font-weight: 600;
    color: #2d2d2d;
}

.tools-table td {
    color: #444;
    line-height: 1.5;
}

.tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tool-item img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    background: var(--tools-thumb-bg);
    padding: 5px;
    box-shadow: 0 2px 5px rgba(213, 204, 191, 0.1);
}

.tool-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--tools-name-color);
}

@media screen and (max-width: 768px) {

    .tools-table,
    .tools-table thead,
    .tools-table tbody,
    .tools-table th,
    .tools-table td,
    .tools-table tr {
        display: block;
        width: 100%;
    }

    .tools-table thead {
        display: none;
    }

    .tools-table tr {
        margin-bottom: 20px;
        border-bottom: 2px solid var(--tools-border);
        padding: 10px;
        background: var(--white);
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(213, 204, 191, 0.1);
    }

    .tools-table td {
        text-align: left;
        padding: 10px 15px;
        border-bottom: none;
        position: relative;
    }

    .tools-table td::before {
        content: attr(data-label);
        font-weight: bold;
        color: var(--tools-label-color);
        display: block;
        margin-bottom: 4px;
    }

    .tool-item {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .tool-name {
        margin: 0;
    }
}

/* ==== RETIRED GAME PRIZES TABLE ==== */
.prize-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    margin-top: 20px;
    background: var(--white);
    text-align: center;
}

.prize-table tr {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.prize-table td {
    padding: 20px 15px;
    vertical-align: top;
    display: flex;
    justify-content: center;
}

.prize-cell {
    background-color: var(--prize-cell-bg);
    border: 2px solid var(--prize-cell-border);
    border-radius: 12px;
    padding: 10px;
    width: 100px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.prize-date {
    font-size: 12px;
    color: var(--prize-date-color);
    margin-bottom: 4px;
    font-weight: bold;
}

.prize-cell img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--prize-cell-border);
    background-color: var(--white);
}

.prize-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--prize-text-color);
}

/* ==== BEANSTALK TABLE GUIDE ==== */
.summer-shop {
    background: var(--shop-bg);
    border: 2px solid var(--shop-border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

.summer-shop__title {
    margin: 0 0 14px;
    text-align: center;
    font-size: 1.25rem;
    color: var(--ink);
    letter-spacing: .2px;
}

.shop-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.shop-controls input[type="text"] {
    width: 240px;
    max-width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--shop-border);
    border-radius: 10px;
    background: var(--white);
    color: var(--ink);
    outline: none;
}

.shop-controls input[type="text"]:focus {
    box-shadow: 0 0 0 4px var(--focus);
}

.shop-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border: 1.5px solid var(--shop-border);
    border-radius: 12px;
    overflow: hidden;
}

.shop-table thead th {
    background: linear-gradient(0deg,
            var(--shop-head-grad-top),
            var(--shop-head-grad-bottom));
    color: var(--ink-soft);
    font-weight: 600;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1.5px solid var(--shop-border);
}

.shop-table tbody td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--shop-row-border);
}

.shop-table tbody tr:last-child td {
    border-bottom: 0;
}

.price-col,
.price {
    width: 160px;
    text-align: right;
}

.shop-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    align-items: center;
}

.shop-item .thumb {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: var(--chip-bg);
    border: 1px solid var(--shop-border);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.shop-item .thumb img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

.shop-item .meta .name {
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}

.price-tag {
    display: inline-block;
    background: var(--chip-bg);
    color: var(--chip-text);
    border: 1px solid var(--shop-border);
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .2px;
}

.shop-table tbody tr {
    transition: background .15s ease, transform .05s ease;
}

.shop-table tbody tr:hover {
    background: var(--shop-row-hover-bg);
}

/* Responsive */
@media (max-width: 640px) {
    .price-col {
        width: auto;
    }

    .shop-item {
        grid-template-columns: 64px 1fr;
    }

    .shop-item .thumb,
    .shop-item .thumb img {
        width: 64px;
        height: 64px;
    }

    .shop-controls {
        justify-content: stretch;
    }
}

/* ==== SAFARI 2018 TABLE ==== */
.badge-table {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.badge-entry {
    width: 120px;
    text-align: center;
    position: relative;
}

.badge-image {
    width: 80px;
    height: 80px;
    position: relative;
    margin: 0 auto;
}

.badge-image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

.badge-image .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.badge-image:hover .hover-img {
    opacity: 1;
}

.badge-image:hover img:first-child {
    opacity: 0;
}

.badge-date {
    margin-top: 8px;
    font-size: 14px;
    color: var(--badge-date-color);
    font-weight: bold;
}

.score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.score-entry {
    background: var(--score-card-bg);
    border: 2px solid var(--score-card-border);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

.score-date {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--score-date-color);
}

.score-teams {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

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

.team img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
}

.score-points {
    margin-top: 5px;
    font-size: 14px;
    color: var(--score-points-color);
    font-weight: bold;
}

/* ==== SCROOGE ==== */
.desc {
    margin-bottom: 20px;
    color: #555;
}

.scrooge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.item-card {
    position: relative;
    background: var(--white);
    border: 2px solid var(--scrooge-border);
    border-radius: 8px;
    padding: 8px;
    transition: background-color 0.3s;
}

.item-card.checked {
    background-color: var(--scrooge-checked-bg);
    opacity: 0.8;
}

.item-card img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
}

.item-name {
    margin-top: 5px;
    font-size: 13px;
    color: var(--scrooge-name-color);
    font-weight: bold;
}

input[type="checkbox"] {
    position: absolute;
    top: 6px;
    right: 6px;
    transform: scale(1.2);
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {

    table.guides,
    table.guides tbody,
    table.guides tr,
    table.guides td {
        display: block;
        width: 100%;
    }

    table.guides td {
        margin-bottom: 20px;
    }

    table.guides td img {
        width: 100%;
        height: auto;
    }
}

/* ==============================
        SIDEBAR
   ============================== */

/* Stats Box for Temples / Missions / Goals */
.sidebar-box {
    background: var(--sidebar-bg);
    border: 2px solid var(--sidebar-border);
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.sidebar-box h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--sidebar-heading-color);
    border-bottom: 2px solid var(--sidebar-heading-border);
    padding-bottom: 4px;
}

/* UL/LI Styling for Stats Box */
.sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-list li {
    background: var(--white);
    padding: 8px 10px;
    margin-bottom: 6px;
    border-left: 6px solid var(--sidebar-pill-border);
    border-radius: 6px;
    font-size: 0.95rem;
    color: #333;
    transition: transform 0.2s ease, background 0.2s ease;
}

.sidebar-list li:hover {
    background: var(--sidebar-pill-hover-bg);
    transform: translateX(3px);
}

/* Current Events */
.event-pill {
    --circle-size: 80px;
    --gap: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    text-align: center;
}

.event-icon {
    position: relative;
    width: var(--circle-size);
    height: var(--circle-size);
}

.event-icon .circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--circle-bg, #2d3142);
}

.event-icon .overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.event-title {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--title-bg, #ef8354);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    margin-top: -10px;
}

.event-dates {
    margin-top: 6px;
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 420px) {
    .event-title {
        font-size: 14px;
        padding: 7px 12px;
    }

    .event-dates {
        font-size: 9px;
    }
}

.mission-name {
    font-weight: bold;
    color: var(--mission-name-color);
}

/* Last Updated */
.last-updated {
    background: var(--last-updated-bg);
    width: 250px;
    color: var(--last-updated-text-color);
    padding: 8px 14px;
    border-left: 5px solid var(--last-updated-border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 5px rgba(213, 204, 191, 0.2);
    font-family: 'Poppins', sans-serif;
    margin: 10px 0;
}

.last-updated i {
    color: var(--last-updated-icon);
    font-size: 16px;
}