/* File: Main Styles */

/* Font face declaration */
@font-face {
    font-family: "MontHeavy";
    src: url("/fonts/MontHeavy.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Language-specific font settings */
body[lang="fr"],
body[lang="es"],
body[lang="de"],
body[lang="pt"],
body[lang="cn"],
body[lang="vi"] {
    font-family: "Noto Sans", sans-serif;
    font-weight: 900;
}

/* Noto Sans has no Devanagari, so Hindi fell back to a system font with no
   900 weight, and the text looked thin next to every other language. */
body[lang="hi"] {
    font-family: "Noto Sans Devanagari", sans-serif;
    font-weight: 900;
}

body[lang="ar"] {
    font-family: "Noto Sans Arabic", sans-serif;
    font-weight: 900;
}

body[lang="ja"] {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
}

body[lang="ko"] {
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 900;
}

body[lang="th"] {
    font-family: "Noto Sans Thai", sans-serif;
    font-weight: 900;
}

body[lang="cn"] {
    font-family: "Noto Sans SC", sans-serif;
    font-weight: 900;
}

/* Language-specific element font overrides */
body[lang="fr"] .lunar-day,
body[lang="fr"] .date,
body[lang="fr"] .moon-phase,
body[lang="fr"] .timezone,
body[lang="fr"] .lunar-day-float,
body[lang="fr"] .date-float,
body[lang="fr"] .timezone-float,
body[lang="es"] .lunar-day,
body[lang="es"] .date,
body[lang="es"] .moon-phase,
body[lang="es"] .timezone,
body[lang="es"] .lunar-day-float,
body[lang="es"] .date-float,
body[lang="es"] .timezone-float,
body[lang="de"] .lunar-day,
body[lang="de"] .date,
body[lang="de"] .moon-phase,
body[lang="de"] .timezone,
body[lang="de"] .lunar-day-float,
body[lang="de"] .date-float,
body[lang="de"] .timezone-float,
body[lang="pt"] .lunar-day,
body[lang="pt"] .date,
body[lang="pt"] .moon-phase,
body[lang="pt"] .timezone,
body[lang="pt"] .lunar-day-float,
body[lang="pt"] .date-float,
body[lang="pt"] .timezone-float,
body[lang="vi"] .lunar-day,
body[lang="vi"] .date,
body[lang="vi"] .moon-phase,
body[lang="vi"] .timezone,
body[lang="vi"] .lunar-day-float,
body[lang="vi"] .date-float,
body[lang="vi"] .timezone-float,
body[lang="fr"] .content-type-btn,
body[lang="es"] .content-type-btn,
body[lang="de"] .content-type-btn,
body[lang="pt"] .content-type-btn,
body[lang="cn"] .content-type-btn,
body[lang="vi"] .content-type-btn {
    font-family: "Noto Sans", sans-serif;
    font-weight: 900;
}

/* Hindi has its own script and its own family: Noto Sans lacks Devanagari. */
body[lang="hi"] .lunar-day,
body[lang="hi"] .date,
body[lang="hi"] .moon-phase,
body[lang="hi"] .timezone,
body[lang="hi"] .lunar-day-float,
body[lang="hi"] .date-float,
body[lang="hi"] .timezone-float,
body[lang="hi"] .content-type-btn {
    font-family: "Noto Sans Devanagari", sans-serif;
    font-weight: 900;
}

body[lang="ar"] .lunar-day,
body[lang="ar"] .date,
body[lang="ar"] .moon-phase,
body[lang="ar"] .timezone,
body[lang="ar"] .lunar-day-float,
body[lang="ar"] .date-float,
body[lang="ar"] .timezone-float,
body[lang="ar"] .content-type-btn {
    font-family: "Noto Sans Arabic", sans-serif;
    font-weight: 900;
}

body[lang="ja"] .lunar-day,
body[lang="ja"] .date,
body[lang="ja"] .moon-phase,
body[lang="ja"] .timezone,
body[lang="ja"] .lunar-day-float,
body[lang="ja"] .date-float,
body[lang="ja"] .timezone-float,
body[lang="ja"] .content-type-btn {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
}

body[lang="ko"] .lunar-day,
body[lang="ko"] .date,
body[lang="ko"] .moon-phase,
body[lang="ko"] .timezone,
body[lang="ko"] .lunar-day-float,
body[lang="ko"] .date-float,
body[lang="ko"] .timezone-float,
body[lang="ko"] .content-type-btn {
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 900;
}

body[lang="th"] .lunar-day,
body[lang="th"] .date,
body[lang="th"] .moon-phase,
body[lang="th"] .timezone,
body[lang="th"] .lunar-day-float,
body[lang="th"] .date-float,
body[lang="th"] .timezone-float,
body[lang="th"] .content-type-btn {
    font-family: "Noto Sans Thai", sans-serif;
    font-weight: 900;
}

body[lang="cn"] .lunar-day,
body[lang="cn"] .date,
body[lang="cn"] .moon-phase,
body[lang="cn"] .timezone,
body[lang="cn"] .lunar-day-float,
body[lang="cn"] .date-float,
body[lang="cn"] .timezone-float,
body[lang="cn"] .content-type-btn {
    font-family: "Noto Sans SC", sans-serif;
    font-weight: 900;
}

/* Two-column layout for mobile/tablet landscape */
@media screen and (max-height: 600px) and (orientation: landscape),
    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        justify-content: center;
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }

    .header {
        flex: 0 0 auto;
        top: 20px;
        left: max(20px, env(safe-area-inset-left, 0));
        right: max(20px, env(safe-area-inset-right, 0));
        height: auto;
    }

    .content-wrapper {
        position: absolute;
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .left-content,
    .right-content {
        flex: 0 0 50%;
        max-width: 50%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        padding: 0 max(20px, env(safe-area-inset-left, 0));
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: normal;
    }

    .left-content {
        text-align: left;
    }
    .right-content {
        text-align: right;
    }

    body[lang="ar"] .left-content {
        text-align: right;
    }
    body[lang="ar"] .right-content {
        text-align: left;
    }

    .left-content .message,
    .right-content .lunar-day,
    .right-content .date,
    .right-content .moon-phase,
    .right-content .timezone {
        margin: 0;
        padding: 0;
    }

    .right-content .date,
    .right-content .moon-phase,
    .right-content .timezone {
        margin-top: 20px;
    }

    .app-icons {
        flex: 0 0 auto;
        margin-top: auto;
        bottom: calc(20px + var(--ads-height));
    }

    .app-icons {
        flex: none;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }

    .app-icons .content-type-btn {
        min-width: auto;
        padding: 0;
        margin: 0;
    }

    .app-icons .content-type-btn:first-child {
        text-align: left;
    }

    .app-icons .content-type-btn:last-child {
        text-align: right;
    }

    .pagination {
        display: flex;
        top: calc((var(--viewport-height) - var(--ads-height)) / 2);
        transform: translateY(-50%);
    }

    .pagination-right {
        display: none;
    }
}

/* Specific adjustments for iPhone XR-16 Pro landscape */
@media screen and (max-height: 500px) and (min-width: 800px) and (max-width: 950px) and (orientation: landscape) {
    .header {
        top: 10px;
    }
    .controls {
        display: flex;
    }
    .left-content,
    .right-content {
        padding: 0 max(20px, env(safe-area-inset-left, 0));
    }
}

/* Two-column layout for desktop with narrow window */
@media screen and (min-width: 1025px) and (max-aspect-ratio: 5/4) {
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        justify-content: center;
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }

    .header {
        flex: 0 0 auto;
        top: 20px;
        left: max(20px, env(safe-area-inset-left, 0));
        right: max(20px, env(safe-area-inset-right, 0));
        height: auto;
    }

    .content-wrapper {
        position: absolute;
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .left-content,
    .right-content {
        flex: 0 0 50%;
        max-width: 50%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        padding: 0 max(20px, env(safe-area-inset-left, 0));
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .left-content {
        text-align: left;
    }
    .right-content {
        text-align: right;
    }

    body[lang="ar"] .left-content {
        text-align: right;
    }
    body[lang="ar"] .right-content {
        text-align: left;
    }

    .left-content .message,
    .right-content .lunar-day,
    .right-content .date,
    .right-content .moon-phase,
    .right-content .timezone {
        margin: 0;
        padding: 0;
    }

    .right-content .date,
    .right-content .moon-phase,
    .right-content .timezone {
        margin-top: 20px;
    }
}

/* Adjustments for ultra-wide screens (2881px+) */
@media screen and (min-width: 2881px) {
    .message {
        font-size: 7rem;
    }
    .lunar-day {
        font-size: 4rem;
    }
    .date,
    .moon-phase,
    .timezone {
        font-size: 2rem;
    }
    .logo-text span,
    .language-selected,
    .legend-button,
    .language-list span,
    .language-list-horizontal span,
    .legend-text {
        font-size: 2rem;
    }
    .message-float {
        font-size: 7rem;
    }
    .lunar-day-float {
        font-size: 4rem;
    }
    .date-float,
    .moon-phase-float,
    .timezone-float {
        font-size: 2rem;
    }
    .logo-icon img {
        width: 45px;
        height: 45px;
    }
    .legend-text {
        white-space: nowrap;
    }
}

/* Color scheme variables */
:root {
    color-scheme: light dark;
    /* The strip the ad takes up at the bottom.
       Zero everywhere but Telegram. On VK and OK the platform itself trims
       that height for us — from the outside, at the frame — and nothing
       inside needs to know about it. Telegram has no ads of its own, the
       network is third-party and lives INSIDE the page, so we have to
       subtract the same strip ourselves. Both the styles and the layout
       measurements read it from here, so that all three platforms count
       the same way. */
    --ads-height: 0px;
    /* Window height. On the web and on VK, 100vh reports it honestly.
       Not in Telegram: the client opens the app at less than full screen
       while vh still measures the whole screen, so the bottom of the stage
       ends up past the lower edge of the window. There this variable is
       swapped for viewportStableHeight, which the client names itself. */
    --viewport-height: 100vh;
    --text-color: #282828;
    --background-color: #fefefe;
    --button-color: #282828;
    --button-text-color: #ffffff;
    --dropdown-background: transparent;
    --dropdown-text: #282828;
    --dropdown-hover: #f0f0f0;
    --status-bar: #fefefe;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #ffffff;
        --background-color: #282828;
        --button-color: #ffffff;
        --button-text-color: #282828;
        --dropdown-background: transparent;
        --dropdown-text: #ffffff;
        --dropdown-hover: #444444;
        --status-bar: #282828;
    }
    #muuune-logo {
        filter: invert(1);
    }
}

