:root { --gold: #d7a941; --cream: #fffdfa; --plum: #654681; --rose: #e88db4; --violet: #a77ade; }
body { background: #f9dff1; }
.stage { background: linear-gradient(rgba(255,255,255,.05), rgba(255,219,242,.13)), url("images/mystic-stage-pastel.png") center / cover no-repeat; }
.stage::after { background: radial-gradient(circle at 50% 52%, transparent 23%, rgba(132,77,154,.08) 100%); }
.stars { opacity: .66; }
.welcome { color: #704a87; text-shadow: 0 2px 0 #fff, 0 4px 20px rgba(165,93,170,.28); }
.welcome .kicker, .oracle header p { color: #9b67bb; }
.welcome h1 span { color: #da73ad; }
.open-button { border-color: rgba(255,255,255,.9); background: linear-gradient(135deg,rgba(239,139,188,.93),rgba(164,127,220,.93)); box-shadow: 0 0 0 6px rgba(255,255,255,.28),0 14px 35px rgba(148,84,157,.24); }
.open-button small { color: #fff8c9; }
.curtain { background: repeating-linear-gradient(90deg,#c96fa3 0,#f3a9cb 10%,#ffd0e5 19%,#e58eb9 29%,#b85d94 39%); box-shadow: inset 0 0 42px rgba(125,62,126,.28); }
.curtain::after { background: linear-gradient(90deg,#c9973d,#fff1ae,#c9973d); }
.curtain span { border-color: #f3c969; box-shadow: 0 0 14px #fff6c9; }
.valance { background: radial-gradient(ellipse at 12% 0,#f7b5d5 0 52%,transparent 54%),radial-gradient(ellipse at 37% 0,#e995c1 0 54%,transparent 56%),radial-gradient(ellipse at 63% 0,#f7b5d5 0 54%,transparent 56%),radial-gradient(ellipse at 88% 0,#e995c1 0 52%,transparent 54%); filter: drop-shadow(0 10px 10px rgba(138,78,139,.22)); }
.oracle { color: #654681; text-shadow: 0 1px 0 #fff; }
.oracle header h2, .oracle-guide { text-shadow: 0 2px 0 #fff,0 4px 16px rgba(131,78,151,.2); }
.crystal span { background: rgba(150,91,182,.6); text-shadow: 0 2px 8px #74408e; }
.light-orb { inset: 18%; width: 64%; height: 64%; margin: auto; border-radius: 50%; background: radial-gradient(circle at 44% 42%,#fff 0 4%,rgba(255,255,255,.96) 9%,rgba(255,220,252,.88) 22%,rgba(211,165,255,.62) 43%,rgba(145,207,255,.22) 63%,transparent 74%); box-shadow: 0 0 22px 12px rgba(255,255,255,.76),0 0 55px 28px rgba(221,154,255,.58),0 0 95px 46px rgba(132,207,255,.26); animation: orbFloat 3.2s ease-in-out infinite; }
.light-orb::before { position: absolute; inset: -20%; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; content: ""; filter: blur(1px); animation: orbPulse 2.4s ease-out infinite; }
.light-orb::after { position: absolute; inset: -48%; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.34),rgba(249,173,255,.12) 35%,transparent 68%); content: ""; filter: blur(8px); }
.light-orb .orb-core { position: absolute; inset: 25%; z-index: 1; padding: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 18px #fff,0 0 35px #ffd4fb,0 0 58px #bfeaff; transform: none; animation: coreGlow 1.8s ease-in-out infinite; }
.light-orb .orb-sparkles { position: absolute; inset: -22%; z-index: 2; padding: 0; border-radius: 50%; background: radial-gradient(circle at 15% 35%,#fff 0 2px,transparent 3px),radial-gradient(circle at 72% 18%,#fff8bf 0 2px,transparent 3px),radial-gradient(circle at 84% 68%,#fff 0 3px,transparent 4px),radial-gradient(circle at 34% 82%,#d7f5ff 0 2px,transparent 3px),radial-gradient(circle at 57% 57%,#fff 0 1px,transparent 2px); transform: none; animation: sparkleTurn 7s linear infinite; }
.light-orb > span:last-child { top: 50%; z-index: 4; background: rgba(151,94,191,.52); }
.light-orb:hover { box-shadow: 0 0 28px 16px rgba(255,255,255,.9),0 0 70px 36px rgba(221,154,255,.7),0 0 110px 55px rgba(132,207,255,.35); }
.light-orb:hover .orb-core { transform: scale(1.12); }
@keyframes orbFloat { 0%,100% { transform: translateY(3px) scale(.98); } 50% { transform: translateY(-7px) scale(1.03); } }
@keyframes orbPulse { from { opacity: .85; transform: scale(.72); } to { opacity: 0; transform: scale(1.3); } }
@keyframes coreGlow { 50% { opacity: .76; transform: scale(.82); } }
@keyframes sparkleTurn { to { transform: rotate(360deg); } }
.result { border-color: rgba(222,174,79,.6); background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,226,244,.92)); box-shadow: 0 24px 70px rgba(147,91,157,.22),inset 0 0 40px rgba(255,255,255,.6); color: #68477d; }
.result { margin-top: 14px; padding-top: 22px; }
.result-illustration { display: block; width: min(100%, 390px); height: auto; margin: -6px auto 18px; border: 3px solid rgba(255,255,255,.96); border-radius: 28px; box-shadow: 0 13px 34px rgba(150,87,159,.2),0 0 0 1px rgba(219,169,85,.4); animation: illustrationReveal .72s cubic-bezier(.2,.78,.2,1) both; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes illustrationReveal { from { opacity: 0; transform: scale(.82) rotate(-2deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@media (max-width: 520px) { .result { margin-top: 12px; padding-top: 16px; } .result-illustration { border-radius: 20px; } }

/* The result keeps one illustration style, while its visual temperature follows the fortune rank. */
.result-effects { position: absolute; inset: -35px; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.result-illustration, .result-message, .luck-grid, .again-button, .retry-crystal { position: relative; z-index: 1; }
.retry-crystal { display: grid; width: 138px; margin: 22px auto 0; padding: 0 0 10px; place-items: center; border: 0; background: transparent; color: #81539d; font-family: inherit; cursor: pointer; animation: retryReveal .75s cubic-bezier(.2,.8,.2,1) both; }
.retry-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border-radius: inherit; background: rgba(255,250,255,.68); backdrop-filter: blur(5px); animation: overlayReveal .55s ease both; }
.retry-overlay .retry-crystal { margin: 0; padding: 18px 12px; border: 1px solid rgba(255,255,255,.9); border-radius: 26px; background: rgba(255,255,255,.72); box-shadow: 0 15px 42px rgba(130,77,151,.22),0 0 35px rgba(255,255,255,.9); }
.retry-orb { position: relative; display: block; width: 76px; height: 76px; margin-bottom: 6px; border-radius: 50%; background: radial-gradient(circle at 38% 32%,#fff 0 8%,#ffdafa 22%,#c6a1ef 48%,#8ecff0 69%,rgba(255,255,255,.25) 72%); box-shadow: inset -8px -9px 18px rgba(111,72,158,.18),0 0 0 3px rgba(255,255,255,.82),0 0 22px 9px rgba(211,145,239,.42); animation: retryFloat 2.2s ease-in-out infinite; }
.retry-orb::before { position: absolute; top: 13px; left: 18px; width: 18px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.85); content: ""; transform: rotate(-35deg); }
.retry-orb::after { position: absolute; top: 49%; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: -19px 9px 0 -2px #fff8b7,18px -13px 0 -1px #fff,12px 17px 0 -2px #c8f5ff; content: ""; animation: gentleSparkle 1.7s ease-in-out infinite; }
.retry-crystal strong { font-size: 14px; letter-spacing: .08em; }
.retry-crystal small { margin-top: 3px; color: #a77abd; font-size: 10px; letter-spacing: .05em; }
.retry-crystal:hover .retry-orb { box-shadow: inset -8px -9px 18px rgba(111,72,158,.18),0 0 0 4px #fff,0 0 34px 15px rgba(211,145,239,.6); }
.retry-crystal:focus-visible { border-radius: 18px; outline: 3px solid rgba(155,103,187,.45); outline-offset: 4px; }
@keyframes retryReveal { from { opacity: 0; transform: translateY(24px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes retryFloat { 0%,100% { transform: translateY(2px); } 50% { transform: translateY(-7px); } }
@keyframes overlayReveal { from { opacity: 0; } to { opacity: 1; } }
.result-daikichi { background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,231,247,.96)); box-shadow: 0 0 0 4px rgba(255,217,100,.3),0 25px 80px rgba(235,104,184,.38),0 0 80px rgba(255,222,93,.42); animation: daikichiEntrance .9s cubic-bezier(.15,.8,.18,1) both; }
.result-daikichi .result-illustration { width: min(100%,430px); border-color: #fff9cb; box-shadow: 0 0 0 4px #f1c55b,0 20px 50px rgba(239,100,187,.42),0 0 45px rgba(255,220,87,.65); }
.result-daikichi .result-effects { background: radial-gradient(circle at 18% 25%,#fff 0 3px,transparent 4px),radial-gradient(circle at 82% 18%,#fff3a8 0 5px,transparent 6px),radial-gradient(circle at 72% 72%,#ff91cf 0 4px,transparent 5px),radial-gradient(circle at 28% 82%,#9feaff 0 4px,transparent 5px),conic-gradient(from 25deg at 50% 48%,transparent 0 8%,rgba(255,225,95,.18) 9% 11%,transparent 12% 21%); background-size: 95px 95px,130px 130px,110px 110px,145px 145px,100% 100%; animation: festivalSpin 12s linear infinite; }
.result-chukichi { background: linear-gradient(145deg,rgba(255,255,255,.97),rgba(236,255,249,.93)); box-shadow: 0 20px 60px rgba(89,190,153,.23),0 0 35px rgba(245,203,106,.24); }
.result-chukichi .result-illustration { width: min(96%,400px); border-color: #eafff5; box-shadow: 0 0 0 2px #e0bc62,0 16px 36px rgba(93,177,148,.24); }
.result-chukichi .result-effects { background: radial-gradient(circle at 20% 22%,rgba(255,255,255,.9) 0 3px,transparent 4px),radial-gradient(circle at 80% 68%,rgba(255,230,145,.8) 0 3px,transparent 4px); background-size: 125px 125px,165px 165px; animation: gentleSparkle 3s ease-in-out infinite; }
.result-shokichi { background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(240,238,255,.9)); box-shadow: 0 18px 48px rgba(132,125,201,.18); }
.result-shokichi .result-illustration { width: min(88%,360px); box-shadow: 0 12px 28px rgba(130,122,195,.2); }
.result-kichi { background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,241,230,.9)); box-shadow: 0 17px 44px rgba(200,143,102,.17); }
.result-kichi .result-illustration { width: min(84%,345px); box-shadow: 0 11px 25px rgba(190,133,102,.17); }
.result-suekichi { background: linear-gradient(145deg,rgba(255,252,248,.94),rgba(245,238,255,.87)); box-shadow: 0 15px 38px rgba(132,113,166,.15); }
.result-suekichi .result-illustration { width: min(80%,330px); opacity: .94; box-shadow: 0 9px 21px rgba(130,110,160,.14); }
.result-kyo { background: linear-gradient(145deg,rgba(245,243,255,.96),rgba(223,218,245,.94)); border-color: rgba(142,125,180,.5); box-shadow: 0 17px 44px rgba(86,76,130,.2); }
.result-kyo .result-illustration { width: min(78%,320px); border-color: #ddd7f0; box-shadow: 0 10px 28px rgba(79,67,130,.24); filter: saturate(.88); }
.result-kyo .result-effects { background: linear-gradient(110deg,transparent 0 46%,rgba(123,151,210,.12) 47% 49%,transparent 50% 100%); background-size: 28px 75px; animation: rainFall 1.5s linear infinite; }
@keyframes daikichiEntrance { 0% { opacity: 0; transform: scale(.55) rotate(-3deg); filter: brightness(1.8); } 65% { transform: scale(1.05) rotate(1deg); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes festivalSpin { to { transform: rotate(360deg) scale(1.06); } }
@keyframes gentleSparkle { 50% { opacity: .42; transform: scale(1.03); } }
@keyframes rainFall { to { background-position: 0 75px; } }
.fortune-emblem { border-color: #e0b955; background: radial-gradient(circle at 35% 28%,#fff9d7,#ffb8d8 35%,#bd9ce9 67%,#7fc9ea 100%); box-shadow: 0 0 0 8px rgba(255,255,255,.52),0 0 45px rgba(221,132,203,.5); }
.fortune-emblem strong { color: #fff; text-shadow: 0 3px 0 #b260aa,0 0 18px #fff; }
.fortune-emblem small, .emblem-star, .luck-grid span, .again-button { color: #a06abb; }
.luck-grid { border-color: rgba(190,126,193,.22); }
.luck-grid div { background: rgba(255,255,255,.56); }
.luck-grid div + div { border-color: rgba(190,126,193,.2); }
.luck-grid strong { color: #68477d; }
.luck-grid .lucky-color-card { position: relative; overflow: hidden; background: color-mix(in srgb,var(--lucky-color) 28%,white); box-shadow: inset 0 0 0 2px color-mix(in srgb,var(--lucky-color) 55%,#d7a941); }
.lucky-color-card::before { position: absolute; top: 50%; left: 50%; width: 105px; height: 105px; border-radius: 50%; background: var(--lucky-color); content: ""; opacity: .16; filter: blur(18px); transform: translate(-50%,-50%); }
.luck-grid .lucky-color-card > * { position: relative; z-index: 1; }
.luck-grid .lucky-color-card > span { color: #805098; font-weight: 700; }
.luck-grid .lucky-color-card strong { flex-direction: column; gap: 5px; margin-top: 8px; }
.luck-grid .lucky-color-card i { width: 42px; height: 42px; border: 4px solid rgba(255,255,255,.96); background: var(--lucky-color); box-shadow: 0 0 0 2px #d6ad57,0 6px 15px color-mix(in srgb,var(--lucky-color) 58%,transparent),inset 7px 7px 9px rgba(255,255,255,.55); transform: rotate(45deg); border-radius: 12px 50% 50% 50%; }
.luck-grid .lucky-color-card b { color: #68477d; font-size: 18px; letter-spacing: .06em; text-shadow: 0 1px 0 #fff; }
.lucky-color-card small { display: block; margin-top: 5px; color: #936ba5; font-size: 9px; letter-spacing: .08em; }
@media (max-width: 520px) { .luck-grid .lucky-color-card { min-height: 104px; } .luck-grid .lucky-color-card strong { flex-direction: row; margin: 0; } .luck-grid .lucky-color-card i { width: 38px; height: 38px; } .lucky-color-card small { position: absolute; right: 16px; bottom: 7px; } }
.luck-grid > div { min-height: 132px; padding: 16px 10px; }
.luck-grid > div > span { font-size: 9px; font-weight: 700; }
.luck-grid > div > small { display: block; margin-top: 5px; color: #936ba5; font-size: 9px; letter-spacing: .08em; }
.luck-grid .lucky-number-card { position: relative; background: linear-gradient(145deg,rgba(255,248,211,.74),rgba(255,230,238,.7)); box-shadow: inset 0 0 0 2px rgba(226,180,74,.48); }
.lucky-number-card strong { width: 58px; height: 58px; margin: 9px auto 0; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(145deg,#fff8c7,#ffc4dd); box-shadow: 0 0 0 2px #d5a941,0 8px 18px rgba(212,137,171,.3),inset 5px 5px 8px rgba(255,255,255,.76); color: #9c5688!important; font-family: Georgia,"Times New Roman",serif; font-size: 29px!important; line-height: 1; text-shadow: 0 1px 0 #fff; }
.luck-grid .lucky-item-card { position: relative; background: linear-gradient(145deg,rgba(231,244,255,.8),rgba(241,226,255,.76)); box-shadow: inset 0 0 0 2px rgba(138,150,214,.4); }
.lucky-item-card strong { flex-direction: column; gap: 5px; margin-top: 8px; }
.lucky-item-card i { display: grid; width: 46px; height: 46px; place-items: center; border: 3px solid #fff; border-radius: 14px; background: linear-gradient(145deg,#d7f2ff,#d9bdef); box-shadow: 0 0 0 2px #9e8bc4,0 7px 16px rgba(113,114,184,.25),inset 5px 5px 7px rgba(255,255,255,.65); color: #76559c; font-family: Georgia,serif; font-size: 25px; font-style: normal; transform: rotate(-5deg); }
.lucky-item-card b { color: #68477d; font-size: 16px; letter-spacing: .04em; }
@media (max-width: 520px) { .luck-grid > div { min-height: 94px; } .luck-grid .lucky-number-card strong { width: 54px; height: 54px; margin: 0; } .lucky-number-card small,.lucky-item-card small { position: absolute; right: 16px; bottom: 7px; } .lucky-item-card strong { flex-direction: row; margin: 0; } .lucky-item-card i { width: 42px; height: 42px; } }

/* Rich fairy-tale opening */
.welcome { width: min(88%,610px); padding: 66px 42px 50px; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.welcome::before,.welcome::after { position: absolute; top: 44px; color: #e3b84f; font-size: 25px; text-shadow: 0 0 12px #fff; content: "✦ ･ﾟ✧"; }
.welcome::before { left: 31px; transform: rotate(-18deg); }
.welcome::after { right: 31px; transform: rotate(18deg) scaleX(-1); }
.welcome-crown { position: absolute; top: -37px; left: 50%; display: grid; width: 76px; height: 76px; place-items: center; border: 3px solid #e5ba55; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff,#ffcbe7 43%,#bca0ed 75%); box-shadow: 0 0 0 6px rgba(255,255,255,.55),0 8px 24px rgba(130,70,145,.25); color: #fff6b5; font-size: 31px; text-shadow: 0 0 12px #fff,0 2px 0 #c28e36; transform: translateX(-50%); }
.welcome .kicker { color: #754087; font-size: 13px; font-weight: 900; text-shadow: -1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 3px 9px rgba(94,43,106,.38); }
.welcome h1 { background: linear-gradient(180deg,#924c9c 4%,#56326f 70%,#9e55a2); background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 8px 8px rgba(93,39,104,.34)); }
.welcome h1 span { color: #c94b96; filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 0 8px rgba(255,255,255,.85)); }
.welcome > p:not(.kicker) { color: #613a73; font-size: 15px; font-weight: 800; text-shadow: -1px -1px 0 rgba(255,255,255,.95),1px -1px 0 rgba(255,255,255,.95),-1px 1px 0 rgba(255,255,255,.95),1px 1px 0 rgba(255,255,255,.95),0 4px 10px rgba(91,43,104,.32); }
.open-button { min-width: 255px; padding: 20px 43px 18px; overflow: hidden; border: 2px solid #f4d26f; border-radius: 999px; background: linear-gradient(135deg,#f597c4,#b386df 55%,#82c9eb); box-shadow: inset 0 0 0 4px rgba(255,255,255,.48),0 0 0 5px rgba(255,255,255,.32),0 13px 28px rgba(128,70,147,.29),0 0 28px rgba(255,206,235,.75); }
.open-button::before { position: absolute; inset: -45% auto -45% -30%; width: 25%; background: rgba(255,255,255,.65); content: ""; transform: rotate(24deg); animation: buttonShine 2.8s ease-in-out infinite; }
.open-button i { position: absolute; top: 50%; left: 20px; color: #fff5ad; font-style: normal; transform: translateY(-50%); animation: starPulse 1.4s ease-in-out infinite; }
.open-button::after { position: absolute; top: 50%; right: 20px; color: #fff5ad; content: "✦"; transform: translateY(-50%); animation: starPulse 1.4s .7s ease-in-out infinite; }
.open-button span { font-size: 17px; font-weight: 700; text-shadow: 0 2px 5px rgba(103,54,129,.38); }
.curtain { background-image: radial-gradient(circle at 22% 18%,rgba(255,245,178,.82) 0 2px,transparent 3px),radial-gradient(circle at 74% 34%,rgba(255,255,255,.75) 0 2px,transparent 3px),repeating-linear-gradient(90deg,#c96fa3 0,#f3a9cb 10%,#ffd0e5 19%,#e58eb9 29%,#b85d94 39%); background-size: 88px 88px,121px 121px,auto; }
.curtain::before { position: absolute; inset: 0; background: linear-gradient(115deg,transparent 35%,rgba(255,255,255,.34) 48%,transparent 61%); content: ""; animation: curtainShimmer 4s ease-in-out infinite; }
.curtain-left::after,.curtain-right::after { width: 9px; box-shadow: 0 0 14px rgba(255,244,157,.85); }
.stage:not(.is-open)::before { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 11; width: 18px; background: linear-gradient(90deg,transparent,#fff9b8 43%,#fff 50%,#fff9b8 57%,transparent); content: ""; filter: blur(2px); opacity: .9; transform: translateX(-50%); animation: centerGlow 1.8s ease-in-out infinite; }
.valance { height: 20vh; min-height: 125px; border-bottom: 6px solid #e4b654; box-shadow: 0 8px 0 rgba(255,255,255,.32); }
@keyframes buttonShine { 0%,35% { left:-30%; } 65%,100% { left:120%; } }
@keyframes starPulse { 50% { transform: translateY(-50%) scale(1.45) rotate(35deg); filter: drop-shadow(0 0 7px #fff); } }
@keyframes curtainShimmer { 0%,100% { transform: translateX(-45%); opacity:.35; } 50% { transform: translateX(45%); opacity:.75; } }
@keyframes centerGlow { 50% { opacity:.45; width:9px; } }
@media (max-width:520px) { .welcome { width: calc(100% - 40px); padding: 58px 20px 37px; } .welcome::before,.welcome::after { top:37px; font-size:17px; } .welcome::before { left:18px; } .welcome::after { right:18px; } .welcome-crown { width:65px; height:65px; top:-31px; } .open-button { min-width:235px; } }

/* Result-specific full-stage scenery */
.result-backdrop { position: absolute; inset: 0; z-index: 0; background-image: var(--result-background); background-position: center; background-size: cover; opacity: 0; filter: saturate(1.04) brightness(1.02); transform: scale(1.015); transition: opacity .9s ease; pointer-events: none; }
.result-backdrop::after { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(255,255,255,.08),transparent 22% 78%,rgba(255,255,255,.08)); content: ""; }
.stage.has-result-background .result-backdrop { opacity: 1; animation: backdropBloom 1.2s ease both; }
.stage.has-result-background[data-fortune="daikichi"] .result-backdrop { filter: saturate(1.18) brightness(1.03); }
.stage.has-result-background[data-fortune="chukichi"] .result-backdrop { filter: saturate(1.05) brightness(1.03); }
.stage.has-result-background[data-fortune="shokichi"] .result-backdrop { filter: saturate(1) brightness(1.04); }
.stage.has-result-background[data-fortune="kichi"] .result-backdrop { filter: saturate(.98) brightness(1.04); }
.stage.has-result-background[data-fortune="suekichi"] .result-backdrop { filter: saturate(.92) brightness(1.03); }
.stage.has-result-background[data-fortune="kyo"] .result-backdrop { filter: saturate(.87) brightness(.94); }
.stage.has-result-background[data-fortune="daikichi"]::after { background: radial-gradient(circle at 50% 50%,transparent 24%,rgba(255,212,85,.13) 75%); }
.stage.has-result-background[data-fortune="chukichi"]::after { background: radial-gradient(circle at 50% 50%,transparent 24%,rgba(113,214,172,.13) 78%); }
.stage.has-result-background[data-fortune="shokichi"]::after { background: radial-gradient(circle at 50% 50%,transparent 24%,rgba(155,158,232,.13) 78%); }
.stage.has-result-background[data-fortune="kichi"]::after { background: radial-gradient(circle at 50% 50%,transparent 24%,rgba(238,176,137,.13) 78%); }
.stage.has-result-background[data-fortune="suekichi"]::after { background: radial-gradient(circle at 50% 50%,transparent 24%,rgba(170,150,203,.15) 78%); }
.stage.has-result-background[data-fortune="kyo"]::after { background: radial-gradient(circle at 50% 50%,transparent 22%,rgba(86,75,139,.22) 80%); }
@keyframes backdropBloom { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1.015); } }

/* Keep the scenery visible instead of covering it with a white veil. */
.stage.has-result-background .result { width: min(92vw,560px); border-color: rgba(255,255,255,.82); background: rgba(255,255,255,.34); box-shadow: 0 18px 55px rgba(112,67,128,.22),inset 0 0 0 1px rgba(255,255,255,.56); backdrop-filter: blur(3px); }
.stage.has-result-background .result-illustration { width: min(72vw,360px); border-width: 4px; background: #fff; }
.advice-card { position: relative; z-index: 1; width: min(94%,470px); margin: 17px auto; padding: 24px 22px 17px; border: 2px solid rgba(224,177,74,.64); border-radius: 20px; background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,231,247,.9)); box-shadow: 0 10px 27px rgba(138,80,149,.19),inset 0 0 0 4px rgba(255,255,255,.52); overflow: hidden; }
.advice-card::before,.advice-card::after { position: absolute; top: 50%; color: #e0b14a; font-size: 19px; content: "✦"; transform: translateY(-50%); animation: starPulse 1.8s ease-in-out infinite; }
.advice-card::before { left: 10px; }
.advice-card::after { right: 10px; animation-delay: .9s; }
.advice-label { position: absolute; top: 0; left: 50%; padding: 5px 18px; border-radius: 0 0 13px 13px; background: linear-gradient(90deg,#d99ac4,#aa8cda); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-shadow: 0 1px 3px rgba(91,51,110,.35); transform: translateX(-50%); white-space: nowrap; }
.stage.has-result-background .result-message { margin: 0 auto; padding: 0 15px; border: 0; background: transparent; box-shadow: none; color: #674278; font-size: clamp(15px,2.3vw,19px); font-weight: 700; line-height: 1.85; text-shadow: 0 1px 0 #fff; animation: adviceGrow 1.05s .18s cubic-bezier(.16,.76,.2,1) both; }
.stage.has-result-background .luck-grid { border: 2px solid rgba(255,255,255,.86); background: rgba(255,255,255,.63); box-shadow: 0 9px 25px rgba(113,71,128,.13); backdrop-filter: blur(5px); }
.stage.has-result-background .result-daikichi .result-illustration { width: min(78vw,400px); }
.stage.has-result-background .result-chukichi .result-illustration { width: min(75vw,380px); }
.stage.has-result-background .result-shokichi .result-illustration { width: min(70vw,350px); }
.stage.has-result-background .result-kichi .result-illustration { width: min(68vw,340px); }
.stage.has-result-background .result-suekichi .result-illustration { width: min(65vw,325px); }
.stage.has-result-background .result-kyo .result-illustration { width: min(63vw,315px); }
@keyframes adviceGrow { 0% { opacity: 0; transform: scale(.38); letter-spacing:-.05em; filter: blur(4px); } 65% { opacity: 1; transform: scale(1.06); filter: blur(0); } 100% { opacity: 1; transform: scale(1); letter-spacing:.06em; filter: none; } }
@media (max-width:520px) { .stage.has-result-background .result { width: calc(100vw - 20px); padding: 13px 10px 16px; background: rgba(255,255,255,.28); } .advice-card { width: calc(100% - 6px); margin: 13px auto; padding: 25px 13px 14px; } .stage.has-result-background .result-message { padding: 0 14px; font-size: 15px; line-height: 1.75; } }