@font-face {
     font-family: 'NotoIKEALatin';
     src: url('../fonts/NotoIKEALatin-Regular.ttf') format('truetype');
     font-weight: 400;
     /* normal */
     font-style: normal;
 }

 @font-face {
     font-family: 'NotoIKEALatin';
     src: url('../fonts/NotoIKEALatin-Bold.ttf') format('truetype');
     font-weight: 700;
     /* bold */
     font-style: normal;
 }

 @font-face {
     font-family: 'NotoIKEALatin';
     src: url('../fonts/NotoIKEALatin-Italic.ttf') format('truetype');
     font-weight: 400;
     /* normal */
     font-style: italic;
 }

 @font-face {
     font-family: 'NotoIKEALatin';
     src: url('../fonts/NotoIKEALatin-BoldItalic.ttf') format('truetype');
     font-weight: 700;
     /* bold */
     font-style: italic;
 }

 /* --- Base and Loader Styles --- */
 :root {
     --desktop-width: 1920px;
     --mobile-width: 440px;
     /* Logical width remains 440px */
 }

 /* * --- Viewport-based root font size (REM scaling) --- 
         * 1. Base: 1rem = 10px @ 1920px width (1920px / 192 = 10px)
         */
 html {
     /* Default scaling for desktop */
     font-size: calc(100vw / 192);
 }

 /* 2. Cap: When wider than 1920px, lock 1rem = 10px */
 @media (min-width: 1920px) {
     html {
         font-size: 10px;
     }
 }

 @media (max-width: 768px) {
     html {
         /* 1rem = 10px @ 440px (440px / 44 = 10px) */
         font-size: calc(100vw / 44);
     }
 }

 body {
     font-family: 'NotoIKEALatin', sans-serif;
     margin: 0;
     padding: 0;
     background-color: #ffffff;
     /* Hide default scrollbar */
     overflow-y: scroll;
     scrollbar-width: none;
     /* Firefox */
     -ms-overflow-style: none;
     /* IE 10+ */
 }

 /* Custom capsule scrollbar (Webkit) */
 body::-webkit-scrollbar {
     width: 10px;
 }

 body::-webkit-scrollbar-track {
     background: transparent;
 }

 body::-webkit-scrollbar-thumb {
     background-color: rgba(0, 0, 0, 0.2);
     border-radius: 10px;
     border: 3px solid transparent;
     background-clip: content-box;
 }

 body::-webkit-scrollbar-thumb:hover {
     background-color: rgba(0, 0, 0, 0.4);
 }

 /* --- Loader --- */
 #loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: #ffffff;
     z-index: 1000;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .dot-flashing {
     position: relative;
     width: 10px;
     height: 10px;
     border-radius: 5px;
     background-color: #1d2024;
     color: #1d2024;
     animation: dot-flashing 1s infinite linear alternate;
     animation-delay: .5s;
 }

 .dot-flashing::before,
 .dot-flashing::after {
     content: '';
     display: inline-block;
     position: absolute;
     top: 0;
 }

 .dot-flashing::before {
     left: -15px;
     width: 10px;
     height: 10px;
     border-radius: 5px;
     background-color: #1d2024;
     color: #1d2024;
     animation: dot-flashing 1s infinite alternate;
     animation-delay: 0s;
 }

 .dot-flashing::after {
     left: 15px;
     width: 10px;
     height: 10px;
     border-radius: 5px;
     background-color: #1d2024;
     color: #1d2024;
     animation: dot-flashing 1s infinite alternate;
     animation-delay: 1s;
 }

 @keyframes dot-flashing {
     0% {
         background-color: #1d2024;
     }

     50%,
     100% {
         background-color: rgba(0, 81, 186, 0.2);
     }
 }

 /* --- Debug Tool Styles --- */
 #debug-controls {
     position: fixed;
     top: 10px;
     right: 10px;
     background: rgba(255, 255, 255, 0.9);
     border: 1px solid #ccc;
     padding: 8px;
     border-radius: 6px;
     z-index: 9999; /* Keep on top */
     font-size: 14px; /* Override rem scaling to maintain readability */
     color: black;
 }

 #debug-controls label {
     margin-right: 5px;
     font-weight: bold;
 }

 #debug-controls select {
     font-size: 14px;
     padding: 2px;
 }

 .header-container {
     text-align: center;
     padding: 5rem 2rem 2rem;
     color: #000;
     background: #ffffff;
     margin: 2rem auto;
     width: 100%;
     max-width: 122rem;
 }

 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-2rem);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .header-container .blue-banner,
 .header-container h1,
 .header-container p {
     opacity: 0;
     visibility: hidden;
 }

 .header-container .animate-in {
     opacity: 0; /* Ensure it starts from 0 */
     visibility: visible;
     animation: fadeInDown 0.6s ease-out forwards;
 }

 .header-container .blue-banner {
     display: inline-block;
     background-color: #0077C8; /* IKEA blue */
     color: #ffffff;
     padding: 0.5rem 1rem;
     font-size: 3rem;
     /* 30px */
     font-weight: bold;
     margin-bottom: 2rem; /* Spacing */
 }

 .header-container h1 {
     font-size: 5.2rem; /* 52px */
     font-weight: bold;
     margin-top: 2rem;
     margin-bottom: 2rem;
     line-height: 1.2;
 }

 .header-container p {
     font-size: 2.6rem;
     line-height: 1.5;
     margin-bottom: 2rem;
 }

 .header-container p strong {
     font-weight: bold;
 }

 .scroll-to-today {

     position: fixed;
     bottom: 3rem;
     right: 3rem;
     z-index: 100;

     display: none;
     align-items: center;
     justify-content: center;
     gap: 1.5rem;

     background: #ffffff;
     border: none;
     cursor: pointer;
     padding: 1.2rem 2rem;
     font-family: 'NotoIKEALatin', sans-serif;
     font-size: 2rem;
     font-weight: bold;
     color: #000;

     border-radius: 5rem;
     box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.15);

     opacity: 0;
     visibility: hidden;
     transform: translateY(2rem);

     transition: opacity 0.3s ease, visibility 0s 0.3s, transform 0.3s ease;
 }

 .scroll-to-today.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
     transition: opacity 0.3s ease, visibility 0s 0s, transform 0.3s ease;
 }

 .scroll-to-today:hover .scroll-to-today-icon {
     transform: scale(1.1);
 }

 .scroll-to-today-icon {
     width: 4rem;
     height: 4rem;
     border-radius: 50%; /* Ensure it's a circle */
     border: 0.2rem solid #000;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: transform 0.2s ease;
     flex-shrink: 0; /* Prevent icon from being compressed */
 }

 .scroll-to-today-icon svg {
     width: 1.8rem;
     height: 1.8rem;
 }

 @media (max-width: 768px) {
     .header-container .blue-banner {
     font-size: 2.2rem;
 }
     .scroll-to-today {
         display: inline-flex;
         font-size: 1.7rem;
         gap: 0.4rem;
         padding: 1.5rem 1.9rem;
         bottom: 2rem;
         right: 2rem;
         width: 25rem;
         box-sizing: border-box;
     }

     .scroll-to-today-icon {
         width: 4.4rem;
         height: 4.4rem;
     }

     .scroll-to-today-icon svg {
         width: 2rem;
         height: 2rem;
     }
 }

 /* --- Main Content Container --- */
 .main-container {
     max-width: var(--desktop-width);
     /* 1920px */
     margin: 0 auto; /* Prevent content overflow on scaling */
     background-image: url('../images/bg.png'); /* Placeholder image */
     background-size: 100% auto;
     background-position: bottom center;
     background-repeat: no-repeat;
     z-index: 20;
 }

 /* --- Gift Box Common Styles --- */
 .gift-box {
     border: none;
     padding: 0;
     background: none;
     cursor: pointer; 
     transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
     position: relative; /* Ensure image fills the button */
 }

 .gift-box img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: contain; /* Maintain image aspect ratio */
 } 
 .gift-box.animation-complete:hover:not(:disabled) {
     box-shadow:  0px 0rem 1rem 2px rgb(0 0 0 / 46%);
     transform: translateY(0) scale(1.005); /* 无需 !important */
     z-index: 1000;
 }
 