/* The backdrop behind the screen — what you see if you drag the page past its
   edge. The VK checklist asks for it in the app's main color and "neither
   black nor white": hence #FEFEFE instead of pure white, and our dark side is
   #282828 anyway. This only covers the first frame — after that color.js
   paints it with the palette of the day, a different one per language. */
html {
    background: var(--background-color);
}

/* Base body styles */
body {
    font-family: "MontHeavy", sans-serif;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: calc(var(--viewport-height) - var(--ads-height));
    min-height: calc(var(--viewport-height) - var(--ads-height));
    margin: 0;
    padding: 0;
    background: var(--background-color);
    color: var(--text-color);
    transition:
        background 0.5s ease,
        color 0.5s ease;
    overflow: hidden;
    opacity: 0;
    line-height: 1.2;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Stream mode */
body.stream-mode .header {
    top: 40px;
    left: 40px;
    right: 40px;
}
body.stream-mode .stream-legend {
    display: block;
    opacity: 0.5;
    font-size: 1rem;
    line-height: 1;
    text-align: right;
}

/* Header styling */
.header {
    position: fixed;
    top: 20px;
    left: max(20px, env(safe-area-inset-left, 0));
    right: max(20px, env(safe-area-inset-right, 0));
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition:
        color 0.5s ease,
        top 0.3s ease;
    background: transparent;
    z-index: 1000;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-2px);
}

