/* 演出とカード。段階色は予告と結果で共通にする。 */
.stage{--accent:#d5e3f0;--glow:#9bceff33;position:relative;perspective:1000px;overflow:hidden;border-radius:24px;min-height:490px;padding:28px 12px;container-type:inline-size;background:radial-gradient(ellipse at center,#1b314c55,transparent 72%)}
.stage.rarity-ur,.tier-yellow{--accent:#ffe172;--glow:#ffc02f66}
.stage.rarity-sr,.tier-red{--accent:#ff4f56;--glow:#ff233d77}
.stage.rarity-ssr,.tier-hot{--accent:#ffe29a;--glow:#ffac2677}
.stage.drawing .mystery{animation:card-suspense 1.4s ease-in-out infinite}
.mystery{z-index:2;flex-shrink:0}
.speed-lines,.impact-frame,.cutin-trails,.chance-banner,.fever-effects{display:none;position:absolute;inset:0;pointer-events:none}
.speed-lines{z-index:0;background:repeating-conic-gradient(from 10deg,transparent 0deg 12deg,#8edfff44 13deg 14deg,transparent 15deg 24deg);mask-image:radial-gradient(ellipse,transparent 22%,#000 75%)}
.drawing .speed-lines{display:block;animation:light-turn 9s linear infinite}
.chance-cutin .speed-lines,.fever-rush .speed-lines,.jackpot .speed-lines{display:block;background:repeating-conic-gradient(from 0deg,transparent 0deg 9deg,var(--glow) 10deg 12deg,transparent 13deg 20deg);animation:light-turn 3s linear infinite}
.chance-cutin{background:radial-gradient(ellipse,var(--glow),#060d19 75%)}
.chance-cutin .mystery{filter:brightness(.25);transform:rotate(0) scale(.88)}
.impact-frame{inset:14px;z-index:4;border:1px solid var(--accent);box-shadow:inset 0 0 28px var(--glow),0 0 20px var(--glow);clip-path:polygon(5% 0,95% 0,100% 7%,100% 93%,95% 100%,5% 100%,0 93%,0 7%)}
.impact-frame i{position:absolute;width:64px;height:64px;border:7px double var(--accent);filter:drop-shadow(0 0 5px var(--accent))}
.impact-frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.impact-frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.impact-frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.impact-frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.chance-cutin .impact-frame,.fever-charge .impact-frame,.fever-rush .impact-frame,.jackpot .impact-frame{display:block;animation:frame-lock .5s ease-out both}
.cutin-trails{inset:32px -10%;z-index:3;transform:rotate(-7deg);overflow:hidden}
.cutin-trails span{position:absolute;left:-30%;white-space:nowrap;font-size:11px;letter-spacing:8px;color:var(--accent);border-block:1px solid var(--accent);padding:8px;background:#050e1dcc;animation:trail-slide 3s linear infinite}
.cutin-trails span:first-child{top:24px}
.cutin-trails span:last-child{bottom:24px;animation-direction:reverse}
.chance-cutin .cutin-trails{display:block}
.chance-banner{inset:auto -4%;z-index:5;padding:22px 10px 25px;isolation:isolate;transform:rotate(-7deg);border-block:8px double var(--accent);background:repeating-linear-gradient(125deg,transparent 0 12px,#fff1 13px 14px),linear-gradient(100deg,#0d1019,#392810,#0d1019);box-shadow:0 0 0 2px #140d03,0 12px 0 #0005,0 0 65px var(--glow)}
.chance-banner::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 20%,#fff5 45%,transparent 65%);background-size:300% 100%;animation:metal-sweep 1.6s ease-out both}
.chance-banner small,.chance-banner span{display:block;font-size:11px;letter-spacing:4px;color:#fff3d0;text-shadow:0 2px 4px #000}
.chance-banner strong{display:block;font-family:Impact,'Arial Black','Noto Sans JP',sans-serif;font-size:clamp(40px,15cqw,102px);font-style:italic;font-weight:900;line-height:1.5;letter-spacing:3px;color:#ffe551;background:linear-gradient(#fffbbc 0%,#ffda24 38%,#b67500 49%,#fff073 53%,#ffd522 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #ffe494;filter:drop-shadow(1px 2px 0 #5c3400) drop-shadow(2px 4px 0 #3c2200) drop-shadow(4px 6px 0 #130900) drop-shadow(0 0 14px #ffc32f77);text-shadow:none}
.tier-red .chance-banner{background:repeating-linear-gradient(125deg,transparent 0 12px,#fff1 13px 14px),linear-gradient(100deg,#24071a,#701024,#24071a)}
.tier-red .chance-banner strong{background-image:linear-gradient(#ffd6c7 0%,#ff283c 35%,#a90023 48%,#ff8687 52%,#f71539 85%);-webkit-text-stroke:1px #ffc6b6;filter:drop-shadow(2px 3px 0 #750820) drop-shadow(4px 6px 0 #250613) drop-shadow(0 0 18px #ff234b88)}
.tier-hot .chance-banner{border-block:10px double #ffe096;background:repeating-conic-gradient(from 20deg at center,#ffce491c 0deg 10deg,transparent 10deg 25deg),linear-gradient(100deg,#390707,#a01d1b,#390707)}
.tier-hot .chance-banner strong{font-size:clamp(76px,24cqw,160px);line-height:1.35;letter-spacing:12px;background-image:linear-gradient(#ffafa0,#f41423 35%,#9d0017 48%,#ff5961 52%,#e60524);-webkit-text-stroke:3px #ffe2a0;paint-order:stroke fill;filter:drop-shadow(2px 3px 0 #956018) drop-shadow(4px 6px 0 #ffd57b) drop-shadow(6px 8px 0 #5a2406) drop-shadow(0 0 22px #f9922688)}
.chance-cutin .chance-banner{display:block;animation:slot-slam .65s cubic-bezier(.16,1,.3,1) both}
.summon-light,.summon-ring{position:absolute;pointer-events:none;opacity:0;z-index:1}
.summon-light{width:100%;height:420px;border-radius:50%;background:repeating-conic-gradient(transparent 0deg 14deg,#f9d97977 15deg 18deg,transparent 19deg 30deg);mask-image:radial-gradient(circle,#000 10%,transparent 70%)}
.summon-ring{width:280px;height:280px;border:3px solid #ffe7a0;border-radius:50%;box-shadow:0 0 30px #ffdc73,inset 0 0 30px #ffdc73}
.charging-rare .summon-light{animation:gather-light 1.8s ease-in both}
.charging-rare .summon-ring{animation:gather-ring 1.8s ease-in both}
.stage.charging-rare .mystery{box-shadow:0 0 65px #ffd27088;animation:charge .3s ease-in-out infinite alternate}
.fever-effects{z-index:1;overflow:hidden}
.fever-charge .fever-effects,.fever-rush .fever-effects,.jackpot .fever-effects{display:block}
.fever-wheel{position:absolute;inset:-60%;background:repeating-conic-gradient(#ffce6266 0deg 7deg,transparent 7deg 17deg,#f9234c55 17deg 24deg,transparent 24deg 34deg);animation:light-turn 5s linear infinite}
.fever-border{position:absolute;inset:8px;border:6px double #ffd466;border-radius:18px;box-shadow:inset 0 0 55px #ff942488,0 0 25px #ffd47788;animation:gold-breathe 1.2s ease-in-out infinite alternate}
.fever-rush .fever-wheel{background:repeating-conic-gradient(#ff538877 0deg 12deg,#ffd85566 12deg 24deg,#6bffc566 24deg 36deg,#59c9ff77 36deg 48deg,#b574ff66 48deg 60deg,transparent 60deg 72deg)}
.fever-rush .mystery,.jackpot .mystery{opacity:.08}
.rush-word{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-size:clamp(76px,25cqw,150px);font-weight:900;font-style:italic;letter-spacing:8px}
.fever-rush .rush-word{display:flex;animation:rush-impact .8s cubic-bezier(.16,1,.3,1) both}
.fever-rush .rush-two{animation-delay:.7s}
.rush-word span,.jackpot .reveal-label strong{background:linear-gradient(110deg,#ff5486 0%,#ffd151 16%,#fcff81 30%,#69ffc2 44%,#75eaff 58%,#ac8dff 74%,#ff96dc 88%,#ff5486 100%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-stroke:1px #fff3ce;text-shadow:none;filter:drop-shadow(2px 3px 0 #58265a) drop-shadow(4px 6px 0 #251022) drop-shadow(0 0 20px #ffa5ff88);animation:rainbow-flow 2.5s linear infinite}
.reveal-label{display:none;width:94%;max-width:540px;padding:30px 8px;position:absolute;z-index:6;font-size:11px;letter-spacing:5px;color:#fff4ca;border-block:9px double #ffdf85;border-radius:0;background:linear-gradient(110deg,#492315f5,#8b5018f5,#492315f5);box-shadow:0 0 75px #ffce6066}
.reveal-label strong{display:block;font-size:clamp(36px,14cqw,80px);font-weight:900;line-height:1.6;letter-spacing:2px}
.reveal-label span{display:block;font-size:11px;letter-spacing:2px;margin-top:10px}
.jackpot .reveal-label{display:block;animation:jackpot-impact .75s cubic-bezier(.16,1,.3,1) both}
.opening-normal .mystery{animation:card-open .4s ease-in both;backface-visibility:hidden}
.holding-jackpot .mystery{transform:rotate(0);box-shadow:0 0 65px #ffd982aa;animation:opening-hold .9s ease-out both}
.holding-jackpot .summon-light{opacity:.8;animation:light-turn 6s linear infinite}
.opening-jackpot .mystery{animation:card-open 1.6s cubic-bezier(.65,0,.85,.45) both;backface-visibility:hidden}
.opening-jackpot .summon-light{opacity:1;animation:light-turn 4s linear infinite}
.stage.rarity-ssr .summon-ring{animation:reveal-ring 1.2s ease-out both}

/* 各カードは背景・額縁・装飾の量を段階的に変える。 */
.result{--metal:#b4c4d5;--ink:#dbe6f0;position:relative;isolation:isolate;overflow:hidden;width:min(292px,100%);border-radius:16px;padding:16px 18px 12px;border:3px solid var(--metal);outline:1px solid #fff4;outline-offset:-8px;background:linear-gradient(135deg,#718193,#273e54 55%,#142738);box-shadow:inset 0 0 0 3px #111e2f,0 18px 45px #0008;animation:card-arrival .6s ease-out both;backface-visibility:hidden}
.result::before,.result::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0}
.result::before{background:repeating-linear-gradient(125deg,transparent 0 18px,#e8f4ff09 19px 20px)}
.result::after{inset:9px;border:1px solid var(--metal);border-radius:6px;opacity:.5}
.result>*{position:relative;z-index:2}
.result-top{color:var(--ink);font-size:10px;letter-spacing:1px}
#rarity{display:grid;place-items:center;min-width:44px;height:32px;font-size:17px;border:1px solid var(--metal);background:#071426a6;clip-path:polygon(15% 0,100% 0,100% 80%,85% 100%,0 100%,0 20%)}
.racer-emblem{width:122px;aspect-ratio:1;margin:18px auto 16px;display:grid;place-content:center;position:relative;border:1px solid var(--metal);border-radius:50%;color:var(--ink);background:radial-gradient(circle,#d6efff30 0 42%,#071426aa 43% 61%,transparent 62%),repeating-conic-gradient(from 0deg,var(--metal) 0 2deg,transparent 2deg 18deg);box-shadow:inset 0 0 24px #061321,0 0 20px var(--glow)}
.racer-emblem::before,.racer-emblem::after{content:'';position:absolute;inset:9px;border:1px solid var(--metal);border-radius:50%;opacity:.55}
.racer-emblem::after{inset:18px;border-style:dotted}
.racer-emblem span{font-size:8px;letter-spacing:3px}
.racer-emblem strong{font-size:28px;line-height:1.25;letter-spacing:1px;text-shadow:0 2px 8px #0008}
.racer-emblem i{font-style:normal;font-size:12px}
.identity{padding:18px 8px 16px;border-block:1px solid #cfdfed44;background:linear-gradient(90deg,#071426bb,#071426ed,#071426bb);border-radius:4px;color:#fff7e7}
.lucky-label{font-size:10px;color:#e9d9b6;margin:0 0 10px}
.reading{margin:0 0 3px;font-size:10px;color:#ccd6e6}
#name{font-size:28px;line-height:1.5;margin:0;letter-spacing:2px;overflow-wrap:anywhere}
.branch{margin:5px 0 0;color:#d6e0ed;font-size:10px}
.card-finish{display:flex;justify-content:space-between;align-items:center;padding-top:10px;color:var(--ink);font-size:9px;letter-spacing:3px;font-weight:700}
#finish-stars{font-size:13px;letter-spacing:3px}
.result .card-sparkles{position:absolute;inset:0;z-index:3;pointer-events:none}
.card-sparkles i{position:absolute;left:var(--spark-x);top:var(--spark-y);font-style:normal;font-size:var(--spark-size);line-height:1;color:#fff3c0;filter:drop-shadow(0 0 4px #ffeab2);animation:card-twinkle 3.2s ease-in-out infinite alternate;animation-delay:var(--spark-delay)}
.stage.rarity-n .result{--metal:#a1b1c5;--ink:#d5e0ed;background:linear-gradient(135deg,#718193,#273e54 55%,#142738);box-shadow:inset 0 0 0 3px #132033,0 18px 45px #0008}
.stage.rarity-ur .result{--metal:#ffe29a;--ink:#fff0bb;border-width:4px;background:repeating-linear-gradient(135deg,#ffe58411 0 2px,transparent 2px 8px),linear-gradient(135deg,#93601a 0%,#ffd573 28%,#bf872b 46%,#f2bf50 64%,#845115 100%);box-shadow:inset 0 0 0 3px #7d4f14,0 0 28px #eeba3233,0 18px 45px #0008}
.stage.rarity-ur .result::before,.stage.rarity-sr .result::before{background:linear-gradient(115deg,transparent 25%,#fff5ce66 45%,transparent 65%);background-size:300% 100%;animation:metal-sweep 6s ease-in-out infinite}
.stage.rarity-ur .result::after{border:2px solid #fff0b4;opacity:.65}
.stage.rarity-ur .card-finish{color:#3b2205;text-shadow:0 1px 0 #ffeaa6}
.stage.rarity-sr .result{--metal:#ffe3a0;--ink:#fff0c5;border-width:5px;background:repeating-conic-gradient(from 45deg,#ffb65533 0% 25%,transparent 0% 50%) 0 0/32px 48px,linear-gradient(130deg,#46091a,#f73d55 35%,#a5072c 58%,#ff5b63 80%,#5a0a28);box-shadow:inset 0 0 0 3px #781d1d,inset 0 0 22px #ffd06355,0 0 36px #ff3b5266,0 18px 45px #0008}
.stage.rarity-sr .result::before{animation-duration:4s}
.stage.rarity-sr .result::after{border:3px double #ffe69c;opacity:1;background:linear-gradient(135deg,#ffdd83 0 10px,transparent 11px) top left/30px 30px no-repeat,linear-gradient(225deg,#ffdd83 0 10px,transparent 11px) top right/30px 30px no-repeat,linear-gradient(45deg,#ffdd83 0 10px,transparent 11px) bottom left/30px 30px no-repeat,linear-gradient(315deg,#ffdd83 0 10px,transparent 11px) bottom right/30px 30px no-repeat}
.stage.rarity-sr .identity{border-color:#f9cf7d88;background:linear-gradient(90deg,#3b0823e8,#210619f5,#3b0823e8)}
.stage.rarity-sr .card-finish{color:#ffe6ab;text-shadow:0 2px 3px #53071b}
.stage.rarity-ssr .result{--metal:#fff0b9;--ink:#fff9d6;border:6px solid #fff0ba;background:linear-gradient(130deg,#ff4596 0%,#ffcc4b 18%,#bdf76b 33%,#44e0bd 48%,#57b4ff 65%,#a97aff 82%,#ff71ca 100%);box-shadow:inset 0 0 0 3px #eaba62,0 0 0 2px #ce81ff,0 0 30px #85efff66,0 0 65px #ee74ff55,0 20px 50px #0009;animation:gold-arrival 1.4s cubic-bezier(.35,0,.2,1) both;backface-visibility:hidden}
.stage.rarity-ssr .result::before{inset:-60%;background:repeating-linear-gradient(115deg,#ff579799 0%,#ffe47999 10%,#6affbd99 20%,#54d8ff99 30%,#bd8fff99 40%,#ff579799 50%);background-size:160% 160%;mix-blend-mode:soft-light;animation:holo-foil 7s ease-in-out infinite alternate}
.stage.rarity-ssr .result::after{border:3px double white;opacity:.8;background:radial-gradient(circle,#fff 0 1px,transparent 1.5px) 0 0/17px 23px,linear-gradient(115deg,transparent 25%,#fff8 45%,transparent 65%);background-size:17px 23px,300% 100%;animation:holo-sweep 4.5s ease-in-out infinite}
.stage.rarity-ssr .identity{border:1px solid #fff3cda6;background:linear-gradient(100deg,#28143deb,#172e47f5,#391631eb)}
.stage.rarity-ssr .card-finish{padding:7px 6px;margin-top:8px;border-radius:3px;background:#251738bd;color:#fff4cc}
.stage.rarity-ssr .card-sparkles i{color:#fff;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 9px #ffa9f4)}
.stage.rarity-ur{background:radial-gradient(ellipse,#d29a2820,transparent 72%)}
.stage.rarity-sr{background:radial-gradient(ellipse,#ec224433,transparent 72%)}
.stage.rarity-ssr{background:radial-gradient(ellipse at 20% 50%,#e14bbd33,transparent 65%),radial-gradient(ellipse at 80% 50%,#42d7f433,transparent 65%)}

.motion-option{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:18px;font-size:12px;color:#b3c6d7;cursor:pointer}
.motion-option input{accent-color:#e8c98d;width:16px;height:16px}
a.race-row{color:inherit;text-decoration:none}a.race-row:hover{color:#f2deb2;background:#ffffff06}a.race-row:hover>span:first-child{text-decoration:underline}
.demo-panel>div{flex-wrap:wrap}
@keyframes card-suspense{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-14px) rotate(7deg)}}
@keyframes light-turn{to{transform:rotate(360deg)}}
@keyframes frame-lock{from{opacity:0;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}
@keyframes trail-slide{to{transform:translateX(25%)}}
@keyframes slot-slam{0%{opacity:0;transform:translateX(-100%) rotate(-12deg) scale(1.3)}65%{opacity:1;transform:translateX(2%) rotate(-7deg) scale(1.03)}82%{transform:translateX(-1%) rotate(-7deg)}100%{opacity:1;transform:translateX(0) rotate(-7deg)}}
@keyframes metal-sweep{0%,10%{background-position:100% 0}85%,100%{background-position:0% 0}}
@keyframes gather-light{from{opacity:0;transform:rotate(-80deg) scale(1.3)}to{opacity:1;transform:rotate(50deg) scale(.8)}}
@keyframes gather-ring{from{opacity:0;transform:scale(1.4)}40%{opacity:.8}to{opacity:1;transform:scale(.35)}}
@keyframes gold-breathe{from{box-shadow:inset 0 0 18px #ff941e66,0 0 12px #ffd47766}to{box-shadow:inset 0 0 50px #ff941eaa,0 0 35px #ffd477aa}}
@keyframes rush-impact{0%{opacity:0;transform:scale(2) rotate(-12deg)}22%,75%{opacity:1;transform:scale(1) rotate(-5deg)}100%{opacity:0;transform:scale(1.1) translateX(15%)}}
@keyframes jackpot-impact{from{opacity:0;transform:scale(1.7) rotate(8deg)}to{opacity:1;transform:scale(1) rotate(-3deg)}}
@keyframes card-open{0%{transform:rotateY(0) scale(1);filter:brightness(1)}60%{opacity:1;filter:brightness(2);transform:rotateY(65deg) scale(1.1)}100%{opacity:0;transform:rotateY(90deg) scale(1.2)}}
@keyframes gold-arrival{from{opacity:0;transform:rotateY(-90deg) scale(.85);filter:brightness(1.6)}to{opacity:1;transform:rotateY(0) scale(1);filter:brightness(1)}}
@keyframes reveal-ring{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.5)}}
@keyframes rainbow-flow{from{background-position:0% 50%}to{background-position:200% 50%}}
@keyframes holo-foil{from{background-position:0% 0%;transform:rotate(-15deg)}to{background-position:100% 100%;transform:rotate(15deg)}}
@keyframes holo-sweep{0%,10%{background-position:0 0,100% 0}85%,100%{background-position:5px 10px,0% 0}}
@keyframes card-twinkle{from{opacity:.35;transform:scale(.65) rotate(0)}to{opacity:1;transform:scale(1.2) rotate(35deg)}}
/* 大当たりの3パターン。光線ラッシュは既存の演出を使用。 */
.gold-gates,.rainbow-vortex{display:none;position:absolute;inset:0;pointer-events:none}
.variant-gates .fever-effects,.variant-vortex .fever-effects{z-index:3}
.variant-gates .fever-wheel{background:repeating-conic-gradient(#ffe19288 0deg 6deg,transparent 6deg 18deg);animation-duration:8s}
.variant-gates .gold-gates{display:block;z-index:2;perspective:800px}
.gate{position:absolute;top:6%;bottom:6%;width:50%;display:grid;place-items:center;border:7px double #ffe6a1;background:repeating-linear-gradient(45deg,transparent 0 16px,#fff1 17px 18px),linear-gradient(120deg,#5f350a,#d7a23f 25%,#fff0a3 48%,#9a6016 52%,#dcb74e 80%,#72400e);box-shadow:inset 0 0 0 5px #6f430e,inset 0 0 50px #421b1188,0 0 24px #ffd67077;backface-visibility:hidden}
.gate::before{content:'';position:absolute;inset:18px;border:3px double #ffefb1;clip-path:polygon(15% 0,85% 0,100% 10%,100% 90%,85% 100%,15% 100%,0 90%,0 10%)}
.gate span{font-size:clamp(55px,16cqw,110px);color:#fff0bc;text-shadow:2px 4px 0 #8e570e,0 0 20px #fff0b7}
.gate-left{left:0;transform-origin:left center}.gate-right{right:0;transform-origin:right center}
.fever-charge .gate-left{animation:gate-arrive-left .65s ease-out both}.fever-charge .gate-right{animation:gate-arrive-right .65s ease-out both}
.fever-rush .gate-left{animation:gate-open-left 1.1s ease-in-out both}.fever-rush .gate-right{animation:gate-open-right 1.1s ease-in-out both}
.jackpot .gold-gates{display:none}
.variant-gates .rush-word,.variant-vortex .rush-word{z-index:4}
.variant-vortex .fever-wheel{opacity:.4;background:repeating-conic-gradient(#ff56a177 0deg 10deg,#ffe36877 10deg 20deg,#62f7d477 20deg 30deg,#76baff77 30deg 40deg,#c485ff77 40deg 50deg,transparent 50deg 60deg)}
.variant-vortex .rainbow-vortex{display:grid;place-items:center;z-index:2}
.rainbow-vortex i{position:absolute;width:85%;aspect-ratio:1;border-radius:50%;background:conic-gradient(#ff478b,#ffe25e,#73f7b0,#54dafa,#a276ff,#ff478b);mask-image:radial-gradient(circle,transparent 57%,#000 58%,#000 63%,transparent 64%);filter:drop-shadow(0 0 12px #c88eff);animation:vortex-orbit 2.4s linear infinite}
.rainbow-vortex i:nth-child(2){width:65%;animation-direction:reverse;animation-duration:1.8s;opacity:.9}
.rainbow-vortex i:nth-child(3){width:45%;animation-duration:1.3s}
.rainbow-vortex b{font-size:100px;color:#fff3d0;text-shadow:0 0 24px #ffe0ac,0 0 45px #ff99ed;animation:vortex-star 1.8s ease-in-out both}
.fever-rush .rainbow-vortex{animation:vortex-burst 1.4s ease-out both}
.jackpot .rainbow-vortex{opacity:.35;transform:scale(1.2)}
@keyframes gate-arrive-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes gate-arrive-right{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes gate-open-left{from{transform:rotateY(0);opacity:1}to{transform:rotateY(-105deg);opacity:0}}
@keyframes gate-open-right{from{transform:rotateY(0);opacity:1}to{transform:rotateY(105deg);opacity:0}}
@keyframes vortex-orbit{from{transform:rotate(0) scale(.92)}50%{transform:rotate(180deg) scale(1.04)}to{transform:rotate(360deg) scale(.92)}}
@keyframes vortex-star{from{transform:scale(.3) rotate(-90deg);opacity:.3}to{transform:scale(1.2) rotate(0);opacity:1}}
@keyframes vortex-burst{from{transform:scale(.7);opacity:1}to{transform:scale(1.7);opacity:0}}
html:not(.motion-enabled) *,html:not(.motion-enabled) *::before,html:not(.motion-enabled) *::after{animation:none!important;transition:none!important}
html:not(.motion-enabled) .speed-lines,html:not(.motion-enabled) .fever-effects,html:not(.motion-enabled) .summon-light,html:not(.motion-enabled) .summon-ring{display:none}
@media(max-width:480px){.stage{min-height:470px;padding-inline:10px}.chance-banner small,.chance-banner span{font-size:9px;letter-spacing:2px}.cutin-trails span{font-size:9px;letter-spacing:4px}.impact-frame{inset:10px}.result{padding-inline:14px}.tier-hot .chance-banner strong{letter-spacing:8px}.reveal-label span{font-size:9px}}

@keyframes card-arrival{from{opacity:0;transform:rotateY(-90deg) scale(.94)}to{opacity:1;transform:rotateY(0) scale(1)}}
@keyframes opening-hold{from{transform:rotate(-4deg) scale(1)}to{transform:rotate(0) scale(1.06)}}

/* 勝率ベースの5段階。Rは青、URは当たり、SSRは専用の最終演出。 */
.tier-blue{--accent:#83d6ff;--glow:#32aaff44}
.tier-blue .chance-banner{border-block-width:4px;background:linear-gradient(100deg,#07192d,#143e68,#07192d)}
.tier-blue .chance-banner strong{background-image:linear-gradient(#d5f5ff,#55bfff 38%,#226fb1 49%,#8edfff 53%,#3eafff);-webkit-text-stroke:1px #b6ebff;filter:drop-shadow(2px 3px 0 #16385f) drop-shadow(0 0 10px #38aaff55)}
.tier-blue .impact-frame{box-shadow:none;opacity:.5}
.tier-blue .cutin-trails{display:none}
.tier-yellow .chance-banner strong{font-size:clamp(36px,12cqw,84px)}
.performance{margin:8px 0 0;font-size:10px;color:#d5e6f9;letter-spacing:.02em}
.rank-note{margin:5px 0 0;font-size:9px;color:#bfd0e3}
.branch #grade{font-size:10px;font-weight:500;color:inherit}
.stage.rarity-r .result{--metal:#9adcff;--ink:#d5f0ff;border-width:3px;background:repeating-linear-gradient(135deg,#9adeff11 0 2px,transparent 2px 12px),linear-gradient(135deg,#143755,#3d8cd0 32%,#145387 60%,#092943);box-shadow:inset 0 0 0 3px #143654,0 0 18px #4facff22,0 18px 45px #0008}
.stage.rarity-r .result::before{background:linear-gradient(115deg,transparent 30%,#d9f4ff33 45%,transparent 65%);background-size:300% 100%;animation:metal-sweep 8s ease-in-out infinite}
.stage.rarity-r{background:radial-gradient(ellipse,#3395e21a,transparent 72%)}
.stage.rarity-sr .result{border-width:4px}
.stage.rarity-ur .result{border-width:5px;box-shadow:inset 0 0 0 3px #7d4f14,inset 0 0 22px #ffde7455,0 0 38px #ffcd5466,0 18px 45px #0008}
.stage.rarity-ur .result::after{border:3px double #fff2bd;opacity:1}
.stage.rarity-ur .result::before{animation-duration:4s}
.hit-charge,.hit{--accent:#ffe17e;--glow:#ffd35166;background:radial-gradient(ellipse,#c8953344,#071426 75%)}
.hit-charge .summon-ring{animation:gather-ring 1s ease-in both}
.hit-charge .mystery{animation:charge .4s ease-in-out infinite alternate;box-shadow:0 0 45px #ffdc7066}
.hit .mystery{opacity:.15}
.hit .impact-frame,.hit .fever-effects{display:block}
.hit .fever-wheel{background:repeating-conic-gradient(#ffdc6855 0deg 8deg,transparent 8deg 25deg);animation-duration:8s}
.hit .reveal-label{display:block;animation:jackpot-impact .6s ease-out both;border-block-width:6px;background:linear-gradient(100deg,#5b3617,#96701f,#5b3617)}
.hit .reveal-label strong{color:#fff0a7;text-shadow:2px 3px 0 #7c4a14,0 0 20px #ffdf77}
#win-text{font-size:clamp(28px,11cqw,68px)}
.super-emblem{display:none;position:absolute;inset:0;z-index:6;pointer-events:none;align-items:center;justify-content:center;flex-direction:column;isolation:isolate;background:radial-gradient(ellipse,#100c32d9,#070d22aa 60%,transparent 80%)}
.super-emblem::before{content:'';position:absolute;width:94%;aspect-ratio:1;z-index:-1;border-radius:50%;background:repeating-conic-gradient(#ff6bc955 0deg 9deg,#ffdb7755 9deg 18deg,#7cf3dc55 18deg 27deg,#9e8aff55 27deg 36deg,transparent 36deg 45deg);mask-image:radial-gradient(circle,transparent 30%,#000 38%,transparent 70%);animation:light-turn 5s linear infinite}
.super-emblem strong{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(92px,35cqw,190px);font-style:italic;line-height:1.3;letter-spacing:5px;background:linear-gradient(120deg,#ffa1d4,#ffe994,#a8ffde,#98d4ff,#ceadff,#ffa1d4);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-stroke:2px #fff6d3;filter:drop-shadow(4px 6px 0 #59275a) drop-shadow(0 0 25px #e3abff);animation:rainbow-flow 2s linear infinite}
.super-emblem small{color:#ffedbd;font-size:10px;letter-spacing:4px}
.super-emblem span{color:#fff4db;font-size:12px;letter-spacing:1px}
.super-finale .super-emblem{display:flex;animation:jackpot-impact .7s ease-out both}
.super-finale .fever-effects,.super-finale .impact-frame{display:block}
.super-finale .mystery{opacity:.1}
.super-finale .gold-gates{display:none}
.stage.rarity-ssr .result{box-shadow:inset 0 0 0 3px #eaba62,0 0 0 3px #d891ff,0 0 38px #9affef88,0 0 75px #ef84ff66,0 20px 50px #0009}

.fortune-label{font-size:8px;letter-spacing:1px;color:var(--ink)}
/* 数字の帯そのものを縦に送り、右リールだけ長く減速させる。 */
.slot-machine{--symbol-height:112px;position:relative;z-index:5;width:min(100%,480px);padding:28px 20px;border:3px double #d4ba7f;border-radius:22px;background:radial-gradient(ellipse at top,#394052,#101b2e 70%);box-shadow:inset 0 0 25px #ffe3a011,0 20px 55px #0008}
.slot-heading{font-size:12px;letter-spacing:4px;color:#efdbad;margin:0 0 24px}
.slot-reels{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px;background:#050b16;border:1px solid #bba47a;border-radius:12px}
.slot-reels::after{content:'';position:absolute;left:4px;right:4px;top:50%;height:var(--symbol-height);transform:translateY(-50%);border-block:1px solid #e9b65788;pointer-events:none}
.slot-window{height:calc(var(--symbol-height) * 1.5);overflow:hidden;position:relative;border-radius:7px;background:linear-gradient(90deg,#e5d5bb,#fff9e8 50%,#d6c5a9);box-shadow:inset 0 0 10px #0006}
.slot-window::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#081222bb,transparent 28%,transparent 72%,#081222bb)}
.slot-strip{padding-top:calc(var(--symbol-height) * .25);transform:translateY(calc(var(--slot-end) * var(--symbol-height) * -1));will-change:transform}
.slot-strip span{--digit-depth:#720d26;height:var(--symbol-height);display:grid;place-items:center;font-family:Impact,'Arial Black',sans-serif;font-size:clamp(64px,23cqw,124px);line-height:1;font-weight:900;font-style:italic;color:#c5223c;-webkit-text-stroke:1px #fff0ce;paint-order:stroke fill;text-shadow:0 -1px 0 #fff4,1px 1px 0 var(--digit-depth),2px 2px 0 var(--digit-depth),3px 3px 0 var(--digit-depth),4px 4px 0 var(--digit-depth),5px 5px 0 var(--digit-depth),6px 7px 0 #30112c,8px 10px 5px #0007;transform-origin:50% 50%}
.slot-strip .slot-even{--digit-depth:#073778;color:#1565ca}
.slot-strip .slot-odd{color:#c5223c}
.slot-strip.looping{animation:reel-loop .6s linear infinite}
.slot-strip.rolling{animation:reel-roll var(--slot-duration) cubic-bezier(.12,.5,.16,1) both}
.stopped{outline:2px solid #e4c884;outline-offset:-2px}
.slot-message{min-height:2.8em;display:grid;place-items:center;margin:22px 0 8px;font-size:17px;font-weight:700;color:#ffe5ae;letter-spacing:1px}
.slot-caption{font-size:10px;color:#a5b6c9;margin:0;line-height:1.8}
.slot-reach{border-color:#ffe7a6;box-shadow:0 0 40px #ffd87544,inset 0 0 25px #ffdf8422}
.slot-reach .slot-window:last-child{box-shadow:0 0 22px #ffe8b377}
.slot-matched{border-color:#ffe799;box-shadow:0 0 65px #ffcf6877}
.slot-rainbow{background:linear-gradient(#141e35,#141e35) padding-box,conic-gradient(#ff85cb,#ffe590,#89ffcf,#83ceff,#c592ff,#ff85cb) border-box;border:4px solid transparent;box-shadow:0 0 60px #d99bff88}
.slot-rainbow .slot-message{color:#f4ceff}
.slot-rainbow .slot-target{background:linear-gradient(135deg,#ff387c 5%,#ffbf30 22%,#8bea57 38%,#26d9d2 52%,#348cff 67%,#b466fa 82%,#ff65b9 96%);background-size:200% 200%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;-webkit-text-stroke:1px #fff3ce}
.slot-matched .slot-target,.slot-rainbow .slot-target{position:relative;z-index:2;transform:scale(1.22);animation:slot-number-burst 700ms cubic-bezier(.16,1,.3,1) both;filter:drop-shadow(0 0 9px #ffe5a9)}
.slot-rainbow .slot-target{animation:slot-rainbow-burst 700ms cubic-bezier(.16,1,.3,1) both,slot-rainbow-shine 2s linear infinite;filter:drop-shadow(2px 3px 0 #6a286d) drop-shadow(2px 3px 0 #34144a) drop-shadow(0 0 9px #f4baff)}
@keyframes slot-rainbow-burst{from{transform:scale(1)}45%{transform:scale(1.3)}to{transform:scale(1.22)}}
@keyframes slot-rainbow-shine{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
.slot-matched .slot-reels,.slot-rainbow .slot-reels{box-shadow:0 0 28px #ffe29999,inset 0 0 16px #ffe29966}
.slot-matched::after,.slot-rainbow::after{content:'';position:absolute;inset:-12px;border:3px solid #ffe3a0;border-radius:28px;pointer-events:none;animation:slot-win-ring 1.1s ease-out both}
.slot-rainbow::after{border-color:#e7bcff;box-shadow:0 0 28px #a5edff,inset 0 0 28px #f5aaff}
@keyframes slot-number-burst{0%{transform:scale(1);filter:brightness(1)}45%{transform:scale(1.3);filter:brightness(1.6) drop-shadow(0 0 16px #ffe2a6)}100%{transform:scale(1.22);filter:brightness(1.12) drop-shadow(0 0 9px #ffe5a9)}}
@keyframes slot-win-ring{from{transform:scale(.96);opacity:1}to{transform:scale(1.18);opacity:0}}
@keyframes reel-roll{from{transform:translateY(calc(var(--slot-start) * var(--symbol-height) * -1))}to{transform:translateY(calc(var(--slot-end) * var(--symbol-height) * -1))}}
@keyframes reel-loop{from{transform:translateY(calc((var(--slot-end) + var(--slot-cycle) * 2) * var(--symbol-height) * -1))}to{transform:translateY(calc((var(--slot-end) + var(--slot-cycle)) * var(--symbol-height) * -1))}}
@media(max-width:480px){.slot-machine{--symbol-height:86px;padding:24px 10px}.slot-reels{gap:6px;padding:8px}.slot-heading{font-size:10px;letter-spacing:3px}.slot-message{font-size:14px}.slot-caption{font-size:9px}}
.tier-hot .chance-banner strong{font-size:clamp(48px,18cqw,112px);letter-spacing:4px}
/* リールを演出エリア全面に配置。帯の原点を窓の中心に合わせる。 */
.slot-machine{--symbol-height:clamp(140px,38vw,240px);position:absolute;inset:0;width:100%;height:100%;padding:12px;display:grid;border-radius:22px}
.slot-reels{height:100%;min-height:0;padding:10px;gap:10px}
.slot-window{height:100%;min-height:0}
.slot-strip{position:absolute;top:50%;left:0;right:0;margin-top:calc(var(--symbol-height) * -.5);padding-top:0}
.slot-strip span{font-style:normal;font-size:clamp(86px,23cqw,170px);text-align:center;padding-right:6px}
.boat-pass{position:absolute;inset:0;z-index:9;overflow:hidden;pointer-events:none;background:linear-gradient(transparent 35%,#4fcdea22 70%,transparent)}
.boat-runner{position:absolute;top:23%;left:-105%;width:95%;filter:drop-shadow(0 8px 8px #002b4a88);animation:boat-cross 1.7s cubic-bezier(.15,.5,.55,1) both}
.boat-runner svg{display:block;width:100%;height:auto}
@keyframes boat-cross{0%{left:-105%;transform:rotate(-4deg)}50%{transform:translateY(-8px) rotate(-2deg)}100%{left:115%;transform:translateY(3px) rotate(1deg)}}
@media(max-width:480px){.slot-machine{padding:8px}.slot-reels{padding:6px;gap:6px}}
/* 数字の側面と光沢面を分けて、厚みのある立体文字にする。 */
.slot-strip span{position:relative;text-shadow:1px 1px 0 var(--digit-depth),2px 2px 0 var(--digit-depth),3px 3px 0 var(--digit-depth),4px 4px 0 var(--digit-depth),5px 5px 0 var(--digit-depth),6px 6px 0 var(--digit-depth),7px 7px 0 var(--digit-depth),8px 8px 0 #29152e,9px 9px 0 #29152e,11px 13px 5px #0009}
.slot-strip span::before{content:attr(data-digit);position:absolute;inset:0;display:grid;place-items:center;padding-right:6px;background:linear-gradient(#fff2d7 17%,#ff6577 32%,#c9193b 49%,#7e0928 51%,#f6405c 62%,#b31135 83%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;-webkit-text-stroke:1px #fff0c7;pointer-events:none}
.slot-strip .slot-even::before{background-image:linear-gradient(#e9ffff 17%,#67caff 32%,#1976d5 49%,#073b91 51%,#43a5fa 62%,#1254ad 83%)}
.slot-rainbow .slot-target::before{background-image:linear-gradient(135deg,#ff387c 5%,#ffbf30 22%,#8bea57 38%,#26d9d2 52%,#348cff 67%,#b466fa 82%,#ff65b9 96%);background-size:200% 200%;animation:slot-rainbow-shine 2s linear infinite}
/* 上下だけを発光させ、中央の当選ラインには光をかぶせない。 */
.slot-window::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(to bottom,#fff3bd 0%,#ffe594cc calc(50% - var(--symbol-height) / 2 - 14px),transparent calc(50% - var(--symbol-height) / 2),transparent calc(50% + var(--symbol-height) / 2),#ffe594cc calc(50% + var(--symbol-height) / 2 + 14px),#fff3bd 100%)}
.slot-reach .slot-window::before{opacity:.65;animation:slot-reach-glow 1.5s ease-in-out infinite alternate}
.slot-reach .slot-reels::after{z-index:5;border-block:2px solid #ffe99c;box-shadow:0 -7px 17px #ffdf8577,0 7px 17px #ffdf8577}
.slot-final .slot-window::before{opacity:.95;animation:slot-final-glow .65s ease-in-out infinite alternate}
.slot-final .slot-reels::after{border-color:#fffbe6;box-shadow:0 -10px 28px #ffe18ddd,0 10px 28px #ffe18ddd}
.slot-celebrate{border:4px solid #eec7ff;background:linear-gradient(125deg,#ff68b5,#ffe68a,#80ffd1,#78cfff,#c296ff,#ff68b5);background-size:300% 300%;box-shadow:inset 0 0 32px #ffdcff,0 0 45px #e59fff,0 0 75px #91e9ff;animation:slot-rainbow-shine 2s ease-in-out infinite}
.slot-celebrate .slot-window{background:linear-gradient(150deg,#ffd0eb,#fff0b0,#c5ffe1,#b1e7ff,#e4c7ff);box-shadow:inset 0 0 26px #fff9,0 0 20px #f5baff}
.slot-celebrate .slot-window::before{opacity:.65;background:linear-gradient(135deg,#ff76bf99,#ffe08799,#80ffd399,#82ccff99,#c89aff99);background-size:250% 250%;mask-image:linear-gradient(#000,transparent calc(50% - var(--symbol-height) / 2),transparent calc(50% + var(--symbol-height) / 2),#000);animation:slot-rainbow-shine 1.8s ease-in-out infinite}
.slot-celebrate .slot-reels{background:linear-gradient(120deg,#f49ccc,#fff0ac,#8eead8,#a1c9ff,#d7a1ff);box-shadow:0 0 35px #e4b1ff,inset 0 0 25px #fff9}
@keyframes slot-reach-glow{from{opacity:.35}to{opacity:.75}}
@keyframes slot-final-glow{from{opacity:.7;filter:brightness(1)}to{opacity:1;filter:brightness(1.45)}}
/* R・SR・URの予告は、装飾文字ではなく水平なゴシック体で読みやすくする。 */
.stage:is(.tier-blue,.tier-red,.tier-yellow) .chance-banner{inset:auto 0;transform:none;animation:plain-cutin .35s ease-out both;border-block:2px solid var(--accent)}
.stage:is(.tier-blue,.tier-red,.tier-yellow) .chance-banner strong{font-family:'Noto Sans JP','Yu Gothic','Meiryo',sans-serif;font-size:clamp(32px,10cqw,64px);font-style:normal;font-weight:600;line-height:1.6;letter-spacing:.04em;color:#fff7e8;background:none;-webkit-text-fill-color:currentColor;-webkit-text-stroke:0;filter:none;text-shadow:none}
.stage:is(.tier-blue,.tier-red,.tier-yellow) .chance-banner span{font-size:12px;letter-spacing:.08em;line-height:1.8;text-shadow:none}
@keyframes plain-cutin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* 絵柄リール。VとBARは成立後も青を維持し、周囲を虹色にする。 */
.slot-strip .slot-icon{--digit-depth:#073778;font-family:'Segoe UI Emoji','Apple Color Emoji',sans-serif;font-size:clamp(48px,16cqw,112px);color:#1565ca;-webkit-text-fill-color:initial;-webkit-text-stroke:0;text-shadow:0 4px 3px #0004;background:none;padding-right:0}
.slot-strip .slot-icon::before{content:none}
.slot-strip .slot-v,.slot-strip .slot-bar,.slot-strip .slot-redbar{font-family:Impact,'Arial Black',sans-serif;font-weight:900;color:#147bd1;-webkit-text-stroke:1px #f8e9a7;text-shadow:2px 2px 0 #064b89,4px 4px 0 #04315a,6px 6px 0 #02203f,8px 9px 4px #0008}
.slot-strip .slot-v{font-size:clamp(86px,24cqw,166px);font-style:italic;padding-right:8px}
.slot-strip .slot-bar{font-size:clamp(25px,7.5cqw,56px);letter-spacing:-1px}
.slot-strip .slot-v::before,.slot-strip .slot-bar::before{content:attr(data-digit);background-image:linear-gradient(#e2fcff 17%,#65ccff 32%,#1165b4 49%,#073568 51%,#2e9de7 66%,#07588c 83%);animation:none}
.slot-strip .slot-bar::before{inset:calc(50% - 28px) 3px;height:56px;padding:0;border:3px double #e7d78d;border-radius:5px;box-shadow:0 3px 0 #053352,0 5px 7px #0006}
.slot-strip .slot-redbar{font-size:clamp(36px,11cqw,70px);color:#d92f64;text-shadow:3px 4px 0 #770d32}
.slot-rainbow .slot-icon.slot-target{background:none;-webkit-text-fill-color:initial}