:root {
    --color-sunday: 234, 50, 60;
    --color-monday: 0, 105, 170;
    --color-tuesday: 255, 162, 20;
    --color-wednesday: 30, 111, 80;
    --color-thursday: 147, 56, 143;
    --color-friday: 66, 76, 110;
    --color-saturday: 90, 197, 79;
    --color-weekday: 0, 0, 0;
    --color-special: 198, 17, 13;
}

.sunday {
    --color-weekday: var(--color-sunday);
}

.monday {
    --color-weekday: var(--color-monday);
}

.tuesday {
    --color-weekday: var(--color-tuesday);
}

.wednesday {
    --color-weekday: var(--color-wednesday);
}

.thursday {
    --color-weekday: var(--color-thursday);
}

.friday {
    --color-weekday: var(--color-friday);
}

.saturday {
    --color-weekday: var(--color-saturday);
}

.special {
    --color-weekday: var(--color-special);
}

html {
    font-size: 16px;
}

body {
    background-color: rgb(32, 32, 32);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0.5em;
    box-sizing: border-box;
}

.calendar-wrapper {
    background-color: whitesmoke;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    width: min(95vw, 95vh * 0.7111, 95dvh * 0.7111);
    aspect-ratio: 32 / 45;
    max-width: 40em;
    font-size: clamp(0.6rem, 2.5vw, 1rem);
}

.calendar-wrapper:before,
.calendar-wrapper:after {
    content: var(--pseudo-content, '');
    position: absolute;
    height: 100%;
    background-color: lightgray;
}

.calendar-wrapper:before {
    z-index: -1;
    width: calc(100% + 6px);
    top: 5px;
    left: -3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.calendar-wrapper:after {
    width: calc(100% + 12px);
    z-index: -2;
    top: 10px;
    left: -6px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, .8);
}

.box {
    display: flex;
    flex-shrink: 0;
}

.box>* {
    flex: 1;
}

.box.margin {
    background-color: rgb(var(--color-weekday));
    border-bottom: 1px dashed gainsboro;
    height: 5.5%;
}

.calendar {
    color: rgb(var(--color-weekday));
    height: 94.5%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.calendar-header,
.box.weekday {
    flex: 0 0 auto;
    font-size: clamp(0.8em, 1.5em, 1.5em);
    text-transform: uppercase;
}

.calendar-header {
    padding: .5em;
}

.calendar-header>.thang {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-header>.year {
    text-align: center;
    white-space: nowrap;
}

.calendar-header>.month {
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box.date,
.box.lunar {
    flex: 1 1 0;
}

.box.date {
    display: flex;
    flex-direction: column;
}

.big-date {
    font-family: sans-serif;
    font-size: clamp(6em, 12em, 14em);
    font-weight: 900;
    text-align: center;
    margin: 0;
    line-height: 1;
    height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
}

#holidays {
    text-align: center;
    min-height: 3em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
}

#holidays>p {
    margin: 0.25em 0;
    font-size: clamp(0.8em, 0.95em, 0.95em);
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 1em;
}

.week-day {
    background: linear-gradient(to right,
            rgba(var(--color-weekday), .75) 0%,
            rgba(var(--color-weekday), 0.4) 30%,
            rgba(var(--color-weekday), 0) 50%,
            rgba(var(--color-weekday), 0.4) 70%,
            rgba(var(--color-weekday), .75) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.week-day>div {
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
    flex: 1;
    padding: .5em;
}

#weekday-cn {
    text-align: left;
}

#weekday-vi {
    text-align: center;
    color: rgb(var(--color-weekday));
    font-weight: bold;
    border: 5px solid rgb(var(--color-weekday), .3);
    border-radius: 5em;
    background-color: white;
    margin: -1em 0;
}

#weekday-en {
    text-align: right;
}

.box.lunar {
    flex-grow: 1;
    min-height: 0;
}

.box.lunar>* {
    padding: 0.5em;
}

.lunar-left {
    flex: 3;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-auto-rows: max-content;
    align-content: center;
    white-space: nowrap;
    overflow: hidden;
}

.can-chi {
    display: contents;
}

/* Left column (symbol area) */
.can-chi-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    padding: 5px;
}

/* Right column (text area) */
.can-chi-text {
    display: grid;
    grid-template-rows: repeat(2, auto);
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    align-content: center;
}

.can-chi-text>div {
    border-top: 1px solid gainsboro;
    padding: 2px 0;
}

.can-chi-text>div:first-child {
    border-top: none;
}


.lunar-middle {
    flex: 2;
    text-align: center;
    border-left: 1px solid gainsboro;
    border-right: 1px solid gainsboro;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lunar-middle>p {
    margin: 0.25em 0;
}

.lunar-month,
.lunar-month-cn {
    font-size: clamp(0.8em, 1.5em, 1.8em);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.25em;
}

.lunar-date {
    font-size: clamp(2.5em, 4em, 4em);
    line-height: 1;
}

.lunar-right {
    flex: 3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    align-content: center;
}

.lunar-right>#good-hours-header {
    margin: 0.5em 0;
}

.lunar-right>#good-hours {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
}

#calendar-corner {
    display: block;
    clear: both;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1em;
    height: 1em;
    background: linear-gradient(135deg,
            rgb(223, 223, 223) 10%,
            rgb(203, 203, 203) 49%,
            rgb(165, 165, 165) 50%,
            rgb(234, 234, 234) 51%,
            rgb(250, 250, 250) 90%);
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 10;
}

#calendar-corner:hover {
    width: 2em;
    height: 2em;
}

/* Extra */
#ui-container {
    align-content: center;
}

#screenshot-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    width: 2em;
    height: 2em;
    line-height: 1;
    margin: 0 .25em;
}

.margin>#date-picker {
    background-color: rgb(var(--color-weekday));
    font-size: 1em;
    text-align: center;
    border: none;
    color-scheme: dark;
    width: 100%;
    height: 100%;
    flex: 0;
    padding: 0 .5em;
}

.margin>#credit {
    color: white;
    padding: 0 1em;
    align-self: center;
    display: none;
}

/* Tear-off Effect */
@keyframes tearOff {
    0% {
        transform: rotate(0deg) translate(0, 0);
        opacity: 1;
        transform-origin: top left;
    }

    100% {
        transform: rotate(-15deg) translate(-100px, -100px);
        opacity: 0;
        transform-origin: top left;
    }
}

.tear-off {
    animation: tearOff 0.8s ease-in-out forwards;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
    background-color: whitesmoke;
    /* Match wrapper bg */
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    /* Dark semi-transparent bg */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.modal-content {
    background-color: white;
    padding: 1.5em;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-image-container {
    margin: 1em 0;
}

.modal-image-container img {
    max-width: 100%;
    max-height: 55vh;
    /* Limit height for buttons to fit */
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.modal-hint {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 1em;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 1em;
}

.action-btn {
    border: none;
    padding: 0.8em 1.5em;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s;
}

.action-btn.primary {
    background-color: rgb(32, 32, 32);
    /* Match body bg */
    color: white;
}

.action-btn.primary:hover {
    background-color: black;
}

.action-btn.secondary {
    background-color: #e0e0e0;
    color: #333;
}

.action-btn.secondary:hover {
    background-color: #d0d0d0;
}