.logo-icon img {
    width: 25px;
    height: 25px;
    transition: filter 0.3s ease;
}

.logo-text {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-text span {
    font-family: "MontHeavy", sans-serif;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1;
    height: 25px;
    display: flex;
    align-items: center;
}

.logo-text span a {
    color: inherit;
    text-decoration: none;
}

.controls {
    display: none;
    align-items: center;
    gap: 20px;
    position: relative;
    transition: opacity 0.3s ease;
}

/* On the narrowest screens — the iPhone SE and its kin — the logo and the
   three header buttons did not fit into the 280 pixels available and ran three
   or four past the right edge. It is the margins that give way, not the font
   size: the header is already set at the smallest type we have. */
@media (max-width: 360px) {
    .header {
        left: max(12px, env(safe-area-inset-left, 0));
        right: max(12px, env(safe-area-inset-right, 0));
    }
    .controls {
        gap: 12px;
    }
}

/* Language dropdown styling */
.language-dropdown {
    position: relative;
    cursor: pointer;
}

.language-selected {
    opacity: 0.5;
    transition: opacity 0.3s ease;
    font-size: 1rem;
    line-height: 1.2;
}

.language-selected:hover,
.language-selected.active-control {
    opacity: 1;
}

.language-list {
    position: absolute;
    top: 100%;
    background: var(--background-color);
    width: 70px;
    right: -10px;
    display: none;
    flex-direction: column;
    text-align: right;
    transition:
        background 0.5s ease,
        color 0.5s ease,
        opacity 0.3s ease;
    border: none;
    padding: 0;
    opacity: 0;
}

.language-list span {
    padding: 5px 10px;
    cursor: pointer;
    opacity: 0.5;
    transition:
        opacity 0.3s,
        background 0.3s ease,
        color 0.3s ease;
    font-size: 1rem;
    background-color: var(--background-color);
    color: var(--dropdown-text);
    font-weight: normal;
    line-height: 1.2;
}

.language-list span:hover {
    opacity: 1;
    background: var(--dropdown-hover);
}

.language-list-horizontal {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--background-color);
    display: none;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: baseline;
    transition:
        background 0.5s ease,
        color 0.5s ease,
        opacity 0.3s ease;
    border: none;
    padding: 15px 0 10px;
    z-index: 999;
    opacity: 0;
}

