/* ============================================================ 로그라이트 모드 전용 */

/* ============ 강화 화면 ============ */
.upgrade-scene {
  padding: 24px;
  background: linear-gradient(180deg, #FFE0F0 0%, #FFC4D6 100%);
  min-height: 600px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.upg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2C2C2A;
}
.upg-title { font-size: 22px; font-weight: 800; }
.upg-stars { font-size: 22px; font-weight: 800; color: #C09020; }
.upg-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.upg-card {
  padding: 14px;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2C2C2A;
}
.upg-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.upg-name { font-size: 16px; font-weight: 800; }
.upg-level { font-size: 12px; color: #6F6F6A; }
.upg-desc { font-size: 12px; color: #4A4A48; margin-bottom: 8px; }
.upg-current { font-size: 13px; margin-bottom: 6px; }
.upg-dots {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.upg-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #DDD;
  border: 2px solid #2C2C2A;
}
.upg-dot.filled { background: #FFC44D; }
.upg-action button {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  background: #FFC44D;
  border: 3px solid #2C2C2A;
  border-radius: 10px;
  box-shadow: 0 3px 0 #2C2C2A;
  cursor: pointer;
}
.upg-action button:disabled {
  background: #DDD;
  cursor: not-allowed;
  opacity: 0.6;
}
.upg-action button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #2C2C2A;
}
.upg-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #FFF8E7;
  border: 3px solid #2C2C2A;
  border-radius: 10px;
}
.upg-foot button {
  padding: 8px 18px;
  font-weight: 700;
  background: #DDD;
  border: 3px solid #2C2C2A;
  border-radius: 8px;
  box-shadow: 0 3px 0 #2C2C2A;
  cursor: pointer;
}
.upg-stat { font-size: 12px; color: #6F6F6A; }

/* 챕터 헤더 런 별 + 종료 화면 별 박스 */
.run-stars {
  background: #FFC44D;
  color: #2C2C2A;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 800;
  border-radius: 10px;
  border: 3px solid #2C2C2A;
}
.end-stars {
  margin-top: 14px;
  padding: 14px 24px;
  background: #FFF8E7;
  border: 3px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 3px 0 #2C2C2A;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 280px;
}
.end-stars-row { font-size: 14px; text-align: center; }
.end-stars-row b { color: #C09020; font-size: 18px; }
.end-stars-row.total { margin-top: 4px; font-size: 16px; font-weight: 800; }

/* ============ 챕터 씬 ============ */
.chapter-scene {
  padding: 24px 20px;
  background: linear-gradient(180deg, #FFF8E7 0%, #FFEFB8 100%);
  min-height: 600px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.chapter-header {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.chapter-stage-tag {
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 4px 14px;
  font-size: 14px;
  border-radius: 10px;
}
.node-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 14px 6px;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 14px;
  box-shadow: 0 4px 0 #2C2C2A;
  overflow-x: auto;
}
.node {
  flex-shrink: 0;
  width: 64px;
  height: 80px;
  background: #DDD;
  border: 3px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 3px 0 #2C2C2A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #2C2C2A;
  position: relative;
}
.node-icon { font-size: 26px; }
.node-label { font-size: 10px; color: #6F6F6A; margin-top: 2px; }
.node.locked  { opacity: 0.5; }
.node.current {
  background: #FFEFB8;
  transform: scale(1.1);
  box-shadow: 0 4px 0 #2C2C2A, 0 0 0 3px #FFA94D;
  animation: node-pulse 1400ms ease-in-out infinite;
}
.node.cleared {
  background: #98D8A0;
}
.node.cleared::after {
  content: '✓';
  position: absolute;
  top: -4px;
  right: -4px;
  background: #2C2C2A;
  color: #FFF8E7;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.node-boss { background: #FFB0B0; }
.node-rest { background: #E0D0FF; }
.node-link {
  width: 24px;
  height: 4px;
  background: #999;
  flex-shrink: 0;
}
.node-link.cleared { background: #98D8A0; }
@keyframes node-pulse {
  0%, 100% { transform: scale(1.1); }
  50%      { transform: scale(1.16); }
}

/* ============ 파티 상태 카드 ============ */
.party-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.party-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2C2C2A;
}
.party-card.clickable {
  cursor: pointer;
  transition: transform 80ms, background 120ms;
}
.party-card.clickable:hover { background: #FFEFB8; }
.party-card.clickable:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #2C2C2A;
}

/* ============ 멤버 세부 화면 ============ */
.member-detail {
  padding: 16px 18px;
  background: linear-gradient(180deg, #FFF8E7 0%, #FFEFB8 100%);
  min-height: 600px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.md-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.md-back {
  padding: 6px 14px;
  background: #FFF8E7;
  border: 3px solid #2C2C2A;
  border-radius: 8px;
  box-shadow: 0 3px 0 #2C2C2A;
  cursor: pointer;
  font-weight: 700;
}
.md-back:active { transform: translateY(2px); box-shadow: 0 1px 0 #2C2C2A; }
.md-title {
  font-size: 22px;
  font-weight: 800;
  flex: 1;
  text-align: center;
}

.md-top {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 14px;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2C2C2A;
}
.md-face {
  width: 120px;
  height: 120px;
  border-radius: 14px;
  border: 4px solid #2C2C2A;
  background: #FFEFB8;
  image-rendering: pixelated;
}
.md-face-fallback {
  width: 120px; height: 120px;
  border-radius: 14px;
  border: 4px solid #2C2C2A;
  background: #FFEFB8;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  font-weight: 800;
}
.md-meta { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.md-row {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}
.md-label {
  font-size: 11px;
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 2px 10px;
  border-radius: 6px;
  min-width: 44px;
  text-align: center;
}
.md-exp { gap: 8px; }
.md-exp-bar {
  flex: 1;
  height: 8px;
  background: #DDD;
  border: 2px solid #2C2C2A;
  border-radius: 5px;
  overflow: hidden;
}
.md-exp-fill { height: 100%; background: #4A6FAF; transition: width 400ms; }
.md-exp-text { font-size: 11px; color: #6F6F6A; min-width: 70px; text-align: right; }
.md-evo {
  margin-top: 6px;
  padding: 4px 10px;
  background: #FFC44D;
  border: 2px solid #2C2C2A;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}

.md-hp-block, .md-stats, .md-skills {
  padding: 12px 14px;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2C2C2A;
}
.md-section-title {
  font-size: 13px;
  font-weight: 800;
  color: #4A4A48;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.md-hp-bar {
  width: 100%;
  height: 14px;
  background: #2C2C2A;
  border-radius: 7px;
  overflow: hidden;
}
.md-hp-fill { height: 100%; background: #5FCF6B; }
.md-hp-fill.mid { background: #FFC44D; }
.md-hp-fill.low { background: #FF6B6B; }
.md-hp-text { text-align: right; font-size: 12px; color: #6F6F6A; margin-top: 4px; }

.md-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.md-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #FFEFB8;
  border: 2px solid #2C2C2A;
  border-radius: 8px;
  font-size: 13px;
}
.md-stat-label { font-size: 11px; color: #6F6F6A; min-width: 28px; }
.md-stat-value { font-weight: 800; flex: 1; text-align: right; }
.md-rank {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
}
.md-rank.up { background: #98D8A0; color: #2C2C2A; }
.md-rank.down { background: #FFB0B0; color: #2C2C2A; }

.md-skill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.md-skill {
  padding: 10px;
  background: #FFEFB8;
  border: 3px solid #2C2C2A;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.md-skill.depleted { opacity: 0.5; }
.md-skill-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.md-skill-name { font-weight: 800; font-size: 14px; }
.md-skill-pp { font-size: 11px; color: #6F6F6A; }
.md-skill-meta { font-size: 10px; color: #6F6F6A; }
.md-skill-desc { font-size: 11px; color: #4A4A48; }
.md-skill-pp-bar {
  height: 4px;
  background: #2C2C2A;
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.md-skill-pp-fill {
  height: 100%;
  background: #4A6FAF;
  transition: width 300ms;
}
.party-face {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 3px solid #2C2C2A;
  background: #FFEFB8;
  image-rendering: pixelated;
}
.party-face-fallback {
  width: 56px; height: 56px;
  border-radius: 12px;
  border: 3px solid #2C2C2A;
  background: #FFEFB8;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
}
.party-info { flex: 1; }
.party-name { font-weight: 800; margin-bottom: 4px; }
.party-name .lv {
  font-size: 11px;
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 1px 8px;
  border-radius: 8px;
  margin-left: 6px;
}
.party-hp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.party-hp-bar {
  flex: 1;
  height: 10px;
  background: #2C2C2A;
  border-radius: 5px;
  overflow: hidden;
}
.party-hp-fill {
  height: 100%;
  background: #5FCF6B;
  transition: width 280ms;
}
.party-hp-fill.mid { background: #FFC44D; }
.party-hp-fill.low { background: #FF6B6B; }
.party-hp-text {
  font-size: 11px;
  color: #6F6F6A;
  min-width: 60px;
  text-align: right;
}

/* ============ 챕터 액션 버튼 ============ */
.chapter-action {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: auto;
}
.chapter-action button {
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 800;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2C2C2A;
  cursor: pointer;
  transition: transform 80ms;
}
.chapter-action button.primary {
  background: #FFC44D;
}
.chapter-action button:hover { filter: brightness(1.05); }
.chapter-action button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #2C2C2A;
}

/* ============ 스타팅 선택 ============ */
.starter-select {
  padding: 32px 24px;
  background: linear-gradient(180deg, #FFF8E7 0%, #FFE8B0 100%);
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.starter-header {
  font-size: 26px;
  font-weight: 800;
  color: #2C2C2A;
}
.starter-sub {
  font-size: 14px;
  color: #4A4A48;
}
.starter-meta {
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 4px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}
.starter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 720px;
}
.starter-section {
  margin-top: 14px;
  align-self: flex-start;
  margin-left: max(0px, calc(50% - 360px));
  font-size: 13px;
  font-weight: 800;
  color: #4A4A48;
  letter-spacing: 0.5px;
}
.starter-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 14px;
  box-shadow: 0 5px 0 #2C2C2A;
  cursor: pointer;
  transition: transform 80ms, background 120ms;
}
.starter-card:hover { background: #FFEFB8; transform: translateY(-2px); }
.starter-card:active { transform: translateY(2px); box-shadow: 0 2px 0 #2C2C2A; }
.starter-face {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  border: 3px solid #2C2C2A;
  background: #FFEFB8;
  image-rendering: pixelated;
}
.starter-face-fallback {
  width: 96px; height: 96px;
  border-radius: 14px;
  border: 3px solid #2C2C2A;
  background: #FFEFB8;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 800;
}
.starter-name { font-size: 16px; font-weight: 800; margin-top: 4px; }
.starter-type {
  font-size: 11px;
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 2px 10px;
  border-radius: 8px;
}
.starter-desc {
  font-size: 12px;
  color: #4A4A48;
  text-align: center;
  line-height: 1.4;
  margin-top: 4px;
}
.starter-cancel {
  margin-top: 16px;
  padding: 10px 24px;
  background: #DDD;
  border: 3px solid #2C2C2A;
  border-radius: 10px;
  box-shadow: 0 3px 0 #2C2C2A;
  cursor: pointer;
  font-weight: 700;
}

/* ============ 휴식처 ============ */
.rest-scene {
  padding: 60px 32px;
  background: linear-gradient(180deg, #E0D0FF 0%, #C0A8E8 100%);
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.rest-icon {
  font-size: 80px;
  filter: drop-shadow(0 4px 0 #2C2C2A);
}
.rest-title {
  font-size: 28px;
  font-weight: 800;
}
.rest-msg {
  font-size: 16px;
  color: #4A4A48;
  text-align: center;
}
.rest-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  width: 280px;
}
.rest-actions button {
  padding: 14px;
  font-size: 15px;
  font-weight: 800;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2C2C2A;
  cursor: pointer;
}
.rest-actions button.primary { background: #98D8A0; }
.rest-actions button.secondary { background: #DDD; }
.rest-actions button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #2C2C2A;
}
.rest-hint {
  font-size: 11px;
  color: #4A4A48;
  margin-top: 10px;
}
.rest-stars-tag {
  background: #FFC44D;
  color: #2C2C2A;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 800;
  border-radius: 10px;
  border: 3px solid #2C2C2A;
  box-shadow: 0 3px 0 #2C2C2A;
}
.rest-shop-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.rest-pp-members {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 520px;
}
.rest-pp-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2C2C2A;
  cursor: pointer;
  text-align: left;
}
.rest-pp-member:hover:not(:disabled) { background: #FFEFB8; }
.rest-pp-member:active:not(:disabled) {
  transform: translateY(2px); box-shadow: 0 2px 0 #2C2C2A;
}
.rest-pp-member:disabled { opacity: 0.5; cursor: not-allowed; }
.rest-pp-info { flex: 1; }
.party-meta { font-size: 11px; color: #6F6F6A; margin-top: 2px; }
.rest-pp-skills {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  max-width: 480px;
}
.rest-pp-skill {
  padding: 12px;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2C2C2A;
  cursor: pointer;
  text-align: left;
}
.rest-pp-skill:hover:not(:disabled) { background: #FFEFB8; }
.rest-pp-skill:active:not(:disabled) {
  transform: translateY(2px); box-shadow: 0 2px 0 #2C2C2A;
}
.rest-pp-skill:disabled { opacity: 0.5; cursor: not-allowed; }
.rest-pp-skill-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.rest-pp-skill-name { font-weight: 800; font-size: 15px; }
.rest-pp-tier {
  font-size: 10px;
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 2px 8px;
  border-radius: 6px;
}
.rest-pp-skill-meta { font-size: 12px; color: #4A4A48; }
.rest-pp-skill-meta b { color: #C09020; }

.rest-shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 520px;
}
.rest-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============ 챕터 클리어 / 패배 ============ */
.chapter-end {
  padding: 80px 32px;
  background: linear-gradient(180deg, #FFEFB8 0%, #FFC44D 100%);
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.chapter-end.lose {
  background: linear-gradient(180deg, #FFD0D0 0%, #FF8A8A 100%);
}
.chapter-end-title {
  font-size: 36px;
  font-weight: 800;
  color: #2C2C2A;
}
.chapter-end-title.lose { color: #C03030; }
.chapter-end-msg {
  font-size: 16px;
  color: #4A4A48;
  text-align: center;
  line-height: 1.6;
}
.chapter-end button {
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 800;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2C2C2A;
  cursor: pointer;
}
.chapter-end button.primary { background: #FFC44D; }
.chapter-end button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #2C2C2A;
}
.end-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* ============ 전투 화면 ============ */
.rogue-arena {
  display: grid;
  grid-template-rows: 1fr 1fr auto auto;
  min-height: 600px;
  padding: 16px;
  gap: 12px;
  background: linear-gradient(180deg, #FFE8B0 0%, #F5D88B 60%, #C9A85B 100%);
}
.rogue-side {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  justify-content: space-between;   /* HP 박스와 스프라이트를 양 끝으로 */
}
/* 적: HP 박스 좌측, 스프라이트 우측 (포켓몬 본가 상단 레이아웃) */
/* 아군: 스프라이트 좌측, HP 박스 우측 (하단 레이아웃) */
.rogue-sprite {
  width: 192px;
  height: 192px;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 #2C2C2A);
}
/* 아군 — 근경 (뒤통수). 크게 표시, 하단 일부 잘려도 OK */
.rogue-sprite.player-sprite {
  width: 320px;
  height: 320px;
  margin-bottom: -50px;     /* 하단 잘림 자연 */
}
.fallback.player-sprite {
  width: 320px;
  height: 320px;
  font-size: 120px;
  margin-bottom: -50px;
}

/* ============ 공격/피격 모션 ============ */
.rogue-sprite.attacking {
  animation: rogue-attack-shake 260ms ease-out;
}
@keyframes rogue-attack-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-18px) translateY(-4px); }
  60%  { transform: translateX(18px); }
  100% { transform: translateX(0); }
}
.rogue-sprite.hit {
  animation: rogue-hit-shake 320ms ease-out;
}
.rogue-sprite.hit {
  filter: drop-shadow(0 4px 0 #2C2C2A) sepia(1) hue-rotate(-50deg) saturate(3) brightness(1.1);
}
@keyframes rogue-hit-shake {
  0%,100% { transform: translateX(0); }
  15%,55% { transform: translateX(-10px); }
  30%,75% { transform: translateX(10px); }
}
/* player sprite 큰 사이즈 유지하면서 진동 */
.rogue-sprite.player-sprite.attacking {
  animation: rogue-player-attack-shake 260ms ease-out;
}
@keyframes rogue-player-attack-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-20px) translateY(8px); }
  60%  { transform: translateX(20px); }
  100% { transform: translateX(0); }
}

/* ============ 상태이상 색 오버레이 (sprite filter) ============ */
.rogue-sprite.status-poison {
  filter: drop-shadow(0 4px 0 #2C2C2A) hue-rotate(265deg) saturate(1.6);
  animation: status-poison-pulse 1400ms ease-in-out infinite;
}
@keyframes status-poison-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.75; }
}
.rogue-sprite.status-burn {
  filter: drop-shadow(0 4px 0 #2C2C2A) hue-rotate(15deg) saturate(2.2) brightness(1.1);
  animation: status-burn-pulse 800ms ease-in-out infinite;
}
@keyframes status-burn-pulse {
  0%,100% { filter: drop-shadow(0 4px 0 #2C2C2A) hue-rotate(15deg) saturate(2.2) brightness(1.1); }
  50%     { filter: drop-shadow(0 4px 0 #2C2C2A) hue-rotate(0deg)  saturate(2.6) brightness(1.2); }
}
.rogue-sprite.status-paralyze {
  filter: drop-shadow(0 4px 0 #2C2C2A) hue-rotate(50deg) saturate(0.7) brightness(1.1);
  animation: status-paralyze-jitter 320ms steps(2) infinite;
}
@keyframes status-paralyze-jitter {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(3px); }
}
.rogue-sprite.status-sleep {
  filter: drop-shadow(0 4px 0 #2C2C2A) brightness(0.55) saturate(0.4);
}
.rogue-sprite.status-confuse {
  filter: drop-shadow(0 4px 0 #2C2C2A) hue-rotate(180deg) saturate(1.5);
  animation: status-confuse-wobble 900ms ease-in-out infinite;
}
@keyframes status-confuse-wobble {
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(3deg); }
}
.fallback {
  width: 160px; height: 160px;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: 800;
  box-shadow: 0 6px 0 #2C2C2A;
}
.rogue-hp-box {
  flex: 1;
  max-width: 260px;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 4px 0 #2C2C2A;
}
.rogue-name {
  font-weight: 700;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.rogue-name .lv {
  font-size: 12px;
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 2px 8px;
  border-radius: 8px;
}
.rogue-hp-bar {
  width: 100%;
  height: 10px;
  background: #2C2C2A;
  border-radius: 5px;
  overflow: hidden;
}
.rogue-hp-fill {
  height: 100%;
  background: #5FCF6B;
  transition: width 700ms cubic-bezier(0.25, 0.6, 0.35, 1), background 400ms ease;
}
.rogue-hp-fill.mid { background: #FFC44D; }
.rogue-hp-fill.low { background: #FF6B6B; }
.rogue-hp-text {
  text-align: right;
  font-size: 12px;
  color: #6F6F6A;
  margin-top: 4px;
}

/* ============ 상태/버프 칩 ============ */
.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 6px;
}
.status-chip {
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: help;
  line-height: 1;
  border: 2px solid #FFF8E7;
}
.status-chip:hover {
  background: #4A4A48;
  transform: translateY(-1px);
}
.chip-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ============ 하단 패널 ============ */
.rogue-panel {
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 4px 0 #2C2C2A;
  min-height: 120px;
}
.rogue-hint {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rogue-hint .link {
  background: none;
  border: none;
  color: #4A6FAF;
  cursor: pointer;
  font-size: 12px;
}
.rogue-skills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rogue-skills button {
  padding: 10px 12px;
  background: #FFF8E7;
  border: 3px solid #2C2C2A;
  border-radius: 10px;
  box-shadow: 0 3px 0 #2C2C2A;
  cursor: pointer;
  text-align: left;
  transition: transform 80ms;
}
.rogue-skills button:hover:not(:disabled) { background: #FFEFB8; }
.rogue-skills button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #2C2C2A;
}
.rogue-skills button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.rogue-skill-name { font-weight: 700; font-size: 15px; }
.rogue-skill-meta { font-size: 11px; color: #6F6F6A; margin-top: 2px; }
.rogue-skill-desc {
  font-size: 11px;
  color: #4A4A48;
  margin-top: 4px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 타입 용어 — 밑줄 + 호버 시 강·약 툴팁 */
.type-term {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
  font-weight: 700;
}
.type-term[data-type="write"]   { color: #3a3a3a; }
.type-term[data-type="color"]   { color: #d2602a; }
.type-term[data-type="erase"]   { color: #c98080; }
.type-term[data-type="paper"]   { color: #b08e3a; }
.type-term[data-type="cut"]     { color: #4a6a86; }
.type-term[data-type="stick"]   { color: #a87530; }
.type-term[data-type="neutral"] { color: #6a6a6a; }
.rogue-stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.rogue-stages button {
  padding: 14px 6px;
  font-size: 20px;
  font-weight: 800;
  background: #FFF8E7;
  border: 3px solid #2C2C2A;
  border-radius: 10px;
  box-shadow: 0 3px 0 #2C2C2A;
  cursor: pointer;
}
.rogue-stages button:hover { background: #FFEFB8; }
.rogue-stages button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #2C2C2A;
}

.rogue-main-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.rogue-main-actions button {
  padding: 16px 8px;
  font-size: 16px;
  font-weight: 800;
  background: #FFEFB8;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2C2C2A;
  cursor: pointer;
}
.rogue-main-actions button:hover { background: #FFD988; }
.rogue-main-actions button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #2C2C2A;
}

.rogue-swap-grid, .rogue-item-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rogue-swap-grid button, .rogue-item-grid button {
  padding: 10px;
  background: #FFF8E7;
  border: 3px solid #2C2C2A;
  border-radius: 10px;
  box-shadow: 0 3px 0 #2C2C2A;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rogue-swap-grid button:hover, .rogue-item-grid button:hover { background: #FFEFB8; }
.rogue-swap-grid button:active, .rogue-item-grid button:active {
  transform: translateY(2px); box-shadow: 0 1px 0 #2C2C2A;
}
.rogue-swap-grid button:disabled, .rogue-item-grid button:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.swap-face {
  width: 48px; height: 48px;
  border-radius: 8px;
  border: 2px solid #2C2C2A;
  background: #FFEFB8;
}
.swap-info, .rogue-item-grid > button > div { flex: 1; }
.swap-name { font-weight: 700; font-size: 14px; }
.swap-name .lv {
  font-size: 10px;
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 4px;
}
.swap-meta { font-size: 11px; color: #6F6F6A; margin-top: 2px; }
.rogue-item-grid .count {
  font-size: 11px;
  background: #FFC44D;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 4px;
}

/* ============ 포획 후 교체 모달 ============ */
.replace-prompt-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  animation: math-fade-in 120ms ease-out;
}
.replace-prompt {
  background: #FFF8E7;
  border: 6px solid #2C2C2A;
  border-radius: 20px;
  box-shadow: 0 8px 0 #2C2C2A, 0 14px 40px rgba(0,0,0,0.4);
  padding: 24px;
  width: 480px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
}
.replace-header { text-align: center; font-size: 16px; margin-bottom: 4px; }
.replace-sub { text-align: center; color: #6F6F6A; margin-bottom: 14px; font-size: 13px; }
.replace-new-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #FFEFB8;
  border: 3px solid #2C2C2A;
  border-radius: 12px;
  margin-bottom: 14px;
}
.replace-face {
  width: 56px; height: 56px;
  border-radius: 10px;
  border: 3px solid #2C2C2A;
  background: #FFEFB8;
}
.replace-info { flex: 1; }
.replace-name { font-weight: 800; font-size: 15px; }
.replace-name .lv {
  font-size: 10px;
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 4px;
}
.replace-meta { font-size: 11px; color: #6F6F6A; margin-top: 2px; }
.replace-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.replace-choices button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #FFF8E7;
  border: 3px solid #2C2C2A;
  border-radius: 10px;
  box-shadow: 0 3px 0 #2C2C2A;
  cursor: pointer;
  text-align: left;
}
.replace-choices button:hover { background: #FFD9D9; }
.replace-choices button:active {
  transform: translateY(2px); box-shadow: 0 1px 0 #2C2C2A;
}
.replace-cancel {
  width: 100%;
  padding: 10px;
  background: #DDD;
  border: 3px solid #2C2C2A;
  border-radius: 10px;
  box-shadow: 0 3px 0 #2C2C2A;
  cursor: pointer;
  font-weight: 700;
}

/* ============ 강화 화면 — 섹션 + 아이템 ============ */
.upg-section-title {
  font-weight: 800;
  font-size: 14px;
  color: #2C2C2A;
  padding: 4px 8px;
  background: rgba(255,255,255,0.5);
  border-radius: 6px;
}
.item-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.item-card {
  padding: 12px;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2C2C2A;
}
.item-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.item-name { font-weight: 800; font-size: 14px; }
.item-owned {
  font-size: 11px;
  background: #FFC44D;
  padding: 1px 8px;
  border-radius: 6px;
}
.item-desc { font-size: 11px; color: #4A4A48; margin-bottom: 8px; }
.item-card button {
  width: 100%;
  padding: 8px;
  font-weight: 700;
  background: #FFC44D;
  border: 3px solid #2C2C2A;
  border-radius: 8px;
  box-shadow: 0 3px 0 #2C2C2A;
  cursor: pointer;
}
.item-card button:disabled {
  background: #DDD;
  cursor: not-allowed;
  opacity: 0.6;
}
.item-card button:active:not(:disabled) {
  transform: translateY(2px); box-shadow: 0 1px 0 #2C2C2A;
}

.rogue-stage-tag {
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: #2C2C2A;
  background: #FFEFB8;
  border: 3px solid #2C2C2A;
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 3px 0 #2C2C2A;
  margin: 0 auto;
  width: 200px;
}

.rogue-log {
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  min-height: 100px;
  max-height: 130px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.rogue-log div {
  padding: 1px 0;
  opacity: 0;
  animation: log-fade-in 220ms ease-out forwards;
}
.rogue-log div:not(:last-child) {
  opacity: 0.55;     /* 이전 로그 살짝 흐려 보이게 — 새 로그 강조 */
}
.rogue-log div:last-child {
  opacity: 1;
  font-weight: 600;
}
@keyframes log-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rogue-log div:not(:last-child) {
  animation: none;
}

.rogue-result {
  text-align: center;
  padding: 20px 0;
}
.rogue-result-title {
  font-size: 32px;
  font-weight: 800;
  color: #5FCF6B;
  margin-bottom: 14px;
}
.rogue-result-title.lose { color: #FF6B6B; }
.rogue-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.rogue-buttons button {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  background: #FFF8E7;
  border: 3px solid #2C2C2A;
  border-radius: 10px;
  box-shadow: 0 3px 0 #2C2C2A;
  cursor: pointer;
}

/* ============ 스킬 잊기 모달 ============ */
.forget-prompt-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  animation: math-fade-in 120ms ease-out;
}
.forget-prompt {
  background: #FFF8E7;
  border: 6px solid #2C2C2A;
  border-radius: 20px;
  box-shadow: 0 8px 0 #2C2C2A, 0 14px 40px rgba(0,0,0,0.4);
  padding: 24px;
  width: 480px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
}
.forget-header {
  font-size: 16px;
  text-align: center;
  margin-bottom: 14px;
}
.forget-monster {
  font-weight: 800;
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 2px 10px;
  border-radius: 8px;
}
.forget-new-card {
  background: #FFEFB8;
  border: 3px solid #2C2C2A;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 18px;
}
.forget-label {
  font-size: 11px;
  font-weight: 700;
  color: #6F6F6A;
  margin-bottom: 4px;
}
.forget-skill-name { font-size: 18px; font-weight: 800; }
.forget-skill-meta { font-size: 11px; color: #6F6F6A; margin-top: 2px; }
.forget-skill-desc { font-size: 12px; margin-top: 4px; color: #4A4A48; }
.forget-question {
  text-align: center;
  font-weight: 700;
  margin: 14px 0 10px;
}
.forget-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.forget-choices button {
  text-align: left;
  padding: 10px;
  background: #FFF8E7;
  border: 3px solid #2C2C2A;
  border-radius: 10px;
  box-shadow: 0 3px 0 #2C2C2A;
  cursor: pointer;
  transition: background 120ms, transform 60ms;
}
.forget-choices button:hover { background: #FFD9D9; }
.forget-choices button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #2C2C2A;
}
.forget-cancel {
  width: 100%;
  padding: 10px;
  background: #DDD;
  border: 3px solid #2C2C2A;
  border-radius: 10px;
  box-shadow: 0 3px 0 #2C2C2A;
  cursor: pointer;
  font-weight: 700;
}
.forget-cancel:hover { background: #CCC; }

/* ============ 구구단 풀이 모달 ============ */
.math-prompt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: math-fade-in 120ms ease-out;
}
@keyframes math-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.math-prompt {
  position: relative;
  background: #FFF8E7;
  border: 6px solid #2C2C2A;
  border-radius: 20px;
  box-shadow: 0 8px 0 #2C2C2A, 0 14px 40px rgba(0,0,0,0.4);
  padding: 24px;
  min-width: 360px;
  max-width: 90vw;
}
.math-prompt.defense { background: #E0F0FF; }   /* 방어는 파란 톤 */
.math-prompt.attack  { background: #FFF8E7; }   /* 공격은 노란 톤 */
.math-mode-tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 4px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
}
.math-prompt.defense .math-mode-tag { background: #2B5C9A; }
.math-title {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
}
.math-subtitle {
  text-align: center;
  font-size: 13px;
  color: #6F6F6A;
  margin-bottom: 18px;
}
.expr-choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.expr-choice {
  padding: 18px;
  font-size: 32px;
  font-weight: 800;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2C2C2A;
  color: #2C2C2A;
  cursor: pointer;
  transition: transform 80ms, background 120ms;
}
.expr-choice:hover { background: #FFEFB8; }
.expr-choice:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #2C2C2A;
}
.math-time-bar {
  width: 100%;
  height: 14px;
  background: #2C2C2A;
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 18px;
}
.math-time-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #FF6B6B 0%, #FFA94D 100%);
}
.math-expr {
  font-size: 56px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 2px;
  color: #2C2C2A;
  margin: 8px 0 22px;
}
.math-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.math-choices button {
  position: relative;
  padding: 18px 12px;
  font-size: 28px;
  font-weight: 700;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 12px;
  box-shadow: 0 4px 0 #2C2C2A;
  color: #2C2C2A;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms;
}
.math-choices button:hover {
  background: #FFEFB8;
}
.math-choices button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #2C2C2A;
}
.math-choices button.correct {
  background: #98D8A0;
  animation: math-pulse 200ms ease-out;
}
.math-choices button.wrong {
  background: #FF8A8A;
  animation: math-shake 280ms ease-out;
}
@keyframes math-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes math-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-6px); }
  40%,80% { transform: translateX(6px); }
}
.math-key {
  display: inline-block;
  font-size: 12px;
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 8px;
  vertical-align: middle;
}
.math-hint {
  font-size: 12px;
  color: #6F6F6A;
  text-align: center;
  margin-top: 12px;
}