/**
 * 방치형 웹 RPG 게임 - 메인 스타일시트
 * 다크 판타지 고딕 테마 (버건디 + 금색, 양피지 톤)
 * 반응형 CSS (360px ~ 1920px)
 * Requirements: 14.2
 */

/* ============================================================
 * 디자인 토큰 (다크 판타지 팔레트)
 * ============================================================ */
:root {
  /* 배경 */
  --dp-bg-void: #0a0806;
  --dp-bg-deep: #12100b;
  --dp-bg-panel: #1c1712;
  --dp-bg-panel-light: #241d15;

  /* 금속/금색 (강조, 골드, 제목) */
  --dp-gold: #c9a55c;
  --dp-gold-bright: #e8c874;
  --dp-gold-dim: #8a6f3d;

  /* 버건디/피 (위험, 체력, 강조 테두리) */
  --dp-blood: #7a1f2b;
  --dp-blood-bright: #b03040;
  --dp-blood-glow: rgba(176, 48, 64, 0.5);

  /* 마나/신비 */
  --dp-arcane: #3d5a80;
  --dp-arcane-bright: #5c85b3;

  /* 텍스트 */
  --dp-text: #d8cba8;
  --dp-text-dim: #8a7d5f;
  --dp-text-bright: #f0e6c8;

  /* 테두리 */
  --dp-border: #3a3226;
  --dp-border-light: #4a3f28;

  /* 등급 색상 (아이템) */
  --dp-grade-common: #a8a29a;
  --dp-grade-uncommon: #4caf6a;
  --dp-grade-rare: #4a90d9;
  --dp-grade-legendary: #b366d9;

  /* 그림자 */
  --dp-shadow-deep: 0 4px 20px rgba(0, 0, 0, 0.9);
  --dp-shadow-glow-gold: 0 0 12px rgba(201, 165, 92, 0.4);
}

/* ============================================================
 * Reset & Base
 * ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dp-text);
  background: var(--dp-bg-void);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* 제목류는 고딕 느낌의 세리프 폰트로 강조 */
.character-creation__title,
.status-bar__name,
.inventory-screen__title,
.shop-screen__title,
.upgrade-screen__title,
.stage-screen__title,
.achievement-screen__title,
.offline-popup__title,
.item-tooltip__header {
  font-family: 'Cinzel', 'Noto Serif KR', serif;
}

button {
  font-family: inherit;
}

/* === Layout === */
.game-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 1920px;
  margin: 0 auto;
  background: var(--dp-bg-void);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(122, 31, 43, 0.08) 0%, transparent 60%);
}

.game-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

/* ============================================================
 * Status Bar - 고딕 금속 프레임
 * ============================================================ */
.status-bar {
  background: linear-gradient(180deg, var(--dp-bg-panel) 0%, var(--dp-bg-deep) 100%);
  padding: 8px 12px;
  border-bottom: 2px solid var(--dp-border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(201, 165, 92, 0.15);
  flex-shrink: 0;
}

.status-bar__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.status-bar__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--dp-text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  letter-spacing: 0.5px;
}

.status-bar__level {
  font-size: 0.85rem;
  color: var(--dp-gold);
  font-weight: 600;
  text-shadow: 0 0 6px rgba(201, 165, 92, 0.4);
}

.status-bar__stage {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--dp-arcane-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-bar__bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 4px;
}

.status-bar__hp-container,
.status-bar__exp-container {
  position: relative;
  height: 16px;
  background: var(--dp-bg-void);
  border: 1px solid var(--dp-border);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
}

.status-bar__hp-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--dp-blood) 0%, var(--dp-blood-bright) 100%);
  transition: width 0.3s ease;
  width: 100%;
  box-shadow: 0 0 6px var(--dp-blood-glow);
}

.status-bar__exp-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--dp-arcane) 0%, var(--dp-arcane-bright) 100%);
  transition: width 0.3s ease;
  width: 0%;
}

.status-bar__hp-text,
.status-bar__exp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  color: var(--dp-text-bright);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

.status-bar__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-bar__gold {
  font-size: 0.85rem;
  color: var(--dp-gold-bright);
  font-weight: 600;
  text-shadow: 0 0 4px rgba(201, 165, 92, 0.4);
}

.status-bar__playtime {
  font-size: 0.75rem;
  color: var(--dp-text-dim);
}

/* ============================================================
 * Nav Bar - 고딕 금속 탭
 * ============================================================ */
.nav-bar {
  display: flex;
  background: linear-gradient(180deg, var(--dp-bg-panel) 0%, var(--dp-bg-deep) 100%);
  border-top: 2px solid var(--dp-border-light);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(201, 165, 92, 0.1);
  flex-shrink: 0;
  padding: 4px 0;
}

.nav-bar__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 2px;
  border: none;
  background: transparent;
  color: var(--dp-text-dim);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, text-shadow 0.2s;
  border-radius: 2px;
  min-width: 0;
}

.nav-bar__tab:hover {
  background: rgba(201, 165, 92, 0.08);
  color: var(--dp-text);
}

.nav-bar__tab--active {
  color: var(--dp-gold-bright);
  background: rgba(201, 165, 92, 0.12);
  text-shadow: 0 0 6px rgba(201, 165, 92, 0.5);
}

.nav-bar__icon {
  font-size: 1.2rem;
  line-height: 1;
  filter: grayscale(0.3);
}

.nav-bar__label {
  font-size: 0.65rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: 0.3px;
}

/* ============================================================
 * Event Log - 고서(古書) 스타일
 * ============================================================ */
.event-log {
  background: linear-gradient(180deg, var(--dp-bg-panel) 0%, var(--dp-bg-deep) 100%);
  border-radius: 4px;
  border: 1px solid var(--dp-border);
  max-height: 150px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
}

.event-log__header {
  padding: 4px 8px;
  font-size: 0.75rem;
  color: var(--dp-gold);
  font-weight: 600;
  border-bottom: 1px solid var(--dp-border);
  flex-shrink: 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.event-log__list {
  list-style: none;
  overflow-y: auto;
  padding: 4px 8px;
  flex: 1;
}

.event-log__entry {
  font-size: 0.75rem;
  padding: 2px 0;
  border-bottom: 1px solid rgba(201, 165, 92, 0.05);
  color: var(--dp-text-dim);
}

.event-log__entry--combat {
  color: var(--dp-blood-bright);
}

.event-log__entry--loot {
  color: var(--dp-gold-bright);
}

.event-log__entry--upgrade {
  color: var(--dp-grade-legendary);
}

.event-log__entry--levelup {
  color: var(--dp-grade-uncommon);
  font-weight: 600;
}

/* ============================================================
 * Offline Reward Popup - 봉인된 서약서 스타일
 * ============================================================ */
.offline-popup__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.offline-popup {
  background: radial-gradient(ellipse at top, var(--dp-bg-panel-light) 0%, var(--dp-bg-void) 100%);
  border: 1px solid var(--dp-gold-dim);
  border-radius: 8px;
  padding: 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--dp-shadow-deep), var(--dp-shadow-glow-gold);
}

.offline-popup__header {
  text-align: center;
  margin-bottom: 16px;
}

.offline-popup__title {
  font-size: 1.2rem;
  color: var(--dp-gold-bright);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(201, 165, 92, 0.4);
}

.offline-popup__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.offline-popup__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(201, 165, 92, 0.05);
  border: 1px solid var(--dp-border);
  border-radius: 4px;
}

.offline-popup__label {
  font-size: 0.85rem;
  color: var(--dp-text-dim);
}

.offline-popup__value {
  font-size: 0.9rem;
  color: var(--dp-text-bright);
  font-weight: 600;
}

.offline-popup__capped {
  text-align: center;
  font-size: 0.75rem;
  color: var(--dp-blood-bright);
  margin-bottom: 12px;
}

.offline-popup__claim-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--dp-blood-bright) 0%, var(--dp-blood) 100%);
  color: var(--dp-text-bright);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform 0.1s, box-shadow 0.2s;
  text-transform: uppercase;
}

.offline-popup__claim-btn:hover {
  box-shadow: 0 4px 12px var(--dp-blood-glow);
}

.offline-popup__claim-btn:active {
  transform: scale(0.97);
}

/* ============================================================
 * Character Creation - 고대 서약 화면
 * ============================================================ */
.character-creation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  padding: 24px;
  gap: 16px;
  background: radial-gradient(ellipse at 50% 30%, rgba(122, 31, 43, 0.12) 0%, var(--dp-bg-void) 70%);
}

.character-creation__title {
  font-size: 1.6rem;
  color: var(--dp-gold-bright);
  margin-bottom: 8px;
  letter-spacing: 1px;
  text-shadow: 0 0 16px rgba(201, 165, 92, 0.5);
  text-align: center;
}

.character-creation__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}

.character-creation__label {
  font-size: 0.85rem;
  color: var(--dp-text-dim);
  letter-spacing: 0.5px;
}

.character-creation__input {
  padding: 10px;
  border-radius: 4px;
  border: 1px solid var(--dp-border-light);
  background: var(--dp-bg-void);
  color: var(--dp-text-bright);
  font-size: 1rem;
  font-family: 'Noto Sans KR', sans-serif;
}

.character-creation__input:focus {
  outline: none;
  border-color: var(--dp-gold-dim);
  box-shadow: 0 0 8px rgba(201, 165, 92, 0.3);
}

.character-creation__error {
  color: var(--dp-blood-bright);
  font-size: 0.8rem;
  min-height: 1.2em;
}

.character-creation__jobs {
  display: flex;
  gap: 8px;
}

.character-creation__job-btn {
  flex: 1;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid var(--dp-border-light);
  background: var(--dp-bg-panel);
  color: var(--dp-text-dim);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.character-creation__job-btn--active {
  border-color: var(--dp-gold);
  color: var(--dp-gold-bright);
  background: rgba(201, 165, 92, 0.1);
  box-shadow: 0 0 8px rgba(201, 165, 92, 0.2);
}

.character-creation__submit-btn {
  padding: 12px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--dp-blood-bright) 0%, var(--dp-blood) 100%);
  color: var(--dp-text-bright);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: box-shadow 0.2s;
}

.character-creation__submit-btn:hover {
  box-shadow: 0 4px 16px var(--dp-blood-glow);
}

/* ============================================================
 * Screen Overlay 공통 패널 (상점/강화/구역/업적/인벤토리)
 * Requirements: 6.7, 7.9, 15.5
 * ============================================================ */
.screen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding-bottom: 56px; /* 하단 배너 광고 높이만큼 여유 */
}

@media (min-width: 768px) {
  .screen-overlay {
    padding-bottom: 96px;
  }
}

.screen-overlay__panel {
  position: relative;
  background: radial-gradient(ellipse at top, var(--dp-bg-panel-light) 0%, var(--dp-bg-void) 100%);
  border: 1px solid var(--dp-gold-dim);
  border-radius: 8px;
  width: 92%;
  max-width: 480px;
  max-height: 82vh;
  overflow-y: auto;
  padding: 16px;
  box-shadow: var(--dp-shadow-deep), var(--dp-shadow-glow-gold);
}

.screen-overlay__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--dp-border-light);
  border-radius: 50%;
  background: var(--dp-bg-panel);
  color: var(--dp-text);
  font-size: 16px;
  cursor: pointer;
  z-index: 1;
  transition: border-color 0.2s, color 0.2s;
}

.screen-overlay__close:hover {
  border-color: var(--dp-gold);
  color: var(--dp-gold-bright);
}

.screen-overlay__content {
  margin-top: 8px;
}

/* 공통 화면 제목 스타일 (상점/강화/구역/업적) */
.shop-screen__title,
.upgrade-screen__title,
.stage-screen__title,
.achievement-screen__title {
  font-size: 18px;
  font-weight: bold;
  color: var(--dp-gold);
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 12px;
  text-shadow: 0 0 6px rgba(201, 165, 92, 0.5);
  border-bottom: 1px solid var(--dp-border);
  padding-bottom: 10px;
}

/* ============================================================
 * Shop Screen
 * Requirements: 5.1
 * ============================================================ */
.shop-screen__bulk-area {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.shop-screen__bulk-label {
  font-size: 12px;
  color: var(--dp-text-dim);
}

.shop-screen__bulk-btn {
  padding: 6px 10px;
  border: 1px solid var(--dp-border-light);
  border-radius: 4px;
  background: var(--dp-bg-panel);
  color: var(--dp-text);
  font-size: 12px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.shop-screen__bulk-btn:hover {
  box-shadow: 0 0 8px rgba(201, 165, 92, 0.25);
}

.shop-screen__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shop-screen__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(160deg, var(--dp-bg-panel) 0%, var(--dp-bg-deep) 100%);
  border: 1px solid var(--dp-border);
  border-left: 3px solid var(--dp-grade-common);
  border-radius: 4px;
}

.shop-screen__item-info {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.85rem;
  flex-wrap: wrap;
  flex: 1;
}

.shop-screen__item-name {
  font-weight: 600;
}

.shop-screen__item-grade,
.shop-screen__item-type {
  font-size: 0.75rem;
  color: var(--dp-text-dim);
}

.shop-screen__item-price {
  font-size: 0.85rem;
  color: var(--dp-gold-bright);
  font-weight: 600;
  white-space: nowrap;
}

.shop-screen__sell-btn {
  padding: 6px 12px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--dp-bg-panel-light), var(--dp-bg-panel));
  color: var(--dp-gold-bright);
  cursor: pointer;
  font-size: 0.8rem;
  white-space: nowrap;
  transition: box-shadow 0.15s;
}

.shop-screen__sell-btn:hover {
  box-shadow: 0 0 8px rgba(201, 165, 92, 0.3);
}

.shop-screen__empty {
  color: var(--dp-text-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 16px;
}

/* ============================================================
 * Upgrade Screen
 * Requirements: 6.1
 * ============================================================ */
.upgrade-screen__stones {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--dp-border-light);
  border-radius: 5px;
  background: var(--dp-bg-panel);
  color: var(--dp-text);
  text-align: center;
  font-size: 0.85rem;
}

.status-bar__music {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(201, 165, 92, 0.38);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  color: var(--dp-text-dim);
  font-size: 0.64rem;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  flex: 0 0 22px;
}

.status-bar__music--playing {
  color: var(--dp-gold-bright);
  border-color: var(--dp-gold);
  box-shadow: 0 0 5px rgba(201, 165, 92, 0.3);
}

.upgrade-screen__slots {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upgrade-screen__slot {
  background: radial-gradient(ellipse at top, var(--dp-bg-panel-light) 0%, var(--dp-bg-void) 100%);
  border: 1px solid var(--dp-border-light);
  border-radius: 6px;
  padding: 12px;
}

.upgrade-screen__slot-title {
  font-size: 12px;
  color: var(--dp-text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--dp-border);
  padding-bottom: 4px;
}

.upgrade-screen__slot-empty {
  color: var(--dp-text-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 12px 0;
}

.upgrade-screen__item-name {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.upgrade-screen__item-grade,
.upgrade-screen__item-stat,
.upgrade-screen__cost,
.upgrade-screen__rate {
  font-size: 0.8rem;
  color: var(--dp-text-dim);
  margin-bottom: 3px;
}

.upgrade-screen__item-level {
  font-size: 0.85rem;
  color: var(--dp-gold-bright);
  font-weight: 700;
  margin-bottom: 4px;
  text-shadow: 0 0 6px rgba(201, 165, 92, 0.4);
}

.upgrade-screen__cost {
  color: var(--dp-gold);
}

.upgrade-screen__rate {
  color: var(--dp-arcane-bright);
}

.upgrade-screen__upgrade-btn {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--dp-blood-bright) 0%, var(--dp-blood) 100%);
  color: var(--dp-text-bright);
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: box-shadow 0.2s;
}

.upgrade-screen__upgrade-btn:hover:not(:disabled) {
  box-shadow: 0 4px 12px var(--dp-blood-glow);
}

.upgrade-screen__upgrade-btn:disabled {
  background: var(--dp-bg-panel);
  border-color: var(--dp-border);
  color: var(--dp-text-dim);
  cursor: not-allowed;
}

/* ============================================================
 * Stage Screen
 * Requirements: 7.7
 * ============================================================ */
.stage-screen__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stage-screen__stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(160deg, var(--dp-bg-panel) 0%, var(--dp-bg-deep) 100%);
  border: 1px solid var(--dp-border-light);
  border-radius: 6px;
}

