:root{
  --bg:#0e1016; --bg2:#161a24; --card:#1b2130; --card2:#222a3b;
  --line:#2c3446; --text:#e7ebf3; --muted:#8b93a7;
  --primary:#6c8cff; --primary2:#546fe0;
  --gold:#f7c948; --success:#49d17a; --danger:#ff5d6c; --info:#4facfe;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
/* 오버스크롤(위/아래 바운스) 시 배경 밖으로 밝은색이 비치지 않도록 html 도 어둡게 */
html{background:var(--bg)}
body{
  background:radial-gradient(1200px 600px at 50% -10%, #1a2030, var(--bg)) fixed, var(--bg);
  color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
  touch-action:manipulation;   /* 더블탭 확대 차단(일반 탭·클릭은 정상, 핀치는 JS로 별도 차단) */
}
.screen{max-width:520px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
b{font-weight:700}
small{opacity:.75;font-weight:600}

/* 버튼 */
.btn{cursor:pointer;border:1px solid var(--line);background:var(--card2);color:var(--text);
  border-radius:12px;padding:12px 14px;font-size:15px;font-weight:700;transition:.12s;user-select:none}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{background:linear-gradient(180deg,var(--primary),var(--primary2));border-color:transparent}
.btn.big{width:100%;padding:15px;font-size:17px}
.btn.sm{padding:7px 10px;font-size:13px}
.btn.ghost{background:transparent}
.btn.action{flex:1;background:var(--card2)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}

/* 로그인 */
.login-card{margin-top:14vh;text-align:center}
.login-card h1{margin:.2em 0;font-size:30px}
.login-card .sub{color:var(--muted);margin:.2em 0 1.2em}
.login-card input{width:100%;margin:7px 0;padding:13px;border-radius:12px;border:1px solid var(--line);
  background:#0f131c;color:var(--text);font-size:16px;text-align:center}
.login-card .btn{margin-top:10px}
.hint{color:var(--muted);font-size:12px;margin-top:14px;line-height:1.5}
.err{color:var(--danger);font-size:13px;min-height:18px;margin:8px 0 0}

/* 로딩 스피너 (로그인 버튼 등) */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{display:inline-block;width:15px;height:15px;vertical-align:-2px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:spin .6s linear infinite}
.btn.loading,.btn.loading:disabled{cursor:progress;opacity:.9}
/* 클릭 즉시: 연타 방지용으로만 잠금(스피너 없음 — 로딩 표시는 상단바가 담당) */
.btn.acting{opacity:.85;pointer-events:none}

/* 전역 로딩 표시 (상단 진행바 + '로딩 중…' 배지) */
#globalLoading{position:fixed;left:0;top:0;right:0;z-index:200;pointer-events:none;
  opacity:0;transition:opacity .15s}
body.loading-on #globalLoading{opacity:1}
#globalLoading .gl-bar{height:3px;width:100%;
  background:linear-gradient(90deg,transparent,var(--primary),#9db4ff,var(--primary),transparent);
  background-size:45% 100%;background-repeat:no-repeat;animation:glslide 1.05s linear infinite}
@keyframes glslide{0%{background-position:-45% 0}100%{background-position:145% 0}}
#globalLoading .gl-pill{position:absolute;top:11px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  background:rgba(18,22,32,.96);border:1px solid var(--line);border-radius:20px;
  padding:6px 15px;font-size:12.5px;font-weight:800;color:var(--text);
  box-shadow:0 6px 18px rgba(0,0,0,.45)}

/* 상단바 */
.topbar{display:flex;align-items:center;gap:8px;max-width:520px;margin:0 auto 12px;padding:4px}
.me-nick{font-weight:800;font-size:16px;cursor:pointer}
.me-nick:hover{text-decoration:underline}
.me-nick .edit-hint{font-size:12px;opacity:.55;text-decoration:none;display:inline-block}
.chips{margin-left:auto;display:flex;gap:6px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:6px 11px;font-size:14px}
.chip.gold b{color:var(--gold)}
/* 상단바 메뉴(☰ 드롭다운) */
.menu-wrap{position:relative}
#menuBtn{font-size:17px;line-height:1;padding:6px 11px}
.menu-drop{position:absolute;right:0;top:calc(100% + 6px);z-index:90;min-width:160px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.5)}
.menu-item{display:block;width:100%;text-align:left;padding:12px 15px;font-size:14px;font-weight:700;
  background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);cursor:pointer}
