/* 주조실 (Crafting View) */
.pot-section {
  padding: 12px 16px;
  background: linear-gradient(180deg, #162032 0%, #0f172a 100%);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.pot-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  color: #cbd5e1;
  font-weight: 700;
}

.total-count-pill {
  background: #1e293b;
  border: 1px solid #475569;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
}

.total-count-pill.full {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  color: #fcd34d;
}

/* 단계별 넘버링 퀴즈 & 자유 주조 컨트롤 바 */
.brew-step-quiz-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  perspective: 1000px;
}

.brew-mode-tabs {
  display: flex;
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 11px;
  padding: 3px;
  gap: 4px;
}

.brew-mode-tab-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.brew-mode-tab-btn.active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.brew-mode-tab-btn.shop-mode-btn.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #090d16;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.brew-quiz-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid #3b82f6;
  border-radius: 14px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.45);
}

.quiz-question-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.quiz-icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: 44px;
}

.quiz-mystery-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.quiz-mystery-icon.is-locked {
  cursor: default;
  border: 1px dashed #475569;
}

.quiz-mystery-icon.is-locked.is-clickable {
  cursor: pointer;
}

.quiz-mystery-icon.is-locked.is-clickable:hover {
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
  transform: scale(1.05);
}

.quiz-mystery-icon.is-disabled {
  opacity: 0.45;
  filter: grayscale(1);
  border: 1px dashed #334155 !important;
  background: #090d16 !important;
  color: #64748b !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.quiz-mystery-icon.is-disabled:hover {
  border-color: #334155 !important;
  box-shadow: none !important;
  transform: none !important;
}

.quiz-mystery-icon.is-unlocked {
  cursor: default;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.quiz-mystery-icon.is-unlocked.is-clickable {
  cursor: pointer;
}

.quiz-mystery-icon.is-unlocked.is-clickable:hover {
  border-color: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.35);
  transform: scale(1.05);
}

.quiz-question-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quiz-header-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.quiz-title-group {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
}

.quiz-nav-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.quiz-ratio-count-badge {
  font-size: 0.72rem;
  font-weight: 900;
  color: #fde047;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid #f59e0b;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}

.quiz-nav-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #475569;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 0.66rem;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.quiz-nav-btn:hover:not(:disabled) {
  border-color: #60a5fa;
  background: #172554;
}

.quiz-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.quiz-num-badge {
  font-size: 0.82rem;
  font-weight: 900;
  color: #60a5fa;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.quiz-num-total {
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 700;
}

.quiz-num-pill-static {
  font-size: 0.74rem;
  font-weight: 800;
  color: #93c5fd;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid #475569;
  border-radius: 5px;
  padding: 2px 6px;
  flex-shrink: 0;
  line-height: 1.2;
}

/* 🤝 친구 도움 SOS 인라인 상태 배지 & 콤팩트 나가기 버튼 */
.quiz-nav-sos-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.quiz-sos-help-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.28) 0%, rgba(168, 85, 247, 0.28) 100%);
  border: 1px solid #f43f5e;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fecdd3;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.3);
}

.sos-pulse-icon {
  font-size: 0.8rem;
  display: inline-block;
  animation: sosPulse 1.8s infinite ease-in-out;
}

@keyframes sosPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.85; }
}

.sos-tag-name {
  color: #fb7185;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.sos-friend-target {
  color: #f1f5f9;
  font-weight: 700;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiz-sos-exit-btn-inline {
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid #64748b;
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 7px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.1;
  transition: all 0.15s ease;
}

.quiz-sos-exit-btn-inline:hover {
  background: #f43f5e;
  border-color: #f43f5e;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.4);
}

@media (max-width: 400px) {
  .sos-friend-target {
    display: none;
  }
}

.quiz-target-title {
  font-size: 0.86rem;
  font-weight: 900;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quiz-infer-btn {
  width: 44px;
  padding: 3px 0;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.55);
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.quiz-infer-btn:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #7dd3fc;
}

.quiz-infer-btn:active {
  transform: scale(0.95);
}

.quiz-infer-btn.is-completed {
  border: 1px solid rgba(34, 197, 94, 0.7);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(16, 185, 129, 0.32));
  color: #86efac;
  box-shadow: 0 1px 4px rgba(34, 197, 94, 0.25);
  font-weight: 800;
}