.stage-screen__stage--current {
  border-color: var(--dp-gold);
  box-shadow: 0 0 10px rgba(201, 165, 92, 0.25);
}

.stage-screen__stage--locked {
  opacity: 0.55;
}

.stage-screen__stage-name {
  font-weight: 700;
  color: var(--dp-text-bright);
  margin-bottom: 2px;
}

.stage-screen__stage-level {
  font-size: 0.8rem;
  color: var(--dp-text-dim);
}

.stage-screen__stage-lock {
  font-size: 0.8rem;
  color: var(--dp-blood-bright);
  margin-top: 2px;
}

.stage-screen__move-btn {
  padding: 8px 14px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--dp-bg-panel-light), var(--dp-bg-panel));
  color: var(--dp-gold-bright);
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow 0.15s;
}

.stage-screen__move-btn:hover:not(:disabled) {
  box-shadow: 0 0 8px rgba(201, 165, 92, 0.3);
}

.stage-screen__move-btn:disabled {
  background: var(--dp-bg-void);
  border-color: var(--dp-border);
  color: var(--dp-text-dim);
  cursor: not-allowed;
}

/* ============================================================
 * Achievement Screen
 * Requirements: 10.5
 * ============================================================ */
.achievement-screen__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.achievement-screen__tab {
  flex: 1;
  padding: 8px 6px;
  border: 1px solid var(--dp-border-light);
  border-radius: 4px;
  background: var(--dp-bg-panel);
  color: var(--dp-text-dim);
  cursor: pointer;
  font-size: 0.85rem;
  transition: color 0.2s, border-color 0.2s;
}

.achievement-screen__tab--active {
  color: var(--dp-gold-bright);
  border-color: var(--dp-gold);
  background: rgba(201, 165, 92, 0.1);
}

.achievement-screen__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.achievement-screen__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(160deg, var(--dp-bg-panel) 0%, var(--dp-bg-deep) 100%);
  border: 1px solid var(--dp-border);
  border-radius: 6px;
}

.achievement-screen__item--completed {
  border-color: var(--dp-gold-dim);
}

.achievement-screen__item--claimed {
  opacity: 0.6;
}

.achievement-screen__item-name {
  font-weight: 700;
  color: var(--dp-text-bright);
  margin-bottom: 2px;
}

.achievement-screen__item-desc {
  font-size: 0.75rem;
  color: var(--dp-text-dim);
  margin-bottom: 4px;
}

.achievement-screen__item-progress {
  font-size: 0.8rem;
  color: var(--dp-arcane-bright);
}

.achievement-screen__item-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.achievement-screen__item-reward {
  font-size: 0.8rem;
  color: var(--dp-gold-bright);
  white-space: nowrap;
}

.achievement-screen__claim-btn {
  padding: 6px 12px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--dp-blood-bright), var(--dp-blood));
  color: var(--dp-text-bright);
  cursor: pointer;
  font-size: 0.8rem;
  white-space: nowrap;
}

.achievement-screen__claimed-label {
  font-size: 0.75rem;
  color: var(--dp-text-dim);
}

.achievement-screen__empty {
  color: var(--dp-text-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 16px;
}

/* ============================================================
 * Map Viewport & Character/Enemy Rendering
 * Requirements: 2.7, 15.3
 * ============================================================ */
.map-viewport-container {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--dp-bg-void);
  min-height: 200px;
}

.map-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.map-minimap { position:absolute; top:10px; right:10px; width:126px; padding:7px; z-index:20; color:#f7e7b0; background:rgba(10,12,18,.9); border:1px solid rgba(232,200,116,.75); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.55),inset 0 0 12px rgba(201,165,92,.08); backdrop-filter:blur(3px); transition:width .18s ease,filter .18s ease,opacity .18s ease; }
.map-minimap[hidden] { display:none; }
.map-minimap[data-size="small"] { width:126px; }
.map-minimap[data-size="medium"] { width:clamp(158px,22vw,190px); }
.map-minimap[data-size="large"] { width:clamp(205px,30vw,270px); }
.map-minimap[data-brightness="dim"] { filter:brightness(.62); opacity:.78; }
.map-minimap[data-brightness="normal"] { filter:brightness(1); opacity:.94; }
.map-minimap[data-brightness="bright"] { filter:brightness(1.38); opacity:1; }
.map-minimap__header { display:flex; align-items:center; justify-content:space-between; gap:4px; margin-bottom:5px; font-size:.72rem; font-weight:800; letter-spacing:.08em; }
.map-minimap__header small { color:#b9aa83; font-size:.55rem; font-weight:600; letter-spacing:0; }
.map-minimap__controls { display:flex; gap:3px; }
.map-minimap__controls button,.map-minimap-open { display:grid; place-items:center; border:1px solid rgba(232,200,116,.45); color:#f7e7b0; background:rgba(26,29,37,.92); cursor:pointer; touch-action:manipulation; }
.map-minimap__controls button { width:22px; height:22px; padding:0; border-radius:4px; font-size:.75rem; line-height:1; }
.map-minimap__controls button:hover,.map-minimap-open:hover { background:#3a3222; border-color:#ffd76a; }
.map-minimap-open { position:absolute; top:10px; right:10px; width:38px; height:38px; z-index:20; border-radius:8px; font-size:1.25rem; box-shadow:0 4px 12px rgba(0,0,0,.5); }
.map-minimap-open[hidden] { display:none; }
.map-minimap__field { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; border:1px solid rgba(201,165,92,.35); border-radius:4px; background-color:#171b22; background-image:linear-gradient(rgba(201,165,92,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(201,165,92,.08) 1px,transparent 1px); background-size:25% 25%; cursor:zoom-in; touch-action:manipulation; }
.map-minimap__landmarks,.map-minimap__enemies { position:absolute; inset:0; }
.map-minimap__player,.map-minimap__enemy,.map-minimap__landmark { position:absolute; transform:translate(-50%,-50%); }
.map-minimap__player { width:9px; height:9px; z-index:3; border:2px solid #eaffff; border-radius:50%; background:#26e6d4; box-shadow:0 0 7px #26e6d4; }
.map-minimap__enemy { width:5px; height:5px; z-index:1; border-radius:50%; background:#ff5252; box-shadow:0 0 3px rgba(255,82,82,.85); }
.map-minimap__landmark { z-index:2; color:#ffd76a; font-size:clamp(11px,1.7vw,16px); line-height:1; filter:drop-shadow(0 0 3px rgba(255,205,85,.9)); }
.map-minimap__landmark--uncleared { animation:minimapBossPending 1.5s ease-in-out infinite; }
.map-minimap__landmark--uncleared::before { content:'!'; position:absolute; top:-7px; right:-7px; display:grid; place-items:center; width:10px; height:10px; border-radius:50%; color:#fff; background:#d94a42; font:800 8px/1 sans-serif; box-shadow:0 0 5px rgba(255,75,65,.9); }
.map-minimap__landmark--cleared { opacity:.68; filter:grayscale(.35) drop-shadow(0 0 2px rgba(75,220,130,.8)); }
.map-minimap__landmark--cleared::after { content:'✓'; position:absolute; right:-8px; bottom:-6px; display:grid; place-items:center; width:12px; height:12px; border:1px solid #d9ffe5; border-radius:50%; color:#fff; background:#2ba65a; font:800 9px/1 sans-serif; box-shadow:0 0 5px rgba(43,210,100,.8); }
@keyframes minimapBossPending { 0%,100% { filter:drop-shadow(0 0 2px rgba(255,205,85,.65)); } 50% { filter:drop-shadow(0 0 6px rgba(255,205,85,1)); } }
.map-minimap__legend { display:flex; justify-content:space-between; gap:4px; margin-top:5px; color:#c9bea0; font-size:.56rem; white-space:nowrap; }
.map-minimap__legend span { display:inline-flex; align-items:center; gap:3px; }
.map-minimap__legend i { display:inline-block; width:6px; height:6px; border-radius:50%; }
.map-minimap__legend-player { background:#26e6d4; }
.map-minimap__legend-landmark { background:#ffd76a; border-radius:1px !important; }
.map-minimap__legend-enemy { background:#ff5252; }

.map-world {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--dp-bg-deep);
  background-image:
    linear-gradient(rgba(201, 165, 92, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 165, 92, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

.map-character {
  position: absolute;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 165, 92, 0.25), transparent 70%);
  box-shadow: 0 0 12px rgba(201, 165, 92, 0.6);
  z-index: 5;
  transition: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-character__sprite {
  font-size: 24px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
  transform: scaleX(1);
  transform-origin: center bottom;
}

.map-character--flipped .map-character__sprite {
  transform: scaleX(-1);
}

/* 걷기 애니메이션 - 이동 중일 때 캐릭터 스프라이트가 좌우로 살짝 기울며 위아래로 흔들려
   실제로 걷는 듯한 느낌을 준다 (정지 시에는 바로 원래 자세로 복귀) */
.map-character--walking .map-character__sprite {
  animation: mapWalkBob 0.35s ease-in-out infinite;
}

.map-character--walking.map-character--flipped .map-character__sprite {
  animation: mapWalkBobFlipped 0.35s ease-in-out infinite;
}

@keyframes mapWalkBob {
  0%, 100% { transform: scaleX(1) translateY(0) rotate(0deg); }
  25% { transform: scaleX(1) translateY(-2px) rotate(-4deg); }
  50% { transform: scaleX(1) translateY(0) rotate(0deg); }
  75% { transform: scaleX(1) translateY(-2px) rotate(4deg); }
}

@keyframes mapWalkBobFlipped {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(0deg); }
  25% { transform: scaleX(-1) translateY(-2px) rotate(4deg); }
  50% { transform: scaleX(-1) translateY(0) rotate(0deg); }
  75% { transform: scaleX(-1) translateY(-2px) rotate(-4deg); }
}

/* 걷는 동안 발밑 그림자가 함께 눌렸다 펴지는 느낌으로 보행감을 보강한다 */
.map-character--walking::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 22px;
  height: 6px;
  margin-left: -11px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  filter: blur(1px);
  animation: mapWalkShadow 0.35s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mapWalkShadow {
  0%, 100% { transform: scaleX(1); opacity: 0.45; }
  50% { transform: scaleX(0.7); opacity: 0.3; }
}

/* 근접 직업(전사) 검질(슬래시) 애니메이션 - 칼날 궤적 + 실제 검(emoji) 스윙 */
.map-character--slash::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  border: 3px solid var(--dp-gold-bright);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: mapSlash 0.25s ease-out;
}

@keyframes mapSlash {
  0% {
    opacity: 0.9;
    transform: rotate(-30deg) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: rotate(90deg) scale(1.15);
  }
}

.map-character--slash .map-character__sprite {
  animation: mapSlashLunge 0.25s ease-out;
}

@keyframes mapSlashLunge {
  0% { transform: translateX(0) scale(1); }
  40% { transform: translateX(4px) scale(1.08); }
  100% { transform: translateX(0) scale(1); }
}

/* 검(⚔️) 스윙 궤적 - 캐릭터 앞쪽에서 실제로 칼을 휘두르는 듯한 이모지 스윙을 추가로 겹친다 */
.map-character__weapon-swing {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  opacity: 0;
  pointer-events: none;
  transform-origin: 10% 90%;
}

.map-character--slash .map-character__weapon-swing {
  animation: mapWeaponSwing 0.25s ease-out;
}

@keyframes mapWeaponSwing {
  0% { opacity: 0; transform: rotate(-70deg) translate(2px, 2px) scale(0.8); }
  30% { opacity: 1; transform: rotate(-20deg) translate(10px, -4px) scale(1); }
  70% { opacity: 1; transform: rotate(50deg) translate(14px, 2px) scale(1.05); }
  100% { opacity: 0; transform: rotate(80deg) translate(10px, 6px) scale(0.9); }
}

/* 장착 무기/방어구의 강화 단계에 따라 캐릭터 전체에 추가 발광을 적용한다.
   기존 기본 골드 글로우(box-shadow) 위에 강화 등급 색상의 외곽선을 덧입힌다. */
.map-character[data-weapon-glow-tier="faint"],
.map-character[data-armor-glow-tier="faint"] {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.map-character[data-weapon-glow-tier="medium"],
.map-character[data-armor-glow-tier="medium"] {
  filter: drop-shadow(0 0 6px rgba(201, 165, 92, 0.7));
  animation: mapCharacterGlowMedium 1.8s ease-in-out infinite;
}

.map-character[data-weapon-glow-tier="strong"],
.map-character[data-armor-glow-tier="strong"] {
  filter: drop-shadow(0 0 9px rgba(201, 165, 92, 0.9));
  animation: mapCharacterGlowStrong 1.2s ease-in-out infinite;
}

.map-character[data-weapon-glow-tier="max"],
.map-character[data-armor-glow-tier="max"] {
  filter: drop-shadow(0 0 13px rgba(232, 200, 116, 1));
  animation: mapCharacterGlowMax 0.8s ease-in-out infinite;
}

@keyframes mapCharacterGlowMedium {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(201, 165, 92, 0.7)); }
  50% { filter: drop-shadow(0 0 10px rgba(201, 165, 92, 0.9)); }
}

@keyframes mapCharacterGlowStrong {
  0%, 100% { filter: drop-shadow(0 0 9px rgba(201, 165, 92, 0.9)); }
  50% { filter: drop-shadow(0 0 15px rgba(201, 165, 92, 1)); }
}

@keyframes mapCharacterGlowMax {
  0%, 100% { filter: drop-shadow(0 0 13px rgba(232, 200, 116, 1)); }
  50% { filter: drop-shadow(0 0 22px rgba(255, 225, 150, 1)); }
}

/* 원거리 직업(마법사/궁수) 투사체 */
.map-projectile {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  z-index: 6;
  pointer-events: none;
  transform-origin: center;
  animation: mapProjectileTravel 0.3s linear forwards;
}

.map-projectile::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-50%);
}

.map-projectile--arrow::before {
  width: 16px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--dp-gold-bright));
  box-shadow: 0 0 4px var(--dp-gold-bright);
}

.map-projectile--magic::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--dp-arcane-bright), var(--dp-arcane));
  box-shadow: 0 0 8px var(--dp-arcane-bright);
}

@keyframes mapProjectileTravel {
  from {
    transform: translate(0, 0) rotate(var(--projectile-angle, 0deg));
  }
  to {
    transform: translate(var(--travel-x), var(--travel-y)) rotate(var(--projectile-angle, 0deg));
  }
}

.map-enemy {
  position: absolute;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.map-enemy__sprite {
  font-size: 22px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85));
  transition: transform 0.15s;
}

.map-enemy--damaged .map-enemy__sprite {
  animation: mapEnemyHit 0.2s ease;
}

@keyframes mapEnemyHit {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.map-enemy--hit .map-enemy__sprite { animation:enemyImpact .2s cubic-bezier(.2,.9,.25,1); filter:brightness(1.8) drop-shadow(0 0 8px #fff); }
.map-enemy--heavy-hit .map-enemy__sprite { animation:enemyHeavyImpact .34s cubic-bezier(.2,.9,.25,1); filter:brightness(2.2) drop-shadow(0 0 14px #ffd166); }
@keyframes enemyImpact { 0%{transform:translateX(0) scale(1)} 35%{transform:translateX(5px) scale(1.25,.82)} 70%{transform:translateX(-3px) scale(.92,1.1)} 100%{transform:translateX(0) scale(1)} }
@keyframes enemyHeavyImpact { 0%{transform:scale(1) rotate(0)} 25%{transform:scale(1.45,.72) rotate(-7deg)} 55%{transform:scale(.82,1.32) rotate(5deg)} 78%{transform:scale(1.12,.94) rotate(-2deg)} 100%{transform:scale(1) rotate(0)} }

/* 위협도 등급별 크기/발광 차등 */
.map-enemy--normal .map-enemy__sprite {
  font-size: 20px;
}

.map-enemy--elite {
  width: 38px;
  height: 38px;
  margin-left: -19px;
  margin-top: -19px;
}

.map-enemy--elite .map-enemy__sprite {
  font-size: 26px;
  filter: drop-shadow(0 0 4px var(--dp-arcane-bright)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85));
}

.map-enemy--boss {
  width: 46px;
  height: 46px;
  margin-left: -23px;
  margin-top: -23px;
}

.map-enemy--boss .map-enemy__sprite {
  font-size: 32px;
  filter: drop-shadow(0 0 6px var(--dp-blood-bright)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9));
}

.map-enemy__name {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  white-space: nowrap;
  color: var(--dp-text-bright);
  text-shadow: 0 0 3px #000;
}

.map-enemy--elite .map-enemy__name {
  color: var(--dp-arcane-bright);
}

.map-enemy--boss .map-enemy__name {
  color: var(--dp-blood-bright);
  font-weight: bold;
  text-shadow: 0 0 4px #000, 0 0 6px rgba(176, 48, 64, 0.6);
}

.map-enemy__hp-bar {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 4px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 2px;
  overflow: hidden;
}

.map-enemy__hp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--dp-blood), var(--dp-blood-bright));
  transition: width 0.15s;
}

.map-obstacle {
  position: absolute;
  background: rgba(58, 50, 38, 0.7);
  border: 1px solid rgba(74, 63, 40, 0.9);
  border-radius: 4px;
  z-index: 2;
}

/* 랜드마크 (실제 도시의 대표 명소) - 아이콘 + 이름표를 가진 통과 불가 구조물 */
.map-landmark {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: radial-gradient(ellipse at center, rgba(201, 165, 92, 0.14) 0%, rgba(58, 50, 38, 0.55) 75%);
  border: 1px solid rgba(201, 165, 92, 0.4);
  border-radius: 10px;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.5), 0 0 10px rgba(201, 165, 92, 0.25);
  z-index: 2;
  overflow: hidden;
}

.map-landmark__icon {
  font-size: 42px;
  line-height: 1;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.8));
}

.map-landmark__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--dp-gold-bright);
  text-shadow: 0 0 4px #000, 0 0 2px #000;
  white-space: nowrap;
  text-align: center;
  padding: 0 4px;
}

