body[data-scene="id"] .control-panel{animation:drawSceneArrival .55s ease-out both}
.id-stage{width:100%;padding:24px 16px;background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:8px 8px 0 var(--pink)}
.id-slots{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:5px}
.id-slot{display:flex;align-items:center;justify-content:center;min-width:0;height:90px;background:#f2f1f4;border:2px solid var(--ink);border-radius:7px;font:900 clamp(16px,3.8vw,36px)/1 Consolas,monospace;color:var(--ink)}
.id-slot[data-type="letter"]{background:#ffe5f1}
.id-slot.is-stopped{background:#c9f2e5;animation:popLock .35s ease-out both}
.id-slot[data-type="letter"].is-stopped{background:var(--blue)}
.id-stage.is-settled,body[data-scene="birthday"] .birthday-stage.is-settled{animation:idLock .45s ease-out both}
@keyframes idLock{0%{transform:scale(1);box-shadow:8px 8px 0 var(--pink)}45%{transform:scale(1.035);box-shadow:12px 12px 0 var(--yellow)}100%{transform:scale(1);box-shadow:8px 8px 0 var(--pink)}}
@media(max-width:680px){.id-stage{padding:18px 9px;box-shadow:5px 5px 0 var(--pink)}.id-slots{gap:2px}.id-slot{height:64px;border-width:1.5px;border-radius:4px}}
@media(prefers-reduced-motion:reduce){body[data-scene="id"] .control-panel,.id-slot.is-stopped,.id-stage.is-settled,body[data-scene="birthday"] .birthday-stage.is-settled{animation:none}}

.id-stage{position:relative;isolation:isolate}
.id-stage.is-rare{border-color:#b88b25;box-shadow:8px 8px 0 #ddbd61;background:#fffdf4}
.is-symbols .id-slot{height:auto;aspect-ratio:48/70}
.is-symbols .id-slot[data-symbol]{padding:0;border:0;background:transparent;border-radius:4px}
.is-symbols .id-slot > svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 0 #24202a20)}
.is-sevens .id-slot.is-stopped{background:#8fe6cb;color:#16483b;text-shadow:0 1px #fff;font-family:"Arial Black",sans-serif}
.id-glitch-glyph{transform-box:fill-box;transform-origin:50% 50%;animation:idGlitchWrithe var(--glitch-duration,1.7s) ease-in-out var(--glitch-delay,0s) infinite}
@keyframes idGlitchWrithe{0%,100%{transform:translate(0,0) rotate(-.8deg) scale(1,1)}17%{transform:translate(-1.1px,.7px) rotate(1.5deg) scale(.98,1.02)}39%{transform:translate(.8px,-.9px) rotate(-1.2deg) scale(1.025,.98)}58%{transform:translate(-.5px,-.3px) rotate(.6deg) scale(.99,1.015)}81%{transform:translate(1px,.8px) rotate(-1.5deg) scale(1.01,.99)}}
@media(prefers-reduced-motion:reduce){.id-glitch-glyph{animation:none}}
.is-yakuman .id-slot > svg{filter:drop-shadow(0 0 8px #d6ad40)}
.id-rare-overlay{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;overflow:hidden;pointer-events:none;isolation:isolate;background:#fff8;animation:rareOverlay 1.8s ease-in-out both}
.id-rare-overlay.is-paused{pointer-events:auto}
.id-rare-overlay.is-paused,.id-rare-overlay.is-paused:before,.id-rare-overlay.is-paused:after,.id-rare-overlay.is-paused .id-yakuman{animation-play-state:paused}
.id-rare-resume{position:absolute;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2;padding:12px 32px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:700 18px/1.4 "Yu Gothic","Meiryo",sans-serif;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.id-rare-resume:focus-visible{outline:3px solid var(--pink);outline-offset:5px}
.id-rare-overlay:after{pointer-events:none}
.id-rare-overlay:before{content:"";position:absolute;width:220vmax;height:220vmax;z-index:-1;background:repeating-conic-gradient(from 15deg,#ffe600a0 0deg 12deg,#fff0 12deg 24deg,#f5268740 24deg 28deg,#fff0 28deg 40deg);animation:rareRays 1.8s cubic-bezier(.15,.8,.25,1) both}
.id-rare-overlay:after{content:"";position:absolute;inset:0;z-index:1;background:#fff;animation:rareFlash .3s ease-out both}
.id-yakuman{width:min(1100px,94vw);text-align:center;transform:rotate(-7deg);animation:rareTitle 1.8s cubic-bezier(.2,.9,.3,1) both}
.id-yakuman b{display:block;padding:16px 8px;background:var(--yellow);border-block:5px solid var(--ink);box-shadow:0 9px 0 var(--pink),0 17px 0 var(--blue);color:var(--ink);font:900 clamp(30px,8.3vw,112px)/1.15 "Arial Black","Yu Gothic",sans-serif;letter-spacing:-.03em;text-shadow:3px 3px 0 #fff}
.id-ssr-text{display:inline-block;padding:.04em .12em;color:#f52687;text-shadow:none;-webkit-text-stroke:1.2px #24202a;paint-order:stroke fill;filter:drop-shadow(2px 3px 0 #fff) drop-shadow(0 0 8px #fff8)}
@supports (background-clip:text) or (-webkit-background-clip:text){.id-ssr-text{background-image:linear-gradient(105deg,#ff245b 0%,#ff8a00 16%,#ffe600 32%,#14df7e 48%,#00c8ff 64%,#7653ff 80%,#ff245b 100%);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:ssrRainbowFlow .433333s linear infinite}}
@keyframes ssrRainbowFlow{from{background-position:0% 50%}to{background-position:200% 50%}}
@media(prefers-reduced-motion:reduce){.id-ssr-text{animation:none}}
@keyframes rareOverlay{0%{opacity:0}9%,78%{opacity:1}100%{opacity:0}}
@keyframes rareRays{from{transform:rotate(-24deg) scale(.65)}to{transform:rotate(24deg) scale(1.1)}}
@keyframes rareFlash{from{opacity:.9}to{opacity:0}}
@keyframes rareTitle{0%{opacity:0;transform:translateX(-75vw) rotate(-15deg) scale(1.5)}18%{opacity:1;transform:translateX(0) rotate(-7deg) scale(1.06)}30%,75%{opacity:1;transform:translateX(0) rotate(-7deg) scale(1)}100%{opacity:0;transform:translateX(40vw) rotate(-4deg) scale(1.1)}}
@media(max-width:680px){.is-symbols .id-slots{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.is-symbols .id-slot{max-height:88px}.id-yakuman b{border-block-width:3px;box-shadow:0 6px 0 var(--pink),0 11px 0 var(--blue);text-shadow:2px 2px 0 #fff}}
@media(prefers-reduced-motion:reduce){.id-rare-overlay,.id-rare-overlay:before,.id-yakuman{animation:none}.id-rare-overlay:after{content:none}}