.quiz-infer-btn.is-completed:hover {
  background: linear-gradient(135deg, #16a34a, #059669);
  color: #ffffff;
  border-color: #4ade80;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.quiz-infer-btn.is-disabled,
.quiz-infer-btn:disabled {
  border: 1px solid #334155 !important;
  background: rgba(30, 41, 59, 0.5) !important;
  color: #64748b !important;
  cursor: not-allowed !important;
  opacity: 0.55;
  box-shadow: none !important;
  transform: none !important;
}

.quiz-infer-btn.is-disabled:hover,
.quiz-infer-btn:disabled:hover {
  background: rgba(30, 41, 59, 0.5) !important;
  border-color: #334155 !important;
  color: #64748b !important;
}

.quiz-desc-text {
  font-size: 0.73rem;
  color: #cbd5e1;
  line-height: 1.44;
  min-height: 38px;
  margin-top: 7px;
}

/* 동적 슬롯 컨테이너 (초안 4슬롯, 제한 없이 확장 가능) */
.pot-slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-height: 76px;
  padding: 8px;
  background: rgba(15, 23, 42, 0.75);
  border: 2px dashed #334155;
  border-radius: 16px;
  transition: all 0.2s ease;
}

.pot-slots-grid.has-items {
  border-color: var(--primary);
  background: rgba(30, 41, 59, 0.65);
}

.pot-slot {
  width: calc(25% - 6px);
  min-width: 72px;
  height: 68px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  padding: 4px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pot-slot.empty {
  background: rgba(30, 41, 59, 0.35);
  border-style: dashed;
  color: #475569;
  cursor: default;
}

.pot-slot.filled {
  border-color: #60a5fa;
  background: linear-gradient(145deg, #1e293b, #172554);
  cursor: pointer;
}

.pot-slot.filled:active {
  transform: scale(0.95);
}

.slot-emoji {
  font-size: 1.45rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot-name {
  font-size: 0.66rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.slot-detail-tag {
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: 0.54rem;
  background: rgba(245, 158, 11, 0.25);
  color: #fde047;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 800;
}

/* 우측 상단 모서리 플로팅 숫자 배지 (네모박스 내부 글자와 절대 겹치지 않도록 모서리 외곽 배치) */
.slot-count-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 3;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  background: #f59e0b;
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 900;
  border-radius: 999px;
  border: 2px solid #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

.ing-card .slot-count-badge {
  top: -6px;
  left: -6px;
  right: auto;
}

.ing-stock-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 3;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  border-radius: 999px;
  border: 1.5px solid #60a5fa;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  line-height: 1;
}

.ing-stock-badge.zero {
  background: #334155;
  color: #94a3b8;
  border-color: #64748b;
}

.ing-card.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.45);
  border-style: dashed;
}

.ing-card.is-disabled:hover {
  background: var(--card-bg);
  border-color: var(--border);
}

.ing-card.is-disabled:active {
  transform: none;
}

.pot-actions {
  display: flex;
  gap: 8px;
}

.mix-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
  transition: opacity 0.2s;
}

.mix-btn:disabled {
  background: #334155;
  color: #64748b;
  box-shadow: none;
  cursor: not-allowed;
}

.mix-btn.already-crafted-alert {
  background: linear-gradient(135deg, #b45309, #d97706);
  color: #fffbeb;
  border: 1px solid #f59e0b;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.5);
  animation: mixBtnAlertPulse 0.35s ease-in-out;
}

@keyframes mixBtnAlertPulse {
  0% { transform: scale(1); }
  35% { transform: scale(0.95); }
  75% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* 기 주조 레시피 실시간 감지 알림 바 */
.pot-match-notice {
  min-height: 0;
  transition: all 0.2s ease;
}

.pot-match-notice:empty {
  display: none;
}

.pot-already-notice {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid #475569;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 0.76rem;
  color: #cbd5e1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  animation: popIn 0.15s ease-out;
}

.pot-already-notice b {
  color: #fde047;
}

/* 결과 모달 상단 정보 카드 (좌: 그림+명칭, 우: 설명) */
.craft-result-info-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  box-sizing: border-box;
}

.craft-result-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 96px;
  text-align: center;
}

.craft-result-emoji {
  font-size: 2.8rem;
  line-height: 1.1;
}

.craft-result-name {
  font-size: 0.95rem;
  font-weight: 900;
  color: #f8fafc;
  margin-top: 4px;
  word-break: keep-all;
  line-height: 1.25;
}

.craft-result-desc {
  flex: 1;
  font-size: 0.8rem;
  color: #cbd5e1;
  line-height: 1.55;
  border-left: 1px solid #334155;
  padding-left: 12px;
}

/* ========================================================
   조합 결과 모달 게임풍 애니메이션 (성공 / 실패)
   ======================================================== */
#result-modal.craft-anim-success {
  background: radial-gradient(circle at center, rgba(245, 158, 11, 0.22) 0%, rgba(9, 13, 24, 0.88) 65%);
}

