/* ⚔️ 공부 RPG 공통 꾸미기 (영어·수학 둘 다 사용) */

.상태줄 {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 940px; margin: 0 auto 14px;
}
.상태줄 span {
  padding: 8px 13px; background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.35); border-radius: 14px;
  font-size: 16px; font-weight: 800;
}
.경험바 {
  max-width: 940px; height: 16px; margin: 0 auto 16px;
  background: rgba(0,0,0,.3); border-radius: 999px; overflow: hidden;
}
.경험바 b { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#ffe98a,#ffb62e); }

/* 마을 */
.마을판 {
  max-width: 940px; margin: 0 auto 18px; padding: 18px;
  background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.35);
  border-radius: 18px;
}
.마을판 h2 { margin: 0 0 10px; font-size: 23px; }

.장비줄 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.장비칸 {
  padding: 14px; background: #fff; color: #2b2140; border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0,0,0,.2);
}
.장비칸 h3 { margin: 0 0 4px; font-size: 20px; }
.장비칸 p { margin: 3px 0; font-size: 16px; }
.강화버튼 {
  margin-top: 8px; padding: 10px 14px; border: none; border-radius: 10px;
  background: #ffb62e; color: #4b3405; font-size: 16px; font-weight: 900;
  cursor: pointer; box-shadow: 0 4px 0 #c98a17;
}
.강화버튼:disabled { background: #ccc; box-shadow: 0 4px 0 #999; cursor: not-allowed; }

/* 스테이지 지도 */
.지도판 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; max-width: 940px; margin: 0 auto 18px;
}
.스테이지 {
  padding: 14px; background: rgba(255,255,255,.14); color: #fff;
  border: 2px solid rgba(255,255,255,.4); border-radius: 16px;
  font-size: 16px; font-weight: 800; text-align: left; cursor: pointer;
}
.스테이지:hover { background: rgba(255,255,255,.28); }
.스테이지 .몬 { font-size: 34px; display: block; }
.스테이지 small { display: block; margin-top: 4px; font-size: 13px; opacity: .9; font-weight: 700; }
.스테이지.깸 { background: rgba(126,242,155,.3); border-color: #7ef29b; }
.스테이지.잠김 { opacity: .5; cursor: not-allowed; }

/* 전투 화면 */
.전투막 {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(10, 5, 25, .82);
  display: flex; align-items: center; justify-content: center; padding: 14px;
  overflow-y: auto;
}
.전투막.숨김 { display: none; }
.전투창 {
  width: 100%; max-width: 620px; padding: 18px;
  background: #fff; color: #2b2140; border-radius: 22px;
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
}
.전투창 h2 { margin: 0 0 8px; font-size: 24px; text-align: center; }

.몬스터칸 { text-align: center; }
.몬그림 { font-size: 72px; line-height: 1.1; }
.몬그림.맞음 { animation: 흔들 .35s; }
@keyframes 흔들 { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-12px)} 75%{transform:translateX(12px)} }

.체력줄 { margin: 8px 0; }
.체력줄 b.이름 { font-size: 17px; }
.체력바 { height: 18px; background: #e6e1f2; border-radius: 999px; overflow: hidden; margin: 4px 0; }
.체력바 span { display: block; height: 100%; background: linear-gradient(90deg,#ff7a7a,#e03c3c); transition: width .3s; }
.체력바.내것 span { background: linear-gradient(90deg,#7ef29b,#2fae63); }
.체력줄 small { font-size: 14px; color: #6a5f85; }

.버프줄 { margin: 6px 0; font-size: 16px; font-weight: 800; min-height: 22px; }
.버프딱지 { display: inline-block; padding: 3px 9px; margin-right: 5px; border-radius: 999px; font-size: 14px; }
.버프딱지.좋음 { background: #d6ffe0; color: #14663a; }
.버프딱지.나쁨 { background: #ffdada; color: #8a2020; }

.문제박스 {
  margin-top: 12px; padding: 14px; background: #f4f0ff; border-radius: 14px;
}
.문제글 { margin: 0 0 10px; font-size: 20px; font-weight: 800; line-height: 1.4; }
.보기줄 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.보기 {
  padding: 12px; border: 3px solid #b18ce0; border-radius: 12px;
  background: #fff; color: #2b2140; font-size: 17px; font-weight: 800; cursor: pointer;
}
.보기:hover { background: #efe6ff; }
.보기.정답 { background: #d6ffe0; border-color: #2fae63; }
.보기.오답 { background: #ffdada; border-color: #e03c3c; }

.전투로그 {
  margin-top: 10px; max-height: 130px; overflow-y: auto;
  padding: 10px; background: #efeaf9; border-radius: 12px; font-size: 15px; line-height: 1.5;
}
.닫기줄 { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.닫기 {
  padding: 10px 18px; border: none; border-radius: 12px;
  background: #ff9ec4; color: #52203a; font-size: 17px; font-weight: 900;
  cursor: pointer; box-shadow: 0 4px 0 #c96590;
}
.계속 { background: #7ef29b; color: #1d4a2c; box-shadow: 0 4px 0 #3fae63; }