﻿.pr-layout { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .pr-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.pr-banner { min-height: 44px; }
.pr-odds { margin: 0; text-align: center; font-weight: 800; color: var(--text-2); font-size: 15px; word-break: keep-all; }
.pr-fair { line-height: 1.6; }

/* 로켓 아래의 평평한 스위치 패널. 기존 통·칼·인형 표현을 사용하지 않음. */
.pr-stage { position: relative; width: min(330px, 100%); margin: 0 auto; padding-top: 156px; }
.pr-barrel { position: relative; }
.pr-pirate {
  position: absolute; left: 50%; top: 0; width: 108px; z-index: 2; pointer-events: none;
  transform: translate(-50%, -100%); transform-origin: 50% 75%;
}
.pr-pirate svg { display: block; width: 100%; height: auto; }
.pr-flame { opacity: .25; }
.pr-pirate.pr-peek { animation: pr-peek .45s ease-in-out; }
.pr-pirate.is-nervous { animation: pr-shiver .07s linear infinite; }
.pr-pirate.is-launch { animation: pr-launch 1.3s ease-out forwards; }
.pr-pirate.is-launch .pr-flame { opacity: 1; }
.pr-wood {
  position: absolute; inset: 0; border-radius: 22px; border: 3px solid #4b608d;
  background: linear-gradient(145deg, #263957, #16243e);
  box-shadow: inset 0 3px 0 #6178a0, 0 10px 0 #0d172c;
}
.pr-holes {
  position: relative; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 10px; padding: 20px 16px;
}
.pr-hole {
  position: relative; min-width: 44px; height: 52px; padding: 0; border: 1px solid #5e769a;
  background: #344a6a; color: #eaf5ff; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 3px 0 #101e36;
}
.pr-hole-in { font-size: 17px; font-weight: 800; }
.pr-hole:hover:not(:disabled) { background: #48658d; }
.pr-hole:focus-visible { outline: 3px solid #ffd66b; outline-offset: 3px; }
.pr-hole:disabled { cursor: default; }
.pr-hole.is-stabbed .pr-hole-in { visibility: hidden; }
.pr-sword { position: absolute; inset: 5px; pointer-events: none; animation: pr-stab .25s ease-out both; }
.pr-sword svg { display: block; width: 100%; height: 100%; }
.pr-grip { fill: var(--c, #2f80ed); stroke: #e0f4ff; stroke-width: 2; }
.pr-barrel.pr-wobble { animation: pr-wobble .35s ease-in-out; }
@keyframes pr-stab { from { transform: scale(.65); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pr-wobble { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(2px); } }
@keyframes pr-peek { 0%, 100% { transform: translate(-50%, -100%); } 45% { transform: translate(-50%, -108%); } }
@keyframes pr-shiver { 0%, 100% { transform: translate(-51%, -100%); } 50% { transform: translate(-49%, -101%); } }
@keyframes pr-launch {
  0% { transform: translate(-50%, -100%); opacity: 1; }
  20% { transform: translate(-50%, -92%); opacity: 1; }
  100% { transform: translate(-50%, -180%) scale(.8); opacity: 0; }
}
.game-shell.is-full .pr-layout { flex: 1; align-content: center; }
@media (prefers-reduced-motion: reduce) {
  .pr-pirate, .pr-sword, .pr-barrel { animation: none !important; }
  .pr-pirate.is-launch { opacity: .35; }
}