.menu-item:last-child{border-bottom:0}
.menu-item:hover,.menu-item:active{background:var(--card2)}
.wrap{display:flex;flex-direction:column;gap:12px}
.col-left,.col-right{display:flex;flex-direction:column;gap:12px}

/* 넓은 화면: 2단 레이아웃 (왼쪽 캐릭터/액션 · 오른쪽 탭+내용) */
@media (min-width:880px){
  #game.screen{max-width:1060px}
  #game .topbar{max-width:1060px}
  .wrap{display:grid;grid-template-columns:380px 1fr;align-items:start;gap:18px}
  .tabs{flex-wrap:wrap}
  .panel{min-height:70vh}
  .col-left{position:sticky;top:16px}
}

/* 무기 패널 */
.weapon-panel{display:flex;flex-direction:column;align-items:center;gap:12px}
.weapon-art{height:150px;display:flex;align-items:center;justify-content:center}
.weapon-art svg{width:110px;height:150px;transition:.2s}
.weapon-art .weapon-img{width:auto;max-width:140px;max-height:150px;object-fit:contain}
.weapon-name{font-size:22px;font-weight:800;text-align:center}
.weapon-elem{font-size:13px;font-weight:700;text-align:center;margin-top:2px}
.odds-row{display:flex;gap:14px;justify-content:center;margin-top:6px;font-size:13px;color:var(--muted)}
.odds.success b{color:var(--success)} .odds.destroy b{color:var(--danger)}
.next-cost{color:var(--muted);font-size:13px;margin-top:2px}
.pity-wrap{width:100%;margin-top:10px}
.pity-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4px}
.pity-label span{color:#ffd479;font-weight:800}
.pity-track{height:9px;background:#0f131c;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.pity-fill{height:100%;width:0;background:linear-gradient(90deg,#ffb347,#ffd479);transition:width .3s}
.enhance{margin-top:10px}
@keyframes flash-ok{0%{box-shadow:0 0 0 0 rgba(73,209,122,.6)}100%{box-shadow:0 0 0 40px rgba(73,209,122,0)}}
@keyframes flash-bad{0%{box-shadow:0 0 0 0 rgba(255,93,108,.6)}100%{box-shadow:0 0 0 40px rgba(255,93,108,0)}}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-6px)}}
.weapon-panel.ok{animation:flash-ok .5s}
.weapon-panel.bad{animation:flash-bad .5s}
.weapon-art.shake{animation:shake .4s}
/* 강화 연출: 충전(슈우웅) → 성공 팡(pop) / 실패 쨍그랑(crack) */
@keyframes enhCharge{0%{transform:scale(1) translateY(0);filter:brightness(1)}
  50%{transform:scale(1.07) translateY(-5px);filter:brightness(1.45) drop-shadow(0 0 10px #ffd479)}
  100%{transform:scale(1) translateY(0);filter:brightness(1)}}
.weapon-art.charging{animation:enhCharge .5s ease-in-out infinite}
@keyframes enhPop{0%{transform:scale(.6);filter:brightness(3.2) drop-shadow(0 0 22px #fff)}
  35%{transform:scale(1.28);filter:brightness(1.8) drop-shadow(0 0 18px #ffe259)}
  60%{transform:scale(.95)}100%{transform:scale(1);filter:brightness(1)}}
.weapon-art.pop{animation:enhPop .55s cubic-bezier(.2,1.3,.4,1)}
@keyframes enhCrack{0%{transform:translateX(0) scale(1);filter:grayscale(0) brightness(1)}
  15%{transform:translateX(-8px) scale(.95);filter:grayscale(.7) brightness(.6)}
  35%{transform:translateX(7px) rotate(3deg)}55%{transform:translateX(-5px) rotate(-2deg)}
  75%{transform:translateX(4px)}100%{transform:translateX(0) scale(1) rotate(0);filter:grayscale(0) brightness(1)}}
.weapon-art.crack{animation:enhCrack .5s ease-out}
.enh-particle{position:fixed;z-index:125;pointer-events:none;font-size:22px;transform:translate(-50%,-50%);
  animation:enhParticle .68s ease-out forwards}
@keyframes enhParticle{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0)),calc(-50% + var(--dy,0))) scale(.9)}}

/* 액션 */
.actions{display:flex;gap:8px}

/* 직업 선택 */
.class-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.class-card{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:16px 12px;text-align:center;cursor:pointer;transition:.12s}
.class-card:hover{border-color:var(--primary);transform:translateY(-2px)}
.class-card .cemoji{font-size:34px}
.class-card .cname{font-weight:800;margin:6px 0 2px}
.class-card .cdesc{color:var(--muted);font-size:12px;line-height:1.4}
.class-card .cweapon{margin-top:8px;font-size:12px;color:var(--primary);font-weight:700}

/* 레이드 */
.raid-boss{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--card2)}
.raid-boss .bemoji{font-size:26px}
.raid-boss .binfo{flex:1}
.raid-boss .bname{font-weight:800}
.raid-boss .bstat{color:var(--muted);font-size:12px}
.party-member{display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px solid var(--line);font-size:14px}
.party-member:last-child{border-bottom:0}
.party-member .leader{color:var(--gold);font-size:11px}
.raid-result{border-radius:12px;padding:12px;margin-bottom:10px;border:1px solid var(--line)}
.raid-result.win{background:rgba(73,209,122,.13);border-color:var(--success)}
.raid-result.lose{background:rgba(255,93,108,.13);border-color:var(--danger)}
.raid-mvp{margin-top:8px;font-size:12px;color:var(--muted)}

/* 인터랙티브 레이드 전투 */
.raid-battle{-webkit-user-select:none;user-select:none}
.raid-timerrow{display:flex;justify-content:space-between;align-items:center;font-weight:800;margin-bottom:4px}
.raid-boss-name{font-size:14px}
.raid-timer b{color:#ffd93d;font-variant-numeric:tabular-nums}
.raid-stage{position:relative;display:flex;align-items:center;justify-content:center;height:130px;overflow:visible}
.raid-mon{position:relative;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;will-change:transform}
.raid-mon .rmon-emoji{display:block;font-size:88px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.raid-mon.hit{animation:monHit .12s ease-out}
.raid-mon.dead{filter:grayscale(.7);opacity:.55;cursor:default;pointer-events:none;transform:rotate(8deg)}
.rbar-label{font-size:12px;color:var(--muted);margin:6px 0 3px;display:flex;gap:8px;align-items:center}
.rbar-label small{margin-left:auto;color:#9fe6ff}
.rbar{height:14px;background:#0f131c;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.rbar-fill{height:100%;border-radius:8px;transition:width .3s ease-out}
.rbar-fill.boss{background:linear-gradient(90deg,#ff5d6c,#ff9f45)}
.rbar-fill.party{background:linear-gradient(90deg,#49d17a,#7ee8a2)}
.rbar-fill.party.low{background:linear-gradient(90deg,#ff5d6c,#ffb03a)}
.raid-parts{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px;justify-content:center}
.raid-part{font-size:12px;background:var(--card2);border:1px solid var(--line);border-radius:20px;padding:3px 10px}
.raid-part.me{border-color:var(--primary)}
.raid-part b{color:var(--gold)}
.raid-skillbtn{width:100%;margin:4px 0 8px}
.raid-events{min-height:20px;font-size:12px;color:#cfd6e6}
.raid-ev{padding:2px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.raid-spark{position:fixed;z-index:120;pointer-events:none;font-size:22px;transform:translate(-50%,-50%);animation:raidSpark .4s ease-out forwards}
@keyframes raidSpark{0%{opacity:0;transform:translate(-50%,-40%) scale(.6) rotate(-20deg)}30%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-90%) scale(1) rotate(20deg)}}

/* 스탯 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.stats>div{display:flex;flex-direction:column;gap:3px}
.stats span{color:var(--muted);font-size:11px}
.stats b{font-size:14px}

/* 탭 */
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.tab{white-space:nowrap;background:transparent;border:1px solid var(--line);border-radius:20px;
  padding:8px 12px;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer}
.tab.active{background:var(--card);color:var(--text);border-color:var(--primary)}
.panel{min-height:120px}

/* 리스트 */
.row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .rk{width:26px;text-align:center;font-weight:800}
.row .nm{font-weight:700;flex:1;cursor:pointer}
.row .nm:hover{text-decoration:underline}
.row .val{color:var(--muted);font-size:13px}
.row .val.gold{color:var(--gold)}
.empty{color:var(--muted);text-align:center;padding:24px 0}
.logline{padding:7px 4px;border-bottom:1px solid var(--line);font-size:13px;color:#cfd6e6}
.logline:last-child{border-bottom:0}

/* 싸움 목록 */
.fightrow{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}
.fightrow:last-child{border-bottom:0}
.fightrow .nm{flex:1;font-weight:700}
.fightrow .w{color:var(--muted);font-size:12px}

/* 토스트 — 화면 하단 고정 오버레이(레이아웃을 밀지 않음) */
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  width:calc(100% - 32px);max-width:488px;z-index:130;
  border-radius:12px;padding:12px 14px;font-weight:700;text-align:center;
  border:1px solid var(--line);background:#141a26;color:var(--text);
  box-shadow:0 12px 36px rgba(0,0,0,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.toast.ok{background:#1d5137;border-color:var(--success);color:#e4ffee;
  box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 0 1px rgba(73,209,122,.55),0 0 22px rgba(73,209,122,.28)}
.toast.bad{background:#5a2130;border-color:var(--danger);color:#ffe3e6;
  box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 0 1px rgba(255,93,108,.55),0 0 22px rgba(255,93,108,.28)}
.toast.info{background:#1c4a70;border-color:var(--info);color:#e6f4ff;
  box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 0 1px rgba(79,172,254,.5),0 0 22px rgba(79,172,254,.25)}

/* 닉네임 염색 */
.nick-glow{text-shadow:0 0 7px currentColor}
.nick-silver{background:linear-gradient(180deg,#f6f7f9,#9aa0a6);-webkit-background-clip:text;background-clip:text;color:transparent}
.nick-gold{background:linear-gradient(180deg,#ffe9a0,#d4a017);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(212,160,23,.35)}
.nick-rainbow{background:linear-gradient(90deg,#ff5d6c,#ff9f45,#ffd93d,#49d17a,#4facfe,#a770ef,#ff5d6c);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rainbow 3s linear infinite;font-weight:800}
@keyframes rainbow{to{background-position:200% center}}

/* 안내 모달 */
.guide-card{max-width:430px;max-height:82vh;overflow:auto}
.guide-list{list-style:none;padding:0;margin:.5em 0 0}
.guide-list li{padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.5;color:#d5dbea}
.guide-list li:last-child{border-bottom:0}
.guide-list b{color:var(--text)}

/* 채굴장 */
.mine-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.mine-lv{font-size:16px;font-weight:800}
.mine-lv b{color:var(--gold)}
.mine-xptxt{font-size:12px;color:var(--muted)}
.mine-bar{height:8px;background:#0f131c;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.mine-bar.xp{margin-bottom:12px}
.mine-fill{height:100%;width:0;transition:width .3s}
.mine-fill.xp{background:linear-gradient(90deg,#7ee8a2,#49d17a)}
.mine-fill.stam{background:linear-gradient(90deg,#4facfe,#6c8cff)}
.mine-fill.stam.low{background:linear-gradient(90deg,#ff8a5d,#ff5d6c)}
.mine-stamlabel{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:2px 0 4px}
.mine-stamlabel span{color:#9fc7ff;font-weight:800}
.mine-fb{min-height:34px;border-radius:10px;padding:9px 11px;font-size:13px;font-weight:600;
  background:var(--card2);border:1px solid var(--line);color:#cfd6e6;text-align:center}
.mine-fb.ok{background:rgba(73,209,122,.14);border-color:var(--success);color:#c9f7d8}
.mine-fb.info{background:rgba(79,172,254,.14);border-color:var(--info);color:#d3ecff}
.mine-fb.tired{background:rgba(255,138,93,.12);border-color:#ff8a5d;color:#ffd9c6}
.mine-auto{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--card2);font-size:13px}
.mine-auto span{flex:1}
.mine-auto b{color:var(--gold)}
.mine-session{text-align:center;color:var(--muted);font-size:12px;margin-top:12px}
.mine-session b{color:var(--gold)}
.mine-card{max-width:380px}

/* 채굴장 돌 깨기 미니게임 */
.rock-stage{position:relative;display:flex;align-items:center;justify-content:center;
  height:150px;margin:12px 0 6px;-webkit-user-select:none;user-select:none;overflow:visible}
.rock{position:relative;cursor:pointer;line-height:1;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:transform .05s ease-out;will-change:transform}
.rock .rock-emoji{display:block;font-size:96px;
  transform:scale(calc(1 - var(--dmg,0) * .12)) rotate(calc(var(--dmg,0) * -4deg));
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)) brightness(calc(1 - var(--dmg,0) * .22));
  transition:transform .06s ease-out,filter .12s}
.rock.tired{opacity:.6;filter:grayscale(.5)}
.rock.hit{animation:rockHit .13s ease-out}
@keyframes rockHit{0%{transform:scale(.9) rotate(-3deg)}45%{transform:scale(1.08) rotate(3deg)}100%{transform:scale(1)}}
.rock.breaking{animation:rockBreak .24s ease-in forwards;pointer-events:none}
@keyframes rockBreak{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(.2) rotate(30deg);opacity:0}}
.rock-reward{position:fixed;z-index:60;pointer-events:none;white-space:nowrap;
  font-weight:900;font-size:20px;color:var(--gold);text-shadow:0 2px 8px #000;
  animation:rewardUp .95s ease-out forwards}
.rock-reward.big{font-size:27px;color:#ffe259;text-shadow:0 0 12px #ffb300,0 2px 8px #000}
@keyframes rewardUp{0%{opacity:0;transform:translate(-50%,-30px) scale(.8)}
  22%{opacity:1;transform:translate(-50%,-52px) scale(1.12)}
  100%{opacity:0;transform:translate(-50%,-100px) scale(1)}}
.rock-shard{position:fixed;z-index:59;font-size:20px;pointer-events:none;
  transform:translate(-50%,-50%);animation:shardFly .5s ease-out forwards}
@keyframes shardFly{to{opacity:0;transform:translate(calc(-50% + var(--dx,0)),calc(-50% + var(--dy,0))) rotate(180deg)}}
.rock-crackbar{height:7px;background:#0f131c;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.rock-crackfill{height:100%;width:0;border-radius:6px;transition:width .06s ease-out;
  background:linear-gradient(90deg,#ff8a5d,#ffd93d)}
.rock-hint{text-align:center;color:var(--muted);font-size:13px;font-weight:800;margin:6px 0 10px}

/* 사냥터 (몬스터 연타 처치) */
.hunt-card{max-width:380px;text-align:center}
.hunt-top{font-weight:900;font-size:16px;margin:2px 0 4px}
.hunt-top small{color:var(--muted);font-weight:800;font-size:12.5px;margin-left:6px}
.hunt-stage{position:relative;display:flex;align-items:center;justify-content:center;
  height:170px;margin:6px 0;-webkit-user-select:none;user-select:none;overflow:visible}
.hunt-mon{position:relative;cursor:pointer;line-height:1;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;will-change:transform}
.hunt-mon .hunt-emoji{display:block;font-size:104px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
.hunt-mon.t2 .hunt-emoji{filter:drop-shadow(0 0 12px #a770ef)}
.hunt-mon.t3 .hunt-emoji{filter:drop-shadow(0 0 14px #f7971e)}
.hunt-mon.t4 .hunt-emoji{filter:drop-shadow(0 0 18px #ff5d6c)}
.hunt-mon.hit{animation:monHit .13s ease-out}
@keyframes monHit{0%{transform:scale(1.06) rotate(2deg)}40%{transform:scale(.9) translateY(4px) rotate(-3deg)}100%{transform:scale(1)}}
.hunt-mon.dead{animation:monDead .34s ease-in forwards;pointer-events:none}
@keyframes monDead{0%{transform:scale(1)}30%{transform:scale(1.12)}100%{transform:scale(.3) rotate(28deg) translateY(30px);opacity:0;filter:grayscale(1)}}
.hunt-hpbar{height:12px;background:#0f131c;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:0 4px}
.hunt-hpfill{height:100%;width:100%;border-radius:8px;transition:width .07s ease-out;
  background:linear-gradient(90deg,#ff5d6c,#ff9f45)}
.hunt-name{font-weight:800;font-size:14px;margin:8px 0 2px}
.hunt-name small{color:var(--muted);font-weight:700;font-size:12px}
.hunt-fb{min-height:20px;color:var(--muted);font-size:13px;font-weight:700;margin:2px 0 6px}
.hunt-session{border-top:1px solid var(--line);padding-top:9px;color:var(--muted);font-size:13px}
.hunt-session b{color:var(--text)}
/* 떠오르는 데미지·보상 (body 에 fixed) */
.hunt-dmg{position:fixed;z-index:120;pointer-events:none;transform:translate(-50%,-50%);
  font-weight:900;font-size:20px;color:#fff;text-shadow:0 2px 6px #000;animation:dmgFloat .65s ease-out forwards}
.hunt-dmg.crit{font-size:30px;color:#ffe259;text-shadow:0 0 12px #ff8a00,0 2px 6px #000}
@keyframes dmgFloat{0%{opacity:0;transform:translate(-50%,-20%) scale(.7)}
  20%{opacity:1;transform:translate(-50%,-70%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-160%) scale(1)}}
.hunt-reward{position:fixed;z-index:121;pointer-events:none;white-space:nowrap;transform:translate(-50%,-50%);
  font-weight:900;font-size:18px;color:var(--gold);text-shadow:0 2px 8px #000;animation:rewardUp .98s ease-out forwards}
.hunt-reward.crit{color:#ffe259;text-shadow:0 0 12px #ffb300,0 2px 8px #000}

/* 모달 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal-card{position:relative;max-width:360px;width:100%}
.modal .close{position:absolute;top:10px;right:10px}
.modal h3{margin:.1em 0 .6em}
/* 칭호 */
.titles-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.title-chip{font-size:12px;font-weight:800;padding:4px 9px;border-radius:20px;
  border:1px solid currentColor;background:rgba(255,255,255,.04);text-shadow:0 0 6px currentColor}
.titles-empty{color:var(--muted);font-size:12px;margin:6px 0 12px}
.titles-head{font-size:12px;font-weight:800;color:var(--muted);margin:8px 0 4px}
.titles-head small{opacity:.8;font-weight:700}
/* 내 프로필 진열장 */
.title-chip.earn{cursor:pointer;transition:transform .08s,box-shadow .12s}
.title-chip.earn:hover{transform:translateY(-1px)}
.title-chip.equipped{background:currentColor;box-shadow:0 0 0 2px currentColor inset,0 0 10px currentColor}
.title-chip.equipped:not(.clear){-webkit-text-fill-color:#0b0e15}
.title-chip.locked{color:var(--muted);border-style:dashed;background:rgba(255,255,255,.02);
  text-shadow:none;opacity:.5;cursor:not-allowed}
.title-chip.clear{color:var(--muted);cursor:pointer;text-shadow:none}
.title-chip.clear.equipped{color:var(--text);background:var(--muted)}
/* 닉네임 옆 장착 칭호 태그 */
.title-tag{font-size:.78em;font-weight:800;text-shadow:0 0 6px currentColor;white-space:nowrap}

.pf-line{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.pf-line:last-child{border-bottom:0}
.pf-line span{color:var(--muted)}

/* ---------- 이메일 계정 (로그인 화면 + Auth 모달) ---------- */
.email-login{margin-top:14px}
.or-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:6px 0 10px}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-card{max-width:380px}
.auth-card h3{margin:.1em 0 .7em;text-align:center}
.auth-card input{width:100%;margin:7px 0;padding:13px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg2);color:var(--text);font-size:15px;box-sizing:border-box}
.auth-tabs{display:flex;gap:6px;margin-bottom:10px}
.auth-tab{flex:1;padding:9px;border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:10px;font-weight:700;font-size:14px;cursor:pointer}
.auth-tab.active{background:var(--card2);color:var(--text);border-color:var(--primary)}
.auth-intro{font-size:12.5px;color:var(--muted);margin:0 0 6px;line-height:1.5}
.auth-msg{font-size:13px;min-height:18px;margin:8px 0 0;line-height:1.5}
.auth-msg.err{color:var(--danger)}
.auth-msg.ok{color:var(--success)}
.auth-link{display:block;margin:8px auto 0;color:var(--muted);font-size:12px}

/* ---------- 미션 & 배틀패스 ---------- */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--danger);
  margin-left:4px;vertical-align:top;box-shadow:0 0 6px var(--danger)}
.mission-card,.pass-card{max-width:440px;width:100%}
.mission-card h3{margin:.1em 0 .6em;text-align:center}
.mission-tabs{display:flex;gap:6px;margin-bottom:10px}
.mission-tab{flex:1;padding:8px;border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:10px;font-weight:700;font-size:14px;cursor:pointer}
.mission-tab.active{background:var(--card2);color:var(--text);border-color:var(--primary)}
.mission-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto}
.mission-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);
  border-radius:12px;background:var(--card2)}
.mission-row.ready{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}
.mission-row.claimed{opacity:.55}
.mission-info{flex:1;min-width:0}
.mission-desc{font-size:14px;font-weight:600;margin-bottom:5px}
.mission-bar{height:6px;border-radius:4px;background:var(--bg2);overflow:hidden;margin-bottom:4px}
.mission-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2));border-radius:4px;transition:width .3s}
.mission-reward{font-size:12px;color:var(--muted)}
.mission-claim{white-space:nowrap;min-width:64px}
.mission-bpfoot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.bpfoot-open{color:var(--primary);cursor:pointer;font-weight:700}
/* 배틀패스 */
.pass-head{text-align:center;margin-bottom:12px}
.pass-title{font-size:16px;font-weight:800}
.pass-season{color:var(--muted);font-size:13px;font-weight:600}
.pass-lv{font-size:13px;color:var(--muted);margin:4px 0}
.pass-xpbar{height:10px;border-radius:6px;background:var(--bg2);overflow:hidden;margin:6px 0 3px}
.pass-xpfill{height:100%;background:linear-gradient(90deg,var(--gold),#ffdf6b);border-radius:6px;transition:width .3s}
.pass-xptxt{font-size:12px;color:var(--muted)}
.pass-buy{margin-top:8px}
.pass-premium-on{margin-top:8px;color:var(--gold);font-weight:700;font-size:13px}
.pass-track{max-height:52vh;overflow-y:auto;margin-top:4px}
.pass-cols{display:grid;grid-template-columns:34px 1fr 1fr;gap:6px;position:sticky;top:0;
  background:var(--card);padding:4px 0;font-size:11px;color:var(--muted);text-align:center;font-weight:700}
.pass-tier{display:grid;grid-template-columns:34px 1fr 1fr;gap:6px;align-items:stretch;margin-bottom:6px}
.pass-tierlv{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
  background:var(--bg2);border-radius:8px;color:var(--muted)}
.pass-tier.unlocked .pass-tierlv{color:var(--text);background:var(--card2)}
.pass-cell{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;
  padding:8px 6px;border:1px solid var(--line);border-radius:10px;background:var(--card2);
  font-size:12px;text-align:center;opacity:.6}
.pass-tier.unlocked .pass-cell{opacity:1}
.pass-cell.claimable{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}
.pass-cell.claimed{opacity:.5}
.pass-got{color:var(--success);font-weight:800}
.pass-claim{padding:4px 10px;font-size:12px}

/* ---------- 공지/패치노트 ---------- */
#menuBtn{position:relative}
#menuDot{position:absolute;top:2px;right:2px;margin:0}
.patch-card{max-width:400px;width:100%}
.patch-card h3{margin:.1em 0 .7em;text-align:center}
.patch-notes{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:9px;
  max-height:56vh;overflow-y:auto}
.patch-notes li{font-size:13.5px;line-height:1.5;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--card2)}
.patch-card .btn:disabled{opacity:.45;cursor:default}