/* shop and stage-select screens — WP-SHOP (보강-설계서 4장). Classes start with shop- / ss- / stg- */
#screen-shop, #screen-stage {
  justify-content: flex-start;
  padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
  touch-action: pan-y;
}
#screen-shop { background: linear-gradient(180deg, #2a1e3a 0%, #1a1020 100%); }
#screen-stage { background: linear-gradient(180deg, #2fb6c8 0%, #6fd6d6 34%, #f1d9a0 35%, #e8c98a 100%); }
.shop-wrap, .stg-wrap { margin: auto 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.shop-wrap { max-width: 640px; }
.stg-wrap { max-width: 760px; }

/* ---------- shop ---------- */
.shop-head { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.shop-coins {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px;
  font-size: 18px; color: var(--sun); background: var(--ink); border: 2px solid var(--sun);
}
.coin-ico { display: inline-flex; align-items: center; }
.coin-ico canvas { width: 16px; height: 16px; image-rendering: pixelated; }
.shop-note { width: 100%; font-size: 11px; line-height: 1.5; color: #c9b8e0; text-align: left; }
.shop-note b { color: var(--sun); }
.shop-note.warn { color: var(--ink); background: #ffb0a0; border: 2px solid var(--ink); padding: 4px 8px; }   /* storage off (PH-12) */
.shop-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.shop-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 3px 6px; font-family: inherit; color: var(--ink); background: var(--paper);
  border: 3px solid var(--ink); box-shadow: 0 3px 0 #0a0610; cursor: pointer;
}
.shop-slot:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a0610; }
.ss-icon {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: rgba(26, 16, 32, .08); border: 2px solid rgba(26, 16, 32, .18);
}
.ss-icon canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.ss-name { font-size: 12px; font-weight: bold; white-space: nowrap; }
.ss-eff { font-size: 11px; color: #6a4a7a; }
.ss-dots { display: flex; gap: 3px; margin: 1px 0; }
.ss-dots i { width: 7px; height: 7px; background: rgba(26, 16, 32, .12); border: 1px solid rgba(26, 16, 32, .45); }
.ss-dots i.on { background: var(--sun); border-color: #a8700a; }
.ss-price {
  display: flex; align-items: center; gap: 3px; padding: 0 6px; min-height: 18px;
  font-size: 12px; font-weight: bold; background: var(--sun); border: 2px solid var(--ink);
}
.ss-price .coin-ico canvas { width: 12px; height: 12px; }
.shop-slot.poor { filter: grayscale(1); opacity: .55; }
.shop-slot.poor .ss-price { background: #d8d0c0; }
.shop-slot.max .ss-price { color: var(--paper); background: var(--sea); }
.shop-slot.locked { color: var(--paper); background: #3d2c55; border-color: #0a0610; justify-content: center; }
.shop-slot.locked .ss-icon { font-size: 18px; font-weight: bold; color: var(--sun); background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .2); }
.ss-cond { font-size: 11px; line-height: 1.35; color: #d9cbee; }
.ss-prog { font-size: 11px; color: var(--sun); }
.ss-new {
  position: absolute; top: -7px; right: -7px; padding: 0 3px;
  font-size: 9px; color: var(--paper); background: var(--coral); border: 2px solid var(--ink);
}
.shop-slot.pop { animation: shop-pop .15s ease-out; }
@keyframes shop-pop { 0% { transform: scale(1); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.nope { animation: shop-nope .2s linear; }
@keyframes shop-nope { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.shop-foot { width: 100%; display: flex; gap: 10px; justify-content: center; margin-top: 2px; }
.shop-foot .btn { min-width: 0; flex: 1 1 0; max-width: 220px; }
#screen-shop .btn.ghost { color: var(--paper); border-color: var(--paper); }
.shop-refund.off { opacity: .45; }
#screen-shop .shop-refund.warn { color: var(--paper); background: var(--coral); border-color: var(--paper); }

/* ---------- stage select ---------- */
.stg-list { width: 100%; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .stg-list { grid-template-columns: repeat(3, 1fr); } }
.stg-card {
  position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden;
  font-family: inherit; text-align: left; color: var(--ink); background: var(--paper);
  border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); cursor: pointer;
}
.stg-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.stg-card.cur { outline: 3px solid var(--sun); outline-offset: 0; }
.stg-prev { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; image-rendering: pixelated; border-bottom: 3px solid var(--ink); }
.stg-body { display: flex; flex-direction: column; gap: 4px; padding: 7px 10px 9px; }
.stg-top { display: flex; align-items: center; justify-content: space-between; }
.stg-name { font-size: 16px; font-weight: bold; }
.stg-clear { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: bold; color: #a8700a; }
.stg-clear .star {
  width: 16px; height: 16px; background: rgba(26, 16, 32, .22);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.stg-clear.on .star { background: #f0b400; }
.stg-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: #6a4a7a; }
.stg-dots { display: flex; align-items: center; gap: 3px; }
.stg-dots i { width: 7px; height: 7px; background: rgba(26, 16, 32, .12); border: 1px solid rgba(26, 16, 32, .45); }
.stg-dots i.on { background: var(--coral); border-color: #8a2a1a; }
.stg-coin { color: #a8700a; font-weight: bold; }
.stg-best { font-size: 12px; }
.stg-lock { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: bold; }
.lock-ico { position: relative; flex: 0 0 10px; width: 10px; height: 8px; margin-top: 5px; background: var(--ink); }
.lock-ico::before {
  content: ''; position: absolute; left: 2px; top: -6px; width: 6px; height: 6px;
  border: 2px solid var(--ink); border-bottom: 0;
}
.stg-prog { font-size: 11px; color: #6a4a7a; }
.stg-card.locked { background: #d9cfbd; }
.stg-card.locked .stg-prev { filter: grayscale(1) brightness(.55); }
#screen-stage .btn.ghost { color: var(--ink); border-color: var(--ink); }