/* «Лунный календарь» (moon.html, moon.js): the week with real Moons, two big living cards with a slowly moving
   nebula, the stars twinkling and a floating Moon, then the month. Motion stops with prefers-reduced-motion. */
.ml { padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
.ml-wrap { width: min(760px, 100% - 32px); margin: 0 auto 40px; display: grid; gap: 14px; }
.ml-week-head, .ml-month-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ml-month-name, .ml-month-head h2 { margin: 0; font: 600 30px/1.1 var(--serif); }
.ml-icon-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; border: 1px solid var(--line-strong); background: rgba(24, 16, 48, .8); color: var(--ink); font-size: 24px; cursor: pointer; }
.ml-icon-btn:hover { border-color: var(--accent); }

.ml-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 22px; background: rgba(20, 13, 40, .85); border: 1px solid rgba(196, 181, 253, .18); }
.ml-wd { position: relative; display: grid; justify-items: center; gap: 6px; padding: 8px 0 10px; border: 0; border-radius: 16px; background: none; color: var(--mist); font: 500 12px var(--sans); cursor: pointer; transition: background .25s, color .25s; }
.ml-wd:hover { background: rgba(124, 58, 237, .14); }
.ml-wd.is-on { background: linear-gradient(180deg, rgba(124, 58, 237, .45), rgba(124, 58, 237, .15)); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .4); }
.ml-wd.is-today .ml-wd-num { color: var(--c-gold); font-weight: 700; }
.ml-wd-moon { width: 34px; height: 34px; display: block; filter: drop-shadow(0 0 6px rgba(237, 233, 254, .25)); }
.ml-wd-num { font-size: 15px; color: var(--ink); }
.ml-wd .ml-star { position: absolute; bottom: -3px; width: 12px; height: 12px; }

.ml-cards { display: grid; gap: 14px; }
.ml-cards.is-in > * { animation: ml-up .5s cubic-bezier(.2, .8, .2, 1) both; }
.ml-cards.is-in > :nth-child(2) { animation-delay: .06s; }
.ml-cards.is-in > :nth-child(3) { animation-delay: .12s; }
.ml-day-title { margin: 4px 0 0; color: var(--mist); font-size: 14px; }

