:root {
  --bg-deep: #0b101d;
  --bg-panel: #141c2f;
  --bg-card: #1b253d;
  --bg-card-hover: #222f4d;
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-gold: rgba(251, 191, 36, 0.5);
  --txt-main: #f8fafc;
  --txt-sub: #94a3b8;
  --gold: #fbbf24;
  --gold-deep: #d97706;
  --key-cyan: #38bdf8;
  --p2w-pink: #f43f5e;
  --p2w-purple: #a855f7;
  --hp-red: #ef4444;
  --green: #22c55e;

  --r-common: #9ca3af;
  --r-uncommon: #22c55e;
  --r-rare: #3b82f6;
  --r-epic: #a855f7;
  --r-legendary: #f59e0b;
  --r-mythic: #ef4444;
  --r-primordial: #f43f5e;
}

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

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  background: radial-gradient(circle at 50% 0%, #1a2542 0%, var(--bg-deep) 70%);
  color: var(--txt-main);
  min-height: 100vh;
  min-height: 100dvh;
  user-select: none;
  touch-action: manipulation;
}

button, select, input {
  font-family: inherit;
  touch-action: manipulation;
}

.hidden {
  display: none !important;
}

.rech-lbl-short {
  display: none;
}

.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.w-full { width: 100%; }
.text-center { text-align: center; }

/* ==================== TOP HUD ==================== */
.top-hud {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(11, 16, 29, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(251, 191, 36, 0.22);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  width: 100%;
}

.hud-top-row {
  display: contents;
}

.profile-pill {
  order: 1;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  background: linear-gradient(135deg, #1d2844, #141c30);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  padding: 5px 11px 5px 7px;
  color: var(--txt-main);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.profile-pill:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.avatar-badge {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.profile-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  min-width: 0;
}
.name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  max-width: 100%;
}
.name-row strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.cp-row {
  font-size: 12px;
  color: var(--gold);
  margin-top: 2px;
  white-space: nowrap;
}
.cp-row b {
  font-weight: 900;
}
.profile-gear {
  color: var(--txt-sub);
  font-size: 12px;
  margin-left: 2px;
  flex-shrink: 0;
}

.vip-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.3px;
  background: #334155;
  color: #cbd5e1;
}
.vip-1, .vip-2 { background: linear-gradient(90deg, #0ea5e9, #2563eb); color: #fff; }
.vip-3, .vip-4 { background: linear-gradient(90deg, #a855f7, #7e22ce); color: #fff; }
.vip-5, .vip-6 { background: linear-gradient(90deg, #f59e0b, #dc2626); color: #fff; box-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }
.vip-7 {
  background: linear-gradient(90deg, #f43f5e, #f59e0b, #10b981, #3b82f6, #a855f7);
  background-size: 250% 100%;
  animation: rainbowShift 3s linear infinite;
  color: #fff;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.7);
}

.hud-currencies {
  order: 2;
  display: flex;
  align-items: center;
  gap: 7px;
}

.hud-util-btns {
  order: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.currency-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #131b2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 800;
  min-width: 0;
  white-space: nowrap;
}
.gold-pill i { color: var(--gold); flex-shrink: 0; }
.key-pill {
  border-color: rgba(251, 191, 36, 0.35);
  background: linear-gradient(135deg, #1b243b, #141b2d);
  padding-right: 6px;
}
.key-pill > i {
  color: #fbbf24;
  font-size: 14px;
  flex-shrink: 0;
}
.key-info {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
  min-width: 0;
}
.key-count {
  font-size: 14px;
  color: #fff;
}
.recharge-mini {
  font-size: 10px;
  color: #7dd3fc;
  font-weight: 600;
  white-space: nowrap;
}
.plus-recharge-btn {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-left: auto;
  border: none;
  border-radius: 7px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.45);
}
.plus-recharge-btn:hover { transform: scale(1.08); }

.icon-hud-btn {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #182238;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-hud-btn.active {
  color: var(--gold);
  border-color: rgba(251, 191, 36, 0.4);
}
.mail-hud-btn.has-unclaimed {
  color: #fde047;
  border-color: rgba(244, 63, 94, 0.7);
  background: linear-gradient(135deg, #2d1832, #182238);
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.45);
}
.mail-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f43f5e, #dc2626);
  border: 1.5px solid #0b101d;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  animation: pulseScale 0.8s infinite alternate;
}

/* ==================== SERVER TICKER ==================== */
.server-ticker {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.18), rgba(168, 85, 247, 0.14), rgba(15, 23, 42, 0.9));
  border-bottom: 1px solid rgba(244, 63, 94, 0.25);
  padding: 5px 12px;
  font-size: 12px;
  overflow: hidden;
}
.ticker-tag {
  flex-shrink: 0;
  background: linear-gradient(90deg, #e11d48, #be123c);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.ticker-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ticker-text {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fde68a;
  font-weight: 700;
  animation: tickerFadeSlide 0.45s ease;
}

/* ==================== MAIN CONTAINER ==================== */
.game-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 14px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 16px;
  align-items: start;
}

.left-stage-col {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ==================== BATTLE STAGE (LEFT: PLAYER, RIGHT: EGG) ==================== */
.battle-card {
  width: 100%;
  min-width: 0;
  background: var(--bg-panel);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.stage-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: linear-gradient(90deg, #1a243d, #131b2e);
  border-bottom: 1px solid var(--border-subtle);
  gap: 8px;
  min-width: 0;
}
.stage-level-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
}
.boss-tag {
  flex-shrink: 0;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.65);
  animation: pulseScale 1s infinite alternate;
}
.stage-lv-num {
  flex-shrink: 0;
  font-family: 'Black Han Sans', sans-serif;
  font-size: 19px;
  color: var(--gold);
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.stage-egg-name {
  font-size: 14px;
  font-weight: 800;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage-dps-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #cbd5e1;
  flex-shrink: 0;
  white-space: nowrap;
}
.stage-dps-info b {
  color: #38bdf8;
}
.auto-hunt-chip {
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  white-space: nowrap;
}

.battle-arena {
  position: relative;
  width: 100%;
  height: 310px;
  background: url('/assets/sprites/stage_bg.webp') center 68% / cover no-repeat;
  overflow: hidden;
  cursor: default;
}
.battle-arena::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 13, 24, 0.52) 0%, rgba(9, 13, 24, 0.05) 45%, rgba(9, 13, 24, 0.25) 100%);
  pointer-events: none;
}

.floating-promo-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 12px;
  border: 1px solid #fde047;
  background: linear-gradient(135deg, #f43f5e, #be123c);
  color: #fff;
  font-size: 11px;
  line-height: 1.15;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(244, 63, 94, 0.65);
  animation: floatBob 1.8s ease-in-out infinite;
}
.floating-promo-btn i {
  font-size: 18px;
  color: #fde047;
}

.idle-status-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(11, 16, 29, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.35);
  font-size: 11px;
  color: #e0f2fe;
  font-weight: 700;
  white-space: nowrap;
}
.pulse-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulseScale 0.8s infinite alternate;
}

/* 좌측 플레이어 & 우측 알 배치 */
.fighter-wrap {
  position: absolute;
  bottom: 16px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.player-left {
  left: 7%;
  width: 245px;
}

.egg-right {
  right: 10%;
  width: 175px;
}

.ground-aura {
  position: absolute;
  bottom: 18px;
  width: 125px;
  height: 30px;
  border-radius: 50%;
  filter: blur(6px);
  z-index: 1;
}
.aura-player {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.55) 0%, rgba(56, 189, 248, 0) 72%);
}
.aura-egg {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.55) 0%, rgba(251, 191, 36, 0) 72%);
}
.aura-egg.boss-aura {
  width: 155px;
  height: 38px;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.85) 0%, rgba(251, 191, 36, 0.4) 50%, transparent 75%);
}

