* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  background: linear-gradient(180deg, #87CEEB 0%, #B8E0F0 60%, #98D8A0 60%, #7DC97D 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: #2C2C2A;
}
#app { width: 100%; max-width: 720px; }
.game {
  background: #FFF8E7;
  border: 6px solid #2C2C2A;
  border-radius: 16px;
  box-shadow: 0 8px 0 #2C2C2A, 0 12px 32px rgba(0,0,0,0.3);
  overflow: hidden;
}

/* ============ 공용 스프라이트 ============ */
.sprite {
  width: 160px; height: 160px;
  margin: 0 auto;
  background: #FFF8E7;
  border: 4px solid #2C2C2A;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; font-weight: 800;
  box-shadow: 0 6px 0 #2C2C2A;
}
.sprite.small { width: 56px; height: 56px; font-size: 24px; border-width: 3px; box-shadow: 0 3px 0 #2C2C2A; }
.sprite.large { width: 200px; height: 200px; font-size: 80px; }
.sprite.faded { opacity: 0.4; }

/* ============ 메뉴 / 결과 / 인카운터 공통 ============ */
.menu, .encounter, .result, .dex {
  padding: 28px 24px;
  text-align: center;
}
.title {
  font-size: 36px; font-weight: 900; margin-bottom: 4px;
}
.subtitle { font-size: 14px; color: #777; margin-bottom: 20px; }
.menu-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; max-width: 320px; margin-left: auto; margin-right: auto; }

.party-card {
  display: flex; align-items: center; gap: 14px;
  background: #FFE5B4;
  border: 3px solid #2C2C2A;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 16px auto 8px;
  max-width: 320px;
  text-align: left;
  box-shadow: 2px 2px 0 #2C2C2A;
}
.party-card .sprite { margin: 0; }
.party-card .name { font-weight: 800; font-size: 16px; }
.party-card .meta { font-size: 12px; color: #555; }
.menu-stats { font-size: 13px; color: #555; margin-top: 6px; }

.encounter .sprite { margin: 12px auto; }
.encounter .msg { font-size: 18px; font-weight: 700; margin: 8px 0; }
.encounter .meta { font-size: 13px; color: #555; }
.result .sprite { margin: 16px auto; }
.result .msg { font-size: 16px; color: #555; margin: 8px 0; }

/* ============ 도감 ============ */
.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 16px 0;
  text-align: left;
}
.dex-card {
  display: flex; align-items: center; gap: 10px;
  background: #FFE5B4;
  border: 3px solid #2C2C2A;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 2px 2px 0 #2C2C2A;
}
.dex-card.unknown { background: #DDD; opacity: 0.65; }
.dex-card .sprite { margin: 0; }
.dex-info { line-height: 1.3; }
.dex-id { font-size: 11px; color: #555; font-weight: 700; }
.dex-name { font-size: 14px; font-weight: 800; }
.dex-info .meta { font-size: 11px; color: #555; }

/* ============ 전투 화면 ============ */
.arena {
  position: relative;
  height: 320px;
  background: linear-gradient(180deg, #FFE5B4 0%, #FFD18C 50%, #F5BC6A 50%, #E5A856 100%);
}
.combatant { position: absolute; width: 220px; }
.combatant.enemy { top: 20px; right: 20px; text-align: center; }
.combatant.ally  { bottom: 20px; left: 20px; text-align: center; }

.hp-box {
  background: #FFF8E7;
  border: 3px solid #2C2C2A;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 8px;
  box-shadow: 2px 2px 0 #2C2C2A;
  text-align: left;
}
.combatant.ally .hp-box { margin: 8px 0 0; }
.hp-box .name { font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; }
.hp-text { font-variant-numeric: tabular-nums; }
.hp-bar { height: 10px; background: #2C2C2A; border-radius: 5px; overflow: hidden; margin-top: 4px; }
.hp-fill { height: 100%; background: linear-gradient(90deg, #4CD964, #FFD60A 60%, #FF3B30); transition: width 0.4s; }

.panel {
  background: #FFF8E7;
  border-top: 4px solid #2C2C2A;
  padding: 16px;
  min-height: 200px;
}
.hint { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: #555; display: flex; align-items: center; justify-content: space-between; }
.hint.big { font-size: 28px; text-align: center; color: #2C2C2A; margin-bottom: 16px; justify-content: center; }

.actions   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.skills    { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.problems  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choices   { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

button {
  background: #FFD18C;
  border: 3px solid #2C2C2A;
  border-radius: 8px;
  padding: 12px 14px;
  font: inherit; font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 2px 0 #2C2C2A;
  transition: transform 0.08s;
  color: inherit;
}
button:hover:not(:disabled) { background: #FFC066; }
button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.link {
  background: transparent; border: none; box-shadow: none;
  padding: 2px 6px; font-size: 12px; color: #1d6cb1;
}
button.link:hover:not(:disabled) { background: transparent; text-decoration: underline; }

.skill-name { font-size: 15px; }
.skill-meta { font-size: 11px; color: #555; font-weight: 500; margin-top: 2px; }
.problems button, .choices button { font-size: 18px; }
.choices button { padding: 18px 12px; font-size: 24px; }

.log {
  background: #2C2C2A;
  color: #FFF8E7;
  padding: 10px 16px;
  font-size: 13px;
  min-height: 60px;
}
.log div { padding: 2px 0; }
.msg { font-size: 22px; font-weight: 800; text-align: center; padding: 12px 0; }