/* =========================================================
   🏰 올스타 타워 디펜스 — 꾸미기
   ========================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Jua", "맑은 고딕", sans-serif;
  background:
    radial-gradient(circle at 20% 10%, #2a3a6a 0%, transparent 50%),
    radial-gradient(circle at 80% 90%, #4a2a6a 0%, transparent 50%),
    #141a2e;
  color: #eaf0ff;
  min-height: 100vh;
  padding: 12px;
  user-select: none;
}

.숨김 { display: none !important; }

/* 돌아가기 */
.돌아가기 {
  display: inline-block;
  color: #7ad8ff;
  text-decoration: none;
  font-size: 18px;
  background: rgba(255,255,255,.1);
  padding: 7px 16px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.돌아가기:hover { background: rgba(255,255,255,.22); }

/* =========================================================
   덮개 (시작 · 끝 화면)
   ========================================================= */
.덮개 {
  position: fixed; inset: 0;
  background: rgba(10,14,28,.93);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  padding: 16px;
  overflow-y: auto;
}

.시작판 {
  background: linear-gradient(165deg, #222d50, #161d36);
  border: 4px solid #ffd34d;
  border-radius: 26px;
  padding: 28px 24px;
  max-width: 560px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 44px rgba(255,211,77,.35);
}

.시작판 h1 {
  font-size: 38px;
  color: #ffd34d;
  margin-bottom: 14px;
  text-shadow: 0 0 18px rgba(255,211,77,.6);
}

.설명 {
  font-size: 19px;
  line-height: 1.7;
  color: #cdd9f0;
  margin-bottom: 20px;
}

/* 난이도 */
.난이도줄 {
  display: flex; gap: 10px; justify-content: center;
  margin-bottom: 20px; flex-wrap: wrap;
}
.난이도버튼 {
  font-family: inherit;
  font-size: 19px;
  padding: 12px 18px;
  border-radius: 16px;
  border: 3px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #eaf0ff;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.난이도버튼 small { font-size: 13px; color: #9fb0cc; }
.난이도버튼.고름 {
  border-color: #3ddc84;
  background: rgba(61,220,132,.22);
  box-shadow: 0 0 18px rgba(61,220,132,.45);
}

.큰버튼 {
  display: inline-block;
  font-family: inherit;
  font-size: 24px;
  padding: 15px 38px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #ff8a3d, #ff4a8a);
  color: #fff;
  cursor: pointer;
  margin: 6px;
  text-decoration: none;
  box-shadow: 0 6px 0 rgba(0,0,0,.3);
}
.큰버튼:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.큰버튼.회색 { background: linear-gradient(135deg, #6a7a9a, #4a5a7a); }

.도움말 {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.8;
  color: #a8bdd8;
  background: rgba(0,0,0,.3);
  border-radius: 14px;
  padding: 14px;
  text-align: left;
}
.도움말 b { color: #ffd34d; }

/* =========================================================
   위쪽 정보 줄
   ========================================================= */
.위줄 {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.정보칸 {
  font-size: 20px;
  background: rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 8px 15px;
}
.정보칸 b { color: #ffd34d; }

.작은버튼 {
  font-family: inherit;
  font-size: 18px;
  padding: 9px 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #3da5ff, #2a6ab8);
  color: #fff;
  cursor: pointer;
  margin-left: auto;
}
.작은버튼:active { transform: scale(.95); }
#다음웨이브 {
  background: linear-gradient(135deg, #3ddc84, #1f9a5a);
  margin-left: 0;
}
#다음웨이브:disabled {
  background: #4a5a6a; cursor: default; opacity: .6;
}
.반짝 { animation: 버튼반짝 1.4s ease-in-out infinite; }
@keyframes 버튼반짝 {
  0%,100% { box-shadow: 0 0 0 rgba(61,220,132,0); }
  50%     { box-shadow: 0 0 22px rgba(61,220,132,.9); }
}

/* =========================================================
   게임판
   ========================================================= */
.판틀 {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}
#판 {
  width: 100%;
  height: auto;
  display: block;
  border: 4px solid #3a4a7a;
  border-radius: 18px;
  background: #1a2a1a;
  cursor: pointer;
  touch-action: manipulation;
}

.알림 {
  position: absolute;
  left: 50%; top: 14%;
  transform: translateX(-50%);
  font-size: 26px;
  color: #fff;
  background: rgba(0,0,0,.75);
  padding: 10px 24px;
  border-radius: 18px;
  border: 3px solid #ffd34d;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  white-space: nowrap;
}
.알림.보임 { opacity: 1; }

/* =========================================================
   선택한 타워 정보
   ========================================================= */
.타워정보 {
  max-width: 880px;
  margin: 10px auto 0;
  background: rgba(255,255,255,.1);
  border: 3px solid #ffd34d;
  border-radius: 18px;
  padding: 14px;
  display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap;
}
.타워정보 .큰그림 { font-size: 44px; }
.타워정보 .글 { flex: 1; min-width: 180px; font-size: 17px; line-height: 1.6; }
.타워정보 .글 h3 { font-size: 22px; color: #ffd34d; margin-bottom: 4px; }
.타워정보 button {
  font-family: inherit;
  font-size: 17px;
  padding: 11px 18px;
  border: none;
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
}
.업버튼 { background: linear-gradient(135deg, #3ddc84, #1f9a5a); }
.필살버튼 { background: linear-gradient(135deg, #a05ae8, #6a2ab8); }
.팔기버튼 { background: linear-gradient(135deg, #ff6a6a, #c83a3a); }
.타워정보 button:disabled { background: #4a5a6a; opacity: .6; cursor: default; }

/* =========================================================
   상점
   ========================================================= */
.상점 {
  max-width: 880px;
  margin: 12px auto 0;
  background: rgba(0,0,0,.35);
  border-radius: 18px;
  padding: 12px;
}
/* 👾 무서운 적 안내 */
.적안내 {
  background: #2a1a1a;
  border: 3px solid #c83a3a;
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 14px;
  text-align: left;
  font-size: 15px;
  line-height: 1.6;
}
.적안내 > b { font-size: 18px; color: #ff8a6a; }
.적줄 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: #f0dcd4;
}
.적그림 { font-size: 26px; min-width: 34px; text-align: center; }

/* 📂 시작 화면 탭 — 설명을 접어서 짧게! */
.탭줄 {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0 10px;
}
.탭버튼 {
  background: #2a3242;
  color: #9aa8bb;
  border: 2px solid #3a4454;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.탭버튼:hover { background: #333d50; color: #cfd8e6; }
.탭버튼.고름 {
  background: #ffd34d;
  color: #1a1f2a;
  border-color: #fff0a8;
  box-shadow: 0 0 12px rgba(255, 211, 77, .5);
}
.탭내용 { display: none; }
.탭내용.보임 { display: block; animation: 탭등장 .25s ease; }
/* 탭 안에서는 위 여백을 없애요 (탭줄이 이미 띄워줬어요) */
.탭내용 > .도움말,
.탭내용 > .사거리안내,
.탭내용 > .적안내,
.탭내용 > .조건안내 { margin-top: 0; }
/* 설명이 길면 탭 안에서만 스크롤돼요 */
.탭내용 { max-height: 38vh; overflow-y: auto; }
@keyframes 탭등장 {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ⏫ 한 번에 레벨업 버튼 — 무지개로 반짝! */
.맥스버튼 {
  background: linear-gradient(135deg, #3ddc84, #7ad8ff, #a05ae8);
  background-size: 250% 250%;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  animation: 맥스반짝 2.5s ease infinite;
  box-shadow: 0 4px 0 #1f6b45;
}
@keyframes 맥스반짝 {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.맥스버튼:hover:not(:disabled) { transform: translateY(-2px); }
.맥스버튼:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #1f6b45; }
.맥스버튼:disabled {
  background: #3a4252;
  color: #78839a;
  box-shadow: none;
  animation: none;
  cursor: not-allowed;
}

/* 🔒 합성 못 하는 등급 표시 (신화·시크릿·히어로) */
.합성잠김 {
  position: absolute;
  top: 3px; left: 3px;
  font-size: 15px;
  filter: drop-shadow(0 0 4px #000);
}

/* 🏗️ 합성 창에서 '필드에서 가져오는 재료' 표시 */
.필드재료 {
  position: relative;
  display: inline-block;
  padding: 0 2px;
  border-bottom: 3px solid #7ad8ff;
  filter: drop-shadow(0 0 5px #7ad8ff);
}

/* ♾️ 인피니티 버튼 — 무지개로 반짝! */
.난이도버튼.무한 {
  background: linear-gradient(135deg, #ff4a8a, #a05ae8, #00ffd0);
  background-size: 300% 300%;
  border-color: #ffdf6a;
  color: #fff;
  animation: 무한반짝 3s ease infinite;
}
@keyframes 무한반짝 {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.난이도버튼.무한.고름 {
  box-shadow: 0 0 22px rgba(255,223,106,.9);
  transform: scale(1.06);
}

/* 🏹 카드의 사거리 종류 딱지 */
.사거리딱 {
  font-size: 11px;
  font-weight: bold;
  margin-top: 2px;
}

/* 🏹 사거리 안내 (시작 화면) */
.사거리안내 {
  margin-top: 14px;
  padding: 14px;
  background: rgba(0,0,0,.3);
  border-radius: 16px;
}
.사거리안내 > b {
  display: block;
  font-size: 18px;
  color: #7ad8ff;
  margin-bottom: 10px;
  text-align: center;
}
.사거리칸 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.사거리줄 {
  padding: 8px 10px;
  background: rgba(255,255,255,.06);
  border-left: 5px solid var(--ㅅ색);
  border-radius: 10px;
  font-size: 13px;
  color: #dbe6f7;
  text-align: left;
}
.사거리줄 b { color: var(--ㅅ색); display: block; font-size: 15px; }

/* =========================================================
   🤖 자동 버튼 줄
   ========================================================= */
.자동줄 {
  display: flex; gap: 9px; align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 10px;
  padding: 9px 14px;
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  max-width: 880px;
}
.자동이름 { font-size: 16px; color: #a8bdd8; }
.자동버튼 {
  font-family: inherit;
  font-size: 15px;
  padding: 9px 15px;
  border: 3px solid #4a5a70;
  border-radius: 13px;
  background: rgba(0,0,0,.3);
  color: #9fb0cc;
  cursor: pointer;
  transition: all .15s;
}
.자동버튼:hover { border-color: #7ad8ff; color: #eaf0ff; }
.자동버튼.켜짐 {
  background: linear-gradient(135deg, #3ddc84, #2aa860);
  border-color: #8affc0;
  color: #062a14;
  font-weight: bold;
  box-shadow: 0 0 16px rgba(61,220,132,.55);
}

/* =========================================================
   🏆 조건 안내 (시작 화면)
   ========================================================= */
.조건안내 {
  margin-top: 16px;
  padding: 16px;
  background: rgba(0,0,0,.3);
  border-radius: 16px;
  text-align: left;
}
.조건안내 > b {
  display: block;
  font-size: 18px;
  color: #ffd34d;
  margin-bottom: 11px;
  text-align: center;
}
.조건줄 {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  margin-bottom: 7px;
  background: rgba(255,255,255,.06);
  border-left: 5px solid var(--조건색);
  border-radius: 11px;
  font-size: 15px;
  color: #dbe6f7;
}
.조건줄 b { color: var(--조건색); }
.조건그림 { font-size: 26px; }

.상점머리 {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; margin-bottom: 10px;
}
.상점제목 { font-size: 17px; color: #a8bdd8; flex: 1; min-width: 180px; }
.상점제목 b { color: #ffd34d; }

/* 🎰 뽑기 버튼 */
.뽑기버튼, .합성버튼 {
  font-family: inherit;
  font-size: 18px;
  padding: 11px 20px;
  border: none;
  border-radius: 15px;
  color: #fff;
  cursor: pointer;
}
.뽑기버튼 {
  background: linear-gradient(135deg, #ff8a3d, #ff4a8a);
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
}
.뽑기버튼.열번 {
  background: linear-gradient(135deg, #ffd34d, #ff8a3d);
  color: #3a2a00;
  font-weight: bold;
}
.합성버튼 {
  background: linear-gradient(135deg, #a05ae8, #6a2ab8);
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
}
.뽑기버튼:active, .합성버튼:active { transform: translateY(3px); box-shadow: none; }
.뽑기버튼:disabled, .합성버튼:disabled {
  background: #4a5a6a; opacity: .55; cursor: default;
  box-shadow: none;
}

/* 손패가 비었을 때 */
.빈손패 {
  padding: 24px;
  color: #8fa4c0;
  font-size: 17px;
  text-align: center;
  width: 100%;
}

/* 등급 딱지 · 합성 가능 표시 */
.상점카드 { position: relative; }
.상점카드 .등급딱 { font-size: 13px; font-weight: bold; }
.상점카드 .합성가능 {
  position: absolute;
  top: -8px; right: -6px;
  font-size: 20px;
  animation: 합성흔들 1s ease-in-out infinite;
}
@keyframes 합성흔들 {
  0%,100% { transform: rotate(-14deg) scale(1); }
  50%     { transform: rotate(14deg) scale(1.2); }
}

/* 개수 딱지 */
.상점카드 .개수딱 {
  position: absolute;
  top: -7px; left: -5px;
  background: #ff4a8a;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 7px;
  border-radius: 10px;
  border: 2px solid #fff;
}

/* =========================================================
   🔨 합성 창
   ========================================================= */
.합성판 {
  background: linear-gradient(165deg, #2a2050, #16103a);
  border: 4px solid #a05ae8;
  border-radius: 24px;
  padding: 24px;
  max-width: 520px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 44px rgba(160,90,232,.5);
}
.합성판 h2 {
  font-size: 28px;
  color: #c88aff;
  margin-bottom: 16px;
}
.합성안내 {
  font-size: 16px;
  color: #a8bdd8;
  margin-bottom: 14px;
}
.합성안내 b { color: #ffd34d; }
.합성목록 {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 18px;
  max-height: 46vh;
  overflow-y: auto;
}
.합성줄 {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.08);
  border: 3px solid rgba(160,90,232,.5);
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .12s;
}
.합성줄:hover {
  transform: translateX(5px);
  border-color: #c88aff;
  background: rgba(160,90,232,.22);
}
.합성그림 { font-size: 34px; }
.합성글 { flex: 1; text-align: left; font-size: 17px; }
.합성글 small { color: #9fb0cc; font-size: 13px; display: block; }
.합성화살 { font-size: 22px; color: #ffd34d; }
.합성결과 { font-size: 18px; font-weight: bold; }

/* =========================================================
   🎆 뽑기 연출
   ========================================================= */
.뽑기연출 {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  z-index: 60;
  transition: opacity .25s;
}
.뽑기연출.보임 { opacity: 1; }

.뽑힌카드 {
  background: linear-gradient(165deg, rgba(20,26,46,.96), rgba(10,14,28,.96));
  border: 5px solid var(--등급색);
  border-radius: 26px;
  padding: 30px 46px;
  text-align: center;
  box-shadow: 0 0 60px var(--등급색);
  animation: 카드등장 .5s cubic-bezier(.2,1.6,.4,1);
}
@keyframes 카드등장 {
  from { transform: scale(.3) rotate(-18deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.뽑힌카드 .큰그림 { font-size: 76px; }
.뽑힌카드 .등급글 { font-size: 30px; font-weight: bold; margin: 6px 0; }
.뽑힌카드 .이름글 { font-size: 22px; color: #eaf0ff; }

.상점줄 {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.상점카드 {
  flex: 0 0 auto;
  width: 108px;
  background: linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 3px solid var(--등급색, #888);
  border-radius: 16px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  transition: transform .12s;
}
.상점카드:hover { transform: translateY(-4px); }
.상점카드.고름 {
  box-shadow: 0 0 20px var(--등급색);
  transform: translateY(-6px) scale(1.04);
}
.상점카드.비쌈 { opacity: .45; }
.상점카드 .그림 { font-size: 34px; }
.상점카드 .이름 { font-size: 14px; margin: 3px 0; }
.상점카드 .값 { font-size: 15px; color: #ffd34d; }
.상점카드 .유형 { font-size: 13px; color: #9fb0cc; }

/* 작은 화면 */
@media (max-width: 600px) {
  .시작판 h1 { font-size: 28px; }
  .정보칸 { font-size: 17px; padding: 6px 11px; }
  .작은버튼 { font-size: 16px; padding: 8px 12px; }
  .상점카드 { width: 92px; }
}