/* 射的固有のスタイル（共通部分は assets/css/game.css） */

.choices small { font-size: 0.72rem; color: var(--ink-soft); }

.hud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; font-weight: 700; min-height: 2.4em; }
.hud-item { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; }
.hud-item b { font-size: 1.2rem; color: var(--red); }
.corks .art { width: 20px; height: 20px; vertical-align: middle; }
.corks .used { opacity: 0.2; }
.bag { display: flex; flex-wrap: wrap; gap: 2px; }
.bag .art { width: 30px; height: 30px; animation: pop 0.4s ease-out; }

/* ---------- 屋台（一人称） ---------- */
.stall {
  position: relative;
  aspect-ratio: 900 / 600;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: radial-gradient(ellipse at 50% 40%, #6b3030, #3a1a1a 70%);
  cursor: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.roof {
  position: absolute; left: 0; right: 0; top: 0; height: 9%;
  background: repeating-linear-gradient(90deg, var(--red) 0 7%, #fff 7% 14%);
  border-bottom: 3px solid var(--ink);
  z-index: 3;
}
.lamps {
  position: absolute; left: 0; right: 0; top: 9%; height: 5%;
  background: radial-gradient(ellipse 14px 16px at 50% 50%, #ffcf6b 0 90%, transparent 100%) 0 0 / 12.5% 100% repeat-x;
  filter: drop-shadow(0 0 8px rgba(255, 200, 100, 0.9));
  z-index: 3;
}
/* 棚（上辺 y = 190 / 320 / 450 ＝ 31.7% / 53.3% / 75%） */
.shelf {
  position: absolute; left: 8%; right: 8%;
  height: 3.2%;
  background: linear-gradient(#c94a3a, #a8382a);
  border: 3px solid var(--ink);
  border-radius: 4px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.shelf.s1 { top: 31.7%; }
.shelf.s2 { top: 53.3%; }
.shelf.s3 { top: 75%; }

.prize {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 2;
}
.prize .inner {
  width: 100%; height: 100%;
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--p, 0) * -7px)) scale(calc(1 - var(--p, 0) * 0.12));
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
  transition: transform 0.2s;
}
.prize .art { display: block; width: 100%; height: 100%; }
.prize .art-svg { width: 100%; height: 100%; }
.prize.wobble .art { animation: wobble 0.5s ease-out; transform-origin: 50% 100%; }
@keyframes wobble {
  20% { rotate: calc(var(--w, 6) * -1deg); } 45% { rotate: calc(var(--w, 6) * 0.6deg); }
  70% { rotate: calc(var(--w, 6) * -0.3deg); } 100% { rotate: 0deg; }
}
.prize.fall .inner { animation: fall 0.6s ease-in forwards; }
@keyframes fall {
  30% { transform: translateY(-10px) scale(0.9) rotate(-12deg); }
  100% { transform: translateY(40px) scale(0.6) rotate(-70deg); opacity: 0; }
}

.crosshair {
  position: absolute;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--ink);
  z-index: 6;
  pointer-events: none;
}
.crosshair::before, .crosshair::after {
  content: ""; position: absolute; background: #fff; box-shadow: 0 0 0 1px var(--ink);
}
.crosshair::before { left: 50%; top: -12px; bottom: -12px; width: 3px; margin-left: -1.5px; }
.crosshair::after { top: 50%; left: -12px; right: -12px; height: 3px; margin-top: -1.5px; }
.crosshair.steady { border-color: #ff6b6b; }
.crosshair.reloading { opacity: 0.35; }

.gun {
  position: absolute;
  left: 50%; bottom: -16%;
  width: 17%;
  aspect-ratio: 120 / 200;
  transform-origin: 50% 90%;
  transform: translateX(-50%) rotate(var(--a, 0deg));
  z-index: 5;
  transition: transform 0.08s;
  pointer-events: none;
}
.gun .art { display: block; width: 100%; height: 100%; }
.gun .art-svg { width: 100%; height: 100%; }
.gun.recoil { transform: translateX(-50%) rotate(var(--a, 0deg)) translateY(8%); }
.gun.reload { transform: translateX(-50%) rotate(var(--a, 0deg)) translateY(30%); transition: transform 0.25s; }

.cork-fly {
  position: absolute;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  z-index: 4;
  pointer-events: none;
}
.cork-fly .art { display: block; width: 100%; height: 100%; }

.big-text {
  position: absolute; left: 0; right: 0; top: 40%;
  text-align: center;
  font-size: clamp(1.6rem, 6vw, 3rem);
  font-weight: 900;
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
  pointer-events: none;
  z-index: 7;
}
.big-text.show { animation: pop 0.3s ease-out; }
.status { text-align: center; font-weight: 700; color: var(--ink-soft); min-height: 1.4em; }

.result-bag { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 8px; }
.result-bag .art { width: 40px; height: 40px; }
.ranking { text-align: left; margin: 8px auto 12px; max-width: 260px; padding-left: 1.6em; }
.ranking li { font-weight: 700; margin-bottom: 4px; }
.ranking li.me { color: var(--red); }
.ranking .wait { color: var(--ink-soft); font-weight: 500; }
.ranking .art { width: 1.5em; height: 1.5em; vertical-align: middle; }