/* 보스 처치 완료된 랜드마크: 회색 비활성화 + 체크 표시 */
.map-landmark--cleared {
  opacity: 0.4;
  filter: grayscale(0.8);
  border-color: rgba(100, 100, 100, 0.4);
  box-shadow: none;
}

.map-landmark--cleared::after {
  content: '✅';
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 18px;
  filter: none;
}

/* ============================================================
 * Combat Overlay (접촉 기반 전투 UI)
 * Requirements: 3.4, 15.8, 15.9
 * ============================================================ */
.combat-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 70;
}

.combat-overlay {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.combat-dps {
  font-size: 12px;
  color: var(--dp-gold-bright);
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--dp-border);
}

.combat-mob-info {
  position: relative;
  pointer-events: auto;
  background: rgba(10, 8, 6, 0.75);
  border: 1px solid var(--dp-border-light);
  padding: 6px 12px;
  border-radius: 6px;
  min-width: 160px;
  text-align: center;
  transition: opacity 0.3s;
}

.combat-mob-info--dying {
  opacity: 0.2;
}

.combat-mob-name-level {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 4px;
  color: var(--dp-text-bright);
}

.combat-mob-hp-bar-container {
  position: relative;
  width: 140px;
  height: 12px;
  background: var(--dp-bg-void);
  border: 1px solid var(--dp-border);
  border-radius: 4px;
  overflow: hidden;
}

.combat-mob-hp-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--dp-blood), var(--dp-blood-bright));
  transition: width 0.15s;
}

.combat-mob-hp-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--dp-text-bright);
}

.combat-damage-popup-container {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 0;
  height: 0;
}

.combat-damage-popup {
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  color: var(--dp-blood-bright);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s, transform 1s;
  text-shadow: 0 0 4px #000;
}

.combat-damage-popup--critical {
  color: var(--dp-gold-bright);
  font-size: 20px;
}

.combat-damage-popup--animate {
  opacity: 0;
  transform: translateY(-40px);
}