.language-list-horizontal span {
    padding-left: 15px;
    cursor: pointer;
    opacity: 0.5;
    transition:
        opacity 0.3s,
        background 0.3s ease,
        color 0.3s ease;
    font-size: 1rem;
    background-color: var(--background-color);
    color: var(--dropdown-text);
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
}

.language-list-horizontal span:hover {
    opacity: 1;
    background: var(--dropdown-hover);
}

@media screen and (max-height: 600px) and (orientation: landscape),
    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .language-list {
        display: none !important;
    }
}

/* VK Share icon styling */
/* A button, not an image with a handler: the VK checklist requires that icons
   not be clickable on their own, and a keyboard or a screen reader also needs
   an element that has a role and a name. The image inside is decoration, so
   its alt is empty: the name is carried by the button. */
.share-icon {
    width: 25px;
    height: 25px;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.share-icon img {
    width: 100%;
    height: 100%;
    display: block;
    /* The image takes no part in events at all: otherwise it inherits the
       button's cursor and looks clickable again — exactly what the checklist
       asks us to remove. The click lands on the button, which handles it. */
    pointer-events: none;
    transition: filter 0.3s ease;
}

.share-icon:hover {
    opacity: 1;
}

/* Today info container styling */
.today-info-container {
    cursor: pointer;
}

/* font-weight is inherited rather than left to the browser: this is an <h1>,
   and its default is bold. MontHeavy has a single weight, so the browser drew
   the boldness synthetically, and the heading stood heavier than the header
   buttons beside it, which are set at the very same size. Inheriting also hands
   each language its own weight: where body[lang] asks for 900, the heading
   follows the rest. */
.today-info-button {
    opacity: 0.5;
    transition: opacity 0.3s ease;
    font-weight: inherit;
    font-size: 1rem;
    line-height: 1.2;
    margin: 0;
    cursor: pointer;
}

.today-info-button:hover,
.today-info-button.active-control {
    opacity: 1;
}

@media (max-width: 767px) {
    .today-info-button {
        font-size: 0;
    }
    .today-info-button::after {
        content: attr(data-short);
        font-size: 1rem;
    }
}

.today-info-text {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    white-space: normal;
    background: var(--background-color);
    text-align: left;
    font-size: 1rem;
    padding: 15px 0 10px 0;
    color: color-mix(in srgb, var(--text-color) 50%, transparent);
    transition:
        background 0.5s ease,
        color 0.5s ease;
    line-height: 1.2;
}

.today-info-text p {
    margin: 0 0 4px 0;
}

#today-info-headline,
#today-info-window-utc,
#today-info-window-local {
    color: var(--text-color);
}

.today-info-text a {
    color: inherit;
    text-decoration: underline;
}

/* "My time" is a toggle, not a link, and the underline promised a navigation
   that does not exist. The VK checklist asks for the same: button text is not
   underlined. What sets it apart from the text beside it is the dimming, just
   like every other button in this interface. */
.today-info-toggle {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.today-info-toggle:hover {
    opacity: 1;
}

/* The way out of the error screen. It lives in the flow next to the message
   rather than on top of it: the error fills the whole screen, and there is no
   point covering it with yet another layer. It takes its colors from the page
   — on this screen the palette has already switched over to red. */
.error-retry {
    display: none;
    margin-top: 20px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-weight: inherit;
    font-size: 1rem;
    line-height: 1.2;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.error-retry:hover {
    opacity: 1;
}

/* The strip for the ad, pinned to the bottom of the screen.

   It is measured from the window, not from the stage: the stage is the very
   thing that got shortened by it, and measuring one against the other would
   subtract the strip twice. So it is fixed to the bottom of the window —
   right into the gap that body freed up.

   Below the notice card in the stacking order: an ad must never end up on top
   of a question we have put to the user. */
#tg-ads-banner {
    display: none;
    position: fixed;
    /* Not bottom: 0. The bottom of the window and the bottom of the stage are
       different places: in Telegram the window can be taller than what is
       visible, and a strip pinned to the window would slip below the lower
       edge. We put it flush under the stage, at the very height the stage
       was subtracted from. */
    top: calc(var(--viewport-height) - var(--ads-height));
    left: 0;
    right: 0;
    height: var(--ads-height);
    z-index: 1000;
    overflow: hidden;
    /* No background. A fill of its own was a mistake here: the palette of the
       day is applied to html as well, so the freed strip already carries the
       day's color, while a white --background-color lay over the red and read
       as a hole at the bottom of the screen. The ad arrives with its own
       background. */
}

/* The modal card with which the page answers a user action. There used to be
   an alert() here. Inside a mini app the browser dialog belongs to the client,
   not to the service: someone else's typography, someone else's buttons. The
   shape is taken from the VKUI ModalCard, whose stated use case is showing a
   notice: on a narrow screen the card slides up from the bottom, on a wide one
   it stands in the middle as a dialog, the dimmed backdrop is clickable, and
   Esc closes it. */
.notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.notice-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.notice {
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    padding: 24px 16px 16px;
    border-radius: 14px 14px 0 0;
    background: var(--background-color);
    color: var(--text-color);
    text-align: center;
    font-size: 1rem;
    line-height: 1.3;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1);
}