.player-motion-wrap {
  position: relative;
  z-index: 3;
  width: 245px;
  height: 184px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: heroIdleBob 1.8s ease-in-out infinite;
  transform-origin: bottom center;
}
.hero-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6));
  will-change: opacity;
}
.hero-frame.active {
  opacity: 1;
}

.player-motion-wrap.is-windup {
  animation: none;
  transform: translateX(10px) translateY(-4px);
  transition: transform 0.09s ease-out;
}
.player-motion-wrap.is-striking {
  animation: heroAttackDash 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.player-motion-wrap.is-crit-striking {
  animation: heroCritDash 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 우측 알 모션 & 타격 모션 */
.egg-motion-wrap {
  position: relative;
  z-index: 3;
  width: 156px;
  height: 176px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: eggIdleFloat 2.4s ease-in-out infinite;
  transform-origin: bottom center;
}
.egg-motion-wrap.boss-scale {
  width: 182px;
  height: 202px;
}
.egg-motion-wrap > #eggSprite {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.65));
  transition: filter 0.08s;
}

.egg-motion-wrap.is-hit {
  animation: eggHitRecoil 0.2s ease-out;
}
.egg-motion-wrap.is-hit > #eggSprite {
  filter: brightness(1.55) contrast(1.1) drop-shadow(0 0 16px rgba(251, 191, 36, 0.9));
}
.egg-motion-wrap.is-shattering {
  animation: eggShatterAnim 0.36s ease-in forwards;
}

.egg-crack-svg {
  position: absolute;
  inset: 10px 14px 8px 14px;
  width: calc(100% - 28px);
  height: calc(100% - 18px);
  pointer-events: none;
  z-index: 4;
}
.crack-line {
  stroke: rgba(15, 23, 42, 0.88);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.65));
}
.crack-heavy {
  stroke-width: 4.2;
  stroke: #090d16;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.85));
}