.combat-hit-impact { position:absolute; left:0; top:0; width:1px; height:1px; pointer-events:none; z-index:80; }
.combat-hit-impact strong { position:absolute; left:0; top:0; color:#fff4c2; font-size:25px; font-weight:1000; font-style:italic; letter-spacing:-1px; white-space:nowrap; opacity:0; transform:translate(-50%,-30%) scale(.45) rotate(-5deg); text-shadow:0 2px 0 #7c2d12,0 0 7px #ff7a18,0 0 15px #ffb703; }
.combat-hit-impact__flash { position:absolute; width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%) scale(.2); opacity:0; background:#fff; box-shadow:0 0 7px 4px #fef08a,0 0 22px 10px #fb923c; }
.combat-hit-impact i { position:absolute; left:0; top:0; width:4px; height:13px; border-radius:3px; opacity:0; background:linear-gradient(#fff,#fbbf24); transform-origin:50% 0; }
.combat-hit-impact i:nth-of-type(1){--a:0deg;--d:33px}.combat-hit-impact i:nth-of-type(2){--a:55deg;--d:28px}.combat-hit-impact i:nth-of-type(3){--a:115deg;--d:37px}.combat-hit-impact i:nth-of-type(4){--a:190deg;--d:30px}.combat-hit-impact i:nth-of-type(5){--a:280deg;--d:35px}.combat-hit-impact i:nth-of-type(6){--a:30deg;--d:50px}.combat-hit-impact i:nth-of-type(7){--a:85deg;--d:46px}.combat-hit-impact i:nth-of-type(8){--a:150deg;--d:52px}.combat-hit-impact i:nth-of-type(9){--a:225deg;--d:47px}.combat-hit-impact i:nth-of-type(10){--a:320deg;--d:52px}
.combat-hit-impact--animate strong { animation:hitNumber .58s cubic-bezier(.15,.8,.25,1) forwards; }
.combat-hit-impact--animate .combat-hit-impact__flash { animation:hitFlash .3s ease-out forwards; }
.combat-hit-impact--animate i { animation:hitShard .42s ease-out forwards; }
.combat-hit-impact--heavy strong { color:#fff; font-size:36px; text-shadow:0 3px 0 #991b1b,0 0 10px #facc15,0 0 24px #f97316; }
.combat-hit-impact--poison strong { color:#d9f99d; text-shadow:0 2px 0 #365314,0 0 10px #84cc16; }
@keyframes hitNumber { 0%{opacity:0;transform:translate(-50%,-15%) scale(.35) rotate(-8deg)} 22%{opacity:1;transform:translate(-50%,-65%) scale(1.28) rotate(2deg)} 62%{opacity:1;transform:translate(-50%,-95%) scale(1) rotate(-2deg)} 100%{opacity:0;transform:translate(-50%,-150%) scale(.82) rotate(-4deg)} }
@keyframes hitFlash { 0%{opacity:1;transform:translate(-50%,-50%) scale(.2)} 45%{opacity:.9;transform:translate(-50%,-50%) scale(1.8)} 100%{opacity:0;transform:translate(-50%,-50%) scale(3.2)} }
@keyframes hitShard { 0%{opacity:1;transform:rotate(var(--a)) translateY(2px) scaleY(.4)} 100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scaleY(1)} }

.combat-learning-tip { position:absolute; z-index:90; top:112px; left:50%; display:flex; align-items:center; gap:7px; max-width:min(88vw,390px); padding:8px 12px; border:1px solid rgba(103,232,249,.72); border-radius:999px; opacity:0; color:#ecfeff; background:linear-gradient(110deg,rgba(8,47,73,.94),rgba(15,23,42,.94)); box-shadow:0 5px 18px rgba(0,0,0,.5),0 0 14px rgba(34,211,238,.24); transform:translate(-50%,8px) scale(.9); transition:opacity .18s ease,transform .26s cubic-bezier(.2,.9,.3,1.2); pointer-events:none; white-space:nowrap; }
.combat-learning-tip--visible { opacity:1; transform:translate(-50%,0) scale(1); }
.combat-learning-tip__badge { flex:none; padding:3px 7px; border-radius:999px; color:#082f49; background:#a5f3fc; font-size:10px; font-weight:900; }
.combat-learning-tip__text { overflow:hidden; text-overflow:ellipsis; font-size:14px; font-weight:800; text-shadow:0 1px 3px #000; }
.combat-learning-tip--review { top:138px; border-color:#fde68a; background:linear-gradient(110deg,rgba(92,58,8,.96),rgba(30,23,12,.96)); box-shadow:0 5px 18px rgba(0,0,0,.5),0 0 18px rgba(250,204,21,.32); }
.combat-learning-tip--review .combat-learning-tip__badge { color:#713f12; background:#fde68a; }
@media(max-width:600px){.combat-learning-tip{top:124px;max-width:92vw;padding:7px 10px}.combat-learning-tip__text{font-size:12px}.combat-learning-tip--review{top:151px}}

.combat-revive-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.combat-revive-text {
  font-size: 18px;
  color: var(--dp-text-bright);
  background: rgba(10, 8, 6, 0.8);
  border: 1px solid var(--dp-blood);
  padding: 10px 20px;
  border-radius: 8px;
}

/* ============================================================
 * Virtual D-pad (모바일 이동 입력)
 * Requirements: 15.4
 * ============================================================ */
.virtual-joystick-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  bottom: 0;
  z-index: 40;
  touch-action: none;
}

.combat-coop-btn { position:relative; z-index:2; margin-top:7px; padding:9px 14px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #67e8f9; border-radius:999px; color:#ecfeff; background:linear-gradient(135deg,rgba(8,145,178,.92),rgba(13,148,136,.92)); box-shadow:0 0 12px rgba(45,212,191,.4); font-weight:800; cursor:pointer; pointer-events:auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.combat-coop-btn:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.18); }
.combat-coop-btn:disabled { opacity:.45; cursor:default; }

.map-enemy--burning .map-enemy__sprite { filter: drop-shadow(0 0 9px #ff5a1f); animation: enemy-burning .35s ease-in-out infinite alternate; }
.map-enemy--frozen .map-enemy__sprite { filter: drop-shadow(0 0 10px #67e8f9) saturate(.65); transform: scale(.96); }
.map-enemy--poisoned .map-enemy__sprite { filter: drop-shadow(0 0 9px #65a30d) hue-rotate(35deg); }
.map-enemy--shocked .map-enemy__sprite { filter: drop-shadow(0 0 11px #facc15); animation: enemy-shocked .12s steps(2) infinite; }
@keyframes enemy-burning { from { transform: translateY(0); } to { transform: translateY(-2px) scale(1.04); } }
@keyframes enemy-shocked { 0% { transform: translateX(-1px); } 100% { transform: translateX(1px); } }

.map-character__image {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85));
}

.map-character__equipment {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.inventory-screen__materials, .inventory-screen__pets { display:flex; flex-direction:column; gap:8px; margin-top:12px; padding:10px; border:1px solid #574a37; border-radius:8px; background:#17130e; }
.inventory-screen__pets > strong { color:var(--dp-gold-bright); font-size:13px; }
.inventory-screen__pet { display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px 10px; align-items:center; padding:10px; border:1px solid #3f382d; border-radius:8px; background:linear-gradient(135deg,rgba(64,53,35,.58),rgba(18,15,11,.92)); }
.inventory-screen__pet--active { border-color:#d7a84a; box-shadow:inset 0 0 12px #d7a84a22,0 0 8px #d7a84a44; }
.inventory-screen__pet-avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#0d0b08; border:1px solid #66563b; font-size:26px; }
.inventory-screen__pet-info { min-width:0; }
.inventory-screen__pet-name { display:flex; justify-content:space-between; gap:8px; color:#f5e7c5; font-weight:700; }
.inventory-screen__pet-name span { color:#d7a84a; font-size:11px; white-space:nowrap; }
.inventory-screen__pet-name em { color:#ff9c54; font-size:10px; font-style:normal; }
.inventory-screen__pet-stats { display:flex; flex-wrap:wrap; gap:5px 10px; margin-top:5px; color:#c8bda9; font-size:11px; }
.inventory-screen__pet-actions { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.inventory-screen__pet-action { min-height:34px; padding:6px 9px; border:1px solid #75613d; border-radius:6px; background:#282116; color:#f3dfaa; font-size:11px; font-weight:700; cursor:pointer; }
.inventory-screen__pet-action:hover:not(:disabled) { border-color:#e0b755; background:#3a2e18; }
.inventory-screen__pet-action--feed { border-color:#6e5132; color:#f1c38d; }
.inventory-screen__pet-action--fusion { grid-column:1 / -1; border-color:#a9532d; color:#ffc39b; background:#3b1d12; }
.inventory-screen__pet-action--follow:disabled { border-color:#b9923f; background:#4a391b; color:#ffe399; opacity:1; cursor:default; }
.inventory-screen__pet-action:disabled:not(.inventory-screen__pet-action--follow) { opacity:.42; cursor:not-allowed; }
.inventory-screen__combat-stats { margin-bottom:12px; padding:11px; border:1px solid #6f5a34; border-radius:8px; background:linear-gradient(135deg,#251e12,#100e0a); }
.inventory-screen__combat-title { display:flex; justify-content:space-between; gap:10px; color:#f2dfac; }
.inventory-screen__combat-title span { color:#ffd76a; font-weight:800; }
.inventory-screen__combat-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-top:9px; color:#cfc3a9; font-size:12px; }
.inventory-screen__combat-grid span { display:flex; justify-content:space-between; gap:8px; }
.inventory-screen__combat-grid b { color:#fff4cf; }
.inventory-screen__combat-breakdown { margin-top:8px; padding-top:7px; border-top:1px solid #463a27; color:#988b72; font-size:10px; line-height:1.45; }
.item-tooltip__comparison { display:grid; grid-template-columns:1fr 1fr; gap:3px 10px; margin-top:7px; padding-top:7px; border-top:1px solid #574a37; font-size:11px; }
.item-tooltip__comparison strong { grid-column:1 / -1; color:#e8d6a8; }
.item-tooltip__comparison-positive { color:#6ee78a; }
.item-tooltip__comparison-negative { color:#ff7777; }
.item-tooltip__comparison-neutral { color:#aaa; }
.inventory-screen__active-set { display:flex; flex-direction:column; gap:3px; margin-top:8px; padding-top:7px; border-top:1px solid #315d49; color:#79dda9; font-size:10px; }
.inventory-screen__active-set strong { color:#32d583; font-size:11px; }
.item-tooltip__set-effects { display:flex; flex-direction:column; gap:3px; margin-top:7px; padding:7px; border:1px solid #315d49; border-radius:5px; background:#10251c; color:#6f7f76; font-size:10px; }
.item-tooltip__set-effects strong { color:#32d583; margin-bottom:2px; }
.item-tooltip__set-effects span.active { color:#9effc8; font-weight:700; }
.inventory-screen__fusion { display:flex; flex-direction:column; gap:7px; margin-top:12px; padding:10px; border:1px solid #8c4c22; border-radius:8px; background:linear-gradient(135deg,#2b160e,#130c08); }
.inventory-screen__fusion > strong { color:#ff9c54; }
.inventory-screen__fusion > small,.inventory-screen__fusion-empty { color:#a89482; font-size:10px; }
.inventory-screen__fusion-row { display:grid; grid-template-columns:1fr auto; gap:4px 8px; align-items:center; padding:7px; border:1px solid #5f3822; border-radius:6px; color:#ffd3ad; }
.inventory-screen__fusion-row small { color:#bc9171; }
.inventory-screen__fusion-row button { grid-column:2; grid-row:1 / span 2; padding:6px 10px; border:1px solid #b76730; border-radius:5px; background:#4a2413; color:#ffd4ad; cursor:pointer; }
.screen-overlay__panel--fusion { max-width:760px; width:min(94%,760px); }
.fusion-screen__title { margin:2px 0 4px; text-align:center; color:#ffad68; text-shadow:0 0 12px #ff6a28; }
.fusion-screen__guide { margin:0 0 12px; color:#9f8d7d; font-size:11px; text-align:center; }
.fusion-screen__selection { display:grid; grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr); gap:12px; align-items:center; padding:12px; border:1px solid #4f301d; border-radius:12px; background:linear-gradient(135deg,#21150e,#0f0b08); }
.fusion-screen__selected > strong { display:block; margin-bottom:7px; color:#d7ad84; font-size:11px; text-align:center; }
.fusion-screen__selected-empty,.fusion-screen__selected-card { min-height:86px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px dashed #5f4938; border-radius:9px; color:#746555; background:#110d0a; }
.fusion-screen__selected-empty > span { color:#8c5b36; font-size:25px; }
.fusion-screen__selected-empty small { color:#776b60; }
.fusion-screen__selected-card { border-style:solid; border-color:var(--fusion-color); box-shadow:inset 0 0 20px color-mix(in srgb,var(--fusion-color) 10%,transparent); }
.fusion-screen__selected-card > span { font-size:27px; }
.fusion-screen__selected-card b { color:#f2dfca; font-size:13px; }
.fusion-screen__selected-card small { color:var(--fusion-color); }
.fusion-screen__catalogs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.fusion-screen__catalogs section { min-width:0; padding:10px; border:1px solid #4e3625; border-radius:9px; background:#15100c; }
.fusion-screen__catalogs h3 { display:flex; align-items:center; gap:6px; margin:0 0 9px; color:#e8c39e; font-size:12px; }
.fusion-screen__catalogs h3 > span { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:#7b391b; color:#ffd6ad; }
.fusion-screen__catalogs h3 small { margin-left:auto; color:#776b60; font-size:9px; font-weight:400; }
.fusion-screen__list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; max-height:210px; overflow:auto; padding-right:3px; }
.fusion-screen__list p { grid-column:1/-1; margin:8px; color:#8f7c6b; font-size:11px; line-height:1.5; text-align:center; }
.fusion-screen__list p strong { color:#e8c39e; }
.fusion-screen__choice { min-width:0; display:flex; gap:7px; align-items:center; padding:8px; border:1px solid color-mix(in srgb,var(--fusion-color) 55%,#33291e); border-radius:7px; background:#211913; color:#ead9c8; text-align:left; cursor:pointer; }
.fusion-screen__choice { touch-action:pan-y; }
.fusion-screen__choice:hover,.fusion-screen__choice--selected { background:color-mix(in srgb,var(--fusion-color) 18%,#211913); box-shadow:0 0 10px color-mix(in srgb,var(--fusion-color) 45%,transparent); }
.fusion-screen__choice--selected { outline:2px solid color-mix(in srgb,var(--fusion-color) 75%,white); outline-offset:-2px; }
.fusion-screen__choice-icon { flex:0 0 32px; width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--fusion-color); border-radius:7px; font-size:18px; }
.fusion-screen__choice > span:last-child { min-width:0; }
.fusion-screen__choice b,.fusion-screen__choice small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fusion-screen__choice b { font-size:11px; }
.fusion-screen__choice small { margin-top:3px; color:#9f8d7d; font-size:9px; }
.fusion-screen__core { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#8d7766; text-align:center; font-size:9px; }
.fusion-screen__core b { color:#ffad68; font-size:14px; }
.fusion-screen__orb { width:58px; height:58px; display:grid; place-items:center; border:2px solid #8a532d; border-radius:50%; background:radial-gradient(circle,#703414,#1b0e08 68%); color:#ffd29d; font-size:29px; box-shadow:0 0 18px #d75b233d; }
.fusion-screen__core--success .fusion-screen__orb { animation:fusionSuccess 1s ease-out; }
.fusion-screen__core--fail .fusion-screen__orb { animation:fusionFail .55s ease-in-out; }
.fusion-screen__submit { display:block; width:min(360px,100%); margin:13px auto 0; padding:12px; border:1px solid #d56b32; border-radius:7px; background:linear-gradient(#8d3c1c,#421b0e); color:#ffe0bb; font-weight:800; cursor:pointer; box-shadow:0 0 15px #8d3c1c33; }
.fusion-screen__payment { display:flex; justify-content:center; gap:22px; margin-top:12px; color:#8f8172; font-size:11px; }
.fusion-screen__payment b { margin-left:4px; color:#f3cf69; }
.fusion-screen__payment b.insufficient { color:#ff6868; }
.fusion-screen__submit:disabled { opacity:.38; cursor:not-allowed; }
.fusion-screen__result { min-height:34px; margin-top:10px; text-align:center; font-size:15px; font-weight:800; }
.fusion-screen__result--success { color:#ffd36d; text-shadow:0 0 10px #ff762f; }
.fusion-screen__result--fail { color:#ff6c6c; }
.fusion-screen__tooltip-level { margin:5px 0 7px; padding:5px 7px; border-radius:4px; background:#2b1b10; color:#d1b18f; }
.fusion-screen__tooltip-level b { color:#ffb267; }
.fusion-screen__tooltip .item-tooltip__stat b { color:#fff0ca; font-size:14px; }
.fusion-screen__tooltip .item-tooltip__stat small { display:block; margin-top:2px; color:#8f8172; font-size:9px; }
@keyframes fusionSuccess { 0%{transform:scale(.8);filter:brightness(1)} 35%{transform:scale(1.45) rotate(120deg);filter:brightness(3);box-shadow:0 0 55px #ffb13b} 100%{transform:scale(1);filter:brightness(1)} }
@keyframes fusionFail { 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }

/* 강화·합성 결과 팝업 */
.action-result { position:fixed; inset:0; z-index:4000; display:grid; place-items:center; pointer-events:auto; background:rgba(4,3,2,.34); animation:actionResultIn .22s ease-out; }
.action-result__card { position:relative; z-index:2; width:min(84vw,360px); padding:24px 22px; border:2px solid #6e5d45; border-radius:16px; background:linear-gradient(145deg,#211a12,#0e0b08); color:#f7ead3; text-align:center; box-shadow:0 18px 60px #000b; }
.action-result__icon { font-size:42px; animation:actionResultIcon .7s cubic-bezier(.2,1.6,.4,1); }
.action-result__card strong { display:block; margin-top:7px; font-size:24px; }
.action-result__card p { margin:9px 0 0; color:#d2c5af; font-size:13px; line-height:1.6; }
.action-result--success .action-result__card { border-color:#ffd15c; box-shadow:0 0 28px #ff9d28aa,0 18px 60px #000b; }
.action-result--success .action-result__card strong { color:#ffe386; text-shadow:0 0 13px #ff8700; }
.action-result--fail .action-result__card { border-color:#78a879; box-shadow:0 0 22px #5a9b6655,0 18px 60px #000b; }
.action-result--fail .action-result__card strong { color:#bde7b7; }
.action-result__particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.action-result__particles i { position:absolute; left:50%; top:48%; width:9px; height:18px; border-radius:2px; background:hsl(calc(var(--i) * 47deg) 90% 62%); animation:actionConfetti 1.5s var(--delay) cubic-bezier(.1,.7,.25,1) forwards; transform:translate(-50%,-50%) rotate(calc(var(--i) * 31deg)); }
.action-result__comfort { position:absolute; left:50%; top:38%; font-size:90px; opacity:.12; transform:translate(-50%,-50%); animation:comfortPulse 1.4s ease-in-out infinite; }
.action-result--leaving { opacity:0; transition:opacity .24s ease; }
@keyframes actionResultIn { from{opacity:0;transform:scale(.94)} }
@keyframes actionResultIcon { from{transform:scale(.25) rotate(-18deg)} to{transform:scale(1) rotate(0)} }
@keyframes actionConfetti { 0%{opacity:1;transform:translate(-50%,-50%) rotate(0)} 100%{opacity:0;transform:translate(calc(-50% + var(--x) * 42px),calc(-50% + 220px)) rotate(calc(var(--i) * 95deg))} }
@keyframes comfortPulse { 50%{transform:translate(-50%,-50%) scale(1.14);opacity:.2} }

/* 애완동물 전용 화면 */
.pet-screen { color:#eadfc9; }
.pet-screen__title { margin:0 0 12px; color:#f1cf79; text-align:center; }
.pet-screen__snacks { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.pet-screen__snacks span { padding:8px 12px; border:1px solid #6d5937; border-radius:999px; background:#1b160f; }
.pet-screen__snacks b { margin-left:5px; color:#ffd66e; }
.pet-screen__guide { margin:8px 0 15px; color:#a99b84; text-align:center; font-size:12px; }
.pet-screen__list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-height:65vh; overflow:auto; }
.pet-screen__card { display:grid; grid-template-columns:58px minmax(0,1fr); gap:10px; padding:12px; border:1px solid #4d4334; border-radius:11px; background:linear-gradient(145deg,#211b13,#12100c); }
.pet-screen__card--active { border-color:#e4b84e; box-shadow:inset 0 0 18px #d8a93422,0 0 9px #d8a93444; }
.pet-screen__avatar { width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:#0b0907; font-size:34px; }
.pet-screen__info strong,.pet-screen__info span { display:block; }
.pet-screen__info strong { color:#f4dfae; font-size:15px; }
.pet-screen__info span { margin-top:3px; color:#d6ad58; font-size:11px; }
.pet-screen__stats { margin-top:7px; color:#bdb09d; font-size:10px; line-height:1.5; }
.pet-screen__actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.pet-screen__actions button { min-height:38px; border:1px solid #785f37; border-radius:7px; background:#302516; color:#f0d79e; font-weight:700; cursor:pointer; }
.pet-screen__actions button:disabled { opacity:.55; cursor:default; }
.pet-screen__empty { grid-column:1/-1; padding:32px 15px; border:1px dashed #554a39; border-radius:10px; color:#9f927e; text-align:center; line-height:1.7; }
@media(max-width:600px){.pet-screen__list{grid-template-columns:1fr}.action-result__card{padding:20px 16px}.action-result__card strong{font-size:21px}}
@media(max-width:600px){.fusion-screen__selection{grid-template-columns:1fr 54px 1fr;gap:6px;padding:8px}.fusion-screen__selected-empty,.fusion-screen__selected-card{min-height:76px}.fusion-screen__orb{width:44px;height:44px;font-size:23px}.fusion-screen__catalogs{grid-template-columns:1fr}.fusion-screen__list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:170px}.fusion-screen__catalogs h3 small{display:none}}
@media(max-width:390px){.fusion-screen__list{grid-template-columns:1fr}}
.upgrade-screen__stone-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:8px; }
.upgrade-screen__upgrade-btn--large { border-color:#4f78b8; color:#b9d9ff; }
.map-character__pet { position:absolute; width:24px; height:24px; display:grid; place-items:center; z-index:3; font-size:22px; filter:drop-shadow(0 2px 2px #000); animation:petFollowBob 1.4s ease-in-out infinite; transition:left .18s ease, top .18s ease; }
@keyframes petFollowBob { 50% { transform:translateY(-3px); } }

.map-character__equipment-item {
  position: absolute;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 10px;
  filter: drop-shadow(0 0 2px #000);
  transition: left .18s ease, top .18s ease;
}
.map-character__equipment-level {
  position: absolute;
  right: -7px;
  bottom: -6px;
  color: #fff3a5;
  font-size: 7px;
  font-weight: 900;
  text-shadow: 0 0 2px #000, 0 0 4px #000;
}
.map-character__equipment-item[data-glow-tier="faint"] {
  box-shadow: 0 0 5px #fff, 0 0 8px var(--equipment-grade-color);
  animation: equipmentGlowFaint 5.4s ease-in-out infinite;
}
.map-character__equipment-item[data-glow-tier="medium"] {
  box-shadow: 0 0 7px #fff, 0 0 12px var(--equipment-grade-color);
  animation: equipmentGlowMedium 4.05s ease-in-out infinite;
}
.map-character__equipment-item[data-glow-tier="strong"] {
  box-shadow: 0 0 9px #fff, 0 0 16px var(--equipment-grade-color), 0 0 22px #ffd34e;
  animation: equipmentGlowStrong 2.7s ease-in-out infinite;
}
.map-character__equipment-item[data-glow-tier="max"] {
  box-shadow: 0 0 11px #fff, 0 0 19px var(--equipment-grade-color), 0 0 28px #ffc400;
  animation: equipmentGlowMax 1.8s ease-in-out infinite;
}
.map-character__equipment-item[data-glow-tier="strong"]::before,
.map-character__equipment-item[data-glow-tier="max"]::before {
  content: '✦';
  position: absolute;
  top: -9px;
  color: #fff;
  font-size: 9px;
  text-shadow: 0 0 5px #fff, 0 0 9px var(--equipment-grade-color);
}
@keyframes equipmentGlowFaint { 50% { filter: brightness(1.25) drop-shadow(0 0 4px var(--equipment-grade-color)); } }
@keyframes equipmentGlowMedium { 50% { transform: scale(1.1); filter: brightness(1.45) drop-shadow(0 0 6px var(--equipment-grade-color)); } }
@keyframes equipmentGlowStrong { 50% { transform: scale(1.18) rotate(5deg); filter: brightness(1.7) drop-shadow(0 0 8px #fff); } }
@keyframes equipmentGlowMax { 50% { transform: scale(1.28) rotate(-7deg); filter: brightness(2) drop-shadow(0 0 11px #fff); } }
/* 캐릭터 이미지(54px) 바깥 둘레에 장비를 배치해 본체를 가리지 않는다. */
.map-character__equipment-item--helmet { top: -35px; left: 10px; }
.map-character__equipment-item--weapon { top: -22px; left: -28px; }
.map-character__equipment-item--ring { top: 10px; left: -35px; }
.map-character__equipment-item--boots { bottom: -34px; left: -20px; }
.map-character__equipment-item--belt { bottom: -38px; left: 9px; }
.map-character__equipment-item--armor { bottom: -26px; right: -28px; }
.map-character__equipment-item--necklace { top: 4px; right: -36px; }

/* 오른쪽을 볼 때 장비 배치를 전환한다. 이미지 반전 여부와 이동 방향은 직업별로 다르다. */
.map-character--facing-right .map-character__equipment-item--weapon { left: auto; right: -28px; }
.map-character--facing-right .map-character__equipment-item--ring { left: auto; right: -35px; }
.map-character--facing-right .map-character__equipment-item--boots { left: auto; right: -20px; }
.map-character--facing-right .map-character__equipment-item--armor { right: auto; left: -28px; }
.map-character--facing-right .map-character__equipment-item--necklace { right: auto; left: -36px; }

.map-character[data-set-pieces="4"],
.map-character[data-set-pieces="5"],
.map-character[data-set-pieces="6"] { box-shadow: 0 0 16px #ffd86b, 0 0 28px rgba(255, 177, 44, 0.5); }
.map-character[data-set-pieces="7"] { animation: completeSetAura 1.3s ease-in-out infinite; }

@keyframes completeSetAura {
  0%, 100% { box-shadow:0 0 14px #86ffe1,0 0 28px rgba(43,231,190,.55); }
  50% { box-shadow:0 0 25px #dcfff7,0 0 48px rgba(45,255,210,.82); }
}

.map-character__set-aura { display:none; position:absolute; z-index:0; inset:-30px; pointer-events:none; }
.map-character[data-set-pieces="7"] .map-character__set-aura { display:block; }
.map-character__set-aura-core { position:absolute; inset:8px 10px 5px; border-radius:48% 52% 42% 58%; background:radial-gradient(ellipse at center,rgba(111,255,220,.18) 0 34%,transparent 58%),conic-gradient(from 20deg,transparent,#58ffd133,transparent,#b8ffed55,transparent); filter:blur(3px); animation:setAuraCore 1.05s ease-in-out infinite alternate; }
.map-character__set-aura-ring { position:absolute; left:10px; right:10px; bottom:8px; height:15px; border:2px solid #85ffe0; border-radius:50%; box-shadow:0 0 8px #42f4c8,inset 0 0 8px #66ffda; animation:setAuraRing 1.4s linear infinite; }
.map-character__set-aura-flames i { position:absolute; left:var(--left); bottom:13px; width:9px; height:var(--h); border-radius:70% 25% 65% 25%; background:linear-gradient(to top,rgba(85,255,211,.75),rgba(165,255,235,.35) 55%,transparent); filter:blur(1px) drop-shadow(0 0 4px #50fbd0); transform-origin:bottom; animation:setAuraFlame .72s var(--delay) ease-in-out infinite alternate; }
.map-character__set-aura-sparks i { position:absolute; left:var(--left); bottom:16px; width:3px; height:3px; border-radius:50%; background:#dcfff7; box-shadow:0 0 5px #5dffd7; animation:setAuraSpark 1.25s var(--delay) linear infinite; }
.map-character__sprite { position:relative; z-index:2; }
@keyframes setAuraCore { from{transform:scale(.9) rotate(-3deg);opacity:.65} to{transform:scale(1.08) rotate(4deg);opacity:1} }
@keyframes setAuraRing { 50%{transform:scaleX(1.18);opacity:.55} }
@keyframes setAuraFlame { from{transform:scaleX(.65) translateY(3px) rotate(-7deg);opacity:.45} to{transform:scaleX(1.2) translateY(-9px) rotate(8deg);opacity:1} }
@keyframes setAuraSpark { 0%{transform:translate(0,0) scale(.4);opacity:0} 20%{opacity:1} 100%{transform:translate(var(--dx),-48px) scale(1.3);opacity:0} }

@media (prefers-reduced-motion: reduce) { .map-character__set-aura * { animation-duration:2.5s !important; } }

.map-ground-item {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  display: grid;
  place-items: center;
  z-index: 4;
  color: var(--item-grade-color);
  filter: drop-shadow(0 0 5px var(--item-grade-color));
  animation: groundLootFloat 1.1s ease-in-out infinite;
  pointer-events: none;
}

.map-ground-item__beam {
  position: absolute;
  bottom: 5px;
  width: 8px;
  height: 42px;
  background: linear-gradient(to top, var(--item-grade-color), transparent);
  opacity: 0.42;
  filter: blur(3px);
}

.map-ground-item__icon { position: relative; font-size: 19px; z-index: 1; }
.map-ground-item__name {
  position: absolute;
  top: 29px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 130px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(8, 9, 14, 0.86);
  color: var(--item-grade-color);
  font-size: 9px;
  font-weight: 700;
}

.map-ground-item[data-glow-tier="medium"],
.map-ground-item[data-glow-tier="strong"],
.map-ground-item[data-glow-tier="max"] { filter: drop-shadow(0 0 9px #fff) drop-shadow(0 0 14px var(--item-grade-color)); }
.map-ground-item[data-glow-tier="max"] .map-ground-item__beam { width: 14px; opacity: 0.85; }

.map-ground-gold { filter: drop-shadow(0 0 6px #ffca28); }
.map-ground-gold--medium { filter: drop-shadow(0 0 8px #fff1a8) drop-shadow(0 0 12px #ffb300); }
.map-ground-gold--large { filter: drop-shadow(0 0 11px #fff) drop-shadow(0 0 18px #ff9800); }
.map-ground-gold--large .map-ground-item__beam { width: 15px; opacity: 0.9; }

@keyframes groundLootFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.08); }
}

.stage-screen__boss-progress {
  width: min(220px, 100%);
  margin-top: 6px;
}

.stage-screen__boss-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--dp-text-dim);
  font-size: 0.74rem;
}

.stage-screen__boss-progress-label strong {
  color: var(--dp-text-bright);
}

.stage-screen__boss-progress-track {
  height: 4px;
  margin-top: 3px;
  overflow: hidden;
  background: var(--dp-bg-void);
  border: 1px solid var(--dp-border);
  border-radius: 2px;
}

.stage-screen__boss-progress-track span {
  display: block;
  height: 100%;
  background: var(--dp-blood-bright);
}

.stage-screen__boss-progress--completed .stage-screen__boss-progress-label strong {
  color: var(--dp-gold-bright);
}

.stage-screen__boss-progress--completed .stage-screen__boss-progress-track span {
  background: var(--dp-gold);
}

.stage-screen__countries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.stage-screen__country-btn {
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--dp-border-light);
  border-radius: 4px;
  background: var(--dp-bg-deep);
  color: var(--dp-text-bright);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.stage-screen__country-btn small {
  display: block;
  margin-top: 3px;
  color: var(--dp-text-dim);
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.2;
}

.stage-screen__country-btn--active {
  border-color: var(--dp-gold);
  color: var(--dp-gold-bright);
  box-shadow: inset 0 -2px 0 var(--dp-gold-dim);
}

.stage-screen__country-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.virtual-joystick {
  position: fixed;
  z-index: 50;
  pointer-events: none;
}

.virtual-joystick--active {
  opacity: 0.85;
}

.virtual-joystick__base {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(28, 23, 18, 0.5);
  border: 2px solid rgba(201, 165, 92, 0.4);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.virtual-joystick__knob {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 165, 92, 0.9), rgba(138, 111, 61, 0.8));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 10px rgba(201, 165, 92, 0.3);
  transition: transform 0.03s ease-out;
}

/* ============================================================
 * Inventory Screen (Diablo-style)
 * Requirements: 14.4
 * ============================================================ */
.inventory-screen__title {
  font-size: 18px;
  font-weight: bold;
  color: var(--dp-gold);
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 12px;
  text-shadow: 0 0 6px rgba(201, 165, 92, 0.5);
}

.inventory-screen__body {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.inventory-screen__panel-title {
  font-size: 12px;
  color: var(--dp-text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--dp-border);
  padding-bottom: 4px;
}

/* --- 좌측: 장비 슬롯 패널 --- */
.inventory-screen__equip-panel {
  flex: 0 0 160px;
  background: radial-gradient(ellipse at top, var(--dp-bg-panel-light) 0%, var(--dp-bg-void) 100%);
  border: 1px solid var(--dp-border-light);
  border-radius: 8px;
  padding: 12px;
}

.inventory-screen__equip-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  justify-content: center;
}

.equip-slot {
  width: 64px;
  height: 64px;
  border: 2px solid var(--dp-border);
  border-radius: 6px;
  background: linear-gradient(160deg, var(--dp-bg-panel) 0%, var(--dp-bg-void) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: default;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
}

.equip-slot--filled {
  cursor: pointer;
  border-color: var(--grade-color, var(--dp-border-light));
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.6),
    0 0 8px color-mix(in srgb, var(--grade-color) 48%, transparent);
}
.equip-slot--filled::after {
  content:'';
  position:absolute;
  inset:2px;
  border:1px solid color-mix(in srgb, var(--grade-color) 35%, transparent);
  border-radius:3px;
  pointer-events:none;
}
.equip-slot--filled[data-display-grade="common"] { border-color:#fff; }
.equip-slot--filled[data-display-grade="uncommon"] { border-color:#00cc00; }
.equip-slot--filled[data-display-grade="rare"] { border-color:#3399ff; }
.equip-slot--filled[data-display-grade="heroic"] { border-color:#9933ff; }
.equip-slot--filled[data-display-grade="legendary"] { border-color:#ff8c00; }
.equip-slot--filled[data-display-grade="unique"] { border-color:#c98b3c; }
.equip-slot--filled[data-display-grade="set"] { border-color:#32d583; }
.equip-slot--filled[data-display-grade="legendary"],
.equip-slot--filled[data-display-grade="unique"],
.equip-slot--filled[data-display-grade="set"] {
  border-width:2px;
  box-shadow:inset 0 0 10px rgba(0,0,0,.55),0 0 11px color-mix(in srgb,var(--grade-color) 65%,transparent);
}

.equip-slot__icon {
  font-size: 26px;
  filter: drop-shadow(0 0 4px currentColor);
}

.equip-slot__empty-icon {
  font-size: 22px;
  opacity: 0.25;
}

.equip-slot__label {
  font-size: 9px;
  color: var(--dp-text-dim);
  margin-top: 2px;
  text-transform: uppercase;
}

.equip-slot__upgrade-badge,
.inventory-slot__upgrade-badge {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 10px;
  font-weight: bold;
  color: var(--dp-gold-bright);
  text-shadow: 0 0 3px #000, 0 0 1px #000;
}

/* --- 강화 단계 발광 등급 (faint/medium/strong/max) ---
   강화 단계가 높을수록 장비가 더 밝고 빠르게 번쩍인다 (등급 무관, 강화 자체의 시각적 보상). */
.equip-slot[data-glow-tier="faint"],
.inventory-slot[data-glow-tier="faint"] {
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.6),
    0 0 6px rgba(255, 255, 255, 0.35);
  animation: upgradeGlowFaint 2.4s ease-in-out infinite;
}

.equip-slot[data-glow-tier="medium"],
.inventory-slot[data-glow-tier="medium"] {
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.6),
    0 0 10px rgba(201, 165, 92, 0.55);
  animation: upgradeGlowMedium 1.8s ease-in-out infinite;
}

.equip-slot[data-glow-tier="strong"],
.inventory-slot[data-glow-tier="strong"] {
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(201, 165, 92, 0.75);
  animation: upgradeGlowStrong 1.2s ease-in-out infinite;
}

.equip-slot[data-glow-tier="max"],
.inventory-slot[data-glow-tier="max"] {
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(232, 200, 116, 0.95);
  animation: upgradeGlowMax 0.8s ease-in-out infinite;
}

@keyframes upgradeGlowFaint {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@keyframes upgradeGlowMedium {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

@keyframes upgradeGlowStrong {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

@keyframes upgradeGlowMax {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.4) saturate(1.3); }
}

.inventory-screen__gold {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--dp-gold-bright);
  text-shadow: 0 0 4px rgba(201, 165, 92, 0.5);
}

/* --- 우측: 그리드형 인벤토리 --- */
.inventory-screen__grid-panel {
  flex: 1;
  min-width: 220px;
  background: radial-gradient(ellipse at top, var(--dp-bg-panel-light) 0%, var(--dp-bg-void) 100%);
  border: 1px solid var(--dp-border-light);
  border-radius: 8px;
  padding: 12px;
}

.inventory-screen__capacity {
  font-size: 12px;
  color: var(--dp-text-dim);
  text-align: right;
  margin-bottom: 8px;
}

.inventory-screen__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.inventory-slot {
  aspect-ratio: 1;
  border: 1px solid var(--dp-border);
  border-radius: 4px;
  background: linear-gradient(160deg, var(--dp-bg-panel) 0%, var(--dp-bg-void) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
}

.inventory-slot--empty {
  opacity: 0.5;
}

.inventory-slot--filled {
  cursor: pointer;
  border-color: var(--grade-color, var(--dp-border-light));
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.6),
    0 0 6px var(--grade-color, transparent);
  transition: transform 0.1s, box-shadow 0.15s;
}

.inventory-slot--filled:hover {
  transform: scale(1.08);
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.5),
    0 0 12px var(--grade-color, transparent);
  z-index: 2;
}

.inventory-slot__icon {
  font-size: 18px;
  filter: drop-shadow(0 0 3px var(--grade-color, transparent));
}

/* 등급별 미세한 배경 톤 (common/uncommon/rare/legendary) */
.inventory-slot--common { background: linear-gradient(160deg, #1e1c18, #0a0906); }
.inventory-slot--uncommon { background: linear-gradient(160deg, #16241a, #0a0d0a); }
.inventory-slot--rare { background: linear-gradient(160deg, #16202c, #080b0e); }
.inventory-slot--legendary { background: linear-gradient(160deg, #241a2c, #0e090e); }
.inventory-slot--filled[data-visual-variant="0"],.equip-slot--filled[data-visual-variant="0"] { background:radial-gradient(circle at 25% 22%,color-mix(in srgb,var(--grade-color) 24%,transparent),transparent 38%),linear-gradient(155deg,#211b16,#090806); }
.inventory-slot--filled[data-visual-variant="1"],.equip-slot--filled[data-visual-variant="1"] { background:linear-gradient(45deg,transparent 42%,color-mix(in srgb,var(--grade-color) 18%,transparent) 44% 48%,transparent 50%),linear-gradient(155deg,#211b16,#090806); }
.inventory-slot--filled[data-visual-variant="2"],.equip-slot--filled[data-visual-variant="2"] { background:radial-gradient(circle at center,transparent 35%,color-mix(in srgb,var(--grade-color) 17%,transparent) 37% 42%,transparent 44%),linear-gradient(155deg,#211b16,#090806); }
.inventory-slot--filled[data-visual-variant="3"],.equip-slot--filled[data-visual-variant="3"] { background:linear-gradient(135deg,color-mix(in srgb,var(--grade-color) 19%,transparent),transparent 35%),linear-gradient(25deg,transparent 58%,color-mix(in srgb,var(--grade-color) 13%,transparent) 60%),#0c0907; }
.inventory-slot--filled[data-visual-variant="1"] .inventory-slot__icon,.equip-slot--filled[data-visual-variant="1"] .equip-slot__icon { transform:rotate(-7deg) scale(1.05); }
.inventory-slot--filled[data-visual-variant="2"] .inventory-slot__icon,.equip-slot--filled[data-visual-variant="2"] .equip-slot__icon { transform:scale(.94); filter:drop-shadow(0 0 6px var(--grade-color)); }
.inventory-slot--filled[data-visual-variant="3"] .inventory-slot__icon,.equip-slot--filled[data-visual-variant="3"] .equip-slot__icon { transform:rotate(6deg) scale(1.08); }

/* --- 아이템 툴팁 (디아블로 스타일 카드) --- */
.item-tooltip {
  position: fixed;
  z-index: 500;
  box-sizing: border-box;
  min-width: 180px;
  max-width: min(260px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(160deg, var(--dp-bg-panel) 0%, var(--dp-bg-void) 100%);
  border: 1px solid var(--dp-border-light);
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  font-size: 12px;
}

.item-tooltip__header {
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid;
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.item-tooltip__level {
  color: var(--dp-gold-bright);
  font-size: 12px;
}

.item-tooltip__grade {
  font-size: 11px;
  margin-bottom: 6px;
}

.item-tooltip__stat {
  color: var(--dp-text);
  margin-bottom: 4px;
}

.item-tooltip__bonus {
  color: var(--dp-grade-uncommon);
}

.item-tooltip__sell {
  color: var(--dp-gold-bright);
  font-size: 11px;
  margin-top: 4px;
}

.item-tooltip__hint {
  color: var(--dp-text-dim);
  font-size: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--dp-border);
  padding-top: 4px;
}

/* 모바일 대응: 좁은 화면에서는 세로 배치, 슬롯 크기 축소 */
@media (max-width: 480px) {
  .item-tooltip {
    left: 8px !important;
    right: 8px;
    top: 50% !important;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: calc(100dvh - 16px);
    transform: translateY(-50%);
  }
  .inventory-screen__body {
    flex-direction: column;
  }
  .inventory-screen__equip-panel {
    flex: none;
    width: 100%;
  }
  .inventory-screen__equip-slots {
    grid-template-columns: repeat(4, 1fr);
  }
  .inventory-screen__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ============================================================
 * Minigame Screen - 홀짝 게임 / 슬롯머신
 * ============================================================ */
.minigame-screen__title {
  font-size: 18px;
  font-weight: bold;
  color: var(--dp-gold);
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-shadow: 0 0 6px rgba(201, 165, 92, 0.5);
  border-bottom: 1px solid var(--dp-border);
  padding-bottom: 10px;
}

.minigame-screen__gold {
  text-align: center;
  font-size: 0.85rem;
  color: var(--dp-gold-bright);
  margin-bottom: 10px;
}

.minigame-screen__tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.minigame-screen__tab {
  flex: 1;
  padding: 8px 6px;
  border: 1px solid var(--dp-border-light);
  border-radius: 4px;
  background: var(--dp-bg-panel);
  color: var(--dp-text-dim);
  cursor: pointer;
  font-size: 0.85rem;
  transition: color 0.2s, border-color 0.2s;
}

.minigame-screen__tab--active {
  color: var(--dp-gold-bright);
  border-color: var(--dp-gold);
  background: rgba(201, 165, 92, 0.1);
}

.minigame-screen__error {
  color: var(--dp-blood-bright);
  font-size: 0.8rem;
  min-height: 1.2em;
  text-align: center;
  margin-top: 6px;
}

/* --- 홀짝 게임 --- */
.oddeven-game {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oddeven-game__payout-table {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  background: radial-gradient(ellipse at top, var(--dp-bg-panel-light) 0%, var(--dp-bg-void) 100%);
  border: 1px solid var(--dp-border);
  border-radius: 6px;
  font-size: 0.7rem;
  color: var(--dp-text-dim);
}

.oddeven-game__payout-table b {
  color: var(--dp-gold-bright);
}

.oddeven-game__bet-area {
  display: flex;
  gap: 8px;
}

.oddeven-game__bet-input,
.slot-game__bet-input {
  flex: 1;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid var(--dp-border-light);
  background: var(--dp-bg-void);
  color: var(--dp-text-bright);
  font-size: 1rem;
}

.oddeven-game__start-btn,
.slot-game__spin-btn {
  padding: 10px 16px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--dp-blood-bright) 0%, var(--dp-blood) 100%);
  color: var(--dp-text-bright);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.5px;
  transition: box-shadow 0.2s;
}

.oddeven-game__start-btn:hover,
.slot-game__spin-btn:hover {
  box-shadow: 0 4px 12px var(--dp-blood-glow);
}

.oddeven-game__status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: radial-gradient(ellipse at top, var(--dp-bg-panel-light) 0%, var(--dp-bg-void) 100%);
  border: 1px solid var(--dp-border-light);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--dp-text);
}

.oddeven-game__streak {
  color: var(--dp-gold-bright);
  text-shadow: 0 0 6px rgba(201, 165, 92, 0.4);
}

.oddeven-game__choice-area {
  display: flex;
  gap: 10px;
}

.oddeven-game__choice-btn {
  flex: 1;
  padding: 16px;
  border: 1px solid var(--dp-border-light);
  border-radius: 6px;
  background: linear-gradient(160deg, var(--dp-bg-panel) 0%, var(--dp-bg-deep) 100%);
  color: var(--dp-text-bright);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.oddeven-game__choice-btn:hover {
  border-color: var(--dp-gold);
  box-shadow: 0 0 10px rgba(201, 165, 92, 0.25);
}

.oddeven-game__choice-btn--odd {
  color: var(--dp-arcane-bright);
}

.oddeven-game__choice-btn--even {
  color: var(--dp-blood-bright);
}

.oddeven-game__cashout-btn {
  padding: 10px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: var(--dp-bg-panel);
  color: var(--dp-gold-bright);
  cursor: pointer;
  font-size: 0.85rem;
  transition: box-shadow 0.2s;
}

.oddeven-game__cashout-btn:hover {
  box-shadow: 0 0 8px rgba(201, 165, 92, 0.3);
}

.oddeven-game__result {
  min-height: 1.5em;
  text-align: center;
  font-size: 0.9rem;
  padding: 8px;
  border-radius: 4px;
}

.oddeven-game__result--win {
  color: var(--dp-grade-uncommon);
  background: rgba(76, 175, 106, 0.08);
}

.oddeven-game__result--lose {
  color: var(--dp-blood-bright);
  background: rgba(122, 31, 43, 0.1);
}

/* --- 슬롯머신 (레트로 오락실 캐비닛 스타일, 3x3, 5페이라인) --- */
.slot-game {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slot-game__payout-table {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  background: radial-gradient(ellipse at top, var(--dp-bg-panel-light) 0%, var(--dp-bg-void) 100%);
  border: 1px solid var(--dp-border);
  border-radius: 6px;
  font-size: 0.68rem;
  color: var(--dp-text-dim);
}

.slot-game__payout-table b {
  color: var(--dp-gold-bright);
}
.slot-game__payout-table > small { flex-basis:100%; color:#7f7263; text-align:center; }

/* 오락실 캐비닛 프레임: 네온 테두리 + 전구 장식 느낌의 이중 보더 */
.slot-game__cabinet {
  position: relative;
  padding: 14px;
  background: linear-gradient(180deg, #2a1810 0%, #150c08 100%);
  border: 3px solid var(--dp-gold-dim);
  border-radius: 12px;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.8),
    0 0 0 3px var(--dp-bg-void),
    0 0 16px rgba(201, 165, 92, 0.35);
}

.slot-game__cabinet::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(201, 165, 92, 0.3);
  border-radius: 8px;
  pointer-events: none;
}

.slot-game__reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.slot-game__cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #0c0a06 0%, #050403 100%);
  border: 1px solid var(--dp-border);
  border-radius: 6px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.slot-game__cell-symbol {
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

/* 스핀 중: 심볼이 위아래로 흔들리며 빠르게 바뀌는 듯한 블러 느낌 */
.slot-game__cell--spinning .slot-game__cell-symbol {
  animation: slotSpinBlur 0.08s linear infinite;
  animation-delay: calc(var(--cell-index) * -0.013s);
  filter: blur(1px) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

@keyframes slotSpinBlur {
  0% { transform: translateY(-10px) scaleY(1.25); opacity:.45; }
  50% { transform: translateY(10px) scaleY(.8); opacity:1; }
  100% { transform: translateY(-10px) scaleY(1.25); opacity:.45; }
}

/* 릴이 멈추는 순간 살짝 튕기는 정지 모션 */
.slot-game__cell--stopped .slot-game__cell-symbol {
  animation: slotReelStop 0.2s ease-out;
}

@keyframes slotReelStop {
  0% { transform: translateY(-10px) scale(0.9); }
  60% { transform: translateY(3px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* 당첨된 페이라인에 포함된 셀: 금색 발광 강조 */
.slot-game__cell--win {
  border-color: var(--dp-gold-bright);
  background: radial-gradient(circle, rgba(201, 165, 92, 0.25) 0%, #0c0a06 80%);
  box-shadow:
    inset 0 0 10px rgba(201, 165, 92, 0.3),
    0 0 12px rgba(201, 165, 92, 0.6);
  animation: slotWinPulse 0.6s ease-in-out infinite;
}

@keyframes slotWinPulse {
  0%, 100% { box-shadow: inset 0 0 10px rgba(201, 165, 92, 0.3), 0 0 8px rgba(201, 165, 92, 0.4); }
  50% { box-shadow: inset 0 0 14px rgba(201, 165, 92, 0.5), 0 0 18px rgba(201, 165, 92, 0.8); }
}

.slot-game__bet-area {
  display: flex;
  gap: 8px;
}
.slot-game__quick-bets { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:-5px; }
.slot-game__quick-bets > span { margin-right:3px; color:#837566; font-size:10px; }
.slot-game__quick-bets button { min-width:45px; padding:5px 8px; border:1px solid #5b4935; border-radius:12px; background:#17110c; color:#c9ae82; font-size:10px; cursor:pointer; }
.slot-game__quick-bets button:hover { border-color:var(--dp-gold-dim); color:var(--dp-gold-bright); }
.slot-game__status { padding:8px 10px; border:1px solid #4b3025; border-radius:7px; background:#130d0a; }
.slot-game__status > div:first-child { display:flex; justify-content:space-between; color:#c98e7d; font-size:11px; }
.slot-game__status b { color:#ff8f79; }
.slot-game__progress { height:6px; margin-top:6px; overflow:hidden; border-radius:4px; background:#2b1714; }
.slot-game__progress i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#bd263d,#ff7a69); box-shadow:0 0 8px #ff4e58; transition:width .35s ease; }

.slot-game__spin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.slot-game__result {
  min-height: 1.5em;
  text-align: center;
  font-size: 0.9rem;
  padding: 8px;
  border-radius: 4px;
}

.slot-game__result--win {
  color: var(--dp-gold-bright);
  background: rgba(201, 165, 92, 0.1);
  text-shadow: 0 0 6px rgba(201, 165, 92, 0.4);
}

.slot-game__result--lose {
  color: var(--dp-text-dim);
}
.slot-game__result--reveal { animation:slotResultReveal .42s cubic-bezier(.2,1.5,.4,1); }
@keyframes slotResultReveal { from{opacity:0;transform:translateY(-7px) scale(.9);filter:brightness(2)} to{opacity:1;transform:none;filter:brightness(1)} }
.slot-game__recovery-area:empty { display:none; }
.slot-game__recovery { padding:11px; border:1px solid #496886; border-radius:8px; background:linear-gradient(145deg,#101c29,#090e14); text-align:center; animation:recoveryEnter .5s cubic-bezier(.18,1.3,.4,1); }
.slot-game__recovery strong { color:#9ac9f2; }
.slot-game__recovery p { margin:8px 0 5px; color:#fff2c8; font-size:20px; font-weight:800; }
.slot-game__recovery small { color:#8196a8; font-size:10px; }
.slot-game__recovery-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px; }
.slot-game__recovery-choices button { padding:9px 5px; border:1px solid #4e7598; border-radius:6px; background:#172b3e; color:#d9edff; font-weight:700; cursor:pointer; }
.slot-game__recovery-choices button:hover { background:#214260; box-shadow:0 0 9px #579bd055; }
.slot-game__recovery-result { padding:11px; border-radius:7px; text-align:center; font-weight:700; }
.slot-game__recovery-result--profit { color:#ffe486; background:#3c3011; }
.slot-game__recovery-result--refund { color:#91e6b0; background:#12301e; }
.slot-game__recovery-result--wrong { color:#e79b9b; background:#321719; }
.slot-game__recovery-result--reveal { animation:recoveryReveal .5s ease-out; }
.slot-game__coin-burst { position:absolute; z-index:5; inset:0; overflow:visible; pointer-events:none; }
.slot-game__coin-burst i { position:absolute; left:50%; top:48%; color:#ffd74e; font-size:14px; text-shadow:0 0 5px #ff971c; animation:coinBurst 1.2s var(--delay) cubic-bezier(.15,.7,.25,1) forwards; }
.slot-game__coin-burst--jackpot i { color:#fff09a; font-size:18px; }
.slot-game__cabinet--jackpot { animation:jackpotFlash .25s ease-in-out 4; }
@keyframes recoveryEnter { from{opacity:0;transform:perspective(300px) rotateX(-35deg) translateY(-10px)} to{opacity:1;transform:none} }
@keyframes recoveryReveal { 0%{opacity:0;transform:scale(.75)} 55%{transform:scale(1.08)} 100%{opacity:1;transform:scale(1)} }
@keyframes coinBurst { 0%{opacity:0;transform:translate(0,0) scale(.4)} 20%{opacity:1} 100%{opacity:0;transform:translate(var(--x),-105px) rotate(540deg) scale(1.15)} }
@keyframes jackpotFlash { 50%{filter:brightness(1.8) saturate(1.5);box-shadow:0 0 34px #ffd84f} }

.slot-game__doubleup-btn {
  padding: 10px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--dp-arcane-bright) 0%, var(--dp-arcane) 100%);
  color: var(--dp-text-bright);
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: box-shadow 0.2s;
  animation: doubleUpPulse 1.2s ease-in-out infinite;
}

.slot-game__doubleup-btn:hover {
  box-shadow: 0 4px 14px rgba(92, 133, 179, 0.5);
}

@keyframes doubleUpPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(92, 133, 179, 0.3); }
  50% { box-shadow: 0 0 14px rgba(92, 133, 179, 0.6); }
}

.slot-game__doubleup-area:empty {
  display: none;
}

.slot-game__doubleup-session {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 6px;
  background: rgba(92, 133, 179, 0.08);
}

.slot-game__doubleup-heading {
  font-weight: 700;
  color: var(--dp-gold-bright);
  margin-bottom: 8px;
  text-align: center;
}

/* --- 주식투자 게임 (A전자, 30일차) --- */
.stock-game {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stock-game__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: radial-gradient(ellipse at top, var(--dp-bg-panel-light) 0%, var(--dp-bg-void) 100%);
  border: 1px solid var(--dp-border-light);
  border-radius: 6px;
}

.stock-game__stock-name {
  font-weight: 700;
  color: var(--dp-gold-bright);
  font-size: 0.95rem;
}

.stock-game__day {
  font-size: 0.75rem;
  color: var(--dp-text-dim);
}

.stock-game__gold-info {
  text-align: center;
  font-size: 0.85rem;
  color: var(--dp-gold-bright);
}

.stock-game__price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dp-text-bright);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.stock-game__change {
  font-size: 0.85rem;
  font-weight: 700;
}

.stock-game__change--up {
  color: var(--dp-blood-bright);
}

.stock-game__change--down {
  color: var(--dp-arcane-bright);
}

.stock-game__holdings {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid var(--dp-border);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--dp-text);
}

.stock-game__holdings--empty {
  color: var(--dp-text-dim);
  text-align: center;
}

.stock-game__rate--up {
  color: var(--dp-blood-bright);
}

.stock-game__rate--down {
  color: var(--dp-arcane-bright);
}

.stock-game__trade-area {
  display: flex;
  gap: 8px;
}

.stock-game__qty-input,
.stock-game__calc-input {
  flex: 1;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid var(--dp-border-light);
  background: var(--dp-bg-void);
  color: var(--dp-text-bright);
  font-size: 1rem;
}

.stock-game__buy-btn,
.stock-game__sell-btn {
  padding: 10px 16px;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.5px;
  border: 1px solid var(--dp-gold-dim);
  color: var(--dp-text-bright);
  transition: box-shadow 0.2s;
}

.stock-game__buy-btn {
  background: linear-gradient(180deg, var(--dp-blood-bright) 0%, var(--dp-blood) 100%);
}

.stock-game__buy-btn:hover {
  box-shadow: 0 4px 12px var(--dp-blood-glow);
}

.stock-game__sell-btn {
  background: linear-gradient(180deg, var(--dp-arcane-bright) 0%, var(--dp-arcane) 100%);
}

.stock-game__sell-btn:hover {
  box-shadow: 0 4px 12px rgba(92, 133, 179, 0.5);
}

.stock-game__sell-all-btn {
  padding: 10px;
  border: 1px solid var(--dp-border-light);
  border-radius: 4px;
  background: var(--dp-bg-panel);
  color: var(--dp-text-dim);
  cursor: pointer;
  font-size: 0.85rem;
  transition: color 0.2s, border-color 0.2s;
}

.stock-game__sell-all-btn:hover {
  color: var(--dp-gold-bright);
  border-color: var(--dp-gold);
}

.stock-game__calc-area {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.stock-game__calc-btn {
  padding: 10px 14px;
  border: 1px solid var(--dp-border-light);
  border-radius: 4px;
  background: var(--dp-bg-panel);
  color: var(--dp-gold-bright);
  cursor: pointer;
  font-size: 0.8rem;
  white-space: nowrap;
  transition: box-shadow 0.2s;
}

.stock-game__calc-btn:hover {
  box-shadow: 0 0 8px rgba(201, 165, 92, 0.3);
}

.stock-game__calc-result {
  font-size: 0.8rem;
  color: var(--dp-text-dim);
  min-height: 1.2em;
  padding: 0 2px;
}

.stock-game__calc-result--ok {
  color: var(--dp-gold-bright);
}

.stock-game__calc-warning {
  color: var(--dp-blood-bright);
}

.stock-game__nextday-btn {
  padding: 12px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--dp-gold) 0%, var(--dp-gold-dim) 100%);
  color: var(--dp-bg-void);
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: box-shadow 0.2s;
}

.stock-game__nextday-btn:hover:not(:disabled) {
  box-shadow: 0 0 12px rgba(201, 165, 92, 0.5);
}

.stock-game__nextday-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--dp-bg-panel);
  color: var(--dp-text-dim);
}

.stock-game__final-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 6px;
  background: rgba(201, 165, 92, 0.08);
  font-size: 0.85rem;
  color: var(--dp-text);
}

.stock-game__final-title {
  font-weight: 700;
  color: var(--dp-gold-bright);
  font-size: 1rem;
  text-align: center;
  margin-bottom: 4px;
}

.stock-game__restart-btn {
  padding: 10px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: var(--dp-bg-panel);
  color: var(--dp-gold-bright);
  cursor: pointer;
  font-weight: 700;
  transition: box-shadow 0.2s;
}

.stock-game__restart-btn:hover {
  box-shadow: 0 0 10px rgba(201, 165, 92, 0.35);
}


/* ============================================================
 * Boss Fight Screen - 랜드마크 보스 1v1 전투 팝업
 * ============================================================ */
.boss-fight-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.boss-fight-panel {
  position: relative;
  width: 90%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--dp-bg-panel-light) 0%, var(--dp-bg-void) 100%);
  border: 2px solid var(--dp-gold-dim);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(201, 165, 92, 0.4);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.boss-fight__header {
  text-align: center;
}

.boss-fight__landmark-name {
  font-size: 0.8rem;
  color: var(--dp-text-dim);
  margin-bottom: 4px;
}

.boss-fight__boss-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dp-blood-bright);
  text-shadow: 0 0 8px rgba(176, 48, 64, 0.5);
}

.boss-fight__boss-level {
  font-size: 0.85rem;
  color: var(--dp-text-dim);
}

.boss-fight__battle {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.boss-fight__boss-hp-row,
.boss-fight__char-hp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.boss-fight__label {
  flex: 0 0 80px;
  font-size: 0.75rem;
  color: var(--dp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.boss-fight__hp-bar {
  flex: 1;
  height: 14px;
  background: var(--dp-bg-void);
  border: 1px solid var(--dp-border);
  border-radius: 3px;
  overflow: hidden;
}

.boss-fight__hp-fill {
  height: 100%;
  transition: width 0.15s;
}

.boss-fight__hp-fill--boss {
  background: linear-gradient(90deg, var(--dp-blood), var(--dp-blood-bright));
}

.boss-fight__hp-fill--char {
  background: linear-gradient(90deg, var(--dp-grade-uncommon), #6dd690);
}

.boss-fight__hp-text {
  flex: 0 0 70px;
  font-size: 0.7rem;
  color: var(--dp-text-dim);
  text-align: right;
}

.boss-fight__vs {
  text-align: center;
  font-size: 1.1rem;
  color: var(--dp-gold-bright);
}

.boss-fight__log {
  max-height: 120px;
  overflow-y: auto;
  background: var(--dp-bg-void);
  border: 1px solid var(--dp-border);
  border-radius: 4px;
  padding: 8px;
  font-size: 0.7rem;
  color: var(--dp-text-dim);
  line-height: 1.5;
}

.boss-fight__result {
  text-align: center;
  padding: 12px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 6px;
  background: rgba(201, 165, 92, 0.08);
}

.boss-fight__result-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.boss-fight__result-title--win {
  color: var(--dp-gold-bright);
}

.boss-fight__result-title--lose {
  color: var(--dp-blood-bright);
}

.boss-fight__close-btn {
  margin-top: 10px;
  padding: 10px 24px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: var(--dp-bg-panel);
  color: var(--dp-gold-bright);
  font-weight: 700;
  cursor: pointer;
}

.boss-fight__close-btn:hover {
  box-shadow: 0 0 8px rgba(201, 165, 92, 0.4);
}

/* ============================================================
 * Game Clear Screen - 게임 클리어 결과 + 카카오톡 공유
 * ============================================================ */
.game-clear-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.5s ease-out;
}

.game-clear-panel {
  width: 90%;
  max-width: 400px;
  background: linear-gradient(180deg, #2a1f10 0%, var(--dp-bg-void) 100%);
  border: 2px solid var(--dp-gold);
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 0 40px rgba(201, 165, 92, 0.6);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.game-clear__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--dp-gold-bright);
  text-shadow: 0 0 12px rgba(201, 165, 92, 0.8);
  animation: gameClearPulse 1.5s ease-in-out infinite;
}

@keyframes gameClearPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.game-clear__subtitle {
  font-size: 0.9rem;
  color: var(--dp-text);
}

.game-clear__stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: rgba(201, 165, 92, 0.06);
  border: 1px solid var(--dp-border-light);
  border-radius: 8px;
}

.game-clear__stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--dp-text);
}

.game-clear__stat-row b {
  color: var(--dp-gold-bright);
}

.game-clear__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-clear__share-btn {
  padding: 12px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(180deg, #fee500 0%, #e5cf00 100%);
  color: #3c1e1e;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.1s;
}

.game-clear__share-btn:hover {
  transform: scale(1.02);
}

.game-clear__copy-btn {
  padding: 10px;
  border: 1px solid var(--dp-border-light);
  border-radius: 4px;
  background: var(--dp-bg-panel);
  color: var(--dp-text);
  cursor: pointer;
}

.game-clear__restart-btn {
  padding: 10px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: var(--dp-bg-panel);
  color: var(--dp-gold-bright);
  cursor: pointer;
  font-weight: 700;
}

.game-clear__share-status {
  font-size: 0.8rem;
  color: var(--dp-text-dim);
  min-height: 1.2em;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* ============================================================
 * AdFit 광고 배너 (하단 고정)
 * ============================================================ */
.adfit-banner--bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  background: var(--dp-bg-void);
  border-top: 1px solid var(--dp-border);
  padding: 2px 0;
}

/* 반응형 광고 전환: 모바일(320x50) vs 데스크탑(728x90) */
.adfit-mobile-only { display: none !important; }
.adfit-desktop-only { display: none !important; }

@media (max-width: 767px) {
  .adfit-mobile-only { display: block !important; }
  /* 배너 + 간격 확보: 배너(50px) + 패딩(2px) + 여유간격(20px) = 72px */
  .game-container { padding-bottom: 72px; }
}

@media (min-width: 768px) {
  .adfit-desktop-only { display: block !important; }
  .game-container { padding-bottom: 110px; }
}

/* 네비게이션 바와 배너 사이에 시각적 간격 확보 (AdFit 정책: 오클릭 방지) */
.nav-bar {
  margin-bottom: 20px;
}
}

/* 배너 광고 영역에 맞춰 게임 컨테이너 하단 여유 불필요 (상대 위치이므로) */

/* === 광고 보상(리워드) 버튼 === */
.ad-reward-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 6px;
  background: linear-gradient(180deg, #fee500 0%, #e5cf00 100%);
  color: #3c1e1e;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
  white-space: nowrap;
}

.ad-reward-btn:hover:not(:disabled) {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(254, 229, 0, 0.4);
}

.ad-reward-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--dp-bg-panel);
  color: var(--dp-text-dim);
  border-color: var(--dp-border);
}

.ad-reward-btn__icon {
  font-size: 1.1rem;
}


/* === 상점 화면 탭/구매 탭 추가 스타일 === */
.shop-screen__gold {
  text-align: center;
  font-size: 0.85rem;
  color: var(--dp-gold-bright);
  margin-bottom: 8px;
}

.shop-screen__tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.shop-screen__tab {
  flex: 1;
  padding: 8px 6px;
  border: 1px solid var(--dp-border-light);
  border-radius: 4px;
  background: var(--dp-bg-panel);
  color: var(--dp-text-dim);
  cursor: pointer;
  font-size: 0.85rem;
  transition: color 0.2s, border-color 0.2s;
}

.shop-screen__tab--active {
  color: var(--dp-gold-bright);
  border-color: var(--dp-gold);
  background: rgba(201, 165, 92, 0.1);
}

.shop-screen__filter-area {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.shop-screen__filter-btn {
  padding: 5px 10px;
  border: 1px solid var(--dp-border);
  border-radius: 3px;
  background: var(--dp-bg-panel);
  color: var(--dp-text-dim);
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.shop-screen__filter-btn--active {
  color: var(--dp-gold-bright);
  border-color: var(--dp-gold);
}

.shop-screen__buy-btn {
  padding: 6px 12px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--dp-gold) 0%, var(--dp-gold-dim) 100%);
  color: var(--dp-bg-void);
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}

.shop-screen__buy-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--dp-bg-panel);
  color: var(--dp-text-dim);
}

.shop-screen__item-stat {
  font-size: 0.7rem;
  color: var(--dp-text-dim);
}
.inventory-slot--material { cursor:default; background:linear-gradient(160deg,#332a19,#15110b); border-color:#8e7545; }
.inventory-slot__stack { position:absolute; right:3px; bottom:2px; padding:1px 3px; border-radius:4px; background:rgba(0,0,0,.82); color:#fff1bd; font-size:10px; font-weight:800; text-shadow:0 1px 2px #000; }

.boss-fight__coop-area { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 10px 0; }
.boss-fight__coop-btn { min-width: 150px; padding: 10px 18px; border: 1px solid #ffe16a; border-radius: 7px; background: linear-gradient(180deg, #a96a19, #6a390b); color: #fff6c9; font-weight: 900; font-size: 1rem; cursor: pointer; box-shadow: 0 0 12px rgba(255,190,40,.3); }
.boss-fight__coop-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 18px rgba(255,190,40,.55); }
.boss-fight__coop-btn:disabled { opacity: .45; cursor: not-allowed; }
.boss-fight__coop-btn span { font-size: .75rem; font-weight: 600; }
.boss-fight__coop-hint { color: var(--dp-text-dim); font-size: .7rem; }

.boss-coop-overlay { position: absolute; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(5,4,3,.84); backdrop-filter: blur(3px); pointer-events:auto; touch-action:manipulation; }
.boss-coop-panel { width: min(420px, 100%); padding: 18px; border: 1px solid var(--dp-gold); border-radius: 10px; background: radial-gradient(circle at top, #352713, var(--dp-bg-void) 70%); box-shadow: 0 0 25px rgba(255,190,40,.32); }
.boss-coop__title { margin-bottom: 12px; color: var(--dp-gold-bright); text-align: center; font-size: 1.25rem; font-weight: 900; }
.boss-coop__loading, .boss-coop__message, .boss-coop__instruction { color: var(--dp-text-dim); text-align: center; font-size: .8rem; }
.boss-coop__prompt { margin: 10px 0 6px; color: var(--dp-text-bright); text-align: center; font-size: 1rem; line-height: 1.5; }
.boss-coop__options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 13px; }
.boss-coop__option, .boss-coop__close-btn { padding: 9px; border: 1px solid var(--dp-border-light); border-radius: 5px; background: var(--dp-bg-panel); color: var(--dp-text); cursor: pointer; }
.boss-coop__option:hover:not(:disabled) { border-color: var(--dp-gold); color: var(--dp-gold-bright); }
.boss-coop__option--correct { border-color: #63dc78; background: rgba(44,145,65,.3); }
.boss-coop__option--wrong { border-color: var(--dp-blood-bright); background: rgba(150,30,30,.35); }
.boss-coop__result { margin-top: 12px; text-align: center; }
.boss-coop__critical { margin-bottom: 9px; color: #ffe16a; font-size: 1rem; font-weight: 900; animation: boss-coop-impact .45s ease-out; }
.boss-coop__wrong { margin-bottom: 9px; color: #ff8b7d; font-size: .85rem; line-height: 1.45; }
.boss-coop__close-btn { width: 100%; border-color: var(--dp-gold-dim); }
@keyframes boss-coop-impact { 0% { transform: scale(.65); filter: brightness(2); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* --- 경마 --- */
.horse-race { display: flex; flex-direction: column; gap: 12px; }
.horse-race__intro { color: var(--dp-text-dim); font-size: .8rem; text-align: center; }
.horse-race__horses { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.horse-race__horse { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 3px; border: 1px solid var(--dp-border); border-radius: 6px; background: var(--dp-bg-panel); color: var(--dp-text); cursor: pointer; }
.horse-race__horse span { font-size: 1.35rem; }
.horse-race__horse b { font-size: .7rem; }
.horse-race__horse em { color: var(--dp-gold-bright); font-size: .72rem; font-style: normal; }
.horse-race__horse--selected { border-color: var(--dp-gold); box-shadow: 0 0 9px rgba(201, 165, 92, .45); background: rgba(201, 165, 92, .12); }
.horse-race__bet-area { display: flex; gap: 8px; }
.horse-race__bet-input { flex: 1; min-width: 0; padding: 10px; border: 1px solid var(--dp-border-light); border-radius: 4px; background: var(--dp-bg-void); color: var(--dp-text-bright); font-size: 1rem; }
.horse-race__start-btn { padding: 10px 16px; border: 1px solid var(--dp-gold-dim); border-radius: 4px; background: linear-gradient(180deg, #8c3b1f, #54210f); color: var(--dp-text-bright); font-weight: 700; cursor: pointer; }
.horse-race__start-btn:disabled { opacity: .55; cursor: wait; }
.horse-race__track { position: relative; overflow: hidden; border: 1px solid var(--dp-border); border-radius: 7px; background: repeating-linear-gradient(90deg, #32372c 0, #32372c 18px, #2b3026 18px, #2b3026 36px); }
.horse-race__track--racing { animation: horse-track-rush .35s linear infinite; }
.horse-race__countdown { position: absolute; z-index: 5; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: #fff2a8; font-size: 3.2rem; font-weight: 900; text-shadow: 0 3px 0 #4b1b0c, 0 0 18px rgba(255,200,55,.9); }
.horse-race__lane { position: relative; height: 38px; border-bottom: 1px dashed rgba(255,255,255,.16); }
.horse-race__lane:last-child { border-bottom: 0; }
.horse-race__lane-name { position: absolute; z-index: 2; left: 5px; top: 3px; padding: 1px 3px; border-radius: 3px; background: rgba(0,0,0,.6); color: #fff; font-size: .62rem; }
.horse-race__runner { position: absolute; z-index: 1; left: 8%; top: 9px; font-size: 1.55rem; transform: translateX(-50%) scaleX(-1); filter: drop-shadow(-2px 3px 1px rgba(0,0,0,.55)); }
.horse-race__runner::after { content: ''; position: absolute; right: 80%; top: 65%; width: 22px; height: 8px; opacity: 0; background: radial-gradient(circle, rgba(220,205,160,.85) 0 18%, transparent 22%) 0 0 / 8px 8px; }
.horse-race__runner--racing { left: var(--race-finish); transition: left 4.75s cubic-bezier(.18,.72,.32,1); animation: horse-gallop .28s steps(2, jump-none) infinite; }
.horse-race__runner--racing::after { opacity: .9; animation: horse-dust .55s linear infinite; }
.horse-race__lane:nth-child(2n) .horse-race__runner--racing { animation-delay: -.14s; }
.horse-race__finish { position: absolute; right: 3%; top: 8px; font-size: 1.25rem; }
.horse-race__result { min-height: 2.4em; text-align: center; color: var(--dp-text); font-size: .8rem; line-height: 1.45; }
.horse-race__result--win { color: var(--dp-gold-bright); font-weight: 700; }
.horse-race__result--lose { color: var(--dp-text-dim); }

@keyframes horse-gallop {
  0% { transform: translateX(-50%) translateY(2px) scaleX(-1) rotate(-4deg); }
  50% { transform: translateX(-50%) translateY(-3px) scaleX(-1) rotate(4deg); }
  100% { transform: translateX(-50%) translateY(1px) scaleX(-1) rotate(-2deg); }
}

@keyframes horse-dust {
  from { transform: translateX(0) scale(.65); opacity: .95; }
  to { transform: translateX(22px) scale(1.45); opacity: 0; }
}

@keyframes horse-track-rush {
  from { background-position: 0 0; }
  to { background-position: -36px 0; }
}

@media (max-width: 520px) {
  .horse-race__horses { grid-template-columns: repeat(3, 1fr); }
  .minigame-screen__tabs { flex-wrap: wrap; }
  .minigame-screen__tab { flex: 1 1 40%; }
}

@media (prefers-reduced-motion: reduce) {
  .horse-race__runner--racing { transition-duration: .1s; }
  .horse-race__track--racing, .horse-race__runner--racing, .horse-race__runner--racing::after { animation: none; }
}

.equip-slot:not([data-glow-tier="none"]) .equip-slot__icon,
.inventory-slot:not([data-glow-tier="none"]) .inventory-slot__icon {
  filter: brightness(1.25) drop-shadow(0 0 5px #fff) drop-shadow(0 0 9px var(--grade-color, #ffd86b));
}

.equip-slot[data-glow-tier="strong"]::after,
.equip-slot[data-glow-tier="max"]::after,
.inventory-slot[data-glow-tier="strong"]::after,
.inventory-slot[data-glow-tier="max"]::after {
  content: '✦';
  position: absolute;
  top: -7px;
  right: -4px;
  color: #fff7bd;
  font-size: 15px;
  text-shadow: 0 0 6px #fff, 0 0 12px #ffc400;
  animation: upgradeSparkle 0.75s ease-in-out infinite alternate;
  pointer-events: none;
}
.slot-game__marquee { display:flex; align-items:center; justify-content:center; gap:10px; margin:-5px 0 9px; color:#ffd777; font-size:11px; letter-spacing:2px; text-shadow:0 0 8px #ff8a25; }
.slot-game__marquee i { width:7px; height:7px; border-radius:50%; background:#ffca55; box-shadow:0 0 8px #ff9e21; animation:slotBulb 1s ease-in-out infinite alternate; }
.slot-game__marquee i:last-child { animation-delay:.5s; }
.slot-game__lever { position:absolute; right:-13px; top:42%; width:10px; height:38px; border-radius:5px; background:linear-gradient(90deg,#5f3b25,#b5824f); transform-origin:bottom; transition:transform .25s ease; }
.slot-game__lever i { position:absolute; left:-3px; top:-9px; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff8271,#9d1728 70%); box-shadow:0 0 8px #e44149; }
.slot-game--spinning .slot-game__lever { transform:rotate(28deg); }
.slot-game--spinning .slot-game__cabinet { animation:slotCabinetHum .12s linear infinite; box-shadow:inset 0 0 28px rgba(0,0,0,.9),0 0 22px rgba(255,139,36,.55); }
.slot-game--spinning .slot-game__marquee i { animation-duration:.16s; }
@keyframes slotBulb { to { filter:brightness(1.8); transform:scale(1.25); } }
@keyframes slotCabinetHum { 25%{transform:translateX(-1px)} 75%{transform:translateX(1px)} }

@keyframes upgradeSparkle {
  from { opacity: 0.3; transform: scale(0.65) rotate(0deg); }
  to { opacity: 1; transform: scale(1.25) rotate(35deg); }
}

.shop-screen__job-filter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.shop-screen__job-filter-btn {
  padding: 10px 6px;
  border: 1px solid var(--dp-border-light);
  border-radius: 5px;
  background: var(--dp-bg-panel);
  color: var(--dp-text-dim);
  font-weight: 700;
  cursor: pointer;
}

.shop-screen__job-filter-btn--active {
  color: var(--dp-gold-bright);
  border-color: var(--dp-gold);
  background: rgba(201, 165, 92, 0.14);
}

.shop-screen__filter-title {
  margin: 2px 0 6px;
  color: var(--dp-text-dim);
  font-size: 0.72rem;
  font-weight: 700;
}

.item-tooltip__set {
  margin-top: 4px;
  color: #ffd86b;
  font-size: 0.72rem;
  font-weight: 700;
}

.shop-screen__chest-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  margin: 24px auto;
  padding: 20px;
  border: 1px solid var(--dp-border-light);
  background: var(--dp-bg-panel);
}

.shop-screen__chest-title {
  margin: 0;
  color: var(--dp-gold-bright);
  font-size: 1.1rem;
}

.shop-screen__chest-description,
.shop-screen__chest-pity {
  margin: 0;
  color: var(--dp-text-dim);
  text-align: center;
}

.shop-screen__chest-rates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  font-size: 0.8rem;
  text-align: center;
}

.shop-screen__chest-result {
  min-height: 24px;
  font-weight: 700;
  text-align: center;
}

.shop-screen__chest-open {
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid var(--dp-gold);
  background: var(--dp-blood);
  color: var(--dp-text-bright);
  cursor: pointer;
}

.shop-screen__chest-open:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 광고 보상 컨테이너 */
.ad-reward-container {
  display: flex;
  justify-content: center;
  padding: 6px 0;
}


/* ============================================================
 * Bonus Mission Popup - 추가 보상 미션 (퀴즈)
 * ============================================================ */
.bonus-mission-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.bonus-mission-panel {
  width: 90%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--dp-bg-panel-light) 0%, var(--dp-bg-void) 100%);
  border: 2px solid var(--dp-gold-dim);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(201, 165, 92, 0.4);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bonus-mission__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dp-gold-bright);
  text-align: center;
  text-shadow: 0 0 6px rgba(201, 165, 92, 0.5);
}

.bonus-mission__desc {
  font-size: 0.85rem;
  color: var(--dp-text);
  text-align: center;
}

.bonus-mission__reward {
  padding: 10px;
  background: rgba(201, 165, 92, 0.08);
  border: 1px solid var(--dp-border-light);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--dp-text);
  text-align: center;
  line-height: 1.6;
}

.bonus-mission__note {
  font-size: 0.75rem;
  color: var(--dp-text-dim);
  text-align: center;
}

.bonus-mission__actions {
  display: flex;
  gap: 10px;
}

.bonus-mission__accept-btn {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--dp-gold) 0%, var(--dp-gold-dim) 100%);
  color: var(--dp-bg-void);
  font-weight: 700;
  cursor: pointer;
}

.bonus-mission__decline-btn {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--dp-border);
  border-radius: 6px;
  background: var(--dp-bg-panel);
  color: var(--dp-text-dim);
  cursor: pointer;
}

.bonus-mission__category {
  font-size: 0.7rem;
  color: var(--dp-text-dim);
  text-align: center;
}

.bonus-mission__prompt {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dp-text-bright);
  text-align: center;
  padding: 12px;
  background: var(--dp-bg-void);
  border: 1px solid var(--dp-border);
  border-radius: 6px;
}

.bonus-mission__instruction {
  font-size: 0.85rem;
  color: var(--dp-text);
  text-align: center;
}

.bonus-mission__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bonus-mission__option-btn {
  padding: 12px 14px;
  border: 1px solid var(--dp-border-light);
  border-radius: 6px;
  background: var(--dp-bg-panel);
  color: var(--dp-text);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.bonus-mission__option-btn:hover:not(:disabled) {
  border-color: var(--dp-gold);
  background: rgba(201, 165, 92, 0.08);
}

.bonus-mission__option-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

.bonus-mission__option-btn--correct {
  border-color: var(--dp-grade-uncommon) !important;
  background: rgba(76, 175, 106, 0.15) !important;
  color: var(--dp-grade-uncommon) !important;
  opacity: 1 !important;
}

.bonus-mission__option-btn--wrong {
  border-color: var(--dp-blood-bright) !important;
  background: rgba(176, 48, 64, 0.15) !important;
  color: var(--dp-blood-bright) !important;
  opacity: 1 !important;
}

.bonus-mission__result {
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
}

.bonus-mission__result--correct {
  color: var(--dp-grade-uncommon);
  background: rgba(76, 175, 106, 0.1);
}

.bonus-mission__result--wrong {
  color: var(--dp-blood-bright);
  background: rgba(176, 48, 64, 0.08);
}

.bonus-mission__result-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.bonus-mission__close-btn {
  padding: 10px 24px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: var(--dp-bg-panel);
  color: var(--dp-gold-bright);
  font-weight: 700;
  cursor: pointer;
}

.bonus-mission__loading {
  text-align: center;
  color: var(--dp-text-dim);
  padding: 20px;
}


/* === 더블업(홀짝) 팝업 오버레이 === */
.doubleup-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.doubleup-popup-panel {
  width: 90%;
  max-width: 380px;
  max-height: 80vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--dp-bg-panel-light) 0%, var(--dp-bg-void) 100%);
  border: 2px solid var(--dp-gold-dim);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(201, 165, 92, 0.4);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doubleup-popup__heading {
  font-weight: 700;
  color: var(--dp-gold-bright);
  text-align: center;
  font-size: 1.1rem;
}

.doubleup-popup__close-btn {
  padding: 10px 24px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 4px;
  background: var(--dp-bg-panel);
  color: var(--dp-gold-bright);
  font-weight: 700;
  cursor: pointer;
  align-self: center;
}

/* === 히든 룰렛 팝업 === */
.hidden-roulette-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.hidden-roulette-panel {
  width: 90%;
  max-width: 360px;
  background: linear-gradient(180deg, #2a1f10 0%, var(--dp-bg-void) 100%);
  border: 2px solid var(--dp-gold);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 0 40px rgba(201, 165, 92, 0.7);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hidden-roulette__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dp-gold-bright);
  text-shadow: 0 0 10px rgba(201, 165, 92, 0.8);
  animation: gameClearPulse 1.2s ease-in-out infinite;
}

.hidden-roulette__subtitle {
  font-size: 0.85rem;
  color: var(--dp-text);
}

.hidden-roulette__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px;
  background: var(--dp-bg-void);
  border: 1px solid var(--dp-border);
  border-radius: 8px;
}

.hidden-roulette__cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: radial-gradient(circle, #0c0a06, #050403);
  border: 1px solid var(--dp-border);
  border-radius: 4px;
}

.hidden-roulette__result {
  font-size: 1rem;
  color: var(--dp-gold-bright);
  font-weight: 700;
}

.hidden-roulette__close-btn {
  padding: 12px 24px;
  border: 1px solid var(--dp-gold-dim);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--dp-gold) 0%, var(--dp-gold-dim) 100%);
  color: var(--dp-bg-void);
  font-weight: 700;
  cursor: pointer;
}

/* 히든 룰렛 스핀/정지 버튼 */
.hidden-roulette__spin-btn {
  padding: 14px 28px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--dp-blood-bright) 0%, var(--dp-blood) 100%);
  color: var(--dp-text-bright);
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
  animation: spinBtnPulse 1s ease-in-out infinite;
}

.hidden-roulette__spin-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px var(--dp-blood-glow);
}

.hidden-roulette__spin-btn--stop {
  background: linear-gradient(180deg, #444 0%, #222 100%);
  animation: none;
}

@keyframes spinBtnPulse {
  0%, 100% { box-shadow: 0 0 8px var(--dp-blood-glow); }
  50% { box-shadow: 0 0 20px var(--dp-blood-glow); }
}

/* 히든 룰렛 셀 - 스핀 중 애니메이션 (생동감 있는 회전) */
.hidden-roulette__cell--spinning {
  animation: hiddenCellSpin 0.08s linear infinite;
  filter: blur(0.5px);
  text-shadow: 0 0 8px rgba(232, 200, 116, 0.6);
}

@keyframes hiddenCellSpin {
  0% { transform: translateY(-4px) scale(0.95); }
  50% { transform: translateY(4px) scale(1.05); }
  100% { transform: translateY(-4px) scale(0.95); }
}

/* 히든 룰렛 셀 - 정지 시 바운스 */
.hidden-roulette__cell--stopped {
  animation: hiddenCellStop 0.3s ease-out;
}

@keyframes hiddenCellStop {
  0% { transform: translateY(-8px) scale(0.9); }
  60% { transform: translateY(3px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

/* 폭죽(컨페티) 애니메이션 */
.hidden-roulette__confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetti-particle {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: confettiFall 1.5s ease-out forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(350px) rotate(720deg); opacity: 0; }
}


/* 앵두 페어 셀 강조 (빨간 발광 + 앵두 아이콘 강조) */
.slot-game__cell--cherry-pair {
  border-color: #ff4444 !important;
  background: radial-gradient(circle, rgba(255, 68, 68, 0.2) 0%, #0c0a06 80%) !important;
  box-shadow:
    inset 0 0 8px rgba(255, 68, 68, 0.3),
    0 0 10px rgba(255, 68, 68, 0.5) !important;
  animation: cherryPairPulse 0.5s ease-in-out 3;
}

@keyframes cherryPairPulse {
  0%, 100% { box-shadow: inset 0 0 8px rgba(255, 68, 68, 0.3), 0 0 8px rgba(255, 68, 68, 0.4); }
  50% { box-shadow: inset 0 0 12px rgba(255, 68, 68, 0.5), 0 0 16px rgba(255, 68, 68, 0.7); }
}

/* 슬롯머신 모바일 반응형 — 한 화면에 전부 보이도록 */
@media (max-width: 600px) {
  .slot-game__cabinet {
    padding: 8px;
  }

  .slot-game__cell-symbol {
    font-size: 22px;
  }

  .slot-game__payout-table {
    font-size: 0.6rem;
    padding: 4px;
  }

  .slot-game__bet-area {
    gap: 4px;
  }

  .slot-game__quick-bets { gap:3px; }
  .slot-game__quick-bets button { min-width:40px; padding:5px; }

  .slot-game__bet-input {
    padding: 8px;
    font-size: 0.9rem;
  }

  .slot-game__spin-btn {
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  .slot-game__doubleup-btn {
    padding: 8px;
    font-size: 0.8rem;
  }

  .slot-game__result {
    font-size: 0.8rem;
    padding: 6px;
  }

  .slot-game {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slot-game *, .hidden-roulette-panel * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}


/* === 광고 리워드 카운트다운 팝업 === */
.ad-reward-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-reward-popup {
  text-align: center;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ad-reward-popup__title {
  font-size: 1.2rem;
  color: var(--dp-gold-bright);
  font-weight: 700;
}

.ad-reward-popup__countdown {
  font-size: 3rem;
  font-weight: 700;
  color: var(--dp-text-bright);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--dp-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.ad-reward-popup__text {
  font-size: 0.85rem;
  color: var(--dp-text-dim);
}


/* 주식투자 모바일 반응형 — 다음날 버튼이 화면에 보이도록 */
@media (max-width: 600px) {
  .stock-game {
    gap: 8px;
    font-size: 0.85rem;
  }

  .stock-game__info {
    padding: 8px 10px;
    gap: 2px;
  }

  .stock-game__price {
    font-size: 1.1rem;
  }

  .stock-game__holdings {
    padding: 6px 10px;
    gap: 2px;
    font-size: 0.75rem;
  }

  .stock-game__trade-area {
    gap: 4px;
  }

  .stock-game__qty-input,
  .stock-game__calc-input {
    padding: 8px;
    font-size: 0.85rem;
  }

  .stock-game__buy-btn,
  .stock-game__sell-btn {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .stock-game__nextday-btn {
    padding: 10px;
    font-size: 0.85rem;
  }

  .stock-game__calc-area {
    flex-wrap: wrap;
  }

  .stock-game__sell-all-btn {
    font-size: 0.75rem;
    padding: 8px;
  }
}