.ml-card { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 10px; padding: 22px; border-radius: 28px; border: 1px solid rgba(196, 181, 253, .22); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.ml-card-bg { position: absolute; inset: -12%; z-index: -2; background-size: cover; background-position: center; animation: ml-drift 26s ease-in-out infinite alternate; }
.ml-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 6, 24, .15) 0%, rgba(10, 6, 24, .45) 45%, rgba(10, 6, 24, .82) 100%); }
.ml-horo .ml-card-bg { inset: -30%; background: radial-gradient(35% 30% at 25% 30%, rgba(124, 58, 237, .85), transparent 70%), radial-gradient(30% 28% at 75% 25%, rgba(45, 212, 191, .5), transparent 70%), radial-gradient(35% 30% at 60% 75%, rgba(236, 72, 153, .55), transparent 70%), radial-gradient(30% 25% at 20% 80%, rgba(245, 184, 61, .35), transparent 70%), #160E33; animation: ml-aurora 16s ease-in-out infinite alternate; }
.ml-lunar .ml-card-bg { inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' preserveAspectRatio='none'%3E%3Cpath d='M0 250 L90 190 L170 230 L260 150 L350 220 L430 170 L520 235 L610 160 L700 210 L800 175 L800 400 L0 400Z' fill='%236B4A9E' fill-opacity='.55'/%3E%3Cpath d='M0 300 L120 235 L220 280 L330 215 L450 290 L560 240 L680 300 L800 250 L800 400 L0 400Z' fill='%23452A78' fill-opacity='.8'/%3E%3Cpath d='M0 350 L140 300 L260 340 L400 290 L540 345 L680 305 L800 340 L800 400 L0 400Z' fill='%23231446'/%3E%3C/svg%3E") bottom / 100% 70% no-repeat, radial-gradient(60% 50% at 78% 18%, rgba(255, 236, 214, .55), transparent 70%), linear-gradient(180deg, #2A1A5E 0%, #6E4A9A 45%, #D99AB4 78%, #F2C4C0 100%); animation: none; }
.ml-lunar .ml-card-stars::before { content: ''; position: absolute; left: -30%; right: -30%; bottom: 18%; height: 30%; background: radial-gradient(50% 50% at 30% 50%, rgba(255, 255, 255, .22), transparent 70%), radial-gradient(40% 50% at 75% 60%, rgba(255, 220, 240, .2), transparent 70%); filter: blur(8px); animation: ml-mist 18s ease-in-out infinite alternate; }
.ml-card-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 68% 14%, #fff, transparent), radial-gradient(1.5px 1.5px at 84% 46%, #F5D58A, transparent), radial-gradient(1px 1px at 32% 64%, #fff, transparent), radial-gradient(1.2px 1.2px at 52% 38%, #E9D5FF, transparent), radial-gradient(1px 1px at 90% 80%, #fff, transparent); animation: ml-twinkle 4s ease-in-out infinite; }

.ml-kicker { display: flex; align-items: center; gap: 10px; }
.ml-kicker-ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #F5D58A; }
.ml-kicker-top { display: block; font: 600 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #CFC5EE; }
.ml-kicker-title { display: block; font: 600 17px/1.3 var(--sans); color: #fff; }
.ml-label { margin: 6px 0 0; font: 600 11.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #CFC5EE; }
.ml-big { margin: 0; max-width: 34ch; font: 500 clamp(22px, 5.4vw, 30px)/1.25 var(--serif); color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.ml-lunar .ml-big { max-width: 30ch; }
.ml-btn { justify-self: start; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #7C3AED, #C026D3); color: #fff; font: 600 15px var(--sans); cursor: pointer; box-shadow: 0 8px 24px rgba(124, 58, 237, .45); }

.ml-sphere { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
.ml-sphere-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #F5D58A, #E879F9); color: #2A1250; box-shadow: 0 6px 22px rgba(232, 121, 249, .45); animation: ml-float 4.5s ease-in-out infinite; }
.ml-sphere-ico .ml-ico { width: 28px; height: 28px; }
.ml-sphere-text .ml-label { margin: 0; }
.ml-sphere-title { display: block; font: 600 19px/1.25 var(--serif); color: #fff; }
.ml-energy { display: grid; justify-items: end; gap: 6px; }
.ml-energy .ml-label { margin: 0; }
.ml-dots { display: flex; gap: 5px; }
.ml-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.ml-dots i.is-on { background: #F5D58A; box-shadow: 0 0 8px rgba(245, 213, 138, .8); }

.ml-big-moon { position: absolute; top: 18px; right: 18px; width: 92px; height: 92px; display: block; z-index: 0; filter: drop-shadow(0 0 22px rgba(237, 233, 254, .45)); animation: ml-float 6s ease-in-out infinite; }
.ml-lunar .ml-kicker, .ml-lunar .ml-label:first-of-type { padding-right: 100px; }
.ml-facts { margin: 0; font-size: 14px; color: #D9D1EC; }
.ml-events { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-event { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 13px; color: #fff; }
.ml-event.is-hot { background: linear-gradient(135deg, rgba(245, 158, 11, .5), rgba(192, 38, 211, .5)); }
.ml-verdict { display: grid; gap: 8px; }
.ml-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; font: 500 14px var(--sans); }
.ml-tag .ml-ico { width: 17px; height: 17px; }
.is-yes .ml-tag { background: rgba(143, 227, 184, .16); color: #C9F5DC; border: 1px solid rgba(143, 227, 184, .35); }
.is-no .ml-tag { background: rgba(248, 113, 113, .12); color: #FBC7C7; border: 1px solid rgba(248, 113, 113, .3); }

.ml-month { display: grid; gap: 14px; margin-top: 10px; padding: 18px; border-radius: 28px; background: rgba(20, 13, 40, .85); border: 1px solid rgba(196, 181, 253, .18); scroll-margin-top: 80px; }
.ml-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ml-gwd { text-align: center; font-size: 12px; color: var(--mist); }
.ml-cell { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 0 10px; border: 0; border-radius: 16px; background: none; color: var(--ink); cursor: pointer; animation: ml-up .45s ease both; animation-delay: calc(var(--i) * 10ms); }
.ml-cell:hover { background: rgba(124, 58, 237, .14); }
.ml-cell[aria-pressed="true"] { background: rgba(124, 58, 237, .3); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .45); }
.ml-cell.is-today .ml-cell-num { color: var(--c-gold); font-weight: 700; }
.ml-cell-moon { width: 32px; height: 32px; display: block; }
.ml-cell-num { font-size: 13px; }
.ml-star { position: absolute; bottom: 0; width: 12px; height: 12px; color: #F5B83D; fill: #F5B83D; animation: ml-twinkle 2.2s ease-in-out infinite; }
.ml-star path { fill: currentColor; }
.ml-filters { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(196, 181, 253, .14); }
.ml-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(196, 181, 253, .28); background: rgba(13, 8, 32, .6); color: var(--ink); font: 500 14px var(--sans); cursor: pointer; transition: background .2s, color .2s; }
.ml-chip .ml-ico { width: 18px; height: 18px; }
.ml-chip[aria-pressed="true"] { background: linear-gradient(135deg, #F5B83D, #F59E0B); border-color: transparent; color: #2A1250; font-weight: 600; }
.ml-city { display: grid; gap: 8px; }
.ml-city > .ml-chip { justify-self: start; }
.ml-city-find { display: grid; gap: 6px; }
.ml-input { width: 100%; min-height: 46px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(13, 8, 32, .7); color: var(--ink); padding: 10px 14px; font: inherit; }
.ml-city-list { display: grid; gap: 4px; }
.ml-city-item { text-align: left; min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(13, 8, 32, .6); color: var(--ink); cursor: pointer; }
.ml-ico { flex: none; width: 22px; height: 22px; }

@keyframes ml-aurora { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08) translate(3%, -2%); } 100% { transform: rotate(-6deg) scale(1.04) translate(-3%, 3%); } }
@keyframes ml-mist { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
@keyframes ml-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ml-drift { from { transform: scale(1.05) translate(-2%, -1%); } to { transform: scale(1.15) translate(2%, 2%); } }
@keyframes ml-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes ml-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 520px) {
  .ml-card { padding: 18px; border-radius: 24px; }
  .ml-big-moon { width: 68px; height: 68px; top: 16px; right: 14px; }
  .ml-lunar .ml-kicker, .ml-lunar .ml-label:first-of-type { padding-right: 76px; }
  .ml-wd-moon { width: 28px; height: 28px; }
  .ml-cell-moon { width: 26px; height: 26px; }
  .ml-month { padding: 14px 10px; }
  .ml-sphere { grid-template-columns: auto minmax(0, 1fr); }
  .ml-energy { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; align-items: center; justify-content: start; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ml-card-bg, .ml-card-stars, .ml-card-stars::before, .ml-big-moon, .ml-sphere-ico, .ml-star, .ml-cell, .ml-cards.is-in > * { animation: none !important; }
}

/* «Влияние планет»: cards with dates, a title, the planet on its arc and the days left; a tap opens the text. */
.ml-planets { display: grid; gap: 12px; margin-top: 8px; }
.ml-plist { display: grid; gap: 10px; }
.ml-period { border-radius: 24px; background: linear-gradient(160deg, rgba(36, 24, 70, .95), rgba(18, 12, 38, .95)); border: 1px solid rgba(196, 181, 253, .2); overflow: hidden; }
.ml-period[open] { border-color: rgba(245, 184, 61, .45); }
.ml-period summary { display: grid; gap: 6px; padding: 18px 18px 10px; cursor: pointer; list-style: none; position: relative; }
.ml-period summary::-webkit-details-marker { display: none; }
.ml-period summary::after { content: '›'; position: absolute; top: 16px; right: 18px; font-size: 26px; color: var(--ink); transition: transform .25s; }
.ml-period[open] summary::after { transform: rotate(90deg); }
.ml-pdates { font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mist); }
.ml-ptitle { font: 600 24px/1.2 var(--serif); color: #fff; padding-right: 24px; }
.ml-plabels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ml-plabels .ml-label { margin: 0; }
.ml-pvalue { display: block; font-size: 16px; color: #fff; }
.ml-arc { width: 100%; height: auto; max-height: 90px; margin-top: 4px; }
.ml-arc-dot { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .5)); }
.ml-left { justify-self: center; margin-top: -26px; font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #CFC5EE; }
.ml-pbody { display: grid; gap: 14px; padding: 4px 18px 18px; animation: ml-up .35s ease both; }
.ml-pbody p { margin: 0; font-size: 16px; line-height: 1.6; color: #E4DDF5; }
.ml-ask { text-decoration: none; display: inline-flex; align-items: center; }

/* The card on the home screens (moon-card.js): the whole card is the link to the calendar. */
.ml-home { text-decoration: none; color: inherit; }
.ml-home:hover { border-color: rgba(245, 184, 61, .5); }
.ml-home .ml-btn { display: inline-flex; align-items: center; margin-top: 4px; }
.moon-home { margin-bottom: 18px; }
.moon-home:empty { display: none; }

/* The picture is the card's top band (with the title and the Moon on it); the text is below on the dark panel, so the
   picture never competes with the words (the owner, 04.11.2026). */
.ml-card { padding-top: 150px; background: #140D2A; }
.ml-card-bg, .ml-card-stars { inset: 0 0 auto 0 !important; height: 160px; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.ml-card-bg { transform: none; }
.ml-horo .ml-card-bg { inset: -40px -40px auto -40px !important; height: 220px; }
.ml-card::after { display: none; }
.ml-card > .ml-kicker { position: absolute; top: 18px; left: 22px; right: 22px; }
.ml-lunar .ml-label:first-of-type { padding-right: 0; }
.ml-big-moon { top: 26px; }
.ml-big { text-shadow: none; }
@media (max-width: 520px) { .ml-card { padding-top: 132px; } .ml-card-bg, .ml-card-stars { height: 140px; } .ml-card > .ml-kicker { left: 18px; right: 18px; } }

/* On the home page the text takes the whole width of the card (the owner, 04.11.2026). */
.ml-home .ml-big { max-width: none; }

/* The lunar card's four facts, «Подробнее о дне» and «Рекомендации на день». */
.ml-grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 12px 0; border-block: 1px solid rgba(255, 255, 255, .1); }
.ml-grid4 .ml-label { margin: 0; }
.ml-more summary { cursor: pointer; font: 600 15px var(--sans); color: var(--accent-hi); padding: 6px 0; }
.ml-more[open] summary { margin-bottom: 4px; }
.ml-more-title { margin: 14px 0 6px; font: 600 20px/1.2 var(--serif); color: #fff; }
.ml-more-row { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ml-more-row .ml-label { margin: 0; }
.ml-more-row p { margin: 0; color: #D9D1EC; line-height: 1.55; }
.ml-more-row p:empty { display: none; }
.ml-more-name { font-weight: 600; color: #fff !important; }
.ml-advice { display: grid; gap: 8px; padding: 20px; border-radius: 28px; background: #140D2A; border: 1px solid rgba(196, 181, 253, .22); }
.ml-advice-title { margin: 0; font: 600 24px/1.2 var(--serif); }
.ml-advice-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ml-advice-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ml-advice-list li:last-child { border-bottom: 0; }
.ml-advice-name { margin: 0; font: 600 16px var(--sans); color: #fff; display: flex; align-items: center; gap: 6px; }
.ml-arrow { font-size: 11px; }
.is-up .ml-arrow { color: #6EE7A8; }
.is-down .ml-arrow { color: #F5B83D; }
.ml-advice-text { margin: 2px 0 0; font-size: 14px; color: #CFC5EE; }
.ml-advice-ico { width: 30px; height: 30px; color: #F5D58A; }
.is-down .ml-advice-ico { color: #9F93C6; }
@media (min-width: 760px) { .ml-advice-list { grid-template-columns: 1fr 1fr; column-gap: 28px; } .ml-advice-list li:nth-last-child(2) { border-bottom: 0; } }