:root {
  --psg-pink: #ff2f78;
  --psg-deep: #2a1020;
}

.psg-game, .psg-game * { box-sizing: border-box; }
.psg-game button, .psg-game a { font: inherit; }

.psg-launch-card {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  max-width: 680px;
  margin: 24px auto;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #2a1020, #6e183d);
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(42, 16, 32, .22);
}
.psg-launch-visual { min-height: 220px; background: #160c12; }
.psg-launch-visual img { display: block; width: 100%; height: 100%; object-fit: contain; }
.psg-launch-body { align-self: center; padding: 24px; }
.psg-launch-title { display: block; margin-bottom: 8px; font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.35; }
.psg-launch-body p { margin: 0 0 18px; color: rgba(255,255,255,.82); font-size: 1rem; }
.psg-start, .psg-retry, .psg-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  background: var(--psg-pink);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255,47,120,.28);
}
.psg-start:hover, .psg-retry:hover, .psg-more:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }

.psg-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  color: #fff;
  background: #10090d;
  opacity: 0;
  transition: opacity .18s ease;
}
.psg-overlay.is-open { opacity: 1; }
.psg-scroll-shell { width: 100%; height: 100%; overflow-y: scroll; overscroll-behavior: contain; scrollbar-width: none; }
.psg-scroll-shell::-webkit-scrollbar { display: none; }
.psg-scroll-space { height: 520vh; }
.psg-sticky {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #422033 0, #180d14 68%);
}
.psg-topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: max(10px, env(safe-area-inset-top)) 18px 10px;
  background: linear-gradient(#130b10, transparent);
}
.psg-topbar strong { display: block; max-width: min(70vw, 600px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.psg-step { display: inline-block; margin-top: 2px; color: #ff90b7; font-size: .8rem; font-weight: 800; letter-spacing: .08em; }
.psg-close { width: 44px; height: 44px; padding: 0; color: #fff; font-size: 2rem; line-height: 1; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); border-radius: 50%; cursor: pointer; }

.psg-scene { position: relative; width: 100%; max-width: 720px; height: 100%; min-height: 0; margin: 0 auto; overflow: hidden; }
.psg-game .psg-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  opacity: 0;
  transform: scale(1.012);
  transition: opacity .10s linear, transform .35s ease;
}
.psg-game .psg-frame.is-active { opacity: 1; transform: scale(1); }
.psg-scene.is-caught { animation: psg-shake .35s ease; }
.psg-scene.is-success .psg-frame { transition-duration: .2s; }

.psg-wind { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .12s; }
.psg-scene.is-windy .psg-wind { opacity: 1; }
.psg-wind i { position: absolute; left: 12%; width: 70%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent); border-radius: 50%; animation: psg-wind .45s linear infinite; }
.psg-wind i:nth-child(1) { bottom: 8%; animation-delay: 0s; }
.psg-wind i:nth-child(2) { bottom: 17%; left: 24%; width: 62%; animation-delay: -.11s; }
.psg-wind i:nth-child(3) { bottom: 27%; left: 5%; width: 58%; animation-delay: -.22s; }
.psg-wind i:nth-child(4) { bottom: 36%; left: 30%; width: 50%; animation-delay: -.33s; }

.psg-panel { position: relative; z-index: 4; padding: 10px 18px max(16px, env(safe-area-inset-bottom)); text-align: center; background: linear-gradient(transparent, #10090d 22%); }
.psg-message { min-height: 1.6em; margin: 0 0 8px; font-size: clamp(1rem, 3.5vw, 1.25rem); font-weight: 800; }
.psg-meter { width: min(440px, 86vw); height: 10px; margin: 0 auto 10px; overflow: hidden; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; }
.psg-meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ff2f78, #ffd166); border-radius: inherit; transition: width .08s linear; }
.psg-swipe-hint { color: rgba(255,255,255,.72); font-size: .9rem; font-weight: 700; animation: psg-hint 1.1s ease-in-out infinite; }
.psg-swipe-hint span { display: inline-block; margin-right: 6px; color: #ff90b7; font-size: 1.25em; }
.psg-actions { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.psg-actions[hidden] { display: none; }
.psg-retry, .psg-more { min-height: 44px; padding: 0 20px; font-size: .95rem; }
.psg-retry { color: #fff; background: rgba(255,255,255,.14); box-shadow: none; border: 1px solid rgba(255,255,255,.24); }

@keyframes psg-wind { from { transform: translateY(25px) scaleX(.65); opacity: 0; } 45% { opacity: .9; } to { transform: translateY(-85px) scaleX(1); opacity: 0; } }
@keyframes psg-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 55% { transform: translateX(7px); } 80% { transform: translateX(-3px); } }
@keyframes psg-hint { 50% { transform: translateY(-5px); } }

@media (max-width: 520px) {
  .psg-launch-card { grid-template-columns: 42% 1fr; border-radius: 14px; }
  .psg-launch-visual { min-height: 190px; }
  .psg-launch-body { padding: 16px; }
  .psg-start { width: 100%; padding: 0 12px; }
  .psg-scene { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .psg-overlay, .psg-frame, .psg-meter span { transition: none; }
  .psg-wind i, .psg-swipe-hint, .psg-scene.is-caught { animation: none; }
}