* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; background: #111827; color: #e5e7eb; min-height: 100vh; }

/* 첫 화면: 대장장이 + 메뉴 */
.title-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #1f2937 0%, #111827 50%);
}
.title-content { text-align: center; padding: 2rem; max-width: 360px; }
.title-heading { font-size: 1.75rem; font-weight: 800; margin: 0 0 2rem 0; color: #fef3c7; letter-spacing: -0.02em; }

.title-character-wrap {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 2rem; position: relative;
}
.leo-character {
  width: 140px; height: 160px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.leo-character img.leo-character-img {
  width: 100%; height: 100%; object-fit: contain;
  object-position: center bottom;
  transform-origin: center bottom;
  animation: leo-swing 1.8s ease-in-out infinite;
}
/* 레오파드가 망치 휘두르는 동작 (캐릭터 회전으로 연출) */
@keyframes leo-swing {
  0%, 100% { transform: rotate(0deg); }
  8% { transform: rotate(-5deg); }
  16% { transform: rotate(4deg); }
  33% { transform: rotate(0deg); }
  41% { transform: rotate(-5deg); }
  49% { transform: rotate(4deg); }
  66% { transform: rotate(0deg); }
  74% { transform: rotate(-5deg); }
  82% { transform: rotate(4deg); }
}
.speech-bubble {
  position: relative; margin-bottom: 6px;
  max-width: 260px; padding: 0.75rem 1rem;
  background: #fef3c7; color: #78350f; border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  text-align: center;
  align-self: center;
}
.speech-bubble::after {
  content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: #fef3c7;
}
.speech-text { margin: 0; font-size: 0.9rem; line-height: 1.4; }

.title-menu { display: flex; flex-direction: column; gap: 0.75rem; }
.menu-btn {
  padding: 0.875rem 1.5rem; border-radius: 0.5rem; border: 2px solid #4b5563;
  background: #374151; color: #e5e7eb; font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.menu-btn:hover { background: #4b5563; border-color: #6b7280; transform: translateY(-1px); }
.menu-btn-primary { background: #b45309; border-color: #d97706; color: white; }
.menu-btn-primary:hover { background: #d97706; border-color: #f59e0b; }

.topbar-btn {
  padding: 0.25rem 0.5rem; font-size: 0.8rem; border-radius: 0.25rem; border: 1px solid #4b5563;
  background: #374151; color: #e5e7eb; cursor: pointer;
}
.topbar-btn:hover { background: #4b5563; }

.title-screen.hidden { display: none !important; }
.game-screen {
  position: relative; min-height: 100vh; display: flex; flex-direction: column;
}
.game-screen.hidden { display: none !important; }

/* 로비: 대장간 배경 (이미지 + 어두운 오버레이) */
.lobby-bg {
  position: fixed; inset: 0; z-index: 0;
  background: #1a1512;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 40%, transparent 70%),
    linear-gradient(0deg, rgba(120,53,15,0.2) 0%, transparent 35%),
    url('images/bg-blacksmith.png');
  background-size: 100% 100%, 100% 100%, cover;
  background-position: 0 0, 0 0, center center;
  background-repeat: no-repeat;
}
.game-screen { background: #1a1512; }
.lobby-topbar {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 1rem; background: rgba(28, 25, 23, 0.9); border-bottom: 1px solid #57534e;
}
.lobby-title { font-size: 1.125rem; font-weight: 700; color: #fef3c7; }
.lobby-stats { display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; color: #d6d3d1; }
.lobby-stat-btn { background: none; border: none; color: inherit; cursor: pointer; font-size: inherit; padding: 0; }
.lobby-stat-btn:hover { color: #fef3c7; }

.lobby-main { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: 1rem; }
.lobby-center { display: flex; justify-content: center; align-items: center; padding: 1rem 0; }
.lobby-anvil-area {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.leo-at-anvil {
  width: 120px; height: 140px; margin-bottom: 0.5rem;
  display: flex; align-items: center; justify-content: center; overflow: visible;
}
.leo-at-anvil-empty { }
.leo-at-anvil-hidden { display: none !important; }
.leo-at-anvil img {
  width: 100%; height: 100%; object-fit: contain;
  object-position: center bottom;
  transform-origin: center bottom;
}
.leo-at-anvil .leo-character-img { object-fit: contain; object-position: center bottom; }
.leo-at-anvil.leo-hammer-idle img.leo-character-img { animation: leo-swing 1.8s ease-in-out infinite; }
.leo-at-anvil.leo-hammer-once img.leo-character-img { animation: leo-swing 0.6s ease-in-out 3 forwards; }
.leo-at-anvil.enhance-shake { animation: enhance-shake 0.15s ease-in-out infinite; }
.leo-at-anvil.enhance-glow { animation: enhance-glow 0.4s ease-in-out infinite alternate; }
@keyframes enhance-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@keyframes enhance-glow {
  0% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.5); }
  100% { box-shadow: 0 0 24px rgba(245, 158, 11, 0.9), 0 0 40px rgba(251, 191, 36, 0.4); }
}
/* 망치질 영역 카드 */
.lobby-tap-row {
  display: flex; align-items: stretch; gap: 0.75rem; flex-wrap: nowrap; min-width: 0;
  padding: 1rem; margin: 0 -0.25rem;
  background: linear-gradient(165deg, rgba(68, 64, 60, 0.95), rgba(41, 37, 36, 0.98));
  border-radius: 1rem; border: 2px solid #57534e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 16px rgba(0,0,0,0.3);
}
.lobby-tap-anvil {
  position: relative; width: 88px; height: 88px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0.75rem; overflow: hidden;
}
.tap-anvil-visual {
  position: absolute; inset: 0; border-radius: 0.75rem;
  background: linear-gradient(180deg, #78716c 0%, #57534e 35%, #44403c 70%, #292524 100%);
  border: 3px solid #a8a29e;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.12), inset 0 -2px 4px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.4);
}
.tap-anvil-visual::before {
  content: ''; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 32px; height: 14px; background: linear-gradient(180deg, #4b5563, #374151);
  border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.tap-anvil-visual::after {
  content: ''; position: absolute; left: 50%; top: 58%; width: 40px; height: 4px;
  transform: translateX(-50%); background: #1f2937; border-radius: 2px;
}
.tap-hammer {
  position: absolute; font-size: 2.25rem; z-index: 2; pointer-events: none;
  transform-origin: 50% 25%; transition: transform 0.08s ease-out;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.tap-hammer.tap-hammer-strike { animation: tap-hammer-strike 0.25s ease-out; }
@keyframes tap-hammer-strike {
  0% { transform: rotate(-25deg) scale(1); }
  40% { transform: rotate(12deg) scale(1.05); }
  70% { transform: rotate(5deg) scale(1.02); }
  100% { transform: rotate(-15deg) scale(1); }
}
.lobby-tap-btn {
  position: relative; z-index: 3; width: 100%; height: 100%; border-radius: 0.75rem;
  border: none; background: transparent; color: transparent; font-size: 0.75rem;
  cursor: pointer; flex-shrink: 0; transition: background 0.15s, box-shadow 0.15s;
}
.lobby-tap-btn:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.2);
  box-shadow: inset 0 0 0 2px rgba(245, 158, 11, 0.4);
}
.lobby-tap-btn:active:not(:disabled) {
  background: rgba(245, 158, 11, 0.35);
  box-shadow: inset 0 0 0 2px rgba(245, 158, 11, 0.5);
}
.lobby-tap-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lobby-next, .lobby-energy { font-size: 0.75rem; color: #a8a29e; margin: 0; }

.lobby-inventory {
  display: flex; justify-content: center; width: 100%;
  margin-bottom: 0.5rem;
}
.lobby-inv-inner { width: 100%; max-width: 400px; margin: 0 auto; text-align: center; }
.lobby-inv-title { font-size: 0.875rem; margin: 0 0 0.5rem 0; color: #d6d3d1; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.lobby-inv-expand-btn {
  width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 0.25rem; border: 1px solid #78716c;
  background: #44403c; color: #fbbf24; font-size: 1rem; line-height: 1; cursor: pointer;
}
.lobby-inv-expand-btn:hover { background: #57534e; border-color: #f59e0b; }
.lobby-inv-grid {
  display: grid; grid-template-columns: repeat(5, 72px); gap: 0.5rem;
  justify-content: center; max-width: 100%;
  max-height: 260px; overflow-y: auto; overflow-x: hidden;
}
.lobby-inv-slot {
  width: 72px; min-height: 72px; border-radius: 0.5rem; border: 2px solid #57534e; background: rgba(41, 37, 36, 0.9);
  display: flex; flex-direction: column; align-items: center; cursor: pointer; overflow: hidden; transition: border-color 0.2s;
}
.lobby-inv-slot:hover { border-color: #a8a29e; }
.lobby-inv-slot.selected { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3); }
.lobby-inv-slot-empty { cursor: default; }
.lobby-inv-slot-empty .lobby-inv-slot-img-wrap { background: rgba(0,0,0,0.15); }
.lobby-inv-slot-img-wrap {
  width: 72px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.2);
}
.lobby-inv-slot img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.lobby-inv-slot-name { font-size: 10px; color: #d6d3d1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding: 2px 4px; flex-shrink: 0; }
.lobby-inv-slot-name.grade-common { color: #d6d3d1; }
.lobby-inv-slot-name.grade-rare { color: #4ade80; }
.lobby-inv-slot-name.grade-epic { color: #60a5fa; }
.lobby-inv-slot-name.grade-legendary { color: #a78bfa; }
.lobby-inv-slot-name.grade-mythic { color: #fbbf24; }

/* 화면 인라인 타이밍 미니게임 */
.lobby-timing-minigame {
  width: 100%; max-width: 320px; margin: 0 auto 1rem; padding: 1.25rem;
  border-radius: 0.75rem; border: 2px solid #57534e; background: rgba(41, 37, 36, 0.95);
  text-align: center;
}
.lobby-timing-minigame.hidden { display: none !important; }
.lobby-timing-title { margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #fef3c7; }
.lobby-timing-weapon { font-size: 0.9rem; color: #a8a29e; margin: 0 0 0.5rem 0; }
.lobby-timing-hint { font-size: 0.85rem; color: #a8a29e; margin: 0 0 0.75rem 0; }
.timing-track {
  position: relative; width: 100%; height: 48px; margin: 0 auto;
  background: #374151; border-radius: 0.5rem; border: 2px solid #57534e;
  cursor: pointer; overflow: hidden; touch-action: manipulation;
}
.timing-zone {
  position: absolute; top: 0; bottom: 0; background: rgba(34, 197, 94, 0.6);
  border-radius: 0.25rem; pointer-events: none;
}
.timing-slider {
  position: absolute; top: 0; bottom: 0; width: 6px; margin-left: -3px;
  background: #f59e0b; border-radius: 2px; box-shadow: 0 0 6px rgba(245, 158, 11, 0.8);
  pointer-events: none; transition: none;
}
.lobby-timing-bonus { margin-top: 0.75rem; font-weight: 700; }
.lobby-timing-bonus.hidden { display: none !important; }
.lobby-timing-bonus-text.bonus-plus { color: #22c55e; }
.lobby-timing-bonus-text.bonus-zero { color: #a8a29e; }
.lobby-timing-bonus-text.bonus-minus { color: #ef4444; }

/* 레오파드 망치질 연출 */
.lobby-hammer-strike {
  text-align: center; padding: 1rem 0; margin-bottom: 0.5rem;
}
.lobby-hammer-strike.hidden { display: none !important; }
.lobby-hammer-icon { font-size: 3.5rem; animation: hammer-hit 0.4s ease-out; }
.lobby-hammer-text { font-size: 1.5rem; font-weight: 800; color: #f59e0b; margin: 0.25rem 0 0 0; }

/* 강화 결과 (화면 인라인) */
.lobby-enhance-result {
  width: 100%; max-width: 320px; margin: 0 auto 1rem; padding: 1.25rem;
  border-radius: 0.75rem; border: 2px solid #57534e; background: rgba(41, 37, 36, 0.95);
  text-align: center;
}
.lobby-enhance-result.hidden { display: none !important; }
.lobby-enhance-result-text { font-size: 1.2rem; font-weight: 700; margin: 0 0 1rem 0; }
.lobby-enhance-result-text.result-success { color: #22c55e; }
.lobby-enhance-result-text.result-fail { color: #ef4444; }
.lobby-enhance-result-text.result-destroy { color: #dc2626; }
/* 강화 타이밍 팝업 (오버레이) */
.popup-timing-minigame {
  width: 100%; max-width: 320px; margin: 0 auto; padding: 1.25rem;
  border-radius: 0.75rem; border: 2px solid #57534e; background: rgba(41, 37, 36, 0.98);
  text-align: center;
}
.popup-enhance-result { min-width: 18rem; }
.enhance-result-weapon {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 0.75rem;
  background: rgba(0,0,0,0.2); border-radius: 0.5rem; border: 1px solid #57534e;
}
.enhance-result-img { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.enhance-result-weapon-info { flex: 1; min-width: 0; text-align: left; }
.enhance-result-name { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem 0; color: #e7e5e4; }
.enhance-result-sell-price { font-size: 0.875rem; margin: 0; color: #a8a29e; }
.enhance-result-text { font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem 0; }
.enhance-result-text.result-success { color: #22c55e; }
.enhance-result-text.result-fail { color: #ef4444; }
.enhance-result-text.result-destroy { color: #dc2626; }
.lobby-tap-row .lobby-tap-hint {
  font-size: 0.8rem; color: #d6d3d1; line-height: 1.4; align-self: center;
  padding-left: 0.5rem; border-left: 1px solid #57534e; flex: 1; min-width: 0;
  max-width: 14em; white-space: normal; word-break: keep-all; overflow-wrap: break-word;
}
.lobby-tap-hint { font-size: 0.7rem; color: #a8a29e; white-space: nowrap; flex-shrink: 0; display: inline-block; }

/* 골드 날아가는 연출 (팡 튀었다가 우측 상단 골드로 빨려들어감) */
.tap-gold-fly {
  position: fixed; z-index: 200; pointer-events: none;
  font-size: 1.1rem; font-weight: 700; color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
  transform: translate(-50%, -50%); transition: none; opacity: 0;
}
.tap-gold-fly.tap-gold-pop {
  opacity: 1; animation: tap-gold-pop 0.2s ease-out;
}
@keyframes tap-gold-pop {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.35); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.tap-gold-fly.tap-gold-flying {
  opacity: 1; transition: left 0.45s ease-in, top 0.45s ease-in, transform 0.45s ease-in;
  transform: translate(-50%, -50%) scale(0.7);
}
.lobby-draw-section {
  width: 100%; max-width: 420px; margin-top: 1.25rem;
  border-radius: 0.75rem; overflow: hidden;
  border: 2px solid #78716c;
  background: linear-gradient(180deg, rgba(68, 64, 60, 0.95), rgba(41, 37, 36, 0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.3);
}
.lobby-draw-banner {
  padding: 1rem 1.25rem; text-align: center;
  background: linear-gradient(90deg, rgba(120, 113, 108, 0.25), rgba(68, 64, 60, 0.5));
  border-bottom: 1px solid #57534e;
}
.lobby-draw-title { font-size: 1.15rem; margin: 0 0 0.25rem 0; color: #fef3c7; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.lobby-draw-level { font-size: 0.9rem; color: #a78bfa; font-weight: 600; }
.lobby-draw-info-btn {
  width: 1.5rem; height: 1.5rem; padding: 0; border: none; background: transparent; font-size: 0.9rem;
  cursor: pointer; opacity: 0.9; border-radius: 0.25rem;
}
.lobby-draw-info-btn:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.lobby-draw-desc { font-size: 0.8rem; color: #a8a29e; margin: 0; }
.lobby-draw-xp-wrap {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.75rem;
}
.lobby-draw-xp-label { color: #a8a29e; white-space: nowrap; }
.lobby-draw-xp-track {
  flex: 1; height: 8px; background: #374151; border-radius: 4px; overflow: hidden;
}
.lobby-draw-xp-bar {
  height: 100%; background: linear-gradient(90deg, #a78bfa, #c084fc); border-radius: 4px;
  width: 0%; transition: width 0.2s;
}
.lobby-draw-xp-text { color: #c4b5fd; white-space: nowrap; min-width: 2.5rem; }
.lobby-anvil-area.minigame-active .lobby-tap-row,
.lobby-anvil-area.minigame-active .lobby-draw-section { pointer-events: none; opacity: 0.5; }

.lobby-draw-btns {
  display: flex; gap: 0.75rem; padding: 1rem 1.25rem; justify-content: center; flex-wrap: wrap;
}
.lobby-draw-btn {
  padding: 0.75rem 1.5rem; border-radius: 0.5rem; border: 2px solid #b45309;
  background: linear-gradient(180deg, #d97706, #b45309); color: white; font-size: 1.05rem; font-weight: 600;
  cursor: pointer; box-shadow: 0 2px 8px rgba(180, 83, 9, 0.4);
  transition: transform 0.08s, box-shadow 0.2s; min-width: 120px;
}
.lobby-draw-btn-5 { border-color: #a78bfa; background: linear-gradient(180deg, #8b5cf6, #6d28d9); box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4); }
.lobby-draw-btn-5:hover:not(:disabled) { background: linear-gradient(180deg, #a78bfa, #7c3aed); box-shadow: 0 4px 12px rgba(167, 139, 250, 0.35); }
.lobby-draw-btn:hover:not(:disabled) { background: linear-gradient(180deg, #ea580c, #c2410c); transform: scale(1.03); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35); }
.lobby-draw-btn:active:not(:disabled) { transform: scale(0.98); }
.lobby-draw-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 선택된 장비 영역 (탭 버튼 위) - 넓고 여유 있게 */
.selected-weapon-area {
  min-height: 140px; width: 100%; max-width: 340px; margin: 0 auto 1rem; padding: 1rem;
  border-radius: 0.75rem; border: 2px solid #57534e; background: rgba(41, 37, 36, 0.9);
  display: flex; align-items: center; justify-content: center;
}
.selected-weapon-empty { font-size: 1rem; color: #78716c; }
.selected-weapon-content {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 0; width: 100%;
}
.selected-weapon-content.hidden { display: none !important; }
.selected-weapon-img-wrap {
  width: 100%; display: flex; justify-content: center; padding: 0.5rem 0;
  background: rgba(0,0,0,0.25); border-radius: 0.5rem; border: 1px solid #57534e;
}
.selected-weapon-img {
  width: 88px; height: 88px; object-fit: contain; border-radius: 0.375rem;
}
.selected-weapon-info { min-width: 0; }
.selected-weapon-name { font-weight: 600; color: #e7e5e4; margin: 0 0 0.25rem 0; font-size: 1rem; }
.selected-weapon-level { font-size: 0.9rem; color: #a8a29e; margin: 0 0 0.35rem 0; }
.selected-weapon-probs { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 0.25rem 0 0.35rem 0; font-size: 0.8rem; }
.prob-line { display: inline-block; }
.prob-success { color: #22c55e; }
.prob-fail { color: #f59e0b; }
.prob-destroy { color: #ef4444; }
.prob-keep { color: #a8a29e; }
.prob-sum { font-weight: 600; color: #d6d3d1; margin: 0.15rem 0 0 0; font-size: 0.85rem; }
.prob-with-items { font-size: 0.7rem; color: #78716c; margin: 0.15rem 0 0.35rem 0; }
.selected-weapon-hint { font-size: 0.85rem; margin: 0 0 0.5rem 0; }
.selected-weapon-hint.hint-plus { color: #22c55e; }
.selected-weapon-hint.hint-minus { color: #ef4444; }
.selected-weapon-hint.hint-neutral { color: #78716c; }
.selected-weapon-extra { margin: 0.35rem 0 0.5rem 0; }
.selected-weapon-sell-price { font-size: 0.85rem; color: #a8a29e; margin: 0 0 0.25rem 0; }
.selected-weapon-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.btn-collection { padding: 0.35rem 0.6rem; font-size: 0.8rem; border-radius: 0.375rem; border: 1px solid #57534e; background: #44403c; color: #e7e5e4; cursor: pointer; }
.btn-collection:hover { background: #57534e; }
.collection-registerable-badge { font-size: 0.7rem; color: #fbbf24; background: rgba(251, 191, 36, 0.15); padding: 0.2rem 0.4rem; border-radius: 0.25rem; }
.collection-registerable-badge.hidden { display: none !important; }
/* 축복/보호 효과 설명 */
.material-effect-desc { font-size: 0.75rem; color: #9ca3af; margin: 0 0 0.5rem 0; line-height: 1.35; }
/* 축복/보호/유지 세로 일렬 + 아이콘 */
.selected-weapon-options {
  display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem;
}
.selected-weapon-options .material-option {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.85rem; color: #d6d3d1;
}
.selected-weapon-options .material-option-icon {
  width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; background: rgba(0,0,0,0.25); border-radius: 0.375rem; border: 1px solid #57534e;
}
.selected-weapon-options .material-option-label { flex: 1; }
.selected-weapon-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.selected-weapon-btns .btn-enhance { flex: 1; min-width: 0; padding: 0.5rem 0.75rem; font-size: 1rem; }
.selected-weapon-btns .btn-secondary { padding: 0.5rem 0.75rem; font-size: 0.9rem; }

/* 하단 메뉴 */
.lobby-menu {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  padding: 0.5rem 1rem; background: rgba(28, 25, 23, 0.95); border-top: 1px solid #57534e;
}
.lobby-menu-btn {
  padding: 0.7rem 1rem; border-radius: 0.5rem; border: 1px solid #57534e;
  background: #44403c; color: #e7e5e4; font-size: 0.95rem; cursor: pointer;
}
.lobby-menu-btn:hover { background: #57534e; }

/* 두드리기 연출 */
.hammer-strike { text-align: center; padding: 1rem 0; }
.hammer-strike.hidden { display: none !important; }
.hammer-strike-icon { font-size: 3rem; animation: hammer-hit 0.4s ease-out; }
@keyframes hammer-hit {
  0% { transform: scale(1.5) rotate(-20deg); opacity: 1; }
  50% { transform: scale(1.2) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.hammer-strike-text { font-size: 1.5rem; font-weight: 800; color: #f59e0b; margin: 0.25rem 0 0 0; }

.popup-wide { max-width: 28rem; }
/* 도감: 가로 스크롤 없이 한눈에 보이도록 캔버스 넓게 */
/* 도감: 가로 스크롤 없이 보상 받기까지 한눈에 보이도록 고정 폭으로 넓게 */
.popup-collection { width: 100rem; min-width: 100rem; max-height: 92vh; display: flex; flex-direction: column; text-align: left; padding: 1.5rem 2rem; box-sizing: border-box; }
.collection-summary { margin: 0 0 0.35rem 0; font-size: 0.9rem; color: #d1d5db; flex-shrink: 0; }
.collection-notice { margin: 0 0 0.75rem 0; font-size: 0.75rem; color: #9ca3af; line-height: 1.4; flex-shrink: 0; }
.collection-tabs {
  display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.75rem; flex-shrink: 0;
}
.collection-tab {
  padding: 0.4rem 0.75rem; font-size: 0.85rem; border-radius: 0.375rem;
  border: 1px solid #4b5563; background: #374151; color: #e5e7eb; cursor: pointer;
}
.collection-tab:hover { background: #4b5563; }
.collection-tab.active { border-color: #f59e0b; background: #b45309; color: white; }
.collection-list { flex: 1; min-height: 0; max-height: 78vh; overflow-y: auto; overflow-x: visible; margin-bottom: 1rem; }
.collection-category { margin-bottom: 1.25rem; }
.collection-category .collection-row { margin-bottom: 0.5rem; }
.collection-category .collection-row:last-child { margin-bottom: 0; }
.collection-category-title {
  font-size: 1rem; margin: 0 0 0.5rem 0; padding-bottom: 0.25rem; border-bottom: 1px solid #4b5563;
}
.collection-category-title.grade-common { color: #d6d3d1; }
.collection-category-title.grade-rare { color: #4ade80; }
.collection-category-title.grade-epic { color: #60a5fa; }
.collection-category-title.grade-legendary { color: #a78bfa; }
.collection-category-title.grade-mythic { color: #fbbf24; }
.collection-row {
  position: relative;
  display: flex; align-items: center; gap: 1.5rem; padding: 0.85rem 1rem;
  font-size: 0.9rem; border-radius: 0.5rem; background: rgba(55, 65, 81, 0.5);
  min-width: 0; box-sizing: border-box;
}
.collection-row-imgs { display: flex; gap: 1.25rem; flex-shrink: 0; }
.collection-row-slot {
  width: 96px; min-width: 96px; border-radius: 0.5rem; border: 2px solid #57534e; background: rgba(41, 37, 36, 0.9);
  display: flex; flex-direction: column; align-items: center; overflow: hidden; box-sizing: border-box;
}
.collection-slot-wrap.collection-row-slot { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.collection-row-slot-img-wrap {
  width: 96px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.2);
}
.collection-row-slot img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.collection-row-slot .collection-row-img { width: 100%; height: 100%; object-fit: contain; background: transparent; border-radius: 0; }
.collection-row-slot .collection-img-gray { filter: grayscale(1); opacity: 0.6; }
.collection-row-slot .registered { filter: none; opacity: 1; }
.collection-row-slot .collection-register-btn { margin-top: 0.25rem; }
.collection-slot-name {
  font-size: 0.85rem; color: #e5e7eb; text-align: center; max-width: 120px; min-width: 0;
  padding: 0.25rem 6px; line-height: 1.3; font-weight: 500;
  white-space: normal; word-break: keep-all; overflow-wrap: break-word;
}
.collection-register-btn {
  font-size: 0.8rem; padding: 0.3rem 0.5rem; border-radius: 0.25rem; border: 1px solid #78716c;
  background: #44403c; color: #fbbf24; cursor: pointer; white-space: nowrap;
}
.collection-register-btn:hover { background: #57534e; }
.collection-row-info { flex: 1; min-width: 0; }
.collection-row-range { color: #e5e7eb; }
.collection-row-right {
  display: flex; align-items: center; gap: 1.25rem; margin-left: auto; flex-shrink: 0;
}
.collection-row-rewards-wrap { flex-shrink: 0; }
.collection-row-rewards {
  display: flex; align-items: center; gap: 1.25rem; color: #fbbf24;
  font-size: 1.15rem; font-weight: 600;
}
.collection-row-rewards .collection-reward-item {
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.collection-row-rewards .collection-reward-icon { font-size: 1.35rem; }
.collection-row-rewards .collection-reward-num { font-size: 1.2rem; font-weight: 700; }
.collection-row-actions { flex-shrink: 0; }
.collection-claim-btn {
  font-size: 0.85rem; padding: 0.4rem 0.75rem; border-radius: 0.375rem; border: none;
  background: #22c55e; color: white; cursor: pointer; white-space: nowrap;
}
.collection-claim-btn:hover:not(:disabled) { background: #16a34a; }
.collection-claim-btn:disabled { opacity: 0.7; cursor: not-allowed; background: #4b5563; }
.collection-claimed { font-size: 0.8rem; color: #9ca3af; }
.collection-slot-registerable {
  position: relative;
  cursor: pointer;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5), inset 0 0 12px rgba(245, 158, 11, 0.15);
}
.collection-slot-registerable::after {
  content: '등록 가능';
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  padding: 0.15rem 0.4rem;
  font-size: 0.6rem; font-weight: 700;
  color: #78350f;
  background: #fef3c7;
  border-radius: 0.25rem;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  pointer-events: none;
}
.collection-row-slot.collection-slot-registerable .collection-slot-name { color: #fbbf24; }
.collection-register-confirm-msg { margin: 0.75rem 0; }
.collection-register-confirm-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.quest-diamond-fly { color: #60a5fa; text-shadow: 0 0 8px rgba(96, 165, 250, 0.8); }
.collection-row-highlight {
  animation: collection-row-sparkle 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.6);
}
@keyframes collection-row-sparkle {
  0%, 100% { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.6); filter: brightness(1); }
  50% { box-shadow: 0 0 12px 2px rgba(251, 191, 36, 0.9); filter: brightness(1.15); }
}
.collection-row-completed {
  opacity: 0.85;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.collection-row-completed .collection-row-rewards,
.collection-row-completed .collection-row-rewards .collection-reward-num,
.collection-row-completed .collection-row-info { color: #9ca3af; }
.collection-row-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(34, 197, 94, 0.35); border-radius: 0.375rem;
  font-weight: 700; color: #166534; font-size: 0.9rem;
  pointer-events: none;
}

/* 도감 보상 팝업 (아이템 이미지 + 명성/다이아) */
.popup-collection-reward { max-width: 18rem; }
.collection-reward-content {
  display: flex; align-items: center; gap: 1.25rem; margin: 1rem 0;
  padding: 1rem; background: rgba(0,0,0,0.2); border-radius: 0.5rem; border: 1px solid #4b5563;
}
.collection-reward-img {
  width: 72px; height: 72px; object-fit: contain; background: rgba(0,0,0,0.2); border-radius: 0.375rem; flex-shrink: 0;
}
.collection-reward-items { display: flex; flex-direction: column; gap: 0.5rem; }
.collection-reward-item {
  display: flex; align-items: center; gap: 0.35rem; font-size: 1.1rem; font-weight: 600; color: #e7e5e4;
}
.collection-reward-icon { font-size: 1.25rem; }

/* 모달 탭 공통 */
.popup-tabs .modal-tabs, .popup-ranking .ranking-tabs { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.modal-tab {
  padding: 0.4rem 0.75rem; font-size: 0.85rem; border-radius: 0.375rem;
  border: 1px solid #4b5563; background: #374151; color: #e5e7eb; cursor: pointer;
}
.modal-tab:hover { background: #4b5563; }
.modal-tab.active { border-color: #f59e0b; background: #b45309; color: white; }
.modal-tab-panels { margin-bottom: 1rem; min-height: 120px; }
.modal-tab-panel { display: none; }
.modal-tab-panel.active { display: block; }

/* 퀘스트 리스트 */
.quest-list, .shop-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.quest-list li, .shop-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.75rem; margin-bottom: 0.25rem; border-radius: 0.375rem;
  background: rgba(55, 65, 81, 0.6); border: 1px solid #4b5563; font-size: 0.875rem;
}
.quest-item .quest-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.quest-list .quest-name, .shop-list .shop-name { color: #e5e7eb; }
.quest-list .quest-reward, .shop-list .shop-price { color: #fbbf24; flex-shrink: 0; font-size: 0.8rem; }
.quest-list .quest-progress { font-size: 0.8rem; color: #9ca3af; margin-top: 0.2rem; }
.quest-progress-wrap { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.quest-progress-track { flex: 1; min-width: 0; height: 8px; background: #374151; border-radius: 4px; overflow: hidden; }
.quest-progress-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 4px; transition: width 0.2s ease; }
.quest-progress-num { font-size: 0.75rem; color: #9ca3af; flex-shrink: 0; }
.quest-claim-btn { padding: 0.25rem 0.5rem; font-size: 0.8rem; border-radius: 0.25rem; border: none; background: #22c55e; color: white; cursor: pointer; white-space: nowrap; }
.quest-claim-btn:hover:not(:disabled) { background: #16a34a; }
.quest-claim-btn:disabled { background: #4b5563; opacity: 0.6; cursor: not-allowed; }
.quest-done-label { font-size: 0.8rem; color: #9ca3af; }
.quest-item-done { opacity: 0.85; border-color: #374151; background: rgba(31, 41, 55, 0.8); }
.quest-reward-list { list-style: none; margin: 0 0 1rem 0; padding: 0; }
.quest-reward-list li { padding: 0.25rem 0; color: #e5e7eb; }
.shop-list .shop-buy { padding: 0.25rem 0.5rem; font-size: 0.8rem; border-radius: 0.25rem; border: none; background: #b45309; color: white; cursor: pointer; }
.shop-list .shop-buy:hover { background: #d97706; }
.shop-list .shop-buy:disabled { opacity: 0.5; cursor: not-allowed; }
.shop-item { flex-wrap: wrap; }
.shop-item .shop-main { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.shop-item .shop-img { width: 48px; height: 48px; border-radius: 0.375rem; background: rgba(0,0,0,0.3); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.shop-item .shop-contents { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; font-size: 0.75rem; color: #9ca3af; }
.shop-item .shop-contents .shop-content-item { display: flex; align-items: center; gap: 2px; }
.shop-item .shop-limit { font-size: 0.7rem; color: #f59e0b; margin-top: 0.2rem; }

/* 랭킹 */
.popup-ranking { max-width: 22rem; }
.ranking-list-wrap { max-height: 280px; overflow-y: auto; margin-bottom: 1rem; }
.ranking-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.ranking-list li {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #374151; font-size: 0.9rem; counter-increment: rank;
}
.ranking-list li::before { content: counter(rank); font-weight: 700; color: #f59e0b; min-width: 1.5rem; }
.ranking-list li.ranking-hint { counter-increment: none; }
.ranking-list li.ranking-hint::before { content: ''; }
.ranking-list .ranking-name { flex: 1; min-width: 0; color: #e5e7eb; }
.ranking-list .ranking-value { color: #fbbf24; }

/* 설정 확장 */
.popup-settings { max-width: 22rem; text-align: left; }
.settings-section { margin-bottom: 1.25rem; }
.settings-section-title { font-size: 0.9rem; color: #9ca3af; margin: 0 0 0.5rem 0; padding-bottom: 0.25rem; border-bottom: 1px solid #374151; }
.settings-desc { font-size: 0.8rem; color: #78716c; margin: 0 0 0.5rem 0; }
.settings-row { display: block; margin-bottom: 0.75rem; }
.settings-row input[type="text"] { margin-left: 0.5rem; padding: 0.375rem 0.5rem; border-radius: 0.25rem; border: 1px solid #4b5563; background: #374151; color: #e5e7eb; width: 140px; }
.settings-row-toggle { display: flex; align-items: center; justify-content: space-between; }
.settings-row-toggle input { margin: 0; }
.btn-block { display: block; width: 100%; margin-left: 0; margin-bottom: 0.5rem; padding: 0.5rem 1rem; }
.settings-danger { color: #f87171; border-color: #dc2626; }
.settings-danger:hover { background: rgba(220, 38, 38, 0.2); }
.settings-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }

.btn-secondary { margin-left: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid #4b5563; background: #374151; color: #e5e7eb; cursor: pointer; }
.btn-secondary:hover { background: #4b5563; }
.text-muted { font-size: 0.875rem; color: #9ca3af; margin: 0.5rem 0 1rem 0; }

.topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 1rem; border-bottom: 1px solid #374151; background: #1f2937;
}
.topbar-title { font-size: 1.125rem; font-weight: 700; margin: 0; }
.topbar-stats { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.875rem; }
.stat { color: #9ca3af; }
.stat .stat-amber { color: #f59e0b; }
.stat .stat-yellow { color: #eab308; }

.main {
  display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; max-width: 1200px; margin: 0 auto;
}
@media (max-width: 768px) { .main { grid-template-columns: 1fr; } }

.anvil-section {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1.5rem; border-radius: 0.5rem; border: 1px solid #4b5563; background: rgba(31, 41, 55, 0.5);
}
.section-title { font-size: 0.875rem; color: #9ca3af; margin: 0 0 0.5rem 0; }
.anvil-btn {
  width: 96px; height: 96px; border-radius: 0.75rem; border: 4px solid #92400e;
  background: rgba(146, 64, 14, 0.5); font-size: 2.5rem; cursor: pointer;
  transition: transform 0.1s, background 0.2s;
}
.anvil-btn:hover:not(:disabled) { background: rgba(146, 64, 14, 0.8); }
.anvil-btn:active:not(:disabled) { transform: scale(0.95); }
.anvil-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tap-energy, .next-produce { font-size: 0.75rem; color: #9ca3af; margin: 0; }
.combo-text { color: #f59e0b; font-size: 0.75rem; margin: 0; }
.combo-text.hidden { display: none; }

.right-section { display: flex; flex-direction: column; gap: 1rem; }

.inventory-panel, .enhance-panel {
  padding: 1rem; border-radius: 0.5rem; border: 1px solid #4b5563; background: #1f2937;
}
.panel-title { font-size: 0.875rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #e5e7eb; }

.inventory-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem;
}
.inv-slot {
  padding: 0.5rem; border-radius: 0.25rem; border: 1px solid #4b5563; background: #374151;
  font-size: 0.75rem;
}
.inv-slot.selected { border-color: #f59e0b; background: #374151; }
.inv-slot-empty { border-style: dashed; min-height: 60px; }
.inv-slot-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-slot-name.grade-common { color: #d1d5db; }
.inv-slot-name.grade-rare { color: #4ade80; }
.inv-slot-name.grade-epic { color: #60a5fa; }
.inv-slot-name.grade-legendary { color: #a78bfa; }
.inv-slot-name.grade-mythic { color: #fbbf24; }
.inv-slot-grade { font-size: 10px; color: #6b7280; }
.inv-slot-btns { display: flex; gap: 2px; margin-top: 4px; flex-wrap: wrap; }
.inv-slot-btns button { flex: 1; min-width: 0; padding: 2px 4px; font-size: 10px; border-radius: 2px; border: none; cursor: pointer; background: #4b5563; color: #e5e7eb; }
.inv-slot-btns button:hover { background: #6b7280; }
.inv-slot-btns .btn-amber { background: #b45309; }
.inv-slot-btns .btn-amber:hover { background: #d97706; }
.inv-slot-btns .btn-green { background: #15803d; }
.inv-slot-btns .btn-green:hover { background: #16a34a; }

.enhance-selected, .enhance-hint { font-size: 0.875rem; color: #9ca3af; margin: 0 0 0.25rem 0; }
.enhance-hint.hidden { display: none; }
.enhance-options { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.75rem; }
.enhance-options label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.btn-enhance {
  width: 100%; padding: 0.5rem 1rem; border-radius: 0.5rem; border: none;
  background: #b45309; color: white; font-weight: 500; cursor: pointer;
}
.btn-enhance:hover:not(:disabled) { background: #d97706; }
.btn-enhance:disabled { opacity: 0.5; cursor: not-allowed; }
.center-sell-btn { margin-top: 0.5rem; }

.footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-top: 1px solid #374151; background: #1f2937;
}
.footer-label { font-size: 0.875rem; color: #9ca3af; }
.facility-list { display: flex; flex-direction: column; gap: 0.75rem; }
.facility-card {
  border-radius: 0.5rem; border: 1px solid #4b5563; overflow: hidden;
  font-size: 0.85rem; min-width: 0; background: #374151;
}
.facility-card .facility-banner {
  position: relative; min-height: 56px; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.facility-card .facility-banner .facility-name {
  position: relative; z-index: 1; font-weight: 700; font-size: 1rem; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8); padding: 0.25rem 0.5rem;
}
.facility-card-workshop .facility-banner { background: linear-gradient(135deg, #78350f 0%, #451a03 40%, #1c1917 100%); border-bottom: 1px solid rgba(251,191,36,0.2); }
.facility-card-furnace .facility-banner { background: linear-gradient(135deg, #7c2d12 0%, #431407 50%, #1c1917 100%); }
.facility-card-anvil .facility-banner { background: linear-gradient(135deg, #44403c 0%, #292524 50%, #1c1917 100%); }
.facility-card-storage .facility-banner { background: linear-gradient(135deg, #1e3a5f 0%, #1e293b 50%, #0f172a 100%); }
.facility-card-signboard .facility-banner { background: linear-gradient(135deg, #713f12 0%, #a16207 50%, #854d0e 100%); }
.facility-card .facility-body {
  display: grid; grid-template-columns: auto 1fr auto auto auto; grid-template-rows: auto auto;
  align-items: center; gap: 0.5rem 1rem; row-gap: 0.35rem;
  padding: 0.75rem 1rem;
}
.facility-card .facility-icon { font-size: 1.75rem; width: 2.5rem; text-align: center; }
.facility-card .facility-level { color: #a8a29e; white-space: nowrap; }
.facility-card .facility-cost { color: #9ca3af; white-space: nowrap; }
.facility-card .facility-buff { grid-column: 1 / -1; font-size: 0.8rem; color: #9ca3af; text-align: left; }
.facility-card .facility-upgrade-btn {
  padding: 0.35rem 0.6rem; font-size: 0.8rem; border-radius: 0.25rem; border: none;
  background: #b45309; color: white; cursor: pointer; white-space: nowrap;
}
.facility-card .facility-upgrade-btn:hover:not(:disabled) { background: #d97706; }
.facility-card .facility-upgrade-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#facilityOverlay .popup { display: flex; flex-direction: column; max-height: 90vh; }
#facilityOverlay .facility-list { flex: 1; min-height: 0; overflow-y: auto; margin-bottom: 1rem; }
#facilityOverlay #facilityClose { margin-top: 0.5rem; flex-shrink: 0; }

/* Overlay & Popup */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem;
}
.overlay.hidden { display: none; }
#questRewardOverlay { z-index: 60; }
#collectionRewardOverlay { z-index: 65; }
.popup {
  background: #1f2937; border: 1px solid #4b5563; border-radius: 0.75rem; padding: 1.5rem; max-width: 24rem; width: 100%; text-align: center;
}
.popup h3 { margin: 0 0 0.5rem 0; }
.popup p { color: #d1d5db; margin: 0 0 1rem 0; }
.btn-primary { padding: 0.5rem 1.5rem; border-radius: 0.5rem; border: none; background: #b45309; color: white; font-weight: 500; cursor: pointer; }
.btn-primary:hover { background: #d97706; }

/* 장비 뽑기 연출 */
.draw-effect-overlay { background: rgba(0,0,0,0.85); }
.draw-effect-content { text-align: center; }
.draw-effect-box {
  font-size: 4rem; margin-bottom: 1rem; animation: draw-box-pulse 0.6s ease-in-out infinite;
}
.draw-effect-text { font-size: 1.1rem; color: #fef3c7; margin: 0; }
@keyframes draw-box-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.9; }
}

/* 장비 뽑기 결과 팝업 */
.popup-draw-result { max-width: 20rem; }
.popup-draw-result.popup-draw-result--grid { max-width: 28rem; }
.draw-result-title { margin: 0 0 1rem 0; font-size: 1.1rem; color: #fef3c7; }
.draw-result-weapon {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1rem; margin-bottom: 1rem; background: rgba(0,0,0,0.3); border-radius: 0.5rem; border: 1px solid #57534e;
}
.draw-result-img { width: 80px; height: 80px; object-fit: contain; border-radius: 0.375rem; }
.draw-result-name { font-size: 1rem; font-weight: 600; color: #e7e5e4; margin: 0; }
.draw-result-grade {
  font-size: 0.8rem; padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-weight: 500;
}
.draw-result-grade.grade-common { background: rgba(214, 211, 209, 0.2); color: #d6d3d1; }
.draw-result-grade.grade-rare { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.draw-result-grade.grade-epic { background: rgba(96, 165, 250, 0.2); color: #60a5fa; }
.draw-result-grade.grade-legendary { background: rgba(167, 139, 250, 0.2); color: #a78bfa; }
.draw-result-grade.grade-mythic { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.draw-result-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-bottom: 1rem;
}
.draw-result-slot {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.5rem; background: rgba(0,0,0,0.3); border-radius: 0.375rem; border: 1px solid #57534e;
}
.draw-result-slot-img { width: 48px; height: 48px; object-fit: contain; border-radius: 0.25rem; }
.draw-result-slot-name { font-size: 0.7rem; font-weight: 600; color: #e7e5e4; margin: 0; text-align: center; line-height: 1.2; }
.draw-result-slot-grade { font-size: 0.65rem; padding: 0.15rem 0.35rem; border-radius: 0.2rem; font-weight: 500; }
.draw-result-slot-grade.grade-common { background: rgba(214, 211, 209, 0.2); color: #d6d3d1; }
.draw-result-slot-grade.grade-rare { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.draw-result-slot-grade.grade-epic { background: rgba(96, 165, 250, 0.2); color: #60a5fa; }
.draw-result-slot-grade.grade-legendary { background: rgba(167, 139, 250, 0.2); color: #a78bfa; }
.draw-result-slot-grade.grade-mythic { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }

/* 뽑기 정보 팝업 */
.popup-draw-info { max-width: 20rem; text-align: left; }
.popup-draw-info h3 { text-align: center; }
.draw-info-level { font-size: 0.9rem; color: #d1d5db; margin: 0 0 0.5rem 0; }
.draw-info-max-enhance { font-size: 0.9rem; color: #fbbf24; margin: 0 0 0.75rem 0; }
.draw-info-probs { list-style: none; margin: 0 0 1rem 0; padding: 0; font-size: 0.85rem; }
.draw-info-prob-item { padding: 0.2rem 0; }
.draw-info-prob-item.grade-common { color: #d6d3d1; }
.draw-info-prob-item.grade-rare { color: #4ade80; }
.draw-info-prob-item.grade-epic { color: #60a5fa; }
.draw-info-prob-item.grade-legendary { color: #a78bfa; }
.draw-info-prob-item.grade-mythic { color: #fbbf24; }

/* Minigame */
.minigame-modal {
  position: relative; background: #1f2937; border: 1px solid #4b5563; border-radius: 0.75rem; padding: 1.5rem; max-width: 28rem; width: 100%;
}
.minigame-modal h3 { margin: 0 0 0.5rem 0; text-align: center; }
.minigame-weapon { font-size: 0.875rem; color: #9ca3af; text-align: center; margin: 0 0 1rem 0; }

/* 룰렛 */
.roulette-wrap {
  position: relative; width: 200px; height: 200px; margin: 0 auto 1rem;
}
.roulette-pointer {
  position: absolute; top: -4px; left: 50%; z-index: 2;
  width: 0; height: 0;
  border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-top: 20px solid #f59e0b;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.roulette-wheel {
  position: absolute; inset: 0; border-radius: 50%; border: 4px solid #374151;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
  transition: transform 0.1s linear;
}
.roulette-hint { font-size: 0.8rem; color: #9ca3af; text-align: center; margin: 0 0 0.5rem 0; }
.roulette-bonus-result { text-align: center; margin-bottom: 0.5rem; }
.roulette-bonus-result.hidden { display: none; }
.roulette-bonus-text { font-size: 1.1rem; font-weight: 700; margin: 0; }
.roulette-bonus-text.bonus { color: #22c55e; }
.roulette-bonus-text.miss { color: #ef4444; }

.minigame-result { text-align: center; padding: 1rem 0; }
.minigame-result.hidden { display: none; }
.minigame-result-text { font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem 0; }
.minigame-result-text.success { color: #22c55e; }
.minigame-result-text.great { color: #f59e0b; }
.minigame-result-text.fail { color: #ef4444; }
.minigame-result-text.destroy { color: #dc2626; }
.minigame-close {
  position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: none; color: #9ca3af; font-size: 1.25rem; cursor: pointer; padding: 0.25rem;
}
.minigame-close:hover { color: white; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.minigame-modal.shake { animation: shake 0.5s ease-in-out; }

.hidden { display: none !important; }