#result-modal.craft-anim-fail {
  background: radial-gradient(circle at center, rgba(220, 38, 38, 0.22) 0%, rgba(9, 13, 24, 0.9) 65%);
}

#result-modal-content.craft-anim-success {
  position: relative;
  overflow: visible;
  border-color: rgba(251, 191, 36, 0.75);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.35),
    0 0 36px rgba(245, 158, 11, 0.35),
    0 24px 48px rgba(0, 0, 0, 0.7);
  animation: craftSuccessPop 0.52s cubic-bezier(0.22, 1.28, 0.36, 1) both;
}

#result-modal-content.craft-anim-fail {
  position: relative;
  overflow: visible;
  border-color: rgba(239, 68, 68, 0.7);
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.3),
    0 0 32px rgba(220, 38, 38, 0.3),
    0 24px 48px rgba(0, 0, 0, 0.75);
  animation: craftFailShake 0.48s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* 성공 시 상단 카드 빛 반짝임(Sheen) & 아이콘 바운스 */
.craft-anim-success .craft-result-info-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(251, 191, 36, 0.45);
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.9));
}

.craft-anim-success .craft-result-info-card::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 45%;
  height: 140%;
  background: linear-gradient(105deg, transparent 20%, rgba(254, 240, 138, 0.28) 50%, transparent 80%);
  transform: skewX(-18deg);
  animation: craftCardSheen 0.9s ease-out 0.18s 1 both;
  pointer-events: none;
}

.craft-anim-success .craft-result-left {
  position: relative;
}

.craft-anim-success .craft-result-left::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  width: 78px;
  height: 78px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(251, 191, 36, 0.26) 0deg 25deg,
    transparent 25deg 60deg,
    rgba(251, 191, 36, 0.22) 60deg 85deg,
    transparent 85deg 120deg,
    rgba(251, 191, 36, 0.26) 120deg 145deg,
    transparent 145deg 180deg,
    rgba(251, 191, 36, 0.22) 180deg 205deg,
    transparent 205deg 240deg,
    rgba(251, 191, 36, 0.26) 240deg 265deg,
    transparent 265deg 300deg,
    rgba(251, 191, 36, 0.22) 300deg 325deg,
    transparent 325deg 360deg
  );
  filter: blur(1px);
  animation: craftSunburstSpin 7s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.craft-anim-success .craft-result-emoji {
  position: relative;
  z-index: 1;
  animation: craftHeroBounce 0.62s cubic-bezier(0.22, 1.4, 0.36, 1) 0.1s both;
  filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.55));
}

.craft-anim-success .craft-badge-new {
  animation: craftStampIn 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) 0.2s both;
}

/* 실패 시 괴식 아이콘 흔들림 & 연기/거품 오라 */
.craft-anim-fail .craft-result-left {
  position: relative;
}

.craft-anim-fail .craft-result-emoji {
  position: relative;
  z-index: 1;
  animation: craftFailWobble 0.6s ease-in-out 0.08s both;
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5));
}

/* 파티클 레이어 (성공 폭죽 / 실패 거품) */
.craft-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

