@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@500;600;1,500;1,600&display=swap');

:root { color-scheme: dark; --cream: #fff3d4; --coral: #ffb19a; --muted: #c6afc4; --line: #fff3d426; --paper: #fff3d6; --ink: #513747; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--cream); background: #2a1d35; font-synthesis: none; }
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
html.dialog-open { overflow: hidden; overscroll-behavior: none; }
.dialog-open body { position: fixed; top: var(--locked-scroll-top, 0px); width: 100%; overflow: hidden; }
body { margin: 0; min-width: 280px; min-height: 100svh; isolation: isolate; background: radial-gradient(ellipse at 12% 8%, #a36a6930, transparent 45%), radial-gradient(ellipse at 90% 40%, #87604a21, transparent 45%), #291d34; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:not(:disabled), a { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--coral); outline-offset: 5px; }
button:disabled { cursor: default; }
.background-decor { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.background-decor .web { color: #e8c2b8; opacity: .12; stroke-width: 1.5; }
.background-decor .bat { fill: #c29aac; opacity: .15; }
.background-decor .moon { fill: #eccb99; opacity: .14; }
.mobile-decor { display: none; }
.background-decor .stars { fill: #f0b28c; opacity: .3; }
.app-shell { position: relative; width: min(calc(100% - 64px), 1060px); margin-inline: auto; padding: max(28px, env(safe-area-inset-top), var(--tg-top-inset, 0px)) 0 max(24px, env(safe-area-inset-bottom), var(--tg-bottom-inset, 0px)); }
.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'brand channel info'; align-items: center; gap: 16px; }
.header-channel { grid-area: channel; display: inline-flex; align-items: center; justify-self: start; gap: 8px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--coral); background: #fff3d409; font-size: 12px; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.header-channel svg { display: block; width: 16px; height: 16px; flex: none; fill: currentColor; }
.header-channel:hover { color: var(--cream); background: #fff3d414; }
.brand { grid-area: brand; display: flex; min-width: 0; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; flex: 0 0 44px; height: 44px; place-items: center; font-size: 26px; border: 1px solid var(--line); border-radius: 14px; background: #fff3d40b; }
.brand-copy { display: grid; gap: 5px; min-width: 0; }
.brand-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.brand-caption { color: var(--muted); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.icon-button { --control-size: 42px; grid-area: info; display: grid; flex: 0 0 var(--control-size); width: var(--control-size); min-width: var(--control-size); max-width: var(--control-size); height: var(--control-size); min-height: var(--control-size); aspect-ratio: 1; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: inherit; background: #fff3d40a; cursor: pointer; }
.icon-button svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.intro { max-width: 900px; margin: 58px auto 38px; text-align: center; }
.eyebrow { color: var(--coral); font-size: 10px; font-weight: 600; letter-spacing: .17em; line-height: 1.6; text-transform: uppercase; }
h1, h2, p { margin: 0; }
h1 { margin: 15px 0 20px; font: 500 clamp(38px, 5.4vw, 68px)/1.09 'Playfair Display', Georgia, serif; letter-spacing: -.045em; }
h1 em { color: var(--coral); font-weight: 500; }
.intro-text { max-width: 430px; margin-inline: auto; color: var(--muted); font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.fortune-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); align-items: start; gap: 22px; }
.pumpkin-card, .status-card, .facts-row { border: 1px solid var(--line); background: #fff3d40a; box-shadow: 0 16px 50px #170f2226; }
.pumpkin-card { border-radius: 28px; padding: 12px 20px 25px; min-width: 0; background: radial-gradient(ellipse at 50% 30%, #c78c6c13, transparent 65%), #fff3d409; }
.pumpkin-stage { position: relative; width: min(100%, 520px); aspect-ratio: 480 / 440; margin-inline: auto; isolation: isolate; }
.pumpkin-trigger { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 24px; background: none; cursor: pointer; }
.pumpkin-trigger:focus-visible { outline-offset: -4px; }
.pumpkin-scene { display: block; width: 100%; height: 100%; overflow: visible; }
.orbit { position: absolute; z-index: -1; width: 86%; aspect-ratio: 1; border: 1px solid #f8d6b61a; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.orbit--two { width: 69%; border-color: #f8ad8815; }
.orbit--one::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #eaa38f; left: 13%; top: 15%; box-shadow: 0 0 15px #f5ad8c70; }
.pumpkin-intact, .pumpkin-fragment { transform-box: view-box; transform-origin: 240px 270px; }
.pumpkin-intact { filter: drop-shadow(0 12px 9px #1a102545); }
.pumpkin-fragment { opacity: 0; }
.fragment-a { --land-transform: translate(-92px, 116px) rotate(-27deg) scale(.55); }
.fragment-b { --land-transform: translate(92px, 117px) rotate(25deg) scale(.55); }
.fragment-c { --land-transform: translate(-49px, 83px) rotate(14deg) scale(.58); }
.fragment-d { --land-transform: translate(53px, 87px) rotate(-16deg) scale(.58); }
.broken-edge { fill: none; stroke: #ffcc78; stroke-width: 9px; stroke-linejoin: bevel; }
.impact-crack { fill: none; stroke: #593327; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: bevel; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.impact-burst { opacity: 0; transform-origin: 240px 155px; }
.chip, .seed { opacity: 0; transform-box: fill-box; transform-origin: center; }
.toy-hammer { transform-box: view-box; transform-origin: 180px 255px; transform: translate(208px, -145px) rotate(-65deg); filter: drop-shadow(0 7px 5px #1c12232e); }
.fortune-paper { position: absolute; z-index: 2; top: 44%; left: 50%; display: flex; flex-direction: column; justify-content: center; gap: 14px; width: min(82%, 310px); min-height: 170px; padding: 26px 25px 29px; color: var(--ink); background: linear-gradient(112deg, #fff9e7, #faebca); box-shadow: 0 16px 30px #160e2433; clip-path: polygon(0 1%, 100% 0, 100% 95%, 94% 100%, 88% 95%, 82% 100%, 76% 95%, 70% 100%, 64% 95%, 58% 100%, 52% 95%, 46% 100%, 40% 95%, 34% 100%, 28% 95%, 22% 100%, 16% 95%, 10% 100%, 4% 95%, 0 100%); text-align: center; opacity: 0; visibility: hidden; transform: translate(-50%, -20%) scale(.6); }
.fortune-paper::before { content: ''; position: absolute; inset: 10px 10px 18px; border: 1px solid #c4986040; pointer-events: none; }
.paper-ribbon { position: relative; color: #9b634b; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.paper-text { position: relative; font: 500 22px/1.35 'Playfair Display', Georgia, serif; overflow-wrap: anywhere; text-wrap: pretty; }
.paper-bottom { color: #aa8066; font-size: 8px; letter-spacing: .04em; }
.is-open .pumpkin-intact { opacity: 0; }
.is-open .pumpkin-fragment { opacity: .8; transform: var(--land-transform); }
.is-open .toy-hammer { opacity: 0; }
.is-open .fortune-paper { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.is-opening .fortune-paper { visibility: visible; }
.pumpkin-actions { display: flex; align-items: center; flex-direction: column; gap: 12px; position: relative; margin-top: 8px; }
.primary-button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(100%, 310px); min-height: 52px; padding: 13px 20px; border: 1px solid #fff8e13b; border-radius: 16px; color: #33213c; background: var(--cream); font-size: 14px; font-weight: 650; cursor: pointer; box-shadow: 0 7px 20px #1b10262e; transition: background .2s, translate .2s; }
.primary-button > span:first-child, .primary-button > span:last-child { color: #d17a59; font-size: 21px; }
.primary-button:disabled { color: #e5d0da; background: #fff3d414; box-shadow: none; }
.primary-button:disabled > span { color: inherit; }
.text-button { min-height: 40px; padding: 8px 12px; border: 0; color: var(--coral); background: transparent; font-size: 12px; cursor: pointer; }
.hint { max-width: 390px; margin: 14px auto 0; color: var(--muted); font-size: 11px; line-height: 1.65; text-align: center; text-wrap: pretty; }
.hidden { display: none !important; }
.side-column { display: grid; gap: 18px; min-width: 0; }
.status-card { padding: 24px; border-radius: 25px; background: #fff3d410; }
.status-heading { display: flex; align-items: center; gap: 12px; }
.status-icon { display: grid; flex: 0 0 42px; height: 42px; place-items: center; border-radius: 13px; background: #f290781a; font-size: 21px; }
.small-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; letter-spacing: .13em; }
.status-heading h2 { font: 500 23px/1.25 'Playfair Display', Georgia, serif; text-wrap: balance; }
.status-copy { margin: 20px 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.timer-box { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 15px; border: 1px solid #fff3d412; border-radius: 13px; background: #20172740; }
.timer-label { color: var(--muted); font-size: 11px; }
.timer-value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress-track { height: 3px; margin-top: 15px; border-radius: 3px; overflow: hidden; background: #fff3d412; }
.progress-bar { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, #eea48a, #e5b973); }
.facts-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 22px; padding: 20px 8px; }
.fact { display: grid; gap: 8px; align-content: start; text-align: center; padding-inline: 3px; }
.fact + .fact { border-left: 1px solid var(--line); }
.fact strong { font: 500 30px/1 'Playfair Display', Georgia, serif; color: var(--coral); }
.fact span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.side-note { padding: 13px 0; text-align: center; color: #c5a6bd8c; font: italic 19px/1.6 'Playfair Display', Georgia, serif; }
.footer { margin-top: 27px; padding-top: 21px; border-top: 1px solid #fff3d412; }
.creator-link { display: flex; align-items: center; justify-content: center; gap: 10px 18px; flex-wrap: wrap; padding: 6px 0; color: var(--muted); text-decoration: none; text-align: center; }
.creator-caption { font-size: 12px; line-height: 1.6; }
.creator-handle { color: var(--coral); font-size: 14px; font-weight: 600; white-space: nowrap; }
.creator-handle span { display: inline-block; margin-left: 7px; }
.info-dialog { width: min(calc(100% - 32px), 460px); max-height: calc(100svh - 40px); padding: 0; border: 1px solid var(--line); border-radius: 24px; color: var(--cream); background: #3b2746; overflow: auto; }
.info-dialog { overscroll-behavior: contain; touch-action: pan-y; }
.info-dialog::backdrop { touch-action: none; background: #160c21b8; backdrop-filter: blur(6px); }
.dialog-inner { position: relative; padding: 35px 27px 27px; }
.dialog-close { position: absolute; top: 8px; right: 9px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--cream); font-size: 28px; cursor: pointer; }
.info-dialog h2 { margin: 15px 0 22px; font: 500 34px/1.15 'Playfair Display', Georgia, serif; }
.dialog-steps { display: grid; gap: 17px; padding-left: 22px; color: #e0c9da; font-size: 13px; line-height: 1.6; }
.dialog-steps li::marker { color: var(--coral); }
.toast { position: fixed; z-index: 5; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 32px); padding: 13px 18px; border: 1px solid var(--line); border-radius: 16px; color: var(--cream); background: #473151; font-size: 13px; text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, 15px); transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) { .primary-button:hover:not(:disabled) { translate: 0 -2px; background: #fff9e9; }.creator-link:hover .creator-handle { color: var(--cream); }.icon-button:hover { background: #fff3d419; } }
@media (max-width: 760px) {
  .app-shell { width: min(calc(100% - 32px), 550px); padding-top: max(20px, env(safe-area-inset-top), var(--tg-top-inset, 0px)); }
  .intro { margin-top: 42px; margin-bottom: 28px; }
  h1 { font-size: clamp(34px, 6.7vw, 48px); }
  .fortune-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .side-column { gap: 14px; }
  .status-card { padding: 22px; }
  .side-note { display: none; }
  .facts-row { padding-block: 17px; }
  .fact { display: flex; align-items: center; justify-content: center; gap: 9px; text-align: left; }
  .background-decor { display: none; }
  .mobile-decor { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
  .mobile-decor svg { position: absolute; display: block; }
  .mobile-web { top: 0; left: 0; width: 90px; height: 90px; color: #e8c2b8; opacity: .2; stroke-width: 1.6; }
  .mobile-moon { top: 103px; left: 9px; width: 28px; height: 28px; fill: #eccb99; opacity: .24; transform: rotate(-12deg); }
  .mobile-bat { fill: #c9a1b6; opacity: .24; }
  .mobile-bat--top { top: 97px; right: 11px; width: 43px; height: 29px; transform: rotate(-15deg); }
  .mobile-bat--bottom { left: 4px; bottom: 15%; width: 34px; height: 23px; transform: rotate(19deg); opacity: .17; }
  .mobile-stars { top: 38%; right: 6px; width: 24px; height: 48px; fill: #edbd8e; opacity: .25; }
}
@media (max-width: 600px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'brand info' 'channel channel'; gap: 12px; }
  .header-channel { min-height: 34px; padding: 7px 11px; font-size: 11px; }
}
@media (max-width: 430px) {
  .app-shell { width: calc(100% - 28px); }
  .topbar { gap: 10px; }
  .brand { gap: 9px; }
  .brand-mark { flex-basis: 38px; height: 38px; font-size: 23px; border-radius: 12px; }
  .brand-name { max-width: 180px; font-size: 13px; }
  .brand-caption { font-size: 8px; letter-spacing: .07em; }
  .icon-button { --control-size: 38px; }
  .eyebrow { font-size: 8px; letter-spacing: .12em; }
  h1 { font-size: clamp(30px, 8.1vw, 35px); margin-top: 13px; line-height: 1.14; }
  .intro-text { max-width: 285px; font-size: 12px; }
  .pumpkin-card { padding: 8px 12px 20px; border-radius: 24px; }
  .pumpkin-stage { margin-top: 5px; }
  .fortune-paper { min-height: 144px; padding: 20px 18px 23px; gap: 10px; }
  .paper-ribbon { font-size: 7px; letter-spacing: .06em; }
  .paper-text { font-size: 17px; line-height: 1.35; }
  .paper-bottom { font-size: 7px; }
  .primary-button { min-height: 48px; font-size: 13px; padding-inline: 16px; }
  .hint { padding-inline: 6px; font-size: 10px; }
  .status-card { padding: 20px 17px; border-radius: 22px; }
  .status-heading h2 { font-size: 21px; }
  .timer-box { padding: 13px 12px; }
  .timer-value { font-size: 20px; }
  .fact { display: grid; gap: 6px; text-align: center; }
  .fact strong { font-size: 26px; }
  .fact span { font-size: 9px; }
  .creator-caption { font-size: 11px; max-width: 270px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* The clipped, fixed sky also covers narrow Telegram webviews without adding scroll width. */
.ambient-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.sky-flight { position: absolute; left: -140px; top: var(--flight-top); width: var(--flight-size); color: #c9a1b6; opacity: 0; animation: sky-cross var(--flight-duration) linear infinite; animation-delay: var(--flight-delay); }
.sky-flight svg { display: block; width: 100%; height: auto; overflow: visible; fill: currentColor; }
.sky-bob { animation: sky-bob 4.8s ease-in-out infinite; }
.sky-flight--bat-one { --flight-top: 17%; --flight-size: 58px; --flight-duration: 29s; --flight-delay: -7s; --flight-opacity: .25; }
.sky-flight--bat-two { --flight-top: 51%; --flight-size: 40px; --flight-duration: 37s; --flight-delay: -24s; --flight-opacity: .18; animation-direction: reverse; }
.sky-flight--bat-three { --flight-top: 81%; --flight-size: 48px; --flight-duration: 33s; --flight-delay: -15s; --flight-opacity: .2; }
.sky-flight--bat-two .sky-bob { animation-delay: -2s; }
.sky-flight--bat-three .sky-bob { animation-delay: -3.5s; }
.bat-wing { transform-box: view-box; transform-origin: 40px 22px; animation: bat-flap .7s ease-in-out infinite; }
.sky-flight--bat-two .bat-wing { animation-duration: .85s; }
.sky-flight--bat-three .bat-wing { animation-delay: -.3s; }
.sky-flight--witch-one { --flight-top: 30%; --flight-size: 92px; --flight-duration: 46s; --flight-delay: -34s; --flight-opacity: .23; }
.sky-flight--witch-two { --flight-top: 73%; --flight-size: 66px; --flight-duration: 57s; --flight-delay: -12s; --flight-opacity: .16; animation-direction: reverse; }
.sky-flight--witch-two svg { transform: scaleX(-1); }
.sky-flight--witch-one .sky-bob { animation-duration: 6s; }
.sky-flight--witch-two .sky-bob { animation-duration: 7s; animation-delay: -3s; }
.witch-scarf { transform-box: fill-box; transform-origin: right center; animation: scarf-flutter 1.8s ease-in-out infinite; }
.pumpkin-stage:not(.is-opening):not(.is-open) .toy-hammer { animation: hammer-ready 3.4s ease-in-out infinite; }
.dialog-open .ambient-sky *, .dialog-open .toy-hammer,
.page-hidden .ambient-sky *, .page-hidden .toy-hammer { animation-play-state: paused !important; }
@keyframes sky-cross {
  0% { transform: translate3d(0, 0, 0) rotate(-5deg); opacity: 0; }
  8% { opacity: var(--flight-opacity); }
  35% { transform: translate3d(calc(35vw + 98px), -22px, 0) rotate(3deg); }
  68% { transform: translate3d(calc(68vw + 190px), 16px, 0) rotate(-3deg); }
  92% { opacity: var(--flight-opacity); }
  100% { transform: translate3d(calc(100vw + 280px), 0, 0) rotate(5deg); opacity: 0; }
}
@keyframes sky-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}
@keyframes bat-flap {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  50% { transform: scaleY(.42) rotate(-2deg); }
}
@keyframes scarf-flutter {
  0%, 100% { transform: rotate(-5deg) scaleY(1); }
  50% { transform: rotate(7deg) scaleY(.8); }
}
@keyframes hammer-ready {
  0%, 100% { transform: translate(208px, -145px) rotate(-65deg); }
  45% { transform: translate(210px, -150px) rotate(-61deg); }
  75% { transform: translate(207px, -147px) rotate(-67deg); }
}
@media (max-width: 760px) {
  .sky-flight--bat-one { --flight-size: 38px; --flight-top: 19%; --flight-duration: 25s; }
  .sky-flight--bat-two { --flight-size: 30px; --flight-top: 56%; }
  .sky-flight--bat-three { --flight-size: 34px; --flight-top: 86%; }
  .sky-flight--witch-one { --flight-size: 65px; --flight-top: 32%; --flight-duration: 38s; --flight-delay: -16s; }
  .sky-flight--witch-two { --flight-size: 50px; --flight-top: 76%; --flight-delay: -34s; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-sky { display: none; }
  .ambient-sky *, .pumpkin-stage .toy-hammer { animation: none !important; }
}