* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%;
  background: #0a0a14;
  overflow: hidden;
  font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
  color: #fff;
}

#game-wrap { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
#game { display: block; background: #12121f; touch-action: none; }
.hidden { display: none !important; }

/* ===== 전투 HUD ===== */
#hud {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 10px 14px; pointer-events: none; z-index: 5;
}
/* 플레이 중 홈으로 나가기 버튼 */
#quit-btn {
  position: absolute; top: 10px; right: 12px;
  pointer-events: auto; z-index: 8;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  font-size: 22px; line-height: 46px; color: #fff;
  background: rgba(18,18,34,.72); border: 2px solid #4a4a72;
  box-shadow: 0 3px 12px rgba(0,0,0,.45); cursor: pointer;
}
#quit-btn:active { transform: scale(.9); }
#mute-btn {
  position: absolute; top: 10px; right: 66px;
  pointer-events: auto; z-index: 8;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  font-size: 20px; line-height: 46px; color: #fff;
  background: rgba(18,18,34,.72); border: 2px solid #4a4a72;
  box-shadow: 0 3px 12px rgba(0,0,0,.45); cursor: pointer;
}
#mute-btn:active { transform: scale(.9); }
#mute-btn.muted { opacity: .55; }
#hp-bar {
  position: relative; height: 22px;
  background: rgba(0,0,0,.5); border: 2px solid #2a2a40;
  border-radius: 12px; overflow: hidden; margin-bottom: 6px;
}
#hp-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff3b5c, #ff7a4d); transition: width .15s; }
#hp-text {
  position: absolute; inset: 0; text-align: center; line-height: 22px;
  font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000;
}
#xp-bar { height: 8px; background: rgba(0,0,0,.5); border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
#xp-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #4dd0ff, #4d7cff); transition: width .12s; }
#stats { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; text-shadow: 0 1px 3px #000; }
#level-text { color: #ffd24d; }
#stage-prog { color: #9ad; }
#time-text { color: #fff; }
#kill-text { color: #ff7a8a; }

#boss-bar {
  position: relative; height: 16px; margin-top: 8px;
  background: rgba(0,0,0,.55); border: 2px solid #5a2a3a;
  border-radius: 10px; overflow: hidden;
}
#boss-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff2a5a, #ff6a3a); transition: width .1s; }
#boss-name {
  position: absolute; inset: 0; text-align: center; line-height: 16px;
  font-size: 11px; font-weight: 800; text-shadow: 0 1px 2px #000; letter-spacing: 1px;
}

/* ===== 오버레이 공통 ===== */
.overlay {
  position: absolute; inset: 0;
  background: rgba(6, 6, 16, .9);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; z-index: 10; padding: 20px;
  overflow-y: auto;
}