.craft-fx-particle {
  position: absolute;
  left: 50%;
  top: 28%;
  width: var(--size, 8px);
  height: var(--size, 8px);
  border-radius: var(--radius, 2px);
  background: var(--color, #fde047);
  box-shadow: 0 0 8px var(--color, #fde047);
  opacity: 0;
  animation: craftParticleBurst var(--dur, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) forwards;
}

.craft-fx-smoke {
  position: absolute;
  left: calc(50% + var(--sx, 0px));
  top: 26%;
  width: var(--size, 12px);
  height: var(--size, 12px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 113, 113, 0.65), rgba(168, 85, 247, 0.25) 65%, transparent 100%);
  opacity: 0;
  animation: craftSmokeRise var(--dur, 0.9s) ease-out var(--delay, 0s) forwards;
}

@keyframes craftSuccessPop {
  0% {
    opacity: 0;
    transform: scale(0.68) translateY(24px);
  }
  58% {
    opacity: 1;
    transform: scale(1.04) translateY(-4px);
  }
  80% {
    transform: scale(0.985) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes craftHeroBounce {
  0% {
    opacity: 0;
    transform: scale(0.35) rotate(-14deg);
  }
  55% {
    opacity: 1;
    transform: scale(1.24) rotate(6deg);
  }
  78% {
    transform: scale(0.94) rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes craftStampIn {
  0% {
    opacity: 0;
    transform: scale(1.9) rotate(-10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes craftCardSheen {
  0% { left: -60%; }
  100% { left: 145%; }
}

@keyframes craftSunburstSpin {
  0% { transform: translateX(-50%) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}

@keyframes craftFailShake {
  0% {
    opacity: 0;
    transform: scale(0.86) translateX(0);
  }
  20% {
    opacity: 1;
    transform: scale(1.02) translateX(-11px) rotate(-1.2deg);
  }
  38% {
    transform: scale(1) translateX(10px) rotate(1.1deg);
  }
  56% {
    transform: translateX(-7px) rotate(-0.7deg);
  }
  74% {
    transform: translateX(5px) rotate(0.4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateX(0) rotate(0deg);
  }
}

@keyframes craftFailWobble {
  0% { transform: scale(0.75) rotate(0deg); }
  25% { transform: scale(1.12) rotate(-15deg); }
  50% { transform: scale(1.05) rotate(12deg); }
  75% { transform: scale(1.02) rotate(-6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes craftParticleBurst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, -80px))) scale(1.1) rotate(var(--rot, 180deg));
  }
}

@keyframes craftSmokeRise {
  0% {
    opacity: 0.85;
    transform: translate(-50%, 0) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), var(--ty, -65px)) scale(1.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  #result-modal-content.craft-anim-success,
  #result-modal-content.craft-anim-fail,
  .craft-anim-success .craft-result-info-card::after,
  .craft-anim-success .craft-result-left::before,
  .craft-anim-success .craft-result-emoji,
  .craft-anim-success .craft-badge-new,
  .craft-anim-fail .craft-result-emoji,
  .craft-fx-particle,
  .craft-fx-smoke,
  .pot-slot.is-popping,
  .pot-slots-grid.is-pulsing,
  .pot-slots-grid.is-shaking,
  .mix-btn.is-charging,
  .brew-quiz-card.is-advancing,
  .sool-card.just-unlocked,
  .sool-card.just-unlocked::after {
    animation: none !important;
  }
}

/* ========================================================
   추가 게임플레이 애니메이션 (투입 / 셰이킹 / 퀴즈전환 / 도감해금)
   ======================================================== */
.pot-slot.is-popping {
  animation: potSlotPop 0.28s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}

.pot-slots-grid.is-pulsing {
  animation: potGridPulse 0.26s ease-out both;
}

.pot-slots-grid.is-shaking {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.45), inset 0 0 18px rgba(245, 158, 11, 0.2);
  animation: potBrewShake 0.28s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.mix-btn.is-charging {
  filter: brightness(1.2);
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.65);
  animation: mixBtnCharging 0.28s ease-in-out both;
}

.brew-quiz-card.is-advancing {
  transform-origin: center center;
  backface-visibility: visible;
  will-change: transform, opacity;
  animation: quizCardNextReveal 0.56s cubic-bezier(0.22, 1.25, 0.36, 1) both;
}

.sool-card.just-unlocked {
  position: relative;
  overflow: hidden;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.45);
  animation: soolCardSparkle 1.1s ease-out 1 both;
}

.sool-card.just-unlocked::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -70%;
  width: 50%;
  height: 140%;
  background: linear-gradient(105deg, transparent 20%, rgba(254, 240, 138, 0.35) 50%, transparent 80%);
  transform: skewX(-18deg);
  animation: craftCardSheen 0.95s ease-out 0.1s 1 both;
  pointer-events: none;
}

@keyframes potSlotPop {
  0% { transform: scale(0.72); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes potGridPulse {
  0% { box-shadow: 0 0 0 rgba(56, 189, 248, 0); }
  45% { box-shadow: 0 0 16px rgba(56, 189, 248, 0.32); }
  100% { box-shadow: 0 0 0 rgba(56, 189, 248, 0); }
}

@keyframes potBrewShake {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  20% { transform: translate(-5px, -2px) rotate(-1.5deg) scale(1.015); }
  40% { transform: translate(5px, 2px) rotate(1.5deg) scale(1.02); }
  60% { transform: translate(-4px, 1px) rotate(-1.1deg) scale(1.025); }
  80% { transform: translate(4px, -1px) rotate(1deg) scale(1.015); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1.03); }
}

@keyframes mixBtnCharging {
  0% { transform: scale(1); }
  50% { transform: scale(0.96); }
  100% { transform: scale(1.03); }
}

@keyframes quizCardNextReveal {
  0% {
    opacity: 0.25;
    transform: rotateY(-88deg) scale(0.9);
    border-color: #fde047;
    box-shadow: 0 0 28px rgba(253, 224, 71, 0.7);
  }
  58% {
    opacity: 1;
    transform: rotateY(14deg) scale(1.02);
    border-color: #7dd3fc;
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.55);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.45);
  }
}

@keyframes soolCardSparkle {
  0% { transform: scale(0.96); box-shadow: 0 0 26px rgba(251, 191, 36, 0.7); }
  50% { transform: scale(1.03); box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); }
  100% { transform: scale(1); box-shadow: 0 0 8px rgba(251, 191, 36, 0.25); }
}

/* 통합 재료 해금/추가 카드 */
.craft-unified-unlock-card {
  width: 100%;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid #475569;
  border-radius: 14px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  box-sizing: border-box;
}

.craft-stepup-header {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(168, 85, 247, 0.2));
  border: 1px solid rgba(245, 158, 11, 0.55);
  border-radius: 10px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

.craft-stepup-title {
  font-size: 0.82rem;
  font-weight: 900;
  color: #fde047;
  display: flex;
  align-items: center;
  gap: 5px;
}

.craft-stepup-sub {
  font-size: 0.73rem;
  color: #f8fafc;
  font-weight: 700;
  line-height: 1.4;
}

.craft-unlock-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.craft-unlock-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.craft-badge-chain {
  font-size: 0.72rem;
  font-weight: 900;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.45);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.craft-badge-leaf {
  font-size: 0.72rem;
  font-weight: 900;
  color: #fde047;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.craft-unlock-items-box {
  background: rgba(15, 23, 42, 0.7);
  border-radius: 9px;
  padding: 7px 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.craft-unlock-items-box.chain-box {
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.craft-unlock-items-box.leaf-box {
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.craft-unlock-chip-chain {
  font-size: 0.75rem;
  padding: 4px 10px;
  cursor: default;
  pointer-events: none;
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.22);
  color: #ecfdf5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.craft-unlock-chip-leaf {
  font-size: 0.72rem;
  padding: 4px 9px;
  cursor: default;
  pointer-events: none;
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.2);
  color: #fef3c7;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.clear-pot-btn {
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid #475569;
  background: #1e293b;
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

/* 인벤토리 영역 */
.inventory-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 14px;
  gap: 8px;
}

.cat-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 4px;
  flex-shrink: 0;
}

.cat-chip {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #334155;
  background: #1e293b;
  color: #cbd5e1;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  touch-action: manipulation;
  transition: all 0.15s ease;
}

.cat-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.ingredients-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-content: start;
  padding: 6px 4px 16px 6px;
}

.ing-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 6px 9px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ing-card.has-picker {
  padding-top: 20px;
}

.ing-card:hover {
  background: var(--card-hover);
  border-color: #64748b;
}

.ing-card:active {
  transform: scale(0.95);
}

.ing-card.in-pot {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

.ing-card.locked-ing {
  opacity: 0.42;
  border-style: dashed;
}

.ing-card.has-picker {
  border-color: rgba(56, 189, 248, 0.6);
}

.ing-picker-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  font-size: 0.58rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(56, 189, 248, 0.35));
  color: #fde047;
  border: 1px solid #f59e0b;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.25);
  transition: all 0.15s ease;
}

.ing-picker-btn:hover {
  background: linear-gradient(135deg, #f59e0b, #0284c7);
  color: #ffffff;
  border-color: #fde047;
  transform: scale(1.05);
}

.ing-picker-btn:active {
  transform: scale(0.93);
}

/* 상세 재료 해금 팝업 데모 스타일 */
.detail-guide-demo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px dashed #38bdf8;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 6px 0;
}

.demo-ing-card-preview {
  position: relative;
  width: 78px;
  height: 82px;
  background: #1e293b;
  border: 1.5px solid rgba(56, 189, 248, 0.7);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 18px;
  padding-bottom: 4px;
  gap: 3px;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
  flex-shrink: 0;
  box-sizing: border-box;
}

.demo-picker-live-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  font-size: 0.58rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(56, 189, 248, 0.4));
  color: #fde047;
  border: 1px solid #f59e0b;
  padding: 2px 5px;
  border-radius: 6px;
  font-weight: 900;
  white-space: nowrap;
  animation: pulsePickerLive 1.4s ease-in-out infinite;
}

