:root { color-scheme: dark; --gold: #ffd67e; --cream: #fff3d0; --violet: #100329; --pink: #e95c92; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; display: grid; place-items: center; overflow-x: hidden; color: var(--cream); font-family: "Noto Sans SC", system-ui, sans-serif; background: radial-gradient(ellipse at 50% 29%, #682467 0, #260c4e 35%, #100326 74%); }
body::before, body::after { content: "✦  ·  ✦"; position: fixed; z-index: -1; color: #ffd985; font-size: 1.1rem; letter-spacing: 2rem; text-shadow: 0 0 12px #ffcc7e; opacity: .9; } body::before { top: 10%; left: 10%; } body::after { right: 7%; bottom: 18%; }
.moon { position: fixed; z-index: -1; top: 16%; left: 5%; width: 126px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 37% 37%, #fff7d2, #e9b968); box-shadow: 0 0 37px #f6c57691; opacity: .48; }.moon::after { content: ""; position: absolute; inset: -9px -29px 11px 35px; border-radius: inherit; background: #250a4c; }
.lantern { position: fixed; z-index: -1; top: 13%; right: 4%; width: 61px; padding: 16px 9px 23px; border: 2px solid #f7c876; border-radius: 23px 23px 31px 31px; color: #ffe5a5; background: linear-gradient(90deg, #8f224f, #e25e75 48%, #9a2458); box-shadow: 0 0 26px #ec5c8b8a; font-family: "Ma Shan Zheng", cursive; font-size: 1.25rem; line-height: 1.25; text-align: center; }.lantern::before { content: ""; position: absolute; top: -52px; left: 28px; width: 2px; height: 51px; background: #d99d4d; }.lantern::after { content: "◆"; position: absolute; bottom: -27px; left: 20px; color: #ffcf78; font-size: 1.3rem; }
.blossoms { position: fixed; z-index: -1; color: #fa87ac; font-size: 2.2rem; line-height: 1.3; text-shadow: 0 0 15px #ffb1c6; opacity: .75; }.blossoms-left { top: 2%; left: 2%; transform: rotate(-14deg); }.blossoms-right { bottom: 14%; right: 3%; transform: rotate(15deg); }
.page-shell { width: min(100%, 670px); padding: 57px 24px 20px; text-align: center; }
h1 { margin: 10px 0 0; color: #ffe4a0; font-family: "Ma Shan Zheng", cursive; font-size: clamp(3.2rem, 10vw, 5.1rem); font-weight: 400; line-height: 1; text-shadow: 0 4px #884058, 0 0 23px #ffbd6b80; }
.wheel-area { position: relative; display: grid; place-items: center; padding-top: 25px; }.wheel-wrap { position: relative; width: min(88vw, 535px); aspect-ratio: 1; padding: 17px; border-radius: 50%; background: conic-gradient(#ffe29a, #9a3b7b, #ffc66c, #a24d97, #ffe29a); box-shadow: 0 0 0 4px #783265, 0 0 0 7px #dca3567d, 0 21px 48px #050012bb, 0 0 48px #d85a9d44; }.wheel-wrap::before { content: "✦ · ✦ · ✦ · ✦ · ✦ · ✦ · ✦ · ✦ · ✦"; position: absolute; inset: 5px; display: grid; place-items: center; overflow: hidden; border: 1px solid #fff0c5ba; border-radius: 50%; color: #fff1bc; font-size: 1rem; letter-spacing: .57em; transform: rotate(13deg); }.wheel { position: relative; width: 100%; height: 100%; overflow: hidden; border: 5px solid #ffebba; border-radius: 50%; background: conic-gradient(from -13.846deg, #d64d83 0 27.692deg, #e77993 27.692deg 55.384deg, #e99274 55.384deg 83.076deg, #7043aa 83.076deg 110.768deg, #9a5acf 110.768deg 138.46deg, #663c9d 138.46deg 166.152deg, #d48a64 166.152deg 193.844deg, #e9b36f 193.844deg 221.536deg, #bd4e83 221.536deg 249.228deg, #d64d83 249.228deg 276.92deg, #e77993 276.92deg 304.612deg, #e99274 304.612deg 332.304deg, #7043aa 332.304deg 360deg); transition: transform 5.5s cubic-bezier(.12,.79,.13,1); }.wheel::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from -13.846deg, transparent 0 27.13deg, #fff1bd 27.13deg 27.692deg); }.wheel-label { position: absolute; z-index: 1; width: 22%; transform: translate(-50%, -50%); color: #fff8dd; font-size: clamp(.56rem, 2.15vw, .84rem); font-weight: 900; line-height: 1.22; text-shadow: 0 2px 2px #350d40cc; }.label-1 { top: 16%; left: 50%; }.label-2 { top: 20%; left: 66%; }.label-3 { top: 31%; left: 78%; }.label-4 { top: 46%; left: 84%; }.label-5 { top: 62%; left: 82%; }.label-6 { top: 75%; left: 73%; }.label-7 { top: 83%; left: 58%; }.label-8 { top: 83%; left: 42%; }.label-9 { top: 75%; left: 27%; }.label-10 { top: 62%; left: 18%; }.label-11 { top: 46%; left: 16%; }.label-12 { top: 31%; left: 22%; }.label-13 { top: 20%; left: 34%; }
.pointer { z-index: 6; display: grid; place-items: start center; width: 58px; height: 74px; margin-bottom: -24px; clip-path: polygon(50% 100%, 5% 13%, 50% 0, 95% 13%); background: linear-gradient(135deg, #fff7c8, #e8a340); filter: drop-shadow(0 4px 3px #0e0225cc); }.pointer span { margin-top: 13px; color: #a72f62; font-size: .85rem; }.spin-button { position: absolute; z-index: 5; top: 50%; left: 50%; display: grid; place-content: center; width: 27%; aspect-ratio: 1; border: 7px solid #fff0bd; border-radius: 50%; color: #6b1537; background: radial-gradient(circle at 35% 27%, #fff8ce, #efba57 57%, #bd4f52); box-shadow: 0 6px 0 #7b244b, 0 10px 20px #130322bb, inset 0 2px #fffbe1; cursor: pointer; font-family: "Ma Shan Zheng", cursive; font-size: clamp(2.4rem, 9vw, 4.1rem); transform: translate(-50%, -50%); transition: transform .15s, filter .2s; }.spin-button:hover { filter: brightness(1.08); transform: translate(-50%, -52%); }.spin-button:active { transform: translate(-50%, -50%) scale(.93); }.spin-button:disabled { cursor: wait; opacity: .85; }
.hint { min-height: 24px; margin: 21px 0 15px; color: #eddcf4; font-size: .86rem; }.result-card { min-height: 130px; padding: 17px 24px; border: 1px solid #e7ae687d; border-radius: 18px; background: linear-gradient(115deg, #1c0a37e8, #42134fd9); box-shadow: inset 0 1px #ffffff29, 0 12px 27px #07001677; }.result-card.show { animation: pop .45s both; }.result-kicker { color: #ffce72; font-size: .68rem; font-weight: 900; letter-spacing: .25em; }.result-card h2 { margin: 7px 0 4px; color: #fff0cb; font-family: "Ma Shan Zheng", cursive; font-size: 1.75rem; font-weight: 400; }.result-card p { margin: 0; color: #ecdcef; font-size: .88rem; line-height: 1.7; } footer { padding: 0 20px 23px; color: #d6afd6; font-size: .71rem; letter-spacing: .08em; }
@keyframes pop { 0% { transform: scale(.94); opacity: .2; } 100% { transform: scale(1); opacity: 1; } } @media (max-width: 430px) { .page-shell { padding-inline: 15px; }.lantern { display: none; }.wheel-wrap { width: 94vw; }.wheel-label { font-size: .7rem; } }