h1 {
  font-size: clamp(32px, 8vw, 60px);
  background: linear-gradient(90deg, #ffd24d, #ff7a4d, #ff3b5c);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: 2px; margin-bottom: 6px;
  filter: drop-shadow(0 3px 8px rgba(255,120,80,.4));
}
.clear-title {
  background: linear-gradient(90deg, #4dffa0, #4dd0ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
h2 { font-size: clamp(26px, 6vw, 42px); color: #ffd24d; margin-bottom: 4px; }
.sub { color: #9aa; font-size: 16px; margin-bottom: 24px; }

.howto {
  background: rgba(255,255,255,.05); border: 1px solid #2a2a40;
  border-radius: 14px; padding: 18px 22px; margin-bottom: 28px;
  line-height: 2; font-size: 15px; max-width: 420px;
}
.howto b { color: #ffd24d; }

button {
  font-family: inherit; font-size: 20px; font-weight: 800; color: #1a1020;
  background: linear-gradient(90deg, #ffd24d, #ff9a4d); border: none;
  padding: 14px 44px; border-radius: 40px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(255,160,60,.4); transition: transform .1s;
}
button:active { transform: scale(.94); }
button:disabled { filter: grayscale(.7) brightness(.6); cursor: not-allowed; box-shadow: none; }

/* ===== 초기화 버튼 (시작 화면 좌측 하단) ===== */
#reset-btn {
  position: absolute; left: 16px; bottom: 16px;
  font-size: 13px; font-weight: 700; padding: 9px 18px;
  color: #fff; background: linear-gradient(90deg, #5a5a66, #7a7a88);
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
}

/* ===== 홈 화면 ===== */
#home-screen { justify-content: flex-start; padding-top: 16px; }
#home-top {
  width: 100%; max-width: 720px; display: flex; gap: 12px; justify-content: center; margin-bottom: 8px;
}
.currency {
  background: rgba(255,255,255,.06); border: 1px solid #33335a;
  border-radius: 30px; padding: 8px 20px; font-size: 18px; font-weight: 800;
}
.currency span { color: #ffd24d; }
.home-title {
  background: linear-gradient(90deg, #ffd24d, #ff7a4d, #ff3b5c);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: clamp(28px,7vw,48px); margin: 8px 0 16px; letter-spacing: 2px;
}
#home-body, .home-row {
  width: 100%; max-width: 720px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
}

/* ===== 홈 탭 메뉴 (아이템별 분리) ===== */
#home-tabs {
  width: 100%; max-width: 720px;
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 18px;
}
.tab-btn {
  font-size: 15px; font-weight: 800; padding: 10px 15px; border-radius: 14px;
  color: #cdd; background: rgba(255,255,255,.05); border: 1px solid #33335a;
  box-shadow: none; cursor: pointer; transition: .12s;
}
.tab-btn.active {
  color: #1a1020; background: linear-gradient(90deg, #ffd24d, #ff9a4d);
  border-color: transparent; box-shadow: 0 4px 14px rgba(255,160,60,.4);
}
.tab-page { display: none; width: 100%; max-width: 720px; }
.tab-page.active { display: block; }

/* ===== 📖 도감 ===== */
#dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap: 8px; }
.dex-item {
  background: rgba(255,255,255,.04); border: 2px solid #2a2a44;
  border-radius: 12px; padding: 8px 4px; text-align: center;
}
.dex-item.locked { opacity: .55; }
.dex-ic { font-size: 30px; line-height: 1.2; }
.dex-nm { font-size: 13px; font-weight: 800; margin-top: 2px; }
.dex-tr { font-size: 10px; color: #9aa; margin-top: 3px; line-height: 1.3; min-height: 26px; }
.dex-kc { font-size: 11px; color: #ffd24d; font-weight: 700; margin-top: 2px; }

/* ===== 🏆 순위표 ===== */
.rank-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.04); border: 1px solid #2a2a44;
  border-radius: 12px; padding: 10px 12px; margin-bottom: 7px;
}
.rank-row.top { border-color: #ffd24d; background: rgba(255,210,77,.07); }
.rk-no { font-size: 20px; font-weight: 800; width: 34px; text-align: center; flex: 0 0 auto; }
.rk-main { flex: 1; text-align: left; font-size: 15px; }
.rk-main b { color: #ffd24d; }
.rk-sub { display: block; font-size: 12px; color: #9aa; margin-top: 2px; }
.rk-score { font-size: 16px; font-weight: 800; color: #4dd0ff; }
.panel {
  flex: 1; min-width: 300px;
  background: linear-gradient(160deg, #1a1a2e, #14142a);
  border: 1px solid #2a2a48; border-radius: 18px; padding: 18px;
}
.panel-title { font-size: 18px; font-weight: 800; color: #ffd24d; margin-bottom: 14px; }
.hint { font-size: 12px; color: #889; margin-top: 12px; }

/* 장비 그리드 */
#equip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.equip {
  background: rgba(255,255,255,.04); border: 1px solid #33335a;
  border-radius: 12px; padding: 12px; cursor: pointer; transition: .12s; text-align: left;
}
.equip:hover { border-color: #ffd24d; transform: translateY(-2px); }
.equip.maxed { border-color: #4dffa0; }
.equip .e-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.equip .e-icon { font-size: 26px; }
.equip .e-name { font-size: 14px; font-weight: 700; }
.equip .e-lv { font-size: 12px; color: #6cf; font-weight: 700; }
.equip .e-stat { font-size: 12px; color: #9c9; margin-bottom: 6px; }
.equip .e-shard {
  height: 6px; background: rgba(0,0,0,.4); border-radius: 4px; overflow: hidden; margin-bottom: 4px;
}
.equip .e-shard-fill { height: 100%; background: linear-gradient(90deg,#4dd0ff,#4d7cff); }
.equip .e-cost { font-size: 11px; color: #cb8; }
.equip .e-cost.can { color: #ffd24d; font-weight: 700; }
.equip .e-tiers { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; min-height: 20px; }
.tier-chip {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
  border: 1px solid #555; background: rgba(0,0,0,.25);
}
.tier-chip.empty { color: #667; border-color: #334; }

/* 상자 패널 */
#box-display { text-align: center; padding: 10px 0 16px; }
#box-icon { font-size: 72px; margin-bottom: 8px; animation: bob 2s ease-in-out infinite; display:inline-block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
/* 상자 개봉: 흔들다 '펑' 튀어오르기 */
#box-icon.opening { animation: boxShake .55s ease-in-out; }
@keyframes boxShake {
  0%   { transform: translateY(0) rotate(0) scale(1); }
  15%  { transform: translateY(0) rotate(-14deg) scale(1.05); }
  30%  { transform: translateY(0) rotate(13deg) scale(1.05); }
  45%  { transform: translateY(0) rotate(-11deg) scale(1.08); }
  60%  { transform: translateY(0) rotate(9deg) scale(1.1); }
  75%  { transform: translateY(-18px) rotate(0) scale(1.28); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}
#box-count-label { font-size: 14px; color: #bbc; }
#box-pity { font-size: 12px; color: #99a; margin-top: 4px; }
#box-pity b { color: #ffd24d; }
#box-count-label b, #stage-info b, #next-stage { color: #ffd24d; }
.open-btns { display: flex; gap: 8px; justify-content: center; }
#open-box-btn, #open-box10-btn { font-size: 16px; padding: 12px 22px; }
#open-box10-btn { background: linear-gradient(90deg, #ffce4d, #ff7a4d); }
#box-reward {
  position: relative; overflow: hidden;
  margin-top: 14px; background: rgba(255,210,77,.08); border: 2px solid #5a4a1a;
  border-radius: 14px; padding: 16px 14px; font-size: 14px; line-height: 1.8;
  animation: popReward .5s cubic-bezier(.2,1.5,.4,1);
}
/* 등급 색 광택 스윕 (한 번 지나감) */
#box-reward::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); animation: shineSweep .8s ease .12s 1;
}
@keyframes popReward {
  0%   { transform: scale(.6) translateY(14px); opacity: 0; }
  60%  { transform: scale(1.06) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes shineSweep { from { left: -60%; } to { left: 130%; } }
@keyframes pop { from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }
/* 보상 아이템 아이콘 발광 원 */
.reward-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width: 64px; height: 64px; margin: 4px auto 6px; border-radius: 50%;
  font-size: 36px; animation: rewardPulse 1.2s ease-in-out infinite;
}
@keyframes rewardPulse { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.08); } }

/* 상자 획득 방법 */
#box-sources { margin-top: 16px; border-top: 1px solid #2a2a48; padding-top: 14px; }
.src-title { font-size: 13px; color: #9aa; margin-bottom: 10px; font-weight: 700; }
.src-btn {
  font-size: 14px; padding: 9px 16px; margin: 0 4px 8px; border-radius: 24px;
  background: linear-gradient(90deg, #4d7cff, #4dd0ff); color: #06122a;
  box-shadow: 0 3px 10px rgba(77,160,255,.3);
}
#kill-box-prog { margin-top: 8px; text-align: left; }
.kp-label { font-size: 12px; color: #bbc; margin-bottom: 4px; }
.kp-label span { color: #ffd24d; font-weight: 700; }
.kp-bar { height: 8px; background: rgba(0,0,0,.4); border-radius: 5px; overflow: hidden; }
#kp-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ff7a4d, #ffd24d); transition: width .2s; }

#home-bottom { margin-top: 20px; text-align: center; padding-bottom: 8px; }
#stage-info { font-size: 16px; margin-bottom: 12px; }
#play-btn { font-size: 22px; padding: 16px 50px; }

/* 일일 보스전 */
#daily-boss-wrap { margin-top: 14px; }
#daily-boss-btn {
  font-size: 18px; padding: 12px 40px;
  background: linear-gradient(90deg, #ff3b8e, #ff7a3a);
  box-shadow: 0 4px 16px rgba(255,80,140,.4);
}
#daily-boss-info { font-size: 12px; color: #cbb; margin-top: 8px; }

/* ===== 월드 스트립 ===== */
#world-strip { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px 0 14px; }
.world-chip {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.05); border: 2px solid #33335a;
  border-radius: 14px; padding: 8px 14px; min-width: 64px;
}
.world-chip.on { border-color: #4dd0ff; background: rgba(77,208,255,.14); box-shadow: 0 0 14px rgba(77,208,255,.35); }
.world-chip .wc-ic { font-size: 26px; }
.world-chip .wc-nm { font-size: 12px; font-weight: 700; color: #cde; margin-top: 2px; }
.world-chip.on .wc-nm { color: #4dd0ff; }

/* ===== 홈 메뉴 버튼 ===== */
#action-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.act-btn {
  font-size: 17px; padding: 12px 26px;
  background: linear-gradient(90deg, #ff3b8e, #ff7a3a);
  box-shadow: 0 4px 16px rgba(255,80,140,.35);
}
#mine-btn { background: linear-gradient(90deg, #9a7b4d, #c8a86a); }

/* ===== 광산 알까기 ===== */
#mine-digs { font-size: 17px; margin: 6px 0 16px; }
#mine-digs b { color: #ffd24d; }
#mine-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  max-width: 360px; margin: 0 auto 18px;
}
.mine-cell {
  width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 38px; cursor: pointer; border-radius: 14px;
  background: linear-gradient(160deg, #3a3320, #2a2618); border: 2px solid #5a4a2a;
  transition: transform .1s;
}
.mine-cell:active { transform: scale(.9); }
.mine-cell.dug { background: rgba(255,210,77,.12); border-color: #ffd24d; cursor: default; }
#mine-reward {
  font-size: 16px; color: #ffd24d; min-height: 24px; margin-bottom: 20px; font-weight: 700;
}

/* ===== 월드 진입 안내 ===== */
#world-toast {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%);
  z-index: 7; pointer-events: none;
  font-size: clamp(30px, 8vw, 60px); font-weight: 900; letter-spacing: 3px;
  color: #fff; text-shadow: 0 2px 12px #000, 0 0 26px rgba(120,200,255,.7);
  animation: worldToast 2.4s ease forwards;
}
@keyframes worldToast {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  75%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.08); }
}

/* ===== 펫 ===== */
#pet-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 12px; }
.pet-cell {
  cursor: pointer; border-radius: 12px; padding: 10px 4px 8px; text-align: center;
  background: rgba(255,255,255,.04); border: 2px solid #33335a; transition: .12s;
}
.pet-cell:hover { border-color: #ffd24d; transform: translateY(-2px); }
.pet-cell.on { border-color: #4dffa0; box-shadow: 0 0 12px rgba(77,255,160,.3); }
.pet-ic { font-size: 28px; }
.pet-nm { font-size: 12px; font-weight: 700; margin-top: 2px; }
.pet-empty { grid-column: 1/-1; color: #889; font-size: 13px; text-align: center; padding: 14px 0; }
/* 펫 천장 게이지 + 확률표 */
#pet-pity { margin: 4px 0 12px; }
.pity-label { font-size: 12px; color: #cde; margin-bottom: 5px; text-align: center; }
.pity-label b { color: #ffd24d; }
.pity-bar { height: 10px; background: rgba(0,0,0,.4); border-radius: 6px; overflow: hidden; }
.pity-fill { height: 100%; background: linear-gradient(90deg,#4dd0ff,#ffd24d,#ff3b8e); transition: width .25s; }
#pet-rates { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 12px; }
.rates-title { width: 100%; text-align: center; font-size: 12px; color: #9aa; font-weight: 700; margin-bottom: 2px; }
.rate-chip { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; border: 1px solid; background: rgba(0,0,0,.25); }

#pet-pull-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
#pet-pull-btn { font-size: 15px; padding: 10px 22px; background: linear-gradient(90deg,#ffce4d,#ff7a4d); }
#pet-reward {
  margin-top: 12px; background: rgba(255,210,77,.08); border: 1px solid #5a4a1a;
  border-radius: 12px; padding: 12px; font-size: 14px; text-align: center; animation: pop .3s ease;
}

/* ===== 일일 출석 ===== */
#checkin-row { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; margin-bottom: 14px; }
.ci-cell {
  background: rgba(255,255,255,.04); border: 2px solid #33335a; border-radius: 10px;
  padding: 8px 2px; text-align: center;
}
.ci-cell .ci-day { font-size: 11px; color: #9aa; font-weight: 700; }
.ci-cell .ci-rw { font-size: 10px; color: #cde; margin-top: 4px; line-height: 1.3; }
.ci-cell.done { opacity: .4; }
.ci-cell.today { border-color: #ffd24d; background: rgba(255,210,77,.12); box-shadow: 0 0 12px rgba(255,210,77,.3); }
#checkin-btn { font-size: 17px; padding: 12px 30px; display: block; margin: 0 auto; }
#checkin-reward {
  margin-top: 12px; background: rgba(77,255,160,.08); border: 1px solid #2a5a40;
  border-radius: 12px; padding: 12px; font-size: 14px; text-align: center; animation: pop .3s ease;
}

/* 장비 능력 요약 + 도감 */
#home-extra {
  width: 100%; max-width: 720px; display: flex; gap: 16px;
  flex-wrap: wrap; justify-content: center; margin-top: 14px; padding-bottom: 36px;
}
.sum-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 6px; border-bottom: 1px solid #22223a; font-size: 14px; color: #cde;
}
.sum-row:last-child { border-bottom: none; }
.sum-row b { color: #ffd24d; font-size: 15px; }
#ability-codex { max-height: 250px; overflow-y: auto; padding-right: 4px; }
.codex-item {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 4px; border-bottom: 1px solid #22223a; text-align: left;
}
.codex-item.fuse { background: rgba(255,210,77,.06); border-radius: 8px; }
.ci-icon { font-size: 22px; width: 40px; text-align: center; flex-shrink: 0; }
.ci-name { font-size: 14px; font-weight: 700; color: #dde6f0; }
.ci-desc { font-size: 12px; color: #99a; line-height: 1.4; }
.ci-desc .need { color: #6cc8ff; }
.codex-sub { font-size: 13px; font-weight: 800; color: #ffce4d; margin: 12px 0 6px; text-align: left; }

/* ===== 강화 카드 ===== */
#upgrade-cards { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: 640px; }
.card {
  width: 170px; background: linear-gradient(160deg, #1c1c30, #14142a);
  border: 2px solid #33335a; border-radius: 16px; padding: 20px 14px; cursor: pointer;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.card:hover { transform: translateY(-6px); border-color: #ffd24d; box-shadow: 0 8px 24px rgba(255,210,77,.25); }
.card .icon { font-size: 40px; margin-bottom: 10px; }
.card .name { font-size: 17px; font-weight: 800; color: #ffd24d; margin-bottom: 8px; }
.card .desc { font-size: 13px; color: #bbc; line-height: 1.5; }
.card .lvl { font-size: 12px; color: #6cf; margin-top: 10px; font-weight: 700; }
.fusion-card {
  border-color: #ffd24d;
  background: linear-gradient(160deg, #3a2a12, #2a1a30);
  box-shadow: 0 0 22px rgba(255,210,77,.35);
  animation: fusionGlow 1.2s ease-in-out infinite;
}
@keyframes fusionGlow { 0%,100%{box-shadow:0 0 18px rgba(255,210,77,.3)} 50%{box-shadow:0 0 30px rgba(255,120,80,.55)} }
.fusion-card .name { color: #ffce4d; }
.fusion-card .lvl { color: #ff7a4d; }

/* 결과 화면 */
#result, #clear-result { font-size: 18px; line-height: 1.9; margin: 16px 0; }
#result b, #clear-result b { color: #ffd24d; font-size: 24px; }
#clear-rewards {
  background: rgba(77,255,160,.08); border: 1px solid #2a5a40; border-radius: 14px;
  padding: 16px 24px; margin: 8px 0 28px; font-size: 17px; line-height: 1.9;
}
#clear-rewards b { color: #4dffa0; }

/* ===== 조이스틱 ===== */
#joystick {
  position: absolute; width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.15); z-index: 6; display: none;
}
#joystick-knob {
  position: absolute; top: 35px; left: 35px; width: 50px; height: 50px;
  border-radius: 50%; background: rgba(255,255,255,.35);
}

/* ===== 장착 무기 선택 ===== */
.equip-sel { margin-top: 12px; border-top: 1px solid #2a2a48; padding-top: 12px; }
.es-label { font-size: 13px; font-weight: 700; color: #9ad; margin-bottom: 8px; }
#weapon-select { display: flex; gap: 8px; flex-wrap: wrap; }
.wsel {
  flex: 1; min-width: 64px; text-align: center; cursor: pointer;
  background: rgba(255,255,255,.04); border: 2px solid #33335a;
  border-radius: 12px; padding: 8px 4px; transition: .12s;
}
.wsel:hover { border-color: #ffd24d; }
.wsel.on { border-color: #ffd24d; background: rgba(255,210,77,.12); box-shadow: 0 0 12px rgba(255,210,77,.25); }
.wsel .w-ic { font-size: 24px; }
.wsel .w-nm { font-size: 12px; color: #cde; margin-top: 2px; font-weight: 700; }
.wsel.on .w-nm { color: #ffd24d; }
.wsel .w-ds { font-size: 10px; color: #889; margin-top: 2px; line-height: 1.25; }
.wsel.on .w-ds { color: #cb9; }
.wsel.locked { opacity: .5; filter: grayscale(.6); cursor: not-allowed; }
.wsel.locked:hover { border-color: #33335a; transform: none; }
.wsel.locked .w-ds { color: #c98; }

/* ===== 스킨 ===== */
#skin-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.skin {
  position: relative; cursor: pointer; border-radius: 12px; padding: 10px 4px 8px;
  background: rgba(255,255,255,.04); border: 2px solid #33335a; transition: .12s; text-align: center;
}
.skin:hover { border-color: #ffd24d; transform: translateY(-2px); }
.skin.on { border-color: #4dffa0; box-shadow: 0 0 12px rgba(77,255,160,.3); }
.skin.locked { opacity: .45; filter: grayscale(.6); cursor: not-allowed; }
.skin-dot { width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 6px; border: 2px solid rgba(255,255,255,.4); }
.skin-nm { font-size: 12px; font-weight: 700; color: #cde; }
.skin.on .skin-nm { color: #4dffa0; }
.skin .lock { position: absolute; top: 6px; right: 8px; font-size: 13px; }
#skinbox-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
.sb-count { font-size: 14px; color: #bbc; }
.sb-count b { color: #ffd24d; }
#open-skinbox-btn { font-size: 15px; padding: 10px 22px; }
#skinbox-reward {
  margin-top: 6px; background: rgba(77,255,160,.08); border: 1px solid #2a5a40; border-radius: 12px;
  padding: 12px; font-size: 14px; line-height: 1.7; animation: pop .3s ease;
}

/* ===== 닉네임 입력 (온라인 랭킹) ===== */
.nick-row { display:flex; align-items:center; justify-content:center; gap:8px; margin:4px 0 12px; }
.nick-label { font-size:18px; }
#nick-input {
  width:210px; padding:9px 14px; border-radius:10px;
  background:rgba(0,0,0,.3); border:1px solid #3a5a4a; color:#eafff2;
  font:inherit; font-weight:800; text-align:center; outline:none;
}
#nick-input:focus { border-color:#4dffa0; box-shadow:0 0 0 3px rgba(77,255,160,.15); }
#nick-input::placeholder { color:#6b8a78; font-weight:400; }
/* 온라인 랭킹 — 내 순위 강조 */
.rank-row.me { border-color:#4dd0ff; background:rgba(77,208,255,.10); }