@keyframes pulsePickerLive {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 10px rgba(253, 224, 71, 0.85), inset 0 0 5px rgba(253, 224, 71, 0.5);
    border-color: #fde047;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.85), rgba(56, 189, 248, 0.85));
    color: #ffffff;
  }
}

.demo-ing-emoji {
  font-size: 1.5rem;
  line-height: 1;
}

.demo-ing-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f1f5f9;
  text-align: center;
  line-height: 1;
}

.demo-callout-arrow-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.demo-arrow {
  font-size: 1.5rem;
  animation: bounceArrow 1.2s infinite;
}

@keyframes bounceArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

.demo-arrow-text {
  font-size: 0.78rem;
  color: #38bdf8;
  line-height: 1.45;
  font-weight: 800;
}

.ing-emoji {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ing-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f1f5f9;
  text-align: center;
  word-break: keep-all;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
}

/* 도감 뷰 */
.collection-header {
  padding: 10px 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.collection-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.collection-top-row .cat-filter-bar {
  flex: 1;
  padding-bottom: 0;
}

.collection-progress-pill {
  flex-shrink: 0;
  white-space: nowrap;
}

.sool-grid {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  align-content: start;
}

.sool-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 22px 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  position: relative;
  text-align: center;
  min-height: 104px;
  box-sizing: border-box;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.sool-card:hover {
  transform: translateY(-2px);
  border-color: #60a5fa;
}

.sool-card.unlocked {
  border-color: rgba(59, 130, 246, 0.55);
  background: linear-gradient(160deg, #1e293b 0%, #172554 100%);
}

.sool-card.challengeable {
  border-color: rgba(245, 158, 11, 0.55);
  background: linear-gradient(160deg, #1e293b 0%, #291d12 100%);
}

.sool-card.challengeable.image-unlocked {
  border-color: rgba(168, 85, 247, 0.75);
  background: linear-gradient(160deg, #1e293b 0%, #2e1065 100%);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.22);
}

.img-unlocked-pill {
  position: absolute;
  top: 22px;
  left: 5px;
  font-size: 0.5rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(168, 85, 247, 0.28);
  color: #e9d5ff;
  border: 1px solid rgba(192, 132, 252, 0.45);
}

.sool-num-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 0.56rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.85);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.sool-card.level-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.diff-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.56rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
}

.diff-EASY { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
.diff-NORMAL { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
.diff-MASTER { background: rgba(139, 92, 246, 0.25); color: #c4b5fd; }

.sool-emoji {
  font-size: 1.7rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sool-name {
  font-size: 0.76rem;
  font-weight: 800;
  color: #f8fafc;
  word-break: keep-all;
  line-height: 1.3;
  text-align: center;
}

.sool-hint-status {
  font-size: 0.60rem;
  color: #fbbf24;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.3px;
  word-break: keep-all;
  margin-top: 1px;
}



/* 주조실 잠긴 설명 힌트 텍스트 버튼 */
/* 주조실 잠긴 설명 힌트: 은박지(실버 스크래치 호일) 스트립 & AD 긁기 버튼 */
.quiz-desc-scratch-strip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 100%;
  padding: 3px 6px 3px 9px;
  border-radius: 7px;
  background: linear-gradient(135deg, #334155 0%, #64748b 25%, #cbd5e1 50%, #64748b 75%, #1e293b 100%);
  background-size: 200% 200%;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.quiz-desc-scratch-strip:hover {
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.5), 0 3px 10px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}

.scratch-strip-foil {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.scratch-strip-coin {
  font-size: 0.8rem;
  line-height: 1;
}

.scratch-strip-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f172a;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.3px;
}

.scratch-strip-ad-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #2563eb;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.4);
  transition: all 0.15s ease;
}

.scratch-strip-ad-badge:hover {
  background: #1d4ed8;
  transform: scale(1.04);
}

.scratch-strip-ad-badge .ad-pill {
  background: #facc15;
  color: #0f172a;
  font-size: 0.56rem;
  font-weight: 900;
  padding: 1px 3px;
  border-radius: 3px;
  line-height: 1;
}

.quiz-desc-locked {
  width: 100%;
  min-height: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #94a3b8;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px dashed rgba(148, 163, 184, 0.4);
  cursor: pointer;
  transition: all 0.18s ease;
  box-sizing: border-box;
}

.quiz-desc-locked:hover {
  color: #7dd3fc;
  border-color: #38bdf8;
  background: rgba(14, 165, 233, 0.12);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
  transform: translateY(-1px);
}

.quiz-desc-locked:active {
  transform: scale(0.98);
}

.quiz-desc-locked .quiz-lock-icon {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.quiz-desc-locked .quiz-lock-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: -0.2px;
  transition: color 0.18s ease;
}

.quiz-desc-locked:hover .quiz-lock-label {
  color: #7dd3fc;
}

/* =========================================================================
   연구실(Research Lab) 점포 자금 바 & 재료 구매 상점 연동 스타일
   ========================================================================= */
.brew-lab-economy-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: rgba(9, 13, 22, 0.88);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 10px;
  padding: 5px 8px;
  margin-bottom: 5px;
}

.lab-econ-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.lab-stage-tag {
  font-size: 0.68rem;
  font-weight: 900;
  color: #7dd3fc;
  white-space: nowrap;
}

.lab-wallet-tag {
  font-size: 0.72rem;
  color: #e2e8f0;
  white-space: nowrap;
}

.lab-wallet-tag b {
  color: #fde047;
}

.lab-econ-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.lab-quick-btn {
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 0.65rem;
  font-weight: 900;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.lab-quick-btn.shop-btn {
  background: rgba(245, 158, 11, 0.22);
  border-color: #f59e0b;
  color: #fde047;
}

.lab-quick-btn.shop-btn.active {
  background: #f59e0b;
  color: #090d16;
}

.lab-quick-btn.tycoon-btn {
  background: rgba(16, 185, 129, 0.22);
  border-color: #10b981;
  color: #6ee7b7;
}

.quiz-shop-needed-banner {
  width: 100%;
  margin-top: 7px;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fde047;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.quiz-shop-needed-banner:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: #fbbf24;
}

.quiz-shop-needed-banner:active {
  transform: scale(0.99);
}

.quiz-shop-needed-banner.is-static {
  cursor: default;
  pointer-events: none;
  justify-content: center;
  text-align: center;
}

.quiz-shop-needed-banner.is-static:hover,
.quiz-shop-needed-banner.is-static:active {
  transform: none;
}

.quiz-shop-needed-banner b {
  color: #ffffff;
  background: linear-gradient(135deg, #d97706, #b45309);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.cat-chip.lab-shop-cat-chip {
  border-color: rgba(245, 158, 11, 0.65);
  color: #fde047;
  background: rgba(120, 53, 15, 0.35);
}

.cat-chip.lab-shop-cat-chip.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #fde047;
  color: #090d16;
}

.ing-card.lab-shop-card {
  padding-top: 20px;
}

.ing-card.lab-shop-card.can-buy {
  border-color: #f59e0b;
  background: linear-gradient(160deg, rgba(120, 53, 15, 0.32), rgba(15, 23, 42, 0.95));
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.22);
}

.ing-card.lab-shop-card.locked-funds {
  opacity: 0.62;
  border-style: dashed;
}

.ing-card.lab-shop-card.is-owned {
  border-color: rgba(52, 211, 153, 0.45);
}

.shop-card-price-tag {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 0.56rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 5px;
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #475569;
}

.shop-card-price-tag.buyable {
  background: #f59e0b;
  color: #090d16;
  border-color: #fde047;
}

.shop-card-price-tag.owned {
  background: rgba(16, 185, 129, 0.22);
  color: #6ee7b7;
  border-color: #10b981;
}

.shop-card-sub {
  font-size: 0.56rem;
  font-weight: 900;
  color: #fde047;
}

/* 🛒 독립 탭 재료상점 (#view-shop) 전용 뷰 & 상단 보유 자금 대시보드 카드 */
#view-shop {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.shop-view-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 16px;
  gap: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.shop-wallet-hero-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.45) 0%, rgba(15, 23, 42, 0.95) 65%, rgba(30, 41, 59, 0.95) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.65);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.16);
}

