*{box-sizing:border-box}
body{margin:0;color:#2a2328;background:#fdf6f8;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif}
button{font:inherit;color:inherit;cursor:pointer;border:0;border-radius:8px;background:#f3f4f6;min-height:44px}
button:focus-visible{outline:3px solid #4f84bf;outline-offset:2px}
button:disabled{cursor:default;opacity:.5}
.shoot-shell{max-width:450px;margin:auto;background:#fff}
.machine{height:calc(100svh - var(--shoot-header-height,96px));min-height:400px;max-height:850px;display:flex;flex-direction:column;padding:0 8px calc(8px + env(safe-area-inset-bottom));gap:6px}
.stage{position:relative;isolation:isolate;overflow:hidden;flex:1;min-height:0;border-radius:12px;background:repeating-linear-gradient(90deg,#d5dcdf18 0 1px,transparent 1px 36px),linear-gradient(#284047,#16282f);touch-action:none;user-select:none;-webkit-user-select:none;border:3px solid #a68a58}
.stage:before{content:"";position:absolute;inset:8px;border:1px solid #c9a96666;border-radius:6px;pointer-events:none}
.shelf{position:absolute;left:0;right:0;height:4%;background:linear-gradient(#dfc293,#ac8455 40%,#765438 41%);box-shadow:0 8px 14px #0005;z-index:0}
.shelf.one{top:40.38%}
.shelf.two{top:76.92%}
.hud{position:absolute;top:10px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;color:#fff;gap:8px;z-index:5;font-size:13px;font-weight:700;pointer-events:none}
.hud span{background:#15252bba;padding:5px 8px;border-radius:8px}
.prize{position:absolute;width:23.89%;min-height:0;padding:0;background:none;border:0;border-radius:0;transform:translateX(-50%) scaleY(var(--projection,1)) rotate(var(--lean,0deg)) scaleY(var(--inverse-projection,1));transform-origin:50% 100%;transition:left .24s,transform .35s;z-index:2;touch-action:none}
.prize-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.prize-art img{position:absolute;max-width:none;display:block;pointer-events:none}
.prize{filter:drop-shadow(0 6px 3px #0006)}
.prize .balance{position:absolute;bottom:-6px;left:20%;width:60%;height:3px;background:#ffffff38;border-radius:3px;overflow:hidden}
.balance i{height:100%;display:block;width:var(--damage,0%);background:#f1c66e}
.prize.figure:after{content:"✦";position:absolute;right:0;top:0;color:#ffe0a2;font-size:18px}
.prize.hit{animation:wobble .4s}
.prize.fallen{animation:fall .65s forwards;pointer-events:none;z-index:4}
.prize.gone{visibility:hidden}
.sight{position:absolute;left:50%;top:30%;width:40px;height:40px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:6;filter:drop-shadow(0 1px 2px #000)}
.sight:before,.sight:after{content:"";position:absolute;background:#fff}
.sight:before{width:2px;height:52px;left:17px;top:-8px}
.sight:after{height:2px;width:52px;top:17px;left:-8px}
.landing{position:absolute;width:7px;height:7px;border:1px solid #fff;background:#edc86a;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:7}
.trail{position:absolute;height:5px;width:5px;border-radius:50%;background:#f5deaf;box-shadow:0 0 12px 4px #ffe7af;left:50%;top:96%;pointer-events:none;z-index:7}
.impact{position:absolute;font-size:34px;color:#ffdd85;transform:translate(-50%,-50%);animation:spark .45s forwards;pointer-events:none;z-index:8}
.gun{position:absolute;left:calc(50% - 16px);bottom:-12px;height:15%;width:32px;border:4px solid #7a7365;border-radius:12px 12px 0 0;background:linear-gradient(90deg,#454951,#a3a4a6 45%,#484d54);transform:rotate(var(--gun-angle,0deg));transform-origin:50% 100%;box-shadow:0 0 0 6px #3b3028;pointer-events:none}
.message{position:absolute;bottom:15%;left:8px;right:8px;margin:0;text-align:center;color:#fff;font-size:13px;text-shadow:0 1px 4px #000;pointer-events:none;z-index:6}
.controls{display:flex;gap:6px;align-items:stretch}
.tool{width:48px;flex-shrink:0;font-size:21px}
.fire{flex:1;position:relative;overflow:hidden;min-height:64px;background:#eef0f3;touch-action:none;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px;font-weight:700}
.fire svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:2}
.fire .meter{position:absolute;bottom:0;left:0;height:6px;background:#bb9150;width:var(--power,18%)}
.fire.charging{background:#f7e5bd}
.fire small{font-size:10px;font-weight:400}
.fire-copy{display:grid;gap:2px}
.result{position:absolute;inset:0;z-index:10;background:#172a30e8;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:12px}
.result[hidden]{display:none}
.result h2,.result p{margin:0}
.result h2{font-size:22px}
.result .won-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:300px;gap:4px}
.won-row img{width:100%;height:min(14svh,96px);object-fit:contain}
.result button{width:100%;max-width:250px;font-weight:700;color:#2a2328}
.get{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;z-index:9;background:radial-gradient(ellipse,#fff0d35c,transparent 65%);animation:reveal .9s forwards}
.get img{width:55%;height:60%;object-fit:contain;filter:drop-shadow(0 4px 15px #ffe6a69c)}
.get strong{font-size:32px;color:#ffdf9b;text-shadow:0 2px 3px #302517}
.get span{font-size:13px;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
dialog{width:calc(100% - 24px);max-width:420px;max-height:85svh;border:0;border-radius:12px;color:#2a2328;padding:16px;background:#fff}
dialog::backdrop{background:#15222d99}
dialog header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
dialog h2{font-size:17px;margin:0}
dialog header button{width:44px;font-size:22px}
.album{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.album-item{background:#f3f4f6;border-radius:8px;padding:8px 4px;text-align:center}
.album-item img{width:100%;height:115px;object-fit:contain}
.album-item.unowned img{filter:grayscale(1);opacity:.3}
.album-item span{display:block;font-size:11px}
.album-item b{font-size:12px}
.help-steps{display:grid;gap:16px;font-size:14px}
.help-steps p{margin:0}
.help-steps b{font-size:22px;display:block;margin-bottom:4px}
.save-note{font-size:12px;color:#6e626a;margin:8px}
.save-note:empty{display:none}
html[data-audience=female] .stage{border-color:#c8ac99;background:repeating-linear-gradient(90deg,#fff2 0 1px,transparent 1px 36px),linear-gradient(#b9b3b4,#8c9299)}
html[data-audience=female] .shelf{background:linear-gradient(#f1dbbf,#c8a584 40%,#9d7d63 41%)}
@keyframes wobble{20%{rotate:-8deg}
50%{rotate:7deg}
80%{rotate:-3deg}
}
@keyframes fall{to{translate:0 160px;rotate:65deg;opacity:0}
}
@keyframes spark{to{scale:2;opacity:0}
}
@keyframes reveal{0%{opacity:0;scale:.65}
18%,70%{opacity:1;scale:1}
100%{opacity:0;scale:1.08}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
.get{animation:none!important}
}

.image-fallback{display:flex;height:100%;align-items:center;justify-content:center;border-radius:12px;background:#eee3d4;color:#352f2c;font-size:12px;padding:6px}


.preview-art{height:min(58svh,420px);display:flex;justify-content:center;align-items:center;background:#f3f4f6;border-radius:8px}
.preview-art img{width:100%;height:100%;object-fit:contain}
.preview-dialog p{text-align:center;font-size:13px;margin-bottom:0}

.prize.targeted .prize-art{outline:2px solid #ffe0a2;outline-offset:3px;border-radius:8px}
.sight.on-target{border-color:#ffe0a2}
.sight.on-target:before,.sight.on-target:after{background:#ffe0a2}
.fire.ready{background:#f7e5bd;box-shadow:inset 0 0 0 2px #bb9150}
.fire.ready .meter{height:8px}
.prize-art img[hidden]{display:none}