.monthly-reveal-container * { margin: 0; padding: 0; box-sizing: border-box; }
.monthly-reveal-container { font-family: cursive; padding: 40px 20px; max-width: 1200px; margin: 0 auto; }
.monthly-reveal-container h1 { text-align: center; font-size: 3rem; margin-bottom: 40px; }
.monthly-reveal-grid { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; }
.monthly-reveal-box { flex: 0 1 calc(33.333% - 20px); display: flex; flex-direction: column; min-width: 280px; border-radius: 0; overflow: visible; position: relative; }
.monthly-reveal-box-header { background: transparent; padding: 15px 20px; text-align: center; }
.monthly-reveal-box-header h3 { font-size: 1.2rem; margin: 0; }
.monthly-reveal-book { position: relative; display: flex; flex-direction: column; flex: 1 1; box-shadow: 0 5px 10px rgba(0,0,0,.1); border-radius: 5px; }
.locked .monthly-reveal-book:before { content: ""; position: absolute; top: -2px; bottom: 0; right: 25px; width: 45px; background: #000; z-index: 99999; background: repeating-linear-gradient(90deg, #000, #000 2px, #222 2px, #222 3px); }
.monthly-reveal-book-cover { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 40px 70px; border-radius: 8px 8px 8px 0; flex: 1 1 100%; overflow: hidden; font-family: "Times New Roman", Times, serif; background-color: var(--box-color); min-height: clamp(280px, 36vw, 400px); }
.monthly-reveal-book-cover:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; mix-blend-mode: color-burn; opacity: .5; }
.leather .monthly-reveal-book-cover:before { background-image: url(https://www.textures4photoshop.com/tex/thumbs/seamless-white-leather-texture-thumb30.jpg); }
.dark-text .leather .monthly-reveal-book-cover:before { opacity: .3; mix-blend-mode: darken; }
.linen .monthly-reveal-book-cover { border-radius: 4px 4px 0 0; }
.linen .monthly-reveal-book-cover:before { background-image: url(https://t3.ftcdn.net/jpg/03/04/48/34/360_F_304483491_ECmwgrnr7pzH5DZwdnImGf3yqtvIhuFl.jpg); z-index: 3; }
.linen .monthly-reveal-book-cover:after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 60px; z-index: 1; background: var(--box-accent); }
.corner-decoration { position: absolute; width: 50px; height: 50px; z-index: 10; }
.corner-decoration svg { width: 100%; height: 100%; }
.corner-tl { top: 10px; left: 10px; }
.corner-tr { top: 10px; right: 10px; transform: scaleX(-1); }
.corner-bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.corner-br { bottom: 10px; right: 10px; transform: scale(-1, -1); }
.monthly-reveal-book-title { text-align: center; color: white; z-index: 5; }
.monthly-reveal-book-title .title { font-size: 2rem; font-weight: bold; margin-bottom: 10px; font-family: "Tangerine", cursive; }
.monthly-reveal-book-title .description { font-size: 1rem; opacity: 0.9; }
.dark-text .monthly-reveal-book-title { color: black; }
.monthly-reveal-book-pages { background: white; position: relative; height: 60px; margin-top: -8px; z-index: -1; border-left: 10px solid var(--box-color); border-right: 4px solid var(--box-color); background: repeating-linear-gradient(0deg, #fff, #fff 2px, #fff0bd 2px, #fff0bd 3px); }
.monthly-reveal-book-pages:before { content: ""; position: absolute; top: 0; right: -4px; bottom: 0; width: 4px; background: linear-gradient(0deg, rgb(255, 255, 255) 10%, rgb(0, 0, 0) 90%); mix-blend-mode: multiply; opacity: .2; }
.dark-text .monthly-reveal-book-pages:before { opacity: .1; mix-blend-mode: darken; }
.locked .monthly-reveal-book-pages:after { content: ""; position: absolute; top: 0; bottom: 0; right: 21px; width: 45px; background: #000; z-index: 99999; background: repeating-linear-gradient(90deg, #000, #000 2px, #222 2px, #222 3px); box-shadow: 2px 0px 10px rgba(0,0,0,.3); }
.linen .monthly-reveal-book-pages { border-left: 8px solid var(--box-accent); }
.monthly-reveal-book-back { height: 10px; width: 100%; border-radius: 0 0 4px 4px; position: relative; z-index: -2; background: var(--box-color); }
.linen .monthly-reveal-book-back:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60px; z-index: 1; background: var(--box-accent); }
.monthly-reveal-book-back:after { content: ""; position: absolute; top: 0; bottom: -2px; right: 25px; width: 45px; background: #000; z-index: 99999; background: repeating-linear-gradient(90deg, #000, #000 2px, #222 2px, #222 3px); box-shadow: 2px 0px 5px rgba(0,0,0,.2); }
.monthly-reveal-countdown { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 15vw; color: white; }
.dark-text .monthly-reveal-countdown { color: black; }
.countdown-display { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.countdown-unit { display: flex; flex-direction: column; align-items: center; min-width: 70px; }
.countdown-number { font-size: 2rem; font-weight: bold; color: white; line-height: 1; }
.dark-text .countdown-number { color: black; }
.countdown-label { font-size: 0.8rem; color: rgba(255, 255, 255, 0.9); margin-top: 5px; opacity: 0.9; }
.dark-text .countdown-label { color: rgba(0, 0, 0, 0.9); }
.monthly-reveal-hint-section { text-align: center; color: white; padding: 20px; z-index: 5; }
.dark-text .monthly-reveal-hint-section { color: black; }
.hint-title { font-size: 2rem; font-weight: bold; margin-bottom: 0; font-family: "Tangerine", cursive; color: rgba(255, 255, 255, 0.95); }
.dark-text .hint-title { color: rgba(0, 0, 0, 0.95); }
.hint-countdown-text { font-size: 1rem; color: rgba(255, 255, 255, 0.7); font-style: italic; padding: 20px; opacity: 0.7; }
.dark-text .hint-countdown-text { color: rgba(0, 0, 0, 0.7); }
.countdown-divider { width: 80%; height: 2px; background: rgba(255, 255, 255, 0.4); margin: 15px auto; opacity: 0.4; }
.dark-text .countdown-divider { background: rgba(0, 0, 0, 0.4); }
.unlocked .linen .monthly-reveal-book-cover { padding: 40px 40px 40px 90px; }
@media (max-width: 768px) { .monthly-reveal-box { flex: 0 1 calc(50% - 15px); min-width: 250px; } }
@media (max-width: 480px) { .monthly-reveal-box { flex: 0 1 100%; } .countdown-number { font-size: 2rem; } }