.shop-wallet-hero-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.shop-wallet-coin-emblem {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 30%, #fde047, #f59e0b 75%, #b45309 100%);
  border: 2px solid #fef08a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.45);
  flex-shrink: 0;
}

.shop-wallet-hero-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shop-wallet-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: #fcd34d;
  letter-spacing: 0.2px;
}

.shop-wallet-amount-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.shop-wallet-amount {
  font-size: 1.45rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(245, 158, 11, 0.45);
}

.shop-wallet-unit {
  font-size: 0.88rem;
  font-weight: 900;
  color: #fde047;
}

.shop-wallet-hero-right {
  flex-shrink: 0;
}

.shop-owned-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 0.7rem;
  font-weight: 700;
  color: #cbd5e1;
}

.shop-owned-summary-pill b {
  color: #38bdf8;
  font-weight: 900;
}

.shop-scroll-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
}

/* 연구실 상단 토글 🛒 재료 상점 전용 뷰 */
.ingredients-grid.is-shop-mode {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px 20px;
}

.lab-shop-starter-banner {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.38);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.72rem;
  color: #a7f3d0;
  text-align: center;
}

.lab-shop-starter-banner b {
  color: #34d399;
}

.lab-shop-stage-group {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lab-shop-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 800;
  color: #fde047;
  padding: 0 2px 6px;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.22);
}

