/* 作り物（scripts/build.mjs）。直すのは src/screens/ */
.p3d{transition:transform .12s ease, box-shadow .12s ease}
.p3d:active{transform:translateY(5px)}
.tile{box-shadow:0 6px 0 #dbe4f0,0 14px 22px rgba(40,90,170,.10)}
.tile:active{box-shadow:0 1px 0 #dbe4f0,0 4px 8px rgba(40,90,170,.10)}
.red3d{box-shadow:0 6px 0 #244e9e,0 14px 22px rgba(52,102,201,.30)}
.red3d:active{box-shadow:0 1px 0 #244e9e,0 4px 8px rgba(52,102,201,.30)}
.rise{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}.d4{animation-delay:.24s}.d5{animation-delay:.30s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pulse{animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}100%{box-shadow:0 0 0 12px rgba(229,72,77,0)}}
.beat{animation:beat 1.4s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.ico3d{background:#3466c9;box-shadow:0 5px 0 #244e9e,0 10px 16px rgba(52,102,201,.35),inset 0 2px 0 rgba(255,255,255,.38),inset 0 -3px 0 rgba(0,0,0,.14)}
.ico3d svg{filter:drop-shadow(0 2px 0 rgba(0,0,0,.28))}
.slider{scroll-snap-type:x mandatory;scrollbar-width:none}
.slider::-webkit-scrollbar{display:none}
.slider>*{scroll-snap-align:start}
.ico-blue{background:#3466c9;box-shadow:0 5px 0 #244e9e,0 10px 16px rgba(52,102,201,.35),inset 0 2px 0 rgba(255,255,255,.38),inset 0 -3px 0 rgba(0,0,0,.12)}
.ico-aqua{background:#12b5a5;box-shadow:0 5px 0 #0c8a7e,0 10px 16px rgba(18,181,165,.35),inset 0 2px 0 rgba(255,255,255,.38),inset 0 -3px 0 rgba(0,0,0,.12)}
.ico-violet{background:#7b61ff;box-shadow:0 5px 0 #5a43d6,0 10px 16px rgba(123,97,255,.35),inset 0 2px 0 rgba(255,255,255,.38),inset 0 -3px 0 rgba(0,0,0,.12)}
.ico-amber{background:#f2a516;box-shadow:0 5px 0 #c27f05,0 10px 16px rgba(242,165,22,.38),inset 0 2px 0 rgba(255,255,255,.42),inset 0 -3px 0 rgba(0,0,0,.12)}
.ico-blue svg,.ico-aqua svg,.ico-violet svg,.ico-amber svg{filter:drop-shadow(0 2px 0 rgba(0,0,0,.22))}
.well{box-shadow:inset 0 3px 6px rgba(40,90,170,.10)}
.float{animation:float 3.2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(-6deg)}}
.busy{opacity:.6;pointer-events:none}
.knob{transition:left .28s cubic-bezier(.3,1.4,.5,1)}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}.d4{animation-delay:.24s}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.p3d{transition:transform .14s ease, box-shadow .14s ease}
.lift{transform:translateY(-6px)}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}
.spin{animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}
.bar{transition:width .5s cubic-bezier(.2,.8,.2,1)}
.swap{animation:swap .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes swap{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.big{box-shadow:0 6px 0 #244e9e,0 14px 22px rgba(52,102,201,.30),inset 0 2px 0 rgba(255,255,255,.3)}
.big:active{box-shadow:0 1px 0 #244e9e,0 4px 8px rgba(52,102,201,.30)}
.scroll{scrollbar-width:none}.scroll::-webkit-scrollbar{display:none}
.pop{animation:pop .38s cubic-bezier(.3,1.5,.5,1) both}
@keyframes pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
.swap{animation:swap .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tilt{animation:tilt .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes tilt{from{opacity:0;transform:perspective(700px) rotateY(-14deg) translateX(20px)}to{opacity:1;transform:perspective(700px) rotateY(-4deg)}}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.b-blue{background:#3466c9;box-shadow:0 6px 0 #244e9e,0 14px 22px rgba(52,102,201,.32),inset 0 2px 0 rgba(255,255,255,.35)}
.b-aqua{background:#12b5a5;box-shadow:0 6px 0 #0c8a7e,0 14px 22px rgba(18,181,165,.32),inset 0 2px 0 rgba(255,255,255,.35)}
.b-violet{background:#7b61ff;box-shadow:0 6px 0 #5a43d6,0 14px 22px rgba(123,97,255,.32),inset 0 2px 0 rgba(255,255,255,.35)}
.b-blue:active,.b-aqua:active,.b-violet:active{box-shadow:0 1px 0 rgba(0,0,0,.2),0 4px 8px rgba(0,0,0,.12)}
.ring{animation:ring 2.4s ease-in-out infinite}
@keyframes ring{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-14deg)}88%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}96%{transform:rotate(6deg)}}
.flip{animation:flip .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes flip{from{opacity:0;transform:perspective(600px) rotateX(-12deg) translateY(12px)}to{opacity:1;transform:none}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.pop{animation:pop .42s cubic-bezier(.3,1.5,.5,1) both}
.d1{animation-delay:.03s}.d2{animation-delay:.06s}.d3{animation-delay:.09s}.d4{animation-delay:.12s}.d5{animation-delay:.15s}.d6{animation-delay:.18s}.d7{animation-delay:.21s}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.p3d:active{transform:translateY(4px)}
.ico-aqua:active{box-shadow:0 1px 0 #0c8a7e}
.send3d{background:#3466c9;box-shadow:0 5px 0 #244e9e,0 10px 16px rgba(52,102,201,.35),inset 0 2px 0 rgba(255,255,255,.35)}
.send3d:active{box-shadow:0 1px 0 #244e9e}
.bubble{animation:bubble .35s cubic-bezier(.3,1.5,.5,1) both}
@keyframes bubble{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.dot{animation:dot 1.2s ease-in-out infinite}
@keyframes dot{0%,100%{opacity:.3}50%{opacity:1}}