/* 5b-C 見本。赤と表示寸法は仮。抽選・保存・演出の時間は既存のまま。 */
/* 5b-C3: 宇宙は演出用の台紙だけ。影の濃さは仮の見本値。 */
#singleMachine{background:#101d38 url('assets/felt/felt-space.webp') center/cover no-repeat;color:#F6F0E6}
#singleMachine #machineTitle,#singleMachine #machineHint{color:#F6F0E6;text-shadow:0 2px 4px #101d38}
#singleMachine .felt-machine{filter:drop-shadow(0 12px 8px #050c2180)}
#singleMachine .felt-machine{width:250px;max-width:100%;aspect-ratio:2/3;margin:0 auto 12px}
.real-machine-art{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#singleMachine #machineHandle{position:absolute;left:35%;top:53%;width:30%;height:20%;margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:50%}
#singleMachine #machineHandle span{width:100%;height:100%;border:0;background:transparent url('assets/machine/machine-handle.webp') center/contain no-repeat;box-shadow:none;transform:rotate(-25deg)}
#singleMachine #machineHandle:focus-visible{outline:3px solid #D7B76A;outline-offset:3px}
#singleMachine #machineHandle:disabled{opacity:1}
#singleMachine #machineCapsule{width:130px;height:130px;background:transparent url('assets/machine/capsule-yellow.webp') center/contain no-repeat}
#singleMachine #machineCapsule span,#singleMachine #machineCapsules span{display:none}
#singleMachine #machineCapsules i{background:transparent url('assets/machine/capsule-yellow.webp') center/contain no-repeat}
#singleMachine #machineCapsules i:nth-child(2n){background-image:url('assets/machine/capsule-pink.webp')}
/* 取り出し口から手元へ。時間はentry.jsの仮定数を使用。 */
#singleMachine.machine-dropped #machineCapsule{animation-name:realCapsuleDrop}
@keyframes realCapsuleDrop{0%{transform:translate(43px,-108px) scale(.38) rotate(-25deg);opacity:0}35%{transform:translate(43px,-92px) scale(.42) rotate(8deg);opacity:1}100%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){#singleMachine.machine-dropped #machineCapsule{animation-name:feltDropSoft}}

/* 6-B 仮の地域色。承認済みの機械・動きはそのまま。 */
#singleMachine.regional-capsule #machineCapsule {filter:hue-rotate(65deg)}
#regionalGacha {margin:16px 0;padding:14px;border:1px dashed #789078;border-radius:18px}
#regionalGacha p {overflow-wrap:anywhere}
#regionalResult {box-sizing:border-box;width:min(390px,calc(100% - 24px));text-align:center;color:#443C35;background:#F6F0E6 url('assets/felt/cloth.webp') center/360px}
#regionalResult .specialty-tag {margin:16px auto}
#regionalResult button {display:block;max-width:100%;margin:12px auto}

/* 8-B: 排出位置は実際の取り出し口と各ボタンの矩形から計算。 */
#machineOpenAll[hidden]{display:none}
#machineOpenAll{display:block;margin:0 auto 12px;min-height:44px}
#singleMachine #machineCapsules button{position:relative;display:block;width:100%;aspect-ratio:1;border:0;padding:0;border-radius:50%;background:transparent url('assets/machine/capsule-yellow.webp') center/contain no-repeat;cursor:pointer}
#singleMachine #machineCapsules button:nth-child(2n){background-image:url('assets/machine/capsule-pink.webp')}
#singleMachine #machineCapsules button[hidden]{display:block;visibility:hidden}
#singleMachine #machineCapsules button.ejected{animation:capsuleFromOutlet var(--effect-drop) ease-out both}
#singleMachine #machineCapsules button.opened{animation:none;background:#F6F0E6;border-radius:8px}
#machineCapsules button img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px}
#singleMachine.meal-capsule #machineCapsules button:not(.opened):after{content:'🍽️';position:absolute;inset:0;display:grid;place-items:center;font-size:16px}
#singleMachine.machine-dropped #machineCapsule{animation:realCapsuleDrop var(--effect-drop) ease-out both,entryBounce 1.4s ease-in-out var(--effect-drop) infinite}
@keyframes capsuleFromOutlet{from{transform:translate(var(--outlet-x),var(--outlet-y)) scale(.7);opacity:0}25%{opacity:1}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){
 #singleMachine.machine-turning #machineHandle span{animation:none}
 #singleMachine.machine-dropped #machineCapsule{animation:feltDropSoft var(--effect-drop) ease-out both}
 #singleMachine #machineCapsules button.ejected{animation:feltDropSoft var(--effect-drop) ease-out both}
}

#singleMachine #machineCapsules .capsule-new:after{content:'NEW';position:absolute;bottom:0;left:0;right:0;color:#735019;background:#F6F0E6dd;font-size:10px;font-weight:bold;border-radius:8px}
#singleMachine #machineCapsules .capsule-rare:before{content:'';position:absolute;inset:0;border-radius:8px;pointer-events:none;box-shadow:inset 0 0 16px #D7B76A;animation:feltBatchGleam 2s ease-out both}
@media(prefers-reduced-motion:reduce){#singleMachine #machineCapsules .capsule-rare:before{animation-name:feltRareSoft}}