/* For special hover gifts, position images on top of each other */
.gift-box.special-hover img {
    position: absolute;
    top: 0;
    left: 0;
}

/* 为原始图片（非悬停图片）也添加过渡效果 */
.gift-box.special-hover img:not(.gift-image-hover) { 
}

/* Hide the hover image by default and set up the transition */
.gift-box.special-hover .gift-image-hover {
    opacity: 0; 
}

/* 悬停时，隐藏原始图片，并显示悬停图片 */
/* On hover, reveal the hover image */
.gift-box.special-hover:hover .gift-image {
   opacity: 0;  
}
#gift-d-1 .gift-image-hover {
    transform: translateY(0.45rem) translatex(0.15rem) scale(1.07); 
} 
#gift-d-2 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.07); 
} 
#gift-d-3 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.11); 
}
#gift-d-4 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.09); 
}
#gift-d-5 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.09); 
}
#gift-d-6 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.15); 
}
#gift-d-7 .gift-image-hover {
    transform: translateY(0.5rem) scale(1.1); 
}
#gift-d-8 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.15); 
}
#gift-d-9 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.11); 
}
#gift-d-10 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.09); 
}
#gift-d-11 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.09); 
}
#gift-d-12 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.07); 
}
#gift-d-13 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.07); 
}
#gift-d-14 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.12); 
}
#gift-d-15 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.11); 
}
#gift-d-16 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.09); 
}
#gift-d-17 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.11); 
}
#gift-d-18 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.07); 
}
#gift-d-19 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.12); 
}
#gift-d-20 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.07); 
}
#gift-d-21 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.09); 
}
#gift-d-22 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.09); 
}
#gift-d-23 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.1); 
}
#gift-d-24 .gift-image-hover {
    transform: translateY(0.45rem) scale(1.09); 
}


