:root{--gold:#f5d895;--cream:#fff8e9;--plum:#241134;--rose:#a6456e;--violet:#8c59cd}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#13091d;color:var(--cream);font-family:"Yu Mincho","Hiragino Mincho ProN",serif}.stage{position:relative;display:grid;min-height:100vh;min-height:100dvh;place-items:center;overflow:hidden;background:linear-gradient(rgba(18,8,29,.24),rgba(18,8,29,.48)),url("images/mystic-stage.png") center/cover no-repeat;isolation:isolate}.stage::after{position:absolute;inset:0;z-index:2;background:radial-gradient(circle at 50% 53%,transparent 20%,rgba(8,2,15,.28) 82%);content:"";pointer-events:none}.stars{position:absolute;inset:0;z-index:3;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,var(--gold) 0 1px,transparent 1.5px);background-position:0 0,23px 31px;background-size:71px 71px,89px 89px;opacity:.38;animation:twinkle 3s ease-in-out infinite}.welcome{position:relative;z-index:12;width:min(90%,600px);padding:40px 24px;text-align:center;text-shadow:0 3px 20px #160622;transition:opacity .45s,transform .6s}.welcome .kicker,.oracle header p{margin:0 0 12px;color:var(--gold);font:700 11px/1 Georgia,serif;letter-spacing:.38em}.welcome h1{margin:0;font-size:clamp(46px,9vw,82px);font-weight:500;letter-spacing:.08em;line-height:1.05}.welcome h1 span{display:block;margin-bottom:8px;color:#e9c7ff;font-size:.44em;letter-spacing:.28em}.welcome>p:not(.kicker){margin:22px 0 30px;font-size:14px;letter-spacing:.12em}.open-button{position:relative;padding:17px 39px;border:1px solid rgba(245,216,149,.75);border-radius:3px;background:linear-gradient(135deg,rgba(65,25,84,.88),rgba(132,50,91,.84));box-shadow:0 0 0 5px rgba(245,216,149,.08),0 14px 35px rgba(0,0,0,.4);color:#fff;cursor:pointer;font-family:inherit;transition:.25s}.open-button:hover{transform:translateY(-3px);box-shadow:0 0 30px rgba(237,190,255,.35),0 18px 40px rgba(0,0,0,.4)}.open-button span{display:block;font-size:16px;letter-spacing:.16em}.open-button small{display:block;margin-top:7px;color:var(--gold);font:9px Georgia,serif;letter-spacing:.25em}.curtain{position:absolute;top:0;bottom:0;z-index:10;width:55%;background:repeating-linear-gradient(90deg,#390b27 0,#761c43 10%,#a3345a 19%,#601335 29%,#2b071f 39%);box-shadow:inset 0 0 55px rgba(0,0,0,.72);transition:transform 1.8s cubic-bezier(.65,0,.2,1)}.curtain::after{position:absolute;top:0;bottom:0;width:13px;background:linear-gradient(90deg,#906222,var(--gold),#6c4410);content:""}.curtain span{position:absolute;top:54%;width:62px;height:28px;border:5px solid #c8963c;border-radius:50%;box-shadow:0 0 14px #f7d994}.curtain-left{left:0;clip-path:polygon(0 0,100% 0,92% 46%,100% 100%,0 100%)}.curtain-left::after{right:3%}.curtain-left span{right:0;transform:rotate(-15deg)}.curtain-right{right:0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,8% 46%)}.curtain-right::after{left:3%}.curtain-right span{left:0;transform:rotate(15deg)}.valance{position:absolute;top:0;left:0;z-index:13;width:100%;height:17vh;min-height:105px;background:radial-gradient(ellipse at 12% 0,#a73a61 0 52%,transparent 54%),radial-gradient(ellipse at 37% 0,#8c2952 0 54%,transparent 56%),radial-gradient(ellipse at 63% 0,#a73a61 0 54%,transparent 56%),radial-gradient(ellipse at 88% 0,#8c2952 0 52%,transparent 54%);filter:drop-shadow(0 12px 12px rgba(0,0,0,.45));transition:transform 1.4s}.stage.is-open .curtain-left{transform:translateX(-91%)}.stage.is-open .curtain-right{transform:translateX(91%)}.stage.is-open .valance{transform:translateY(-78%)}.stage.is-open .welcome{opacity:0;transform:scale(1.1);pointer-events:none}.floor-light{position:absolute;bottom:-20%;left:25%;z-index:1;width:50%;height:50%;border-radius:50%;background:rgba(198,123,255,.2);filter:blur(60px)}.oracle{position:relative;z-index:5;width:min(94%,580px);padding:25px 18px 34px;text-align:center;animation:oracleIn 1.2s .55s both}.oracle header h2{margin:0;font-size:clamp(29px,5vw,40px);font-weight:500;letter-spacing:.18em;text-shadow:0 3px 18px #1d092d}.crystal-wrap{position:relative;width:min(65vw,270px);height:min(65vw,270px);margin:2px auto -3px}.crystal{position:absolute;inset:0;padding:0;border:0;background:transparent;color:#fff;cursor:pointer}.crystal img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 25px rgba(217,155,255,.85));transition:.35s}.crystal:hover img{transform:scale(1.06);filter:drop-shadow(0 0 42px #e4b4ff)}.crystal span{position:absolute;top:47%;left:50%;padding:7px 11px;border-radius:20px;background:rgba(52,19,78,.48);font-family:"Yu Gothic",sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;white-space:nowrap;transform:translate(-50%,-50%);text-shadow:0 2px 8px #210b35}.orbit{position:absolute;inset:12%;border:1px solid rgba(245,216,149,.55);border-radius:50%;animation:spin 7s linear infinite}.orbit::before,.orbit::after{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px #fff;content:""}.orbit::before{top:4%;left:28%}.orbit::after{right:4%;bottom:28%}.orbit-two{inset:21%;animation-direction:reverse;animation-duration:5s;transform:rotate(64deg)}.oracle-guide{margin:0;font-size:13px;letter-spacing:.11em;text-shadow:0 2px 12px #160622}.result{position:relative;margin:16px auto 0;padding:112px 25px 24px;border:1px solid rgba(245,216,149,.5);border-radius:26px;background:linear-gradient(145deg,rgba(27,10,43,.92),rgba(70,25,74,.88));box-shadow:0 24px 70px rgba(0,0,0,.48),inset 0 0 40px rgba(187,105,219,.12);animation:resultIn .7s both}.fortune-emblem{position:absolute;top:-94px;left:50%;display:grid;width:180px;height:180px;place-content:center;border:2px solid var(--gold);border-radius:50%;background:radial-gradient(circle at 38% 30%,#d28bea,#713a9c 46%,#2a103c 75%);box-shadow:0 0 0 7px rgba(245,216,149,.13),0 0 45px rgba(218,142,255,.65);transform:translateX(-50%)}.fortune-emblem::before,.fortune-emblem::after{position:absolute;inset:10px;border:1px solid rgba(255,255,255,.32);border-radius:50%;content:""}.fortune-emblem::after{inset:-14px;border:1px dashed rgba(245,216,149,.45);animation:spin 15s linear infinite}.fortune-emblem strong{font-size:55px;font-weight:700;line-height:1;text-shadow:0 3px 0 #563078,0 0 18px #fff}.fortune-emblem small{margin-top:8px;color:var(--gold);font-size:10px;letter-spacing:.25em}.emblem-star{position:absolute;top:12px;left:50%;color:var(--gold);transform:translateX(-50%)}.result-message{margin:0 auto 18px;max-width:430px;font-size:15px;line-height:1.9;letter-spacing:.06em}.luck-grid{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border:1px solid rgba(245,216,149,.22);border-radius:14px}.luck-grid div{padding:14px 8px;background:rgba(255,255,255,.05)}.luck-grid div+div{border-left:1px solid rgba(245,216,149,.2)}.luck-grid span{display:block;color:var(--gold);font:8px Georgia,serif;letter-spacing:.13em}.luck-grid strong{display:flex;min-height:29px;margin-top:7px;align-items:center;justify-content:center;gap:6px;color:#fff;font-size:16px}.luck-grid b{font-weight:700}.luck-grid i{width:13px;height:13px;border:2px solid #fff;border-radius:50%;background:var(--chip)}.again-button{margin-top:18px;padding:9px;border:0;border-bottom:1px solid rgba(245,216,149,.7);background:transparent;color:var(--gold);font-family:inherit;font-size:12px;letter-spacing:.08em;cursor:pointer}.oracle.has-result header,.oracle.has-result .crystal-wrap,.oracle.has-result>.oracle-guide{display:none}[hidden]{display:none!important}button:focus-visible{outline:3px solid #fff;outline-offset:5px}@keyframes twinkle{50%{opacity:.7}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes oracleIn{from{opacity:0;transform:translateY(35px) scale(.96)}to{opacity:1;transform:none}}@keyframes resultIn{from{opacity:0;transform:scale(.85) translateY(30px)}to{opacity:1;transform:none}}@media(max-width:520px){.welcome h1{font-size:50px}.welcome>p:not(.kicker){font-size:12px}.curtain{width:59%}.oracle{padding-top:14px}.result{margin-top:102px;padding:101px 15px 18px}.fortune-emblem{width:164px;height:164px;top:-87px}.fortune-emblem strong{font-size:48px}.result-message{font-size:13px}.luck-grid{grid-template-columns:1fr}.luck-grid div{display:flex;align-items:center;justify-content:space-between;padding:11px 16px}.luck-grid div+div{border-top:1px solid rgba(245,216,149,.2);border-left:0}.luck-grid strong{margin:0}.stage{background-position:center}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}}