*{box-sizing:border-box}body{margin:0;background:#fff7e7;color:#153e49;font-family:"Yu Gothic",Meiryo,sans-serif;font-size:16px}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:default}button:focus-visible,canvas:focus-visible{outline:3px solid #00647c;outline-offset:3px}main{max-width:850px;margin:auto}.machine{position:relative;width:min(100%,750px);margin:0 auto;aspect-ratio:1086/1448;isolation:isolate}.cabinet-art{display:block;width:100%;height:100%}.marquee{position:absolute;left:21%;top:3.5%;width:58%;height:9%;display:flex;align-items:center;justify-content:center;flex-direction:column}.marquee span{font-size:14px;font-weight:800}.marquee h1{font-size:clamp(25px,5vw,48px);line-height:1.15;margin:4px 0;color:#153f4b;text-shadow:0 2px #fff}.marquee h1 span{font-size:inherit;color:#bf2c23}.screen{position:absolute;left:11.6%;top:17.2%;width:76.8%;height:33.6%;overflow:hidden;border-radius:12px}.screen canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.hud{position:absolute;top:7px;left:7px;right:7px;display:flex;justify-content:space-between;pointer-events:none;font-size:14px;gap:5px}.hud>span{background:#fff9ebf5;border:1px solid #b09652;border-radius:5px;padding:3px 7px;box-shadow:0 2px 3px #583e332e}.hud b{font-size:18px;color:#ac3226}#cue{position:absolute;left:5%;right:5%;top:45%;margin:0;text-align:center;background:#fff9e9ed;border:1px solid #bf9c52;padding:4px 6px;border-radius:6px;font-size:14px;font-weight:800;pointer-events:none}.hardware{position:absolute;background:transparent;border:0;min-width:44px;min-height:44px;font-weight:900}.insert{left:21.2%;top:54.3%;width:11.3%;height:12%}.insert span{position:absolute;top:95%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff8df;border:1px solid #9e864f;border-radius:4px;padding:2px 4px;font-size:14px}.insert:active:not(:disabled){filter:brightness(1.3)}.action{left:67.3%;top:55.6%;width:12.5%;height:9.3%;border-radius:50%;color:white;text-shadow:0 2px 2px #681414;font-size:clamp(16px,2.7vw,23px);padding:0;line-height:1.2}.action:active:not(:disabled){background:#b4222260;transform:translateY(2px)}.action:disabled{color:#fff9d8}.cancel{position:absolute;left:38%;top:63%;background:#fff6d9;border:1px solid #967f42;border-radius:4px;min-height:44px;font-size:14px;padding:4px 9px}.lamps{position:absolute;top:55.24%;left:37.2%;width:24.1%;height:2.3%;display:flex;justify-content:space-around;align-items:center;pointer-events:none}.lamps i{width:11%;aspect-ratio:1;border-radius:50%;background:#402b28;box-shadow:inset 0 2px 3px #0009}.lamps i.on{background:#ffe77b;box-shadow:0 0 8px #ffdc57,inset 0 1px 3px #fff}.collect{left:25.5%;top:77.7%;width:46%;height:10.5%;border-radius:8px}.collect>span{position:absolute;top:-12%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:14px;background:#153f4b;border:2px solid #fff8dc;color:white;padding:3px 6px;border-radius:4px}.collect.ready{box-shadow:0 0 0 4px #ffdc5e,inset 0 0 20px #f4c85b55}.collected{position:absolute;left:74%;top:87%;font-size:14px;font-weight:800;background:#fff4d5;padding:4px;border-radius:4px}.collected b{display:block;text-align:center;font-size:19px}#coins{display:flex;justify-content:center;align-items:center;height:100%}#coins img{width:clamp(27px,6vw,46px);margin-left:-12px;filter:drop-shadow(0 2px 1px #0006)}.flying-coin{position:absolute;left:26.5%;top:51%;width:clamp(40px,7vw,60px);transform:translateX(-50%);animation:insert-medal .9s ease-in forwards;pointer-events:none;z-index:5}@keyframes insert-medal{0%{transform:translate(-50%,-28px) rotateY(0);opacity:1}60%{transform:translate(-50%,12px) rotateY(78deg);opacity:1}100%{transform:translate(-50%,60px) rotateY(86deg);opacity:0}}.guide{margin:16px;padding:24px;border:2px solid #d7b568;background:#fffdf6;border-radius:12px;font-size:16px;line-height:1.9}.guide h2{font-size:22px}.development{padding-top:16px;border-top:1px solid #d7b568}.guide button{background:#fff1bd;border:1px solid #8f7538;padding:12px;border-radius:6px}@media(prefers-reduced-motion:reduce){.flying-coin{animation-duration:.12s}.collect.ready{box-shadow:0 0 0 3px #e0a900}}@media(max-width:360px){.marquee span{font-size:14px}.marquee h1{font-size:23px}.hud{left:3px;right:3px;top:3px}.hud>span{padding:1px 4px}.cancel{left:39%;top:63%;padding:2px 5px}.collected{left:73%;top:87%;padding:2px}.guide{padding:16px}}

/* 小さい筐体でも操作文字と受取表示を物理パーツからはみ出させない。 */
.action{left:65.8%;width:15.5%;font-size:16px;white-space:nowrap}.collected{top:auto;bottom:7.8%;left:74%;width:23%;text-align:center;line-height:1.4}.collected b{display:inline-block;margin-right:4px}.hud{font-size:14px}.hud>span{padding:1px 4px}
.collected{min-width:78px}.collected>span{display:block;white-space:nowrap}
canvas:focus-visible{outline:3px solid #ffcf35;outline-offset:-3px}
main{container-type:inline-size}.sound-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.sound-controls span{font-size:14px}.sound-controls button[aria-pressed=true]{background:#143e48;color:white}.guide{overflow-wrap:anywhere}
/* 拡大で筐体が300px未満になった場合は操作を読める順序に並べる。 */
@container(max-width:299px){
 .machine{aspect-ratio:auto;padding:12px;display:flex;flex-direction:column;gap:12px;background:#fff0c3;border:4px solid #b32b22;border-radius:16px}
 .cabinet-art{display:none}.marquee{position:static;width:100%;height:auto;text-align:center}.marquee h1{font-size:25px;overflow-wrap:anywhere}
 .screen{position:relative;left:auto;top:auto;width:100%;height:auto;border:3px solid #715d3c;border-radius:6px;display:flex;flex-direction:column;background:#fff7df}.screen canvas{height:auto;aspect-ratio:1000/560;order:2}.hud{position:static;flex-wrap:wrap;font-size:14px;padding:4px;order:1}.hud>span{max-width:100%}#cue{position:static;padding:6px;font-size:14px;order:3}
 .lamps{position:static;width:100%;height:24px;padding:0 18px;background:#143e48;border-radius:6px}.lamps i{width:18px}
 .hardware,.cancel,.collected{position:static;width:100%;height:auto;min-width:0;left:auto;top:auto;bottom:auto;transform:none}
 .insert,.action,.cancel{min-height:48px;background:#fff8dc;border:2px solid #8b6938;border-radius:8px}.insert span,.collect>span{position:static;display:block;transform:none;white-space:normal;font-size:16px}.insert span{border:0;background:transparent}
 .action{background:#b72820;color:white;font-size:18px}.cancel{font-size:16px}.collect{min-height:68px;border:3px solid #715d3c;background:#173d45}.collect>span{border:0;padding:6px;background:transparent}.collected{background:#fff8df;padding:6px;font-size:14px}
 .flying-coin{display:none}.guide{margin:12px 4px;padding:12px}.guide h2{font-size:20px}
}

.game-links{display:flex;flex-wrap:wrap;gap:12px}.guide a{color:#005c76;text-underline-offset:3px}