.gift-box.special-hover:hover .gift-image-hover {
   opacity: 1;  
}

/* Cadeau du jour 24 (bordure de 5px) */
/* Dimensions originales: 210x240. Dimensions avec bordure: 220x250. */
/* scaleX = 220/210 = 1.0476, scaleY = 250/240 = 1.0417 */

/* Ajoutez ici d'autres règles pour les autres jours spéciaux */
/* Exemple pour le jour 1 (bordure de 5px) */
/* Dimensions: 466x309. scaleX = 476/466=1.021, scaleY = 319/309=1.032 */
 /* #gift-d-24.special-hover.is-hovering img { transform: scale(1.1, 1.032); transition: transform 0.2s ease-out; }  */

 /* Désactiver le box-shadow pour les cadeaux avec survol d'image personnalisé */
 .gift-box.special-hover:hover:not(:disabled) {
    box-shadow: none;
 }

 
 .gift-box.special-hover.animation-complete:hover:not(:disabled) {
   /* transform: translateY(0) scale(1.3); */
 }
 /* exemple 24 */
 /* #gift-d-7.special-hover.animation-complete:hover:not(:disabled) { transform: scale(1.021, 1.032); transition: transform 0.2s ease-out; }  */

 .gift-box.future {
     cursor: default; /* Change to default cursor */

 }

 /* --- 桌面端布局 (大于 768px) --- */

 @media (min-width: 769px) {
     .calendar-wrapper-desktop {
         display: block;
         position: relative;
         /* height 2500px -> 250rem */
         height: 248rem;
         margin: 0 auto;
     }

     .calendar-wrapper-mobile {
         display: none; /* Hide mobile layout */
     }

     /* Desktop absolute positioning (corrected based on image {CC3A0AE5...}.png) */
     .calendar-wrapper-desktop .gift-box {
         position: absolute;
         opacity: 0; /* Animation initial state: transparent */
         visibility: hidden; /* Animation initial state: hidden */
         /* transform: translateY(-1500px); -> -150rem */
         transform: translateY(-150rem);
     }

     /* Animation class */
     .calendar-wrapper-desktop .gift-box.animate-in {
         visibility: visible;
         /* 'forwards' keeps the animation end state */
         animation: drop-bounce 1s ease-out forwards;
     }

     /* État final après l'animation pour que les cadeaux restent visibles */
     /* 确保这个规则的特指度和初始状态规则一致 */
     .calendar-wrapper-desktop .gift-box.animation-complete, .calendar-wrapper-mobile .gift-box.animation-complete {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
     }

     /* Define drop and bounce animation (using rem) */
     @keyframes drop-bounce {
         0% {
             opacity: 0;
             transform: translateY(-150rem); /* -1500px -> -150rem */
         }

         60% {
             opacity: 1;
             transform: translateY(0); /* First landing */
         }

         80% {
             transform: translateY(-3rem); /* -30px -> -3rem */
         }

         100% {
             opacity: 1; /* Keep visible */
             transform: translateY(0); /* Stable */
         }
     }

     /* * --- Desktop gift box positioning (all using rem) --- 
             * (Based on 1rem = 10px @ 1920px)
             * (Updated with new dimensions)
            */
     /* 第1行 */
     #gift-d-24 {
         top: 2rem;
         left: calc(50% - 13.5rem);
         width: 21rem;
         height: 24rem;

     }

     /* Width updated */
     /* 第2行 */
     #gift-d-8 {
         top: 27rem;
         left: calc(50% - 5.9rem);
         width: 18.5rem;
         height: 13.2rem;
     }

     /* 第3行 */
     #gift-d-19 {
         top: 27rem;
         left: calc(50% - 23.6rem);
         width: 16.6rem;
         height: 27.5rem;
     }

     #gift-d-6 {
         top: 41.2rem;
         left: calc(50% - 5.9rem);
         width: 23.7rem;
         height: 13.3rem;
     }

     /* 第4行 */
     #gift-d-7 {
         top: 54rem;
         left: calc(50% - 32rem);
         width: 56rem;
         height: 17.5rem;
     }

     /* Width/height/left updated */
     /* 第5行 */
     #gift-d-11 {
         top: 72.5rem;
         left: calc(50% - 40.7rem);
         width: 32.7rem;
         height: 27.5rem;
     }

     #gift-d-21 {
         top: 72.5rem;
         left: calc(50% - 7rem);
         width: 39.7rem;
         height: 27.5rem;
     }

     /* 第6行 */
     #gift-d-16 {
         top: 100.3rem;
         left: calc(50% - 46rem);
         width: 23.6rem;
         height: 22.6rem;
     }

     /* Width/height/left updated */
     #gift-d-3 {
         top: 101rem;
         left: calc(50% - 21.7rem);
         width: 20.2rem;
         height: 21.8rem;
     }

     #gift-d-10 {
         top: 99.5rem;
         left: calc(50% + 19.5rem);
         width: 25.3rem;
         height: 19.0rem;
     }

     /* Width/height updated */
     /* 第7行 */
     #gift-d-23 {
         top: 123.8rem;
         left: calc(50% - 53rem);
         width: 51.6rem;
         height: 19.3rem;
     }

     #gift-d-15 {
         top: 101rem;
         left: calc(50% - 0.5rem);
         width: 19.1rem;
         height: 42rem;
     }

     #gift-d-22 {
         top: 121.5rem;
         left: calc(50% + 44.3rem);
         width: 22.1rem;
         height: 21.6rem;
     }

     /* Height updated */
     /* 第8行 */
     #gift-d-1 {
         top: 142.9rem;
         left: calc(50% - 63rem);
         width: 46.6rem;
         height: 30.9rem;
     }

     /* Width/height/left updated */
     #gift-d-18 {
         top: 144.1rem;
         left: calc(50% - 15.4rem);
         width: 34rem;
         height: 29.7rem;
     }

     #gift-d-13 {
         top: 118.8rem;
         left: calc(50% + 19rem);
         width: 24.5rem;
         height: 55.0rem;
     }

     /* Width/height/left updated */
     #gift-d-5 {
         top: 144rem;
         left: calc(50% + 44.3rem);
         width: 24.4rem;
         height: 29.7rem;
     }

     /* left updated */
     /* 第9行 (底部) */
     #gift-d-20 {
         top: 174.8rem;
         left: calc(50% - 75.1rem);
         width: 31.1rem;
         height: 50rem;
     }

     #gift-d-14 {
         top: 174.8rem;
         left: calc(50% - 43rem);
         width: 37.2rem;
         height: 18.3rem;
     }

     #gift-d-2 {
         top: 192.2rem;
         left: calc(50% - 43rem);
         width: 37.2rem;
         height: 32.6rem;
         z-index: 2;
     }

     /* Height updated */
     #gift-d-4 {
         top: 174.8rem;
         left: calc(50% - 4.8rem);
         width: 28.9rem;
         height: 31.1rem;
     }

     #gift-d-17 {
         top: 206.9rem;
         left: calc(50% - 4.8rem);
         width: 50.8rem;
         height: 17.9rem;
     }

     #gift-d-12 {
         top: 174.8rem;
         left: calc(50% + 25.1rem);
         width: 54.7rem;
         height: 31.1rem;
     }

     #gift-d-9 {
         top: 206.9rem;
         left: calc(50% + 46.9rem);
         width: 32.8rem;
         height: 17.9rem;
     }
 }

 /* --- 手机端布局 (小于等于 768px) --- */

 @media (max-width: 768px) {
     .main-container {

         width: 44rem;
         margin: 0 auto; /* Center */

         background-image: url('../mobile_images/bg_mobile.jpg');
         background-position: top center;
         background-size: 100% auto;
     }

     .header-container {
         padding: 6rem 1rem 1rem;
         margin: 1rem auto;
         max-width: calc(100% - 2rem);
     }

     .header-container h1 {
      margin-top: 0.5rem;
        margin-bottom: 1rem;
        padding: 0 5.5rem;
        font-size: 3.7rem;
     }

     .header-container p {
         font-size: 1.7rem;
         margin-bottom: 1rem;
         padding: 0 2.5rem;
     }

     .calendar-wrapper-desktop {
         display: none; /* Hide desktop layout */
     }

     .calendar-wrapper-mobile {
         display: block;
         position: relative;
         margin: 0 auto;
         width: 100%; /* 44rem (440px) */
         height: 420rem;

     }

     .calendar-wrapper-mobile .gift-box {
         position: absolute;

         opacity: 0;
         visibility: hidden;
         transform: translateY(-150rem);

     }

     .calendar-wrapper-mobile .gift-box.animate-in {
         visibility: visible;
         animation: drop-bounce-mobile 1s ease-out forwards;
     }

     /* 关键修复：添加此规则以确保移动端动画结束后礼物盒保持可见 */
     .calendar-wrapper-mobile .gift-box.animation-complete {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
     }

     /* 确保移动端也有动画完成后的状态 */
     .calendar-wrapper-mobile .gift-box.animation-complete:hover:not(:disabled) {
        /* 在移动端，hover 效果不那么重要，但为了统一，可以保留 */
        /* 如果不需要移动端的 hover 效果，可以移除此规则 */
        box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.2);
        transform: translateY(0) scale(1.03);
     }

     @keyframes drop-bounce-mobile {
         0% {
             opacity: 0;
             transform: translateY(-150rem);
         }

         60% {
             opacity: 1;
             transform: translateY(0);
         }

         80% {
             transform: translateY(-3rem);
         }

         100% {
             opacity: 1;
             transform: translateY(0);
         }
     }

     /* * --- 手机端礼物盒定位 (全部使用 rem) --- 
             * (Based on 440px width, 1rem = 10px)
             * (!!!) Note: top/left values are *estimates* based on the image, you need to fine-tune them manually (!!!)
            */
     #gift-m-24 {
         top: 1rem;
         left: 11.5rem;
         width: 21rem;
         height: 24rem;
     }

     #gift-m-19 {
         top: 26rem;
         left: 2.4rem;
         width: 16.6rem;
         height: 27.5rem;
     }

     #gift-m-8 {
         top: 26rem;
         left: 20rem;
         width: 18.5rem;
         height: 13.2rem;
     }

     #gift-m-6 {
         top: 40.2rem;
         left: 20rem;
         width: 20.7rem;
         height: 13.3rem;
     }

     #gift-m-7 {
         top: 54.5rem;
         left: 0.5rem;
         width: 42.5rem;
         height: 17.5rem;
     }

     #gift-m-11 {
         top: 73rem;
         left: 1rem;
         width: 25rem;
         height: 19.6rem;
     }

     #gift-m-21 {
         top: 73rem;
         left: 27rem;
         width: 15rem;
         height: 19.6rem;
     }

     #gift-m-16 {
         top: 92.8rem;
         left: 0rem;
         width: 24.7rem;
         height: 22.6rem;
     }

     #gift-m-3 {
         top: 93.6rem;
         left: 25.7rem;
         width: 16.8rem;
         height: 21.8rem;
     }

     #gift-m-23 {
         top: 116.5rem;
         left: 1.6rem;
         width: 41rem;
         height: 19.2rem;
     }

     #gift-m-10 {
         top: 135.5rem;
         left: 22.9rem;
         width: 21rem;
         height: 18.5rem;
     }

     #gift-m-15 {
         top: 136.5rem;
         left: 1.6rem;
         width: 20.3rem;
         height: 42rem;
     }

     #gift-m-13 {
         top: 154.5rem;
         left: 22.4rem;
         width: 20.5rem;
         height: 55rem;
     }

     #gift-m-18 {
         top: 210.4rem;
         left: 1.8rem;
         width: 41rem;
         height: 29.7rem;
     }

     #gift-m-22 {
         top: 240.1rem;
         left: 1.8rem;
         width: 21.8rem;
         height: 30.8rem;
     }

     #gift-m-5 {
         top: 241.2rem;
         left: 24.6rem;
         width: 18.2rem;
         height: 29.7rem;
     }

     #gift-m-1 {
         top: 178.6rem;
         left: 0.7rem;
         width: 21.2rem;
         height: 30.8rem;
     }

     #gift-m-14 {
         top: 271.8rem;
         left: 23rem;
         width: 19.8rem;
         height: 18.3rem;
     }

     #gift-m-20 {
         top: 271.9rem;
         left: 1.8rem;
         width: 20.2rem;
         height: 50rem;
     }

     #gift-m-2 {
         top: 289.1rem;
         left: 23rem;
         width: 19.8rem;
         height: 32.8rem;
         z-index: 2;
     }

     #gift-m-4 {
         top: 322.8rem;
         left: 1.7rem;
         width: 23.2rem;
         height: 31.1rem;
     }

     #gift-m-17 {
         top: 322.8rem;
         left: 25.9rem;
         width: 16.8rem;
         height: 31.1rem;
     }

     #gift-m-12 {
         top: 354.7rem;
         left: 1.7rem;
         width: 41rem;
         height: 31.1rem;
     }

     #gift-m-9 {
         top: 386.7rem;
         left: 1.7rem;
         width: 41rem;
         height: 28rem;
     }

 }

 /* --- Modal (Pop Up) Styles --- */
 #modal {
     display: flex; /* Always flex, control with visibility */
     visibility: hidden; /* Hidden by default */
     opacity: 0; /* Transparent by default */
     position: fixed;
     z-index: 2000;
     left: 0;
     top: 0;
     width: 100vw;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.6);
     justify-content: center;
     align-items: center;
     /* CSS controlled transition - on close */
     transition: opacity 0.3s ease, visibility 0s 0.3s;
 }

 /* State when modal is open */
 #modal.show {
     visibility: visible;
     opacity: 1;
     /* CSS controlled transition - on open */
     transition: opacity 0.3s ease, visibility 0s 0s;
 }

 .modal-content {
     background: none;
     border: none;
     padding: 0;
     width: auto;
     max-width: none;
     box-shadow: none;
     position: relative; /* For positioning the close button */

     /* "Closed" state */
     transform: scale(0);
     opacity: 0;
     visibility: hidden;

     /* CSS controlled transition - on close */
     transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, visibility 0s 0.3s;
 }

 /* Content state when modal is open */
 #modal.show .modal-content {
     transform: scale(1);
     opacity: 1;
     visibility: visible;
     /* CSS controlled transition - on open */
     transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, visibility 0s 0s;
 }

 #modal-close {
     position: absolute; /* Position outside the container */
     top: -20px;
     right: -15px;
     font-size: 44px;
     font-weight: bold;
     color: #ffffff; /* White, more visible on dark backgrounds */
     text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
     background: none;
     border: none;
     cursor: pointer;
     line-height: 1;
     z-index: 2100; /* Ensure it's above the GIF */
 }

 #modal-close:hover {
     color: #ddd;
 }

 #modal-link {
     display: block;
     line-height: 0; /* Remove extra space from the link */
 }

 #modal-gif {
     display: block;

     width: auto;
     height: auto;

     max-width: 90vw;
     max-height: 80vh;
     border-radius: 8px;
     margin-bottom: 0;

     transition: width 0.3s ease, height 0.3s ease;
 }
 .ML{
    font-family: "font-family: 'NotoIKEALatin', sans-serif;";
    font-size: 12px;
    padding: 20px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
    color:#000;
 }
  .ML a {
    color:#000;
  }