@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&display=swap');
:root{color-scheme:dark;font-family:'Noto Sans JP',sans-serif;color:#edf4ff;background:#071426}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 35%,#153b5044,transparent 55%);min-height:100vh}
header{max-width:1120px;margin:auto;padding:26px 32px;border-bottom:1px solid #ffffff12;display:flex;justify-content:space-between;align-items:center}
header>span{font-size:10px;letter-spacing:3px;color:#728b9e}
.brand{font-size:15px;font-weight:900;letter-spacing:2px;color:#f2dfb6;text-decoration:none}
main{max-width:760px;margin:auto;padding:42px 24px 24px;text-align:center}
.eyebrow{font-size:11px;letter-spacing:3px;color:#64d3c6}
h1{font-size:clamp(28px,5vw,42px);line-height:1.6;letter-spacing:.06em;margin:16px 0}
h1 em{font-style:normal;color:#f2deb2}
.description{color:#97aabc;font-size:13px;line-height:2}
.stage{position:relative;min-height:370px;display:grid;place-items:center;margin:20px 0;isolation:isolate}
.orbit{position:absolute;border:1px solid #73c6cc16;border-radius:50%;width:330px;height:330px;z-index:-1}
.orbit-two{width:390px;height:240px;transform:rotate(-28deg)}
.mystery{width:222px;height:302px;padding:22px;border-radius:18px;border:1px solid #c9b279;outline:1px solid #c9b27944;outline-offset:7px;background:repeating-linear-gradient(45deg,transparent,transparent 14px,#d8c08805 14px,#d8c08805 15px),linear-gradient(145deg,#233b50,#0c1b2e);box-shadow:0 25px 70px #0008,inset 0 0 40px #b5c6d00a;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-6deg);color:#edd3a3}
.card-top{font-size:8px;letter-spacing:2px;display:flex;justify-content:space-between}
.star{font-size:98px;line-height:1;text-shadow:0 0 30px #f5d39055}
.card-bottom{font-size:10px;letter-spacing:3px;line-height:2.5}
.card-bottom small{font-size:9px;letter-spacing:1px;color:#95a7b7}
.controls{position:relative}
#status{font-size:12px;color:#b3c6d7;min-height:20px}
button{font:inherit;cursor:pointer}
#draw{width:min(100%,350px);padding:19px 24px;border:0;border-radius:9px;background:linear-gradient(110deg,#ead0a0,#fff0ce);color:#283342;font-weight:900;font-size:15px;box-shadow:0 8px 28px #eed9a015}
#draw span{float:right}
#close-window{position:fixed;top:16px;right:16px;z-index:1000;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #ffffff66;border-radius:50%;background:#173450eF;color:#fff;font-family:Arial,sans-serif;font-size:32px;font-weight:300;line-height:1;box-shadow:0 5px 18px #0007,0 0 16px #68cde744;backdrop-filter:blur(6px);transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
#close-window:hover{background:#d7475c;color:#fff;filter:none;transform:scale(1.08);box-shadow:0 6px 20px #0008,0 0 22px #ff607477}
#close-window:active{transform:scale(.96)}
button:hover{filter:brightness(1.1)}
button:disabled{cursor:wait;opacity:.55}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #7be4dc;outline-offset:5px}
.hint{font-size:11px;color:#71869a;margin-top:17px}
.result{width:280px;border:1px solid #71c9ca77;border-radius:18px;padding:20px 22px;background:linear-gradient(145deg,#19394a,#102032);box-shadow:0 20px 70px #0008;animation:appear .7s ease-out}
.result-top{display:flex;justify-content:space-between;align-items:center;color:#82d7d3;font-size:11px;letter-spacing:2px}
#grade{font-size:20px;font-weight:900}
.lucky-label{font-size:10px;color:#deceac}
.reading{font-size:10px;color:#98afc0;margin:12px 0 4px}
#name{font-size:26px;margin:0;letter-spacing:2px}
.branch{font-size:11px;color:#9bb3c5;margin:10px 0 0}
.stage.rarity-ssr .result{border-color:#f8d386;background:linear-gradient(140deg,#574427,#172435 65%);box-shadow:0 0 50px #f2ce6633,0 20px 60px #0008}
.stage.rarity-ssr #grade{color:#ffe4a1}
.stage.drawing .mystery{animation:charge .45s ease-in-out infinite alternate}
.stage.charging-rare{background:radial-gradient(ellipse,#ffda7044,transparent 68%)}
.stage.charging-rare .mystery{box-shadow:0 0 65px #ffd27088;animation:charge .3s ease-in-out infinite alternate}
.reveal-label{display:none;position:absolute;z-index:3;color:#ffe0a0;font-size:20px;font-weight:900;letter-spacing:3px;text-shadow:0 2px 20px #000;background:#101e30e8;padding:24px;border-radius:10px}
.reveal-label span{display:block;font-size:12px;margin-top:12px;letter-spacing:2px}
.cutin-jackpot .reveal-label{display:block;animation:cutin .65s cubic-bezier(.16,1,.3,1) both}
#particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.particle{position:absolute;top:-10%;width:5px;height:10px;background:var(--color);left:var(--x);animation:fall var(--duration) linear forwards;animation-delay:var(--delay)}
.races{text-align:left;margin:34px auto 0;background:#ffffff04;border:1px solid #ffffff12;border-radius:12px;padding:22px}
.races-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.races h2{font-size:13px;margin:0}
.races-heading>span{font-size:10px;color:#9aabbc}
.race-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #ffffff12;font-size:13px}
.lane{border-radius:5px;padding:5px 10px;font-size:11px;background:#fff;color:#172335}
.lane-2{background:#20232a;color:white;border:1px solid #ffffff44}
.lane-3{background:#bd3545;color:white}
.lane-4{background:#2367ad;color:white}
.lane-5{background:#efd361;color:#252525}
.lane-6{background:#25845e;color:white}
#profile{display:inline-block;font-size:11px;color:#88cfc8;margin-top:20px}
.demo-panel{text-align:left;margin:34px auto 0;max-width:460px;font-size:11px;color:#839aae}
.demo-panel summary{cursor:pointer}
.demo-panel p{line-height:1.9}
.demo-panel>div{display:flex;gap:10px}
.demo-panel button{background:#172b3e;border:1px solid #415165;color:#d6e3ee;padding:10px 14px;border-radius:6px;font-size:11px}
footer{margin-top:36px;font-size:10px;color:#61798e;line-height:2}
[hidden]{display:none!important}
@keyframes charge{from{transform:rotate(-7deg) scale(.98)}
to{transform:rotate(4deg) scale(1.04)}
}
@keyframes appear{from{opacity:0;transform:translateY(18px) scale(.85)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fall{to{transform:translateY(460px) rotate(400deg);opacity:0}
}
@media(max-width:480px){#close-window{top:10px;right:10px;width:42px;height:42px;font-size:29px}header{padding:20px 62px 20px 20px}
header>span{display:none}
main{padding-top:28px}
.description{font-size:11px}
.orbit-two{width:300px}
.orbit-one{width:290px;height:290px}
.races{padding:16px}
.races-heading{align-items:flex-start;flex-direction:column}
.stage{min-height:360px}
}
html:not(.motion-enabled) *,html:not(.motion-enabled) *::before,html:not(.motion-enabled) *::after{animation:none!important;transition:none!important}