.hit-impact-sprite {
  position: absolute;
  left: -18px;
  top: 22px;
  width: 145px;
  height: 145px;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.25);
  pointer-events: none;
  z-index: 6;
  mix-blend-mode: screen;
}
.hit-impact-sprite.active {
  animation: impactPop 0.23s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fighter-label {
  position: relative;
  z-index: 5;
  margin-top: 4px;
  background: rgba(11, 16, 29, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #f1f5f9;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.egg-tier-chip i { color: var(--gold); }

/* 데미지 팝업 및 파편 레이어 */
.fx-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
}

.dmg-popup {
  position: absolute;
  font-family: 'Black Han Sans', sans-serif;
  font-size: 21px;
  color: #ffffff;
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, 0.85);
  animation: dmgFloatUp 0.68s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  white-space: nowrap;
}
.dmg-popup.crit {
  font-size: 27px;
  color: #fde047;
  text-shadow: 0 3px 0 #b91c1c, 0 0 14px rgba(244, 63, 94, 0.95);
}

.reward-fly {
  position: absolute;
  z-index: 25;
  font-weight: 900;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid var(--gold);
  color: #fde047;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  animation: rewardFlyAnim 1.15s ease-out forwards;
  white-space: nowrap;
}

.shell-shard {
  position: absolute;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #fef3c7, #d97706);
  clip-path: polygon(50% 0%, 100% 60%, 30% 100%, 0% 40%);
  animation: shardExplode 0.62s ease-out forwards;
}

.battle-arena.shake {
  animation: arenaShake 0.22s ease;
}

/* 알 체력바 푸터 */
.egg-hp-footer {
  padding: 10px 14px 12px;
  background: #111829;
  border-top: 1px solid var(--border-subtle);
}
.hp-bar-outer {
  position: relative;
  height: 24px;
  background: #090d16;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.hp-bar-trail {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #fde047;
  transition: width 0.32s ease-out;
}
.hp-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #f97316);
  transition: width 0.09s linear;
}
.hp-bar-text {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}
.reward-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7px;
  font-size: 12px;
  color: var(--txt-sub);
  flex-wrap: wrap;
  gap: 4px 10px;
}
.txt-key { color: #38bdf8; }
.txt-gold { color: var(--gold); }
.no-key-drop-hint {
  color: #fca5a5;
  font-size: 10.5px;
  font-weight: 700;
}
.broken-total b { color: #e2e8f0; }
.no-pity-tag {
  color: #fda4af;
  font-weight: 800;
  font-size: 11px;
  background: rgba(244, 63, 94, 0.14);
  border: 1px solid rgba(244, 63, 94, 0.35);
  padding: 2px 7px;
  border-radius: 6px;
}

/* ==================== CHEST GACHA CENTER ==================== */
.chest-card {
  width: 100%;
  min-width: 0;
  background: var(--bg-panel);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

.chest-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.chest-lv-group {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.chest-lv-badge {
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
  white-space: nowrap;
}
.exp-mini-bar {
  position: relative;
  width: 84px;
  height: 16px;
  background: #0b101d;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.exp-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  transition: width 0.2s;
}
.exp-mini-bar span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}

.pity-group {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #cbd5e1;
  white-space: nowrap;
}
.pity-group b { color: #f43f5e; }
.prob-text-btn {
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #e9d5ff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}

.chest-main-body {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-top: 12px;
}

.chest-visual-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.chest-glow-aura {
  position: absolute;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.35) 0%, transparent 70%);
  pointer-events: none;
}
.chest-sprite {
  position: relative;
  z-index: 2;
  width: 114px;
  height: 114px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.65));
  transition: transform 0.15s;
}
.chest-sprite.opening {
  animation: chestShakePop 0.36s ease;
}
.recharge-banner-chip {
  margin-top: 6px;
  font-size: 11px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #bae6fd;
  padding: 3px 8px;
  border-radius: 999px;
  text-align: center;
  max-width: 100%;
}

.chest-controls-box {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.chest-rule-desc {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.45;
  word-break: keep-all;
}
.chest-rule-desc small {
  color: #fda4af;
}

.btn-open-chest {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #fde047;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #b45309 100%);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.38), inset 0 1px 1px rgba(255, 255, 255, 0.45);
  transition: transform 0.1s, filter 0.15s;
}
.btn-open-chest:hover { filter: brightness(1.07); }
.btn-open-chest:active { transform: scale(0.98); }
.open-main-txt {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 20px;
  letter-spacing: 0.4px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.open-sub-txt {
  font-size: 12px;
  font-weight: 700;
  color: #fef3c7;
}

.auto-open-bar {
  display: flex;
  gap: 7px;
  width: 100%;
  min-width: 0;
  align-items: stretch;
}
.auto-select-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}
.auto-filter-select {
  width: 100%;
  height: 100%;
  background: #101727;
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 8px 8px;
  font-size: 12px;
  text-overflow: ellipsis;
}
.btn-auto-open {
  flex-shrink: 0;
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: linear-gradient(135deg, #0284c7, #1d4ed8);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.btn-auto-open.running {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border-color: #fca5a5;
  animation: pulseScale 0.7s infinite alternate;
}

/* ==================== EQUIPMENT COMPARE BOX ==================== */
.pending-compare-box {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #101728, #0c1220);
  border: 1.5px solid rgba(251, 191, 36, 0.45);
  animation: popIn 0.2s ease-out;
  width: 100%;
  min-width: 0;
}
.compare-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.new-pull-banner {
  font-size: 13px;
  font-weight: 900;
  color: var(--gold);
  min-width: 0;
}
.cp-diff-badge {
  font-size: 12px;
  font-weight: 900;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.cp-diff-badge.up {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.cp-diff-badge.down {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.compare-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}
.compare-arrow {
  text-align: center;
  color: var(--gold);
  font-size: 15px;
}
.equip-compare-card {
  min-width: 0;
  background: #172036;
  border-radius: 11px;
  padding: 9px 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  min-height: 112px;
  font-size: 12px;
}
.eq-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  min-width: 0;
}
.eq-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.35);
}
.eq-title-wrap {
  min-width: 0;
  flex: 1;
  line-height: 1.25;
  overflow: hidden;
}
.eq-title-wrap strong {
  display: block;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eq-stats-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: #cbd5e1;
}

.compare-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 7px;
  margin-top: 10px;
}
.btn-decide {
  border: none;
  border-radius: 10px;
  padding: 9px 8px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.btn-decide small {
  font-size: 10px;
  opacity: 0.9;
}
.btn-equip { background: linear-gradient(135deg, #16a34a, #15803d); }
.btn-salvage { background: linear-gradient(135deg, #475569, #334155); }
.btn-next-open { background: linear-gradient(135deg, #d97706, #b45309); }

/* 등급별 테두리 & 텍스트 컬러 */
.rarity-common { border-color: var(--r-common) !important; color: var(--r-common); }
.rarity-uncommon { border-color: var(--r-uncommon) !important; color: var(--r-uncommon); }
.rarity-rare { border-color: var(--r-rare) !important; color: var(--r-rare); }
.rarity-epic { border-color: var(--r-epic) !important; color: var(--r-epic); box-shadow: 0 0 10px rgba(168, 85, 247, 0.25); }
.rarity-legendary { border-color: var(--r-legendary) !important; color: var(--r-legendary); box-shadow: 0 0 14px rgba(245, 158, 11, 0.35); }
.rarity-mythic { border-color: var(--r-mythic) !important; color: var(--r-mythic); box-shadow: 0 0 16px rgba(239, 68, 68, 0.5); }
.rarity-primordial {
  border-color: #f43f5e !important;
  color: #fda4af;
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.75);
  animation: primordialPulse 1.6s infinite alternate;
}
.rarity-transcendent {
  border-color: #06b6d4 !important;
  color: #67e8f9;
  box-shadow: 0 0 22px rgba(6, 182, 212, 0.8);
  animation: primordialPulse 1.5s infinite alternate;
}
.rarity-abyss {
  border-color: #8b5cf6 !important;
  color: #c4b5fd;
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.85);
  animation: primordialPulse 1.4s infinite alternate;
}
.rarity-genesis {
  border-color: #fde047 !important;
  color: #fef08a;
  box-shadow: 0 0 26px rgba(250, 204, 21, 0.95);
  animation: primordialPulse 1.2s infinite alternate;
}

.badge-rarity {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
}
.bg-common { background: #64748b; }
.bg-uncommon { background: #16a34a; }
.bg-rare { background: #2563eb; }
.bg-epic { background: #9333ea; }
.bg-legendary { background: #d97706; }
.bg-mythic { background: #dc2626; }
.bg-primordial {
  background: linear-gradient(90deg, #f43f5e, #e11d48, #be123c);
}
.bg-transcendent {
  background: linear-gradient(90deg, #06b6d4, #2563eb, #06b6d4);
  background-size: 200% 100%;
  animation: rainbowShift 2.2s linear infinite;
}
.bg-abyss {
  background: linear-gradient(90deg, #4c1d95, #9333ea, #ec4899);
  background-size: 200% 100%;
  animation: rainbowShift 2s linear infinite;
}
.bg-genesis {
  background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6, #06b6d4, #f59e0b);
  background-size: 250% 100%;
  animation: rainbowShift 1.6s linear infinite;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* ==================== RIGHT COLUMN MANAGEMENT PANELS ==================== */
.right-manage-col {
  min-width: 0;
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

.pc-tabs-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #0f1628;
  border-bottom: 1px solid var(--border-subtle);
}
.manage-tab-btn {
  padding: 13px 8px;
  border: none;
  background: transparent;
  color: var(--txt-sub);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
}
.manage-tab-btn.active {
  color: #fff;
  background: rgba(251, 191, 36, 0.08);
  border-bottom-color: var(--gold);
}
.hot-pill {
  background: var(--p2w-pink);
  color: #fff;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 999px;
}

.manage-panel {
  display: none;
  padding: 14px;
  max-height: 690px;
  overflow-y: auto;
  min-width: 0;
  width: 100%;
}
.manage-panel.active-pc-panel {
  display: block;
}

.panel-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.panel-section-title h3 {
  font-size: 14px;
  font-weight: 900;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 6px;
}
.panel-section-title h3 i { color: var(--gold); }
.sub-hint {
  font-size: 11px;
  color: var(--txt-sub);
}

/* 6슬롯 장비 그리드 */
.equipped-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.slot-card {
  min-width: 0;
  background: var(--bg-card);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.12s, background 0.12s;
}
.slot-card:hover {
  transform: translateY(-2px);
  background: var(--bg-card-hover);
}
.slot-card.empty-slot {
  opacity: 0.65;
  cursor: default;
}
.slot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 11px;
}
.slot-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.slot-name {
  font-size: 11px;
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot-meta {
  font-size: 10px;
  color: #cbd5e1;
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.stats-summary-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.stat-chip {
  min-width: 0;
  background: #101727;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  font-size: 11px;
}
.stat-chip span { color: var(--txt-sub); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-chip b { color: #f8fafc; margin-top: 2px; font-size: 12px; }

/* 골드 훈련 리스트 */
.training-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.train-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 10px;
  min-width: 0;
}
.train-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.atk-ic { background: rgba(239, 68, 68, 0.18); color: #f87171; }
.spd-ic { background: rgba(56, 189, 248, 0.18); color: #38bdf8; }
.crit-ic { background: rgba(168, 85, 247, 0.18); color: #c084fc; }
.cdmg-ic { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }

.train-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}
.train-meta strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.train-meta small { color: var(--txt-sub); font-size: 11px; }
.lv-tag {
  color: var(--gold);
  font-size: 11px;
  margin-left: 4px;
}
.btn-train {
  flex-shrink: 0;
  min-width: 84px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.btn-train i { color: var(--gold); }
.btn-train:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #334155;
  border-color: transparent;
}

/* ==================== P2W SHOP PANEL ==================== */
.vip-status-banner {
  background: linear-gradient(135deg, #27173a 0%, #171e36 100%);
  border: 1px solid rgba(244, 63, 94, 0.45);
  border-radius: 14px;
  padding: 12px;
}
.vip-banner-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}
.spent-total b { color: #fda4af; }
.vip-perks-txt {
  font-size: 11px;
  color: #fde68a;
  margin: 6px 0;
  font-weight: 700;
  line-height: 1.4;
}
.vip-progress-bar {
  height: 8px;
  background: #0b101d;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 5px;
}
.vip-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f43f5e, #f59e0b);
  transition: width 0.3s;
}
.vip-next-hint {
  display: block;
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.35;
}

.natural-recharge-notice {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 11px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.28);
  font-size: 11px;
  line-height: 1.4;
  color: #e0f2fe;
}
.natural-recharge-notice i {
  font-size: 18px;
  color: #38bdf8;
  flex-shrink: 0;
}
.natural-recharge-notice span { color: #fda4af; font-weight: 700; }

.shop-cards-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.shop-pkg-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #1e2742, #151c30);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 13px;
  padding: 13px 11px 11px;
  min-width: 0;
}
.shop-pkg-card.whale-card {
  border-color: #f43f5e;
  background: linear-gradient(135deg, #33142a, #191d34);
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.25);
}
.pkg-badge {
  position: absolute;
  top: -8px;
  left: 10px;
  background: linear-gradient(90deg, #f43f5e, #e11d48);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 8px;
  border-radius: 999px;
}
.pkg-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.15);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.pkg-info {
  flex: 1;
  min-width: 0;
}
.pkg-info strong {
  display: block;
  font-size: 13px;
  color: #fff;
}
.pkg-info p {
  font-size: 11px;
  color: #cbd5e1;
  margin-top: 2px;
  line-height: 1.35;
  word-break: keep-all;
}
.btn-buy-pkg {
  flex-shrink: 0;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid #fde047;
  background: linear-gradient(135deg, #f43f5e, #be123c);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}
.btn-buy-pkg del {
  font-size: 10px;
  color: #fecdd3;
  font-weight: 500;
}
.btn-buy-pkg:disabled {
  background: #334155;
  border-color: transparent;
  color: #94a3b8;
  cursor: not-allowed;
}

.shop-keys-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.key-shop-tile {
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.key-tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.key-tile-head i {
  font-size: 19px;
  color: var(--gold);
  flex-shrink: 0;
}
.key-tile-head strong {
  font-size: 12px;
  display: block;
}
.key-tile-head small {
  font-size: 10px;
  color: #7dd3fc;
}

/* ==================== LEADERBOARD & LOGS ==================== */
.mini-refresh-btn {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 7px;
  cursor: pointer;
}
.leaderboard-list, .rare-log-list, .purchase-log-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  min-width: 0;
}
.rank-row.me-row {
  border-color: var(--gold);
  background: rgba(251, 191, 36, 0.12);
}
.rank-num {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 7px;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
}
.rank-1 { background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff; }
.rank-2 { background: linear-gradient(135deg, #cbd5e1, #64748b); color: #0f172a; }
.rank-3 { background: linear-gradient(135deg, #d97706, #92400e); color: #fff; }
.rank-user {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.rank-user strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-score {
  flex-shrink: 0;
  text-align: right;
  font-size: 11px;
  white-space: nowrap;
}
.rank-score b { color: var(--gold); display: block; }

.log-item-row {
  background: #131b2e;
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 11px;
  border-left: 3px solid var(--gold);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

/* ==================== MODALS & TOASTS ==================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 8, 17, 0.82);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.modal-box {
  width: 100%;
  max-width: 450px;
  background: #151e33;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  animation: popIn 0.18s ease-out;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 15px;
  background: #0f1627;
  border-bottom: 1px solid var(--border-subtle);
}
.modal-header h3 {
  font-size: 14px;
  color: var(--gold);
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--txt-sub);
  font-size: 18px;
  cursor: pointer;
}
.modal-body {
  padding: 14px;
  max-height: 78vh;
  overflow-y: auto;
}
.modal-desc {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.5;
  margin-bottom: 12px;
}

.luck-mult-banner {
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #fecdd3;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  margin-bottom: 10px;
  text-align: center;
}
.prob-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.prob-table th, .prob-table td {
  padding: 7px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.prob-table th {
  color: var(--txt-sub);
  font-size: 11px;
}

/* 우편함 모달 스타일 */
.mail-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 11px;
  border-radius: 10px;
  background: #0e1526;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
}
.mail-top-bar b {
  color: var(--gold);
}
.btn-claim-all {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #fde047;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.btn-claim-all:disabled {
  background: #334155;
  border-color: transparent;
  color: #94a3b8;
  cursor: not-allowed;
}
.mail-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mail-card {
  background: #1a243d;
  border: 1px solid rgba(251, 191, 36, 0.38);
  border-radius: 12px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mail-card.claimed {
  opacity: 0.6;
  border-color: rgba(255, 255, 255, 0.1);
  background: #111829;
}
.mail-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.mail-card-head strong {
  font-size: 13px;
  color: #fef08a;
  line-height: 1.3;
}
.mail-sender-chip {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
}
.mail-card-body {
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.45;
  word-break: keep-all;
}
.mail-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mail-reward-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mail-reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fde047;
  font-size: 12px;
  font-weight: 900;
}
.btn-claim-mail {
  padding: 7px 14px;
  border-radius: 9px;
  border: 1px solid #86efac;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.btn-claim-mail:disabled {
  background: #334155;
  border-color: transparent;
  color: #94a3b8;
  cursor: default;
}

.pay-product-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0f1627;
  padding: 12px;
  border-radius: 12px;
}
.pay-prod-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.16);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}
.pay-product-summary p {
  font-size: 11px;
  color: var(--txt-sub);
  margin-top: 3px;
}
.pay-price-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.35);
}
.pay-price-box strong {
  font-size: 20px;
  color: #fda4af;
}
.pay-safe-notice {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.45;
  margin-bottom: 14px;
}
.pay-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 8px;
}
.btn-cancel-pay {
  padding: 11px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #1e293b;
  color: #cbd5e1;
  font-weight: 700;
  cursor: pointer;
}
.btn-confirm-pay {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #fde047;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}

.nokey-timer-circle {
  margin: 6px auto 14px;
  padding: 14px;
  border-radius: 14px;
  background: #0e1526;
  border: 1px solid rgba(56, 189, 248, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.nokey-timer-circle i { font-size: 22px; color: #38bdf8; }
.nokey-timer-circle span { font-size: 11px; color: var(--txt-sub); }
.nokey-timer-circle strong { font-size: 26px; color: #fde047; font-family: 'Black Han Sans', sans-serif; }

.game-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #0d1323;
  color: #fff;
  font-size: 16px; /* iOS Safari 포커스 자동 확대 방지 (>=16px) */
}
.btn-primary-full, .btn-secondary-full {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: none;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
}
.btn-primary-full { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.btn-secondary-full { background: linear-gradient(135deg, #475569, #334155); }
.modal-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 14px 0;
}
.small-muted {
  font-size: 11px;
  color: var(--txt-sub);
  margin: 4px 0 8px;
}

.toast-container {
  position: fixed;
  top: 72px;
  right: 14px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 24px));
}
.toast-msg {
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid var(--gold);
  color: #fff;
  padding: 9px 13px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  word-break: keep-all;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
  animation: popIn 0.2s ease-out;
}

/* ==================== TABLET & MOBILE NAVIGATION (<=960px) ==================== */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 960px) {
  .game-container {
    grid-template-columns: minmax(0, 1fr);
    padding: 8px 10px 72px;
    gap: 8px;
  }

  .left-stage-col {
    gap: 8px;
  }

  .pc-tabs-bar {
    display: none;
  }

  .right-manage-col {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
  }

  .manage-panel {
    background: var(--bg-panel);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    max-height: none;
    display: none !important;
  }

  .mobile-tab-panel {
    display: none !important;
  }
  .mobile-tab-panel.active-mobile-panel {
    display: block !important;
  }

  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: rgba(11, 16, 29, 0.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(251, 191, 36, 0.28);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .mob-nav-btn {
    position: relative;
    background: transparent;
    border: none;
    color: var(--txt-sub);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
  }
  .mob-nav-btn i { font-size: 15px; }
  .mob-nav-btn.active {
    color: var(--gold);
  }
  .mob-hot-dot {
    position: absolute;
    top: 1px;
    right: 12%;
    background: var(--p2w-pink);
    color: #fff;
    font-style: normal;
    font-size: 7.5px;
    padding: 0 4px;
    border-radius: 999px;
  }
}

/* ==================== COMPACT MOBILE RPG DENSITY (<=680px) ====================
 * 모바일 화면에서 UI/배경/캐릭터가 과하게 확대되어 보이지 않도록
 * 실제 모바일 방치형 RPG 비율로 컴팩트하게 축소하여 한 화면(100dvh)에 한눈에 들어오도록 구성
 */
@media (max-width: 680px) {
  .top-hud {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 5px 8px;
  }

  .hud-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
  }

  .profile-pill {
    flex: 1;
    margin-right: 0;
    padding: 3px 8px 3px 5px;
    gap: 6px;
    border-radius: 10px;
  }
  .avatar-badge {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 11px;
  }
  .profile-meta {
    flex-direction: row;
    align-items: center;
    gap: 7px;
    flex: 1;
  }
  .name-row {
    font-size: 11px;
    gap: 4px;
  }
  .name-row strong {
    max-width: 84px;
  }
  .vip-chip {
    font-size: 9px;
    padding: 1px 5px;
  }
  .cp-row {
    font-size: 10.5px;
    margin-top: 0;
    margin-left: auto;
  }
  .profile-gear {
    font-size: 10px;
  }
  .hud-util-btns {
    gap: 4px;
  }
  .icon-hud-btn {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    font-size: 11.5px;
  }
  .mail-badge {
    min-width: 14px;
    height: 14px;
    font-size: 8.5px;
    top: -4px;
    right: -4px;
    padding: 0 3px;
  }

  .hud-currencies {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 5px;
    width: 100%;
  }
  .currency-pill {
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 8px;
    gap: 5px;
  }
  .key-pill {
    padding-right: 4px;
  }
  .key-pill > i {
    font-size: 11.5px;
  }
  .key-info {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .key-count {
    font-size: 11.5px;
  }
  .recharge-mini {
    font-size: 9.5px;
  }
  .plus-recharge-btn {
    width: 19px;
    height: 19px;
    border-radius: 5px;
    font-size: 10px;
  }

  .toast-container {
    top: 66px;
    left: 8px;
    right: 8px;
    max-width: none;
  }
  .toast-msg {
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 9px;
  }

  .server-ticker {
    padding: 3px 8px;
    font-size: 10px;
    gap: 6px;
  }
  .ticker-tag {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 4px;
  }

  .game-container {
    padding: 6px 8px 60px;
    gap: 7px;
  }
  .left-stage-col {
    gap: 7px;
  }

  /* 배틀 스테이지 와이드 1배율 뷰 (배경 및 캐릭터 과확대 방지) */
  .battle-card {
    border-radius: 13px;
  }
  .stage-top-bar {
    padding: 5px 9px;
    gap: 5px;
  }
  .boss-tag {
    font-size: 9.5px;
    padding: 1px 5px;
  }
  .stage-lv-num {
    font-size: 13.5px;
  }
  .stage-egg-name {
    font-size: 11px;
  }
  .stage-dps-info {
    font-size: 10px;
    gap: 5px;
  }
  .auto-hunt-chip {
    font-size: 9px;
    padding: 1px 6px;
  }

  .battle-arena {
    height: 152px;
    /* cover 확대 크롭 대신 가로 100% 전체 풍경이 한눈에 보이도록 설정 */
    background-size: 100% auto;
    background-position: center 72%;
  }
  .floating-promo-btn {
    top: 5px;
    left: 6px;
    padding: 3px 7px;
    gap: 4px;
    font-size: 9px;
    border-radius: 8px;
  }
  .floating-promo-btn i {
    font-size: 12px;
  }
  .idle-status-pill {
    top: 5px;
    right: 6px;
    padding: 2px 7px;
    font-size: 9px;
    gap: 4px;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pulse-dot {
    width: 5px;
    height: 5px;
  }

  .fighter-wrap {
    bottom: 7px;
  }
  .player-left {
    left: 6%;
    width: 106px;
  }
  .player-motion-wrap {
    width: 106px;
    height: 80px;
  }
  .player-motion-wrap.is-striking {
    animation: heroAttackDashMob 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .player-motion-wrap.is-crit-striking {
    animation: heroCritDashMob 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .egg-right {
    right: 8%;
    width: 82px;
  }
  .egg-motion-wrap {
    width: 74px;
    height: 84px;
  }
  .egg-motion-wrap.boss-scale {
    width: 86px;
    height: 96px;
  }
  .ground-aura {
    width: 68px;
    height: 16px;
    bottom: 11px;
  }
  .hit-impact-sprite {
    width: 74px;
    height: 74px;
    left: -8px;
    top: 8px;
  }
  .fighter-label {
    font-size: 9px;
    padding: 1px 6px;
    margin-top: 2px;
  }
  .dmg-popup {
    font-size: 13px;
  }
  .dmg-popup.crit {
    font-size: 16px;
  }
  .reward-fly {
    font-size: 10px;
    right: 5%;
    padding: 2px 7px;
  }

  .egg-hp-footer {
    padding: 6px 9px 7px;
  }
  .hp-bar-outer {
    height: 16px;
  }
  .hp-bar-text {
    font-size: 10px;
  }
  .reward-preview-row {
    margin-top: 4px;
    font-size: 10px;
  }
  .no-key-drop-hint {
    font-size: 9px;
  }

  /* 상자 뽑기 센터 모바일 컴팩트 2열 배치 */
  .chest-card {
    padding: 9px 10px;
    border-radius: 13px;
  }
  .chest-card-header {
    gap: 4px;
    padding-bottom: 6px;
  }
  .chest-lv-group {
    gap: 5px;
  }
  .chest-lv-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
  }
  .exp-mini-bar {
    width: 48px;
    height: 13px;
  }
  .exp-mini-bar span {
    font-size: 8.5px;
  }
  .pity-group {
    font-size: 10px;
    gap: 4px;
  }
  .no-pity-tag {
    font-size: 9px;
    padding: 2px 5px;
  }
  .prob-text-btn {
    font-size: 9.5px;
    padding: 2px 6px;
    border-radius: 5px;
  }

  .chest-main-body {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 9px;
    padding-top: 7px;
  }
  .chest-glow-aura {
    width: 64px;
    height: 64px;
  }
  .chest-sprite {
    width: 60px;
    height: 60px;
  }
  .rech-lbl-long {
    display: none;
  }
  .rech-lbl-short {
    display: inline;
  }
  .recharge-banner-chip {
    margin-top: 3px;
    font-size: 9px;
    padding: 2px 5px;
    white-space: nowrap;
  }

  .chest-controls-box {
    gap: 6px;
  }
  .pc-only-br {
    display: none;
  }
  .chest-rule-desc {
    font-size: 10px;
    line-height: 1.3;
  }
  .btn-open-chest {
    padding: 7px 10px;
    border-radius: 10px;
    gap: 1px;
  }
  .open-main-txt {
    font-size: 15px;
  }
  .open-sub-txt {
    font-size: 10px;
  }

  /* iOS Safari <select> 탭 시 화면 자동 확대 원천 차단 (computed font-size 16px + 0.6875 스케일 = 시각적 11px) */
  .auto-open-bar {
    gap: 5px;
    height: 30px;
  }
  .auto-select-wrap {
    height: 30px;
    overflow: hidden;
    border-radius: 8px;
  }
  .auto-filter-select {
    width: 145.45%;
    height: 43.6px;
    font-size: 16px;
    padding: 4px 10px;
    border-radius: 11px;
    transform: scale(0.6875);
    transform-origin: top left;
  }
  .btn-auto-open {
    padding: 0 10px;
    height: 30px;
    font-size: 10.5px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* 장비 비교창 컴팩트 2열 유지 */
  .pending-compare-box {
    margin-top: 8px;
    padding: 8px;
    border-radius: 11px;
  }
  .compare-header {
    margin-bottom: 6px;
  }
  .new-pull-banner {
    font-size: 11px;
  }
  .cp-diff-badge {
    font-size: 10px;
    padding: 1px 7px;
  }
  .compare-grid {
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
    gap: 4px;
  }
  .compare-arrow {
    font-size: 11px;
  }
  .equip-compare-card {
    padding: 6px 7px;
    min-height: 82px;
    border-radius: 9px;
    font-size: 10px;
  }
  .eq-icon-box {
    width: 26px;
    height: 26px;
    font-size: 12px;
    border-radius: 6px;
  }
  .eq-title-wrap strong {
    font-size: 10.5px;
  }
  .eq-stats-lines {
    font-size: 9.5px;
  }
  .compare-actions {
    gap: 5px;
    margin-top: 7px;
  }
  .btn-decide {
    padding: 6px 4px;
    font-size: 10.5px;
    border-radius: 8px;
  }
  .btn-decide small {
    font-size: 9px;
  }

  /* 장비·훈련 & P2W 상점 & 랭킹 모바일 컴팩트 밀도 */
  .manage-panel {
    padding: 9px 10px;
  }
  .panel-section-title {
    margin-bottom: 6px;
  }
  .panel-section-title h3 {
    font-size: 12px;
  }
  .sub-hint {
    font-size: 9.5px;
  }
  .equipped-slots-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .slot-card {
    padding: 6px 7px;
    border-radius: 9px;
    gap: 3px;
  }
  .slot-icon {
    width: 24px;
    height: 24px;
    font-size: 11.5px;
    border-radius: 6px;
  }
  .badge-rarity {
    font-size: 8.5px;
    padding: 1px 4px;
  }
  .slot-name {
    font-size: 10px;
  }
  .slot-meta {
    font-size: 9px;
  }

  .stats-summary-grid {
    margin-top: 7px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .stat-chip {
    padding: 4px 6px;
    border-radius: 7px;
  }
  .stat-chip span {
    font-size: 9px;
  }
  .stat-chip b {
    font-size: 10.5px;
    margin-top: 1px;
  }

  .mt-14 {
    margin-top: 10px;
  }
  .training-list {
    gap: 5px;
  }
  .train-row {
    padding: 6px 8px;
    gap: 7px;
    border-radius: 9px;
  }
  .train-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
    border-radius: 7px;
  }
  .train-meta {
    font-size: 11px;
  }
  .train-meta small {
    font-size: 9.5px;
  }
  .lv-tag {
    font-size: 9.5px;
  }
  .btn-train {
    min-width: 68px;
    padding: 6px 8px;
    font-size: 10.5px;
    border-radius: 7px;
  }

  .vip-status-banner {
    padding: 9px 10px;
    border-radius: 11px;
  }
  .vip-banner-top {
    font-size: 11px;
  }
  .vip-perks-txt, .vip-next-hint {
    font-size: 10px;
  }
  .natural-recharge-notice {
    padding: 7px 9px;
    font-size: 10px;
    margin-top: 7px;
  }
  .shop-cards-list {
    gap: 8px;
  }
  .shop-pkg-card {
    padding: 10px 9px 9px;
    gap: 8px;
    border-radius: 10px;
  }
  .pkg-badge {
    font-size: 8.5px;
    padding: 1px 6px;
  }
  .pkg-icon {
    width: 32px;
    height: 32px;
    font-size: 15px;
    border-radius: 9px;
  }
  .pkg-info strong {
    font-size: 11.5px;
  }
  .pkg-info p {
    font-size: 9.5px;
  }
  .btn-buy-pkg {
    padding: 6px 9px;
    font-size: 10.5px;
    border-radius: 8px;
  }
  .btn-buy-pkg del {
    font-size: 8.5px;
  }
  .shop-keys-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .key-shop-tile {
    padding: 8px;
    gap: 6px;
    border-radius: 10px;
  }
  .key-tile-head i {
    font-size: 15px;
  }
  .key-tile-head strong {
    font-size: 10.5px;
  }
  .key-tile-head small {
    font-size: 9px;
  }

  .rank-row {
    padding: 6px 8px;
    font-size: 10.5px;
  }
  .rank-score {
    font-size: 10px;
  }
  .log-item-row {
    padding: 5px 8px;
    font-size: 10px;
  }
}

/* 초소형 화면 (340px 이하) 미세 대응 */
@media (max-width: 340px) {
  .auto-hunt-chip {
    display: none;
  }
  .equipped-slots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==================== KEYFRAME ANIMATIONS ==================== */
@keyframes heroIdleBob {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-4px) scaleY(1.02); }
}

@keyframes heroAttackDash {
  0% { transform: translateX(0) rotate(0deg); }
  45% { transform: translateX(42px) translateY(-8px) rotate(6deg) scale(1.06); }
  100% { transform: translateX(0) rotate(0deg); }
}

@keyframes heroCritDash {
  0% { transform: translateX(0) scale(1); }
  45% { transform: translateX(56px) translateY(-12px) rotate(10deg) scale(1.13); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes heroAttackDashMob {
  0% { transform: translateX(0) rotate(0deg); }
  45% { transform: translateX(26px) translateY(-4px) rotate(5deg) scale(1.05); }
  100% { transform: translateX(0) rotate(0deg); }
}

@keyframes heroCritDashMob {
  0% { transform: translateX(0) scale(1); }
  45% { transform: translateX(34px) translateY(-7px) rotate(8deg) scale(1.1); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes eggIdleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}

@keyframes eggHitRecoil {
  0% { transform: translateX(0) scale(1, 1); }
  35% { transform: translateX(12px) scale(0.9, 1.08) rotate(6deg); }
  70% { transform: translateX(-4px) scale(1.05, 0.95) rotate(-3deg); }
  100% { transform: translateX(0) scale(1, 1); }
}

@keyframes eggShatterAnim {
  0% { transform: scale(1); opacity: 1; filter: brightness(2); }
  40% { transform: scale(1.18) rotate(-8deg); opacity: 0.9; }
  100% { transform: scale(0.2) rotate(14deg); opacity: 0; }
}

@keyframes impactPop {
  0% { opacity: 1; transform: scale(0.3) rotate(-15deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(8deg); }
  100% { opacity: 0; transform: scale(1.35) rotate(18deg); }
}

@keyframes dmgFloatUp {
  0% { opacity: 1; transform: translateY(0) scale(0.75); }
  25% { opacity: 1; transform: translateY(-16px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-48px) scale(0.92); }
}

@keyframes rewardFlyAnim {
  0% { opacity: 0; transform: translateY(10px) scale(0.8); }
  20% { opacity: 1; transform: translateY(-10px) scale(1.06); }
  80% { opacity: 1; transform: translateY(-38px) scale(1); }
  100% { opacity: 0; transform: translateY(-54px) scale(0.9); }
}

@keyframes shardExplode {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.3); }
}

@keyframes arenaShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) translateY(2px); }
  50% { transform: translateX(4px) translateY(-2px); }
  75% { transform: translateX(-2px); }
}

@keyframes chestShakePop {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.12) rotate(-8deg); }
  50% { transform: scale(1.16) rotate(8deg); }
  75% { transform: scale(0.95) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes floatBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes pulseScale {
  0% { transform: scale(1); }
  100% { transform: scale(1.07); }
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.93); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes rainbowShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes primordialPulse {
  0% { box-shadow: 0 0 12px rgba(244, 63, 94, 0.55); }
  100% { box-shadow: 0 0 24px rgba(168, 85, 247, 0.9); }
}

@keyframes tickerFadeSlide {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==================== AUTO-UPDATE BANNER & MYSQL AUTH OVERLAY ==================== */
.auto-update-banner {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
  max-width: calc(100vw - 24px);
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    radial-gradient(circle at 20% 20%, rgba(245, 158, 11, 0.16), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.18), transparent 45%),
    rgba(6, 10, 20, 0.96);
  backdrop-filter: blur(14px);
  overflow-y: auto;
}

.auth-card {
  width: 100%;
  max-width: 410px;
  background: linear-gradient(180deg, #161f36 0%, #0e1526 100%);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 18px;
  padding: 20px 18px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.78);
  animation: popIn 0.22s ease-out;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.auth-logo-badge {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
}

.auth-brand h1 {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 21px;
  font-weight: 400;
  color: #fef08a;
  letter-spacing: 0.4px;
  margin: 0 0 2px;
}

.auth-brand p {
  font-size: 11px;
  color: #94a3b8;
  margin: 0;
}

.auth-perk-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.13);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fde68a;
  font-size: 11.5px;
  margin-bottom: 14px;
  text-align: center;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: rgba(9, 13, 24, 0.75);
  padding: 4px;
  border-radius: 11px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-tab {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.16s;
}

.auth-tab.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.auth-form {
  display: flex;
  flex-direction: column;
}

.auth-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #cbd5e1;
  margin: 6px 0 4px;
}

.auth-label small {
  color: #94a3b8;
  font-weight: 500;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-wrap > i {
  position: absolute;
  left: 12px;
  color: #64748b;
  font-size: 13px;
  pointer-events: none;
}

.auth-input {
  padding-left: 35px !important;
  font-size: 16px !important;
}

.auth-error {
  margin: 10px 0 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  font-size: 12px;
  font-weight: 700;
}

.btn-auth-submit {
  margin-top: 14px;
  border: none;
  border-radius: 11px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.4);
  transition: transform 0.14s, filter 0.14s;
}

.btn-auth-submit.reg-submit {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
}

.btn-auth-submit:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.auth-switch-link {
  margin-top: 11px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
}

.auth-switch-link b {
  color: #fbbf24;
  text-decoration: underline;
}

/* ==================== PAYMENT BLOCK & ACCOUNT STATUS STYLES ==================== */
.pay-blocked-shop-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.42);
  margin-bottom: 8px;
}

.pay-blocked-shop-banner > i {
  font-size: 18px;
  color: #f87171;
  flex-shrink: 0;
}

.pay-blocked-shop-banner div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pay-blocked-shop-banner strong {
  font-size: 12px;
  color: #fecaca;
}

.pay-blocked-shop-banner span {
  font-size: 11px;
  color: #cbd5e1;
}

.pay-blocked-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.45);
  margin: 10px 0 12px;
}

.pay-blocked-alert > i {
  font-size: 18px;
  color: #f87171;
  margin-top: 2px;
}

.pay-blocked-alert strong {
  display: block;
  font-size: 12.5px;
  color: #fecaca;
  margin-bottom: 3px;
}

.pay-blocked-alert p {
  font-size: 11.5px;
  color: #e2e8f0;
  margin: 0;
  line-height: 1.45;
}

.btn-confirm-pay.is-blocked,
.shop-buy-btn.is-blocked {
  background: linear-gradient(135deg, #475569, #334155) !important;
  color: #cbd5e1 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 0.88;
}

.account-status-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.35);
  font-size: 12px;
  color: #e2e8f0;
}

.account-status-chip .db-badge {
  font-size: 11px;
  font-weight: 800;
  color: #34d399;
}

.btn-logout-full {
  width: 100%;
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.18);
  color: #fecaca;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-logout-full:hover {
  background: rgba(239, 68, 68, 0.32);
}

/* 상자 숙련도 소수점(0.0% ~ 99.9%) 표기 폭 여유 확보 */
.exp-mini-bar {
  min-width: 78px !important;
}