.notice-overlay.visible .notice {
    transform: translateY(0);
}

.notice-text {
    margin: 0 0 20px;
    padding: 0 8px;
}

/* The button wears the color of the host platform: inside VK the interface has
   to feel like VK. The values come from the vkui-tokens (vkBase / vkBaseDark)
   and from the sign-in button on ok.ru; outside a platform it takes the palette
   of the day, which the page is already carrying anyway. */
.notice-action {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    background: var(--text-color);
    color: var(--background-color);
    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.notice-overlay[data-platform="vk"] .notice {
    background: #ffffff;
    color: #000000;
}
.notice-overlay[data-platform="vk"] .notice-action {
    background: #2688eb;
    color: #ffffff;
}
.notice-overlay[data-platform="vk"][data-appearance="dark"] .notice {
    background: #1c1d1e;
    color: #ffffff;
}
.notice-overlay[data-platform="vk"][data-appearance="dark"] .notice-action {
    background: #529ef4;
}

.notice-overlay[data-platform="ok"] .notice {
    background: #ffffff;
    color: #2e2f33;
}
.notice-overlay[data-platform="ok"] .notice-action {
    background: #ff7700;
    color: #ffffff;
}
.notice-overlay[data-platform="ok"][data-appearance="dark"] .notice {
    background: #1c1d1e;
    color: #ffffff;
}

@media (min-width: 768px) {
    .notice-overlay {
        align-items: center;
    }
    .notice {
        max-width: 400px;
        border-radius: 14px;
        transform: scale(0.94);
        opacity: 0;
        transition:
            transform 0.22s ease,
            opacity 0.22s ease;
    }
    .notice-overlay.visible .notice {
        transform: scale(1);
        opacity: 1;
    }
}

/* Legend container styling */
.legend-container {
    position: relative;
    cursor: pointer;
}

.legend-button {
    opacity: 0.5;
    transition: opacity 0.3s ease;
    font-size: 1rem;
    line-height: 1.2;
}

.legend-button:hover,
.legend-button.active-control {
    opacity: 1;
}

.legend-text {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: auto;
    white-space: nowrap;
    background: var(--background-color);
    text-align: right;
    font-size: 1rem;
    padding: 15px 0 10px;
    color: color-mix(in srgb, var(--text-color) 50%, transparent);
    transition:
        background 0.5s ease,
        color 0.5s ease;
    line-height: 1.2;
}

@media (max-width: 767px) {
    .legend-text {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        width: 100%;
        white-space: normal;
        padding: 15px 30px 10px;
        box-sizing: border-box;
        text-align: left;
    }
    body[lang="ar"] .legend-text {
        text-align: right;
        padding: 15px 30px 10px;
    }
    .today-info-text {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        width: 100%;
        white-space: normal;
        padding: 15px max(20px, env(safe-area-inset-right, 0)) 10px max(20px, env(safe-area-inset-left, 0));
        box-sizing: border-box;
        text-align: right;
    }
}

/* Main content text styling */
.message {
    font-size: 3rem;
    line-height: 1.2;
    transition: opacity 0.3s ease;
    opacity: 0;
    display: block;
    word-wrap: break-word;
    overflow-wrap: normal;
}

.lunar-day {
    font-size: 2rem;
    margin-top: 50px;
    transition: opacity 0.3s ease;
    line-height: 1.2;
    opacity: 0;
    display: block;
    word-wrap: break-word;
    overflow-wrap: normal;
}

/* The window line's timeline. Each word paints itself through its own gradient,
   so the edge can stand mid-glyph: a whole word changing at once reads as a
   label, not as progress — you cannot tell a quarter of the day from a half.
   Per word rather than over the whole line because .date wraps by design, and
   one horizontal gradient would repeat itself on every row.

   The class is added by the script only once a gradient is actually on the
   element. Making the words transparent from the stylesheet would mean the line
   is invisible whenever the paint has not happened — a failed script, or the
   moment before it runs — and an unpainted line has to stay readable.

   -webkit-text-fill-color is not a duplicate of color: Safari fills glyphs from
   it in preference to color, and without it the words render solid and the
   gradient never shows. */
.date .karana-word.is-painted {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Forced colours drop background images, and transparent text over none of them
   is an invisible line. The sweep is decoration; the reading is not. */
@media (forced-colors: active) {
    .date .karana-word.is-painted {
        background: none;
        color: CanvasText;
        -webkit-text-fill-color: CanvasText;
    }
}

.date,
.moon-phase {
    font-size: 1rem;
    margin-top: 20px;
    transition: opacity 0.3s ease;
    line-height: 1.2;
    opacity: 0;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.timezone {
    font-size: 1rem;
    margin-top: 20px;
    transition: opacity 0.3s ease;
    line-height: 1.2;
    opacity: 0;
    display: block;
    cursor: pointer;
    pointer-events: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.timezone:hover {
    opacity: 1;
}

/* Arabic RTL pagination — move to opposite side */
body[lang="ar"] .pagination {
    right: auto;
    left: max(20px, env(safe-area-inset-left, 0));
}

/* Pagination styling */
.pagination {
    position: fixed;
    right: max(20px, env(safe-area-inset-right, 0));
    /* Centered on the stage, not on the window: pinned to the window, it
       drifted away from the content by exactly half the ad strip. */
    top: calc((var(--viewport-height) - var(--ads-height)) / 2);
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.5px;
    font-size: 1rem;
    line-height: 1.2;
    font-family: "Arial", sans-serif;
    font-weight: normal;
    transition: opacity 0.3s ease;
    opacity: 1;
    z-index: 1000;
}

.pagination-dot {
    display: block;
    margin: 0;
    padding: 0;
    transition: opacity 0.3s ease;
    font-size: 1rem;
    font-family: "Arial", sans-serif;
    font-weight: normal;
}

.pagination-right {
    font-size: 1rem;
    margin-top: 20px;
    line-height: 1.2;
    transition: opacity 0.3s ease;
    opacity: 1;
    display: none;
}

/* Mobile portrait adjustments */
@media (max-width: 767px) and (orientation: portrait) {
    body {
        justify-content: flex-start;
        padding-top: 12vh;
        text-align: left;
        align-items: flex-start;
    }

    .message,
    .lunar-day,
    .date,
    .moon-phase,
    .timezone {
        text-align: left;
    }

    .message {
        font-size: 2.2rem;
    }
    .lunar-day {
        font-size: 1.6rem;
    }

    .content-type-btn {
        font-size: 1rem;
        text-align: left;
        min-width: auto;
        /* opacity is set from JS */
    }

    .app-icons {
        left: 30px;
        right: auto;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .floating-text,
    .message-float,
    .lunar-day-float,
    .date-float,
    .timezone-float {
        text-align: left;
    }

    body[lang="ar"] {
        align-items: flex-end;
    }
    body[lang="ar"],
    body[lang="ar"] .message,
    body[lang="ar"] .lunar-day,
    body[lang="ar"] .date,
    body[lang="ar"] .moon-phase,
    body[lang="ar"] .timezone,
    body[lang="ar"] .floating-text,
    body[lang="ar"] .message-float,
    body[lang="ar"] .lunar-day-float,
    body[lang="ar"] .date-float,
    body[lang="ar"] .timezone-float {
        text-align: right;
    }
    body[lang="ar"] .content-type-btn {
        text-align: right;
    }
    body[lang="ar"] .app-icons {
        left: auto;
        right: 30px;
    }
    body[lang="ar"] .pagination {
        right: auto;
        left: max(20px, env(safe-area-inset-left, 0));
    }
    body[lang="ar"] .pagination-right {
        direction: rtl;
    }
}

/* Tablet portrait adjustments */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .content-type-btn {
        font-size: 1rem;
    }
}

/* Desktop adjustments */
@media (min-width: 1025px) {
    .pagination {
        display: flex;
        top: calc((var(--viewport-height) - var(--ads-height)) / 2);
        transform: translateY(-50%);
    }
    .pagination-right {
        display: none;
    }
}

@media screen and (max-height: 600px) and (orientation: landscape),
    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .pagination {
        right: 20px;
        margin-right: -30px;
    }
}

.pagination-right .pagination-dot {
    display: inline-block;
    margin: 0 1px;
    padding: 0;
    transition: opacity 0.3s ease;
    font-size: 1rem;
    font-family: "Arial", sans-serif;
    font-weight: normal;
}

/* Telegram in a short window.

   On the desktop client the window is shorter than on the phone, and once the
   ad strip is subtracted there is little stage left. On "yesterday" and
   "tomorrow" the text runs a whole line longer — "Previously was" — and props
   up against the buttons from below. We shrink the buttons themselves: they
   are short, their type size matters less, and the day is read for its text.

   Telegram only, and only a short window: on the phone there is height enough,
   and there everything stays as it was. */
@media (max-height: 680px) {
    :root[data-platform="tg"] .app-icons {
        bottom: calc(10px + var(--ads-height));
    }

    /* All the small type at once, not the buttons alone: they are set at
       the same size as the dates, the phase, the time zone, the header and
       the pagination, and shrinking them on their own would break the page
       into two different heights. */
    :root[data-platform="tg"] .content-type-btn,
    :root[data-platform="tg"] .date,
    :root[data-platform="tg"] .date-float,
    :root[data-platform="tg"] .moon-phase,
    :root[data-platform="tg"] .moon-phase-float,
    :root[data-platform="tg"] .timezone,
    :root[data-platform="tg"] .timezone-float,
    :root[data-platform="tg"] .pagination,
    :root[data-platform="tg"] .pagination-dot,
    :root[data-platform="tg"] .pagination-right,
    :root[data-platform="tg"] .legend-button,
    :root[data-platform="tg"] .legend-text,
    :root[data-platform="tg"] .language-selected,
    :root[data-platform="tg"] .logo-text span,
    /* The pseudo-element only. The heading itself must not be touched: it
       hides the long caption by zeroing its type size and draws the short one
       through ::after — giving it a size of its own lifted that cover, and
       both of them showed through in the header at once. */
    :root[data-platform="tg"] .today-info-text,
    :root[data-platform="tg"] .today-info-button::after {
        font-size: 0.8rem;
        line-height: 1.15;
    }

    /* The heading first went to 2.6rem, on the reasoning that it is what the
       page is read for and should give up less than the small type did. The
       client was then asked what it had: 41.6px against 48, in a 645px window,
       with the heading still running to three lines. A thirteenth is arithmetic
       nobody sees — the reduction was real and changed nothing.

       So it gives up a quarter instead, which is what buys the line back. Two
       lines rather than three is the whole point; the heading still stands at
       nearly three times the small type, so the page has not stopped being
       about a day. The day number follows at the same fifth the small type
       took, or the two would end up level.

       No language sets a size of its own for either: the per-language rules
       reach only for font-family and weight, so one value each is the whole
       story rather than a value that flattens thirteen. */
    :root[data-platform="tg"] .message,
    :root[data-platform="tg"] .message-float {
        font-size: 2.2rem;
    }

    :root[data-platform="tg"] .lunar-day,
    :root[data-platform="tg"] .lunar-day-float {
        font-size: 1.6rem;
    }
}

/* App icons + content-type buttons */
.app-icons {
    position: fixed;
    /* The buttons are pinned to the window, not inside the stage — shrinking
       body is no order to them. The ad landed right on top of them, because the
       window stayed the same height. The offset is counted from the edge of the
       stage: with no banner that is the same twenty points. */
    bottom: calc(20px + var(--ads-height));
    left: max(20px, env(safe-area-inset-left, 0));
    right: max(20px, env(safe-area-inset-right, 0));
    display: none;
    justify-content: center;
    gap: 80px;
    background: transparent;
    z-index: 1000;
    transition:
        bottom 0.3s ease,
        opacity 0.3s ease;
}

.content-type-btn {
    display: block;
    text-align: center;
    color: var(--text-color);
    cursor: pointer;
    font-weight: normal;
    line-height: 1.25;
    padding: 0;
    background: transparent;
    border: none;
    white-space: nowrap;
    min-width: 260px;
}

.content-type-btn:hover {
    opacity: 0.8;
}

@media (min-width: 1025px) {
    .app-icons {
        gap: 80px;
    }
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    body {
        justify-content: flex-start;
        padding-top: 12vh;
        text-align: left;
        align-items: flex-start;
    }

    .message,
    .lunar-day,
    .date,
    .moon-phase,
    .timezone,
    .content-type-btn {
        text-align: left;
    }

    .app-icons {
        gap: 18px;
        flex-direction: column;
        align-items: flex-start;
        left: 30px;
        right: auto;
    }
}

/* Floating text styling */
.floating-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    text-align: center;
    pointer-events: none;
    transition:
        top 0.3s ease,
        opacity 0.3s ease;
}

.message-float {
    font-size: 3rem;
    line-height: 1.2;
    color: var(--text-color);
    transition:
        opacity 0.5s ease,
        color 0.5s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.lunar-day-float {
    font-size: 2rem;
    margin-top: 50px;
    line-height: 1.2;
    color: var(--text-color);
    transition:
        opacity 0.5s ease,
        color 0.5s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.date-float,
.moon-phase-float {
    font-size: 1rem;
    margin-top: 20px;
    line-height: 1.2;
    color: var(--text-color);
    transition:
        opacity 0.5s ease,
        color 0.5s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.timezone-float {
    font-size: 1rem;
    margin-top: 20px;
    line-height: 1.2;
    color: var(--text-color);
    transition:
        opacity 0.5s ease,
        color 0.5s ease;
    opacity: 0.5;
    cursor: pointer;
    pointer-events: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.timezone-float:hover {
    opacity: 1;
}

/* Selection is turned off for the whole page, not for one wrapper.
   The ban used to sit on .content-wrapper alone, and the header, the floating
   text and the panels selected like ordinary text — on touch that looks like a
   misfire, and the VK checklist asks that text in the app not be selectable
   with the cursor. There is one exception and it is deliberate: input fields,
   should any ever appear, do not work without selection. */
body {
    -webkit-user-select: none;
    user-select: none;
}

input,
textarea,
[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

.content-wrapper {
    touch-action: none;
    padding: 0;
}

/* Larger portrait phones (wider than iPhone 12 mini) — slightly bigger central text */
@media screen and (min-width: 391px) and (max-width: 767px) and (orientation: portrait) {
    .message {
        font-size: 2.4rem;
    }
    .lunar-day {
        font-size: 1.8rem;
    }
}

/* Small portrait devices (iPhone 12 mini etc.) — less top padding to avoid text overlapping buttons */
@media screen and (max-width: 390px) and (max-height: 850px) and (orientation: portrait) {
    body {
        padding-top: 12vh;
    }
    .lunar-day,
    .lunar-day-float {
        margin-top: 35px;
    }
}

/* Font size reduction for small portrait screens */
@media screen and (max-width: 390px) and (orientation: portrait) {
    .message {
        font-size: 2.2rem;
    }
    .lunar-day {
        font-size: 1.6rem;
    }
    .content-type-btn {
        font-size: 1rem;
    }
}

/* Font size reduction for small landscape screens */
@media screen and (max-height: 360px) and (orientation: landscape) {
    .message {
        font-size: 2.2rem;
    }
    .lunar-day {
        font-size: 1.6rem;
    }
    .content-type-btn {
        font-size: 1rem;
    }
}

/* 1000x700 resolution (small desktop / large tablet landscape / VK desktop) */
@media screen and (min-width: 950px) and (max-width: 1100px) and (min-height: 610px) and (max-height: 800px) {
    body {
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
    }

    .floating-text {
        display: none !important;
    }

    .content-wrapper {
        position: static !important;
        width: auto !important;
        height: auto !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        display: block;
        padding: 0 30px;
    }

    .left-content,
    .right-content {
        max-width: 100%;
        flex: none;
    }

    .header {
        top: 20px;
    }

    .message {
        font-size: 2.5rem;
    }

    .lunar-day {
        font-size: 2rem;
        margin-top: 50px;
    }

    .date,
    .moon-phase {
        font-size: 1rem;
        margin-top: 20px;
    }

    .timezone {
        font-size: 1rem;
        margin-top: 20px;
    }

    .content-wrapper {
        padding: 0 30px;
    }

    .app-icons {
        justify-content: space-between;
        gap: 0;
    }

    .content-type-btn {
        font-size: 1rem;
        min-width: 0;
        flex: 1;
    }

    .content-type-btn:first-child {
        text-align: left;
    }

    .content-type-btn:nth-child(2) {
        text-align: center;
    }

    .content-type-btn:last-child {
        text-align: right;
    }

    .logo-icon img {
        width: 25px;
        height: 25px;
    }

    .pagination {
        font-size: 1rem;
    }
}

/* No-JS fallback styling */
.no-js-message {
    font-size: 2rem;
    font-family: "MontHeavy", sans-serif;
    line-height: 1.2;
    color: var(--text-color);
    margin-bottom: 20px;
}

.no-js-details {
    font-size: 1rem;
    font-family: "MontHeavy", sans-serif;
    line-height: 1.2;
    color: var(--text-color);
}