.lab-shop-stage-header b {
  color: #93c5fd;
  font-size: 0.7rem;
}

.lab-shop-stage-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lab-shop-row-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #131c31;
  border: 1px solid #293548;
  text-align: left;
  color: #f8fafc;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.lab-shop-row-card.can-buy {
  cursor: pointer;
  border-color: rgba(245, 158, 11, 0.75);
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.28), rgba(15, 23, 42, 0.95));
}

.lab-shop-row-card.can-buy:active {
  transform: scale(0.985);
}

.lab-shop-row-card.locked-funds {
  cursor: pointer;
  opacity: 0.68;
  border-style: dashed;
}

.lab-shop-row-card.is-owned {
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(6, 78, 59, 0.18);
}

.lab-shop-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.lab-shop-row-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.lab-shop-row-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lab-shop-row-name {
  font-size: 0.82rem;
  font-weight: 900;
  color: #f8fafc;
}

.lab-shop-row-hint {
  font-size: 0.66rem;
  color: #94a3b8;
  line-height: 1.25;
}

.lab-shop-buy-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
}

.lab-shop-buy-pill small {
  font-size: 0.58rem;
  font-weight: 800;
  margin-top: 1px;
}

.lab-shop-buy-pill.buyable {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #090d16;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.lab-shop-buy-pill.disabled {
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #475569;
}

.lab-shop-buy-pill.owned {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.45);
}