:root {
  --ink: #23303f;
  --panel: #fdf6e3;
  --panel-2: #f3e6c8;
  --line: #b89b6a;
  --accent: #ff9f43;
  --hp: #ff5964;
  --mp: #46a6ff;
  --exp: #ffd93d;
  font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
}

* { box-sizing: border-box; }
/* 안드로이드 크롬은 화면을 돌리면 본문 글꼴을 임의로 키운다(font boosting).
   HUD 가 한 번에 무너지므로 자동 확대를 끈다. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0d1117;
  color: #fff;
  touch-action: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
body { user-select: none; -webkit-user-select: none; }
.hidden { display: none !important; }
#mobile-controls { display:none; }
#game, #hud, #mobile-controls, #bottombar, .overlay, canvas {
  touch-action: none;
  -webkit-touch-callout: none;
}
.win .body, #chatlog, .mail-list, .ranking-list, .help-window > .body, .feedback-list, #rogue-invasion-hud {
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: auto; touch-action: none; }

/* ───────── 호요버스(원신) 스타일 시네마틱 런처 화면 ───────── */
.launcher-overlay {
  position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  background: #060b17;
  z-index: 50; overflow-x: hidden; overflow-y: auto;
  padding: clamp(24px, 4vh, 48px) clamp(28px, 4.5vw, 64px) clamp(22px, 3vh, 36px);
  box-sizing: border-box;
}

/* 심리스 풀스크린 루프 영상 */
.launcher-bg-video {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
  filter: brightness(0.92) contrast(1.04);
  transform: translateZ(0);
}

/* 시네마틱 앰비언트 오버레이 & 비네팅 */
.launcher-bg-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 80% 50% at 75% 25%, rgba(56, 189, 248, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 20% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, rgba(6, 11, 23, 0.55) 0%, rgba(8, 16, 32, 0.15) 45%, rgba(5, 10, 20, 0.7) 100%);
}
.launcher-bg-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.65), inset 0 0 200px rgba(2, 6, 15, 0.4);
}

/* 런처 상단 바 (좌: 웅장한 로고 / 우: 서버 상태) */
.launcher-topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  width: 100%; z-index: 2; pointer-events: auto;
}

/* 웅장한 EVERIA 시그니처 로고 영역 */
.launcher-hero-brand {
  display: flex; flex-direction: column; align-items: flex-start;
}
.launcher-grand-logo {
  width: clamp(320px, 30vw, 460px); height: auto; object-fit: contain;
  filter: drop-shadow(0 4px 24px rgba(180, 210, 255, 0.5)) drop-shadow(0 0 60px rgba(99, 102, 241, 0.4));
  animation: logoFloat 7s ease-in-out infinite alternate;
  user-select: none; -webkit-user-drag: none;
}
@keyframes logoFloat {
  0% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 4px 24px rgba(180, 210, 255, 0.5)) drop-shadow(0 0 50px rgba(99, 102, 241, 0.3));
  }
  50% {
    transform: translateY(-5px) scale(1.015);
    filter: drop-shadow(0 8px 36px rgba(220, 235, 255, 0.75)) drop-shadow(0 0 80px rgba(147, 197, 253, 0.55));
  }
  100% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 4px 24px rgba(180, 210, 255, 0.5)) drop-shadow(0 0 50px rgba(99, 102, 241, 0.3));
  }
}
.launcher-hero-slogan {
  margin: 8px 0 0 8px; font-size: clamp(14px, 1.35vw, 17.5px); font-weight: 800; letter-spacing: 0.14em;
  color: #e2e8f0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 0 20px rgba(147, 197, 253, 0.5);
}

.launcher-status-bar {
  display: flex; align-items: center; gap: 12px;
}
.server-pill {
  display: flex; align-items: center; gap: 8px; padding: 8px 18px;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.8); border: 1.5px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 13px; font-weight: 800; color: #f1f5f9;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 12px #22c55e; animation: liveDotPulse 1.6s infinite alternate;
}
@keyframes liveDotPulse { to { opacity: 0.35; transform: scale(0.85); } }

.pc-download-btn {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-radius: 24px;
  background: rgba(30, 41, 59, 0.75); border: 1.5px solid rgba(250, 204, 21, 0.4);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 13px; font-weight: 800; color: #fde047;
  cursor: pointer; transition: all 0.15s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.pc-download-btn:hover {
  background: rgba(51, 65, 85, 0.95); color: #ffffff;
  border-color: #facc15; transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
}
.pc-download-btn .download-icon { font-size: 14px; }
.pc-download-btn .download-label { letter-spacing: 0.02em; }

/* PC 다운로드 모달 상세 스타일 */
.download-modal-card {
  max-width: 600px;
}
.download-modal-body {
  padding: 20px 24px;
}
.download-hero-box {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px;
  background: rgba(30, 41, 59, 0.7); border: 1.5px solid rgba(250, 204, 21, 0.35);
  border-radius: 16px; margin-bottom: 16px;
}
.download-hero-icon { font-size: 32px; flex-shrink: 0; }
.download-hero-text h4 { margin: 0 0 4px; font-size: 16px; color: #fde047; font-weight: 900; }
.download-hero-text p { margin: 0; font-size: 13px; color: #e2e8f0; line-height: 1.5; }

.download-features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px;
}
.feature-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 14px 10px; border-radius: 14px;
  background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(255, 255, 255, 0.16);
}
.feature-item .feat-icon { font-size: 24px; margin-bottom: 6px; }
.feature-item b { font-size: 13.5px; color: #ffffff; margin-bottom: 4px; display: block; font-weight: 800; }
.feature-item p { margin: 0; font-size: 11.5px; color: #cbd5e1; line-height: 1.4; }

.download-action-row {
  display: flex; justify-content: center; margin-top: 8px;
}
.btn-download-primary {
  display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%;
  padding: 16px 24px; border-radius: 16px;
  background: linear-gradient(135deg, #ffe082 0%, #ffb300 45%, #f57c00 100%);
  color: #2b1402 !important; text-decoration: none;
  border: 2px solid #fff3b0;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.45);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.btn-download-primary:hover {
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.6);
}
.btn-download-primary .dl-icon { font-size: 26px; }
.btn-download-primary .dl-text-wrap { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.btn-download-primary .dl-text-wrap b { font-size: 16.5px; font-weight: 900; line-height: 1.2; color: #2b1402; }
.btn-download-primary .dl-text-wrap small { font-size: 12.5px; font-weight: 700; opacity: 0.9; color: #452405; }

/* 런처 하단 덱 (좌: 공지사항 독 / 우: 로그인 카드) */
.launcher-bottom-deck {
  display: flex; align-items: flex-end; justify-content: space-between;
  width: 100%; gap: 36px; z-index: 2; margin-bottom: 12px;
}

/* 좌측 하단 뉴스 독 */
.launcher-news-dock {
  width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: 10px;
}

.launcher-news-board {
  display: flex; flex-direction: column;
  background: rgba(10, 18, 36, 0.68); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px; padding: 16px 20px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.news-board-header {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 8px; margin-bottom: 8px;
}
.news-badge-live {
  font-size: 11px; font-weight: 900; letter-spacing: 0.08em; color: #38bdf8;
  background: rgba(56, 189, 248, 0.18); border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 3px 9px; border-radius: 7px;
}
.news-tabs { display: flex; gap: 8px; }
.news-tab-btn {
  background: none; border: none; font-size: 13.5px; font-weight: 800; color: #94a3b8;
  padding: 4px 13px; cursor: pointer; border-radius: 8px; transition: all 0.12s ease;
}
.news-tab-btn:hover { color: #f8fafc; background: rgba(255, 255, 255, 0.1); }
.news-tab-btn.active {
  color: #facc15; background: rgba(250, 204, 21, 0.18);
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.35);
}
.news-list { display: flex; flex-direction: column; gap: 4px; }
.news-item {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: #cbd5e1; text-align: left;
  background: rgba(30, 41, 59, 0.35); border: 1px solid transparent; border-radius: 8px;
  padding: 7px 12px; cursor: pointer; transition: all 0.12s ease;
}
.news-item:hover {
  background: rgba(51, 65, 85, 0.65); border-color: rgba(250, 204, 21, 0.35); color: #fff;
  transform: translateX(3px);
}
.news-item:active { transform: scale(0.99); }
.news-item .n-tag { color: #f59e0b; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.news-item .n-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.news-item .n-date { color: #94a3b8; font-size: 11.5px; flex-shrink: 0; }

/* 공지/이벤트 본문 팝업 모달 */
.launcher-article-modal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 18, 0.8); backdrop-filter: blur(8px); padding: 16px;
}
.article-modal-card {
  position: relative; z-index: 2;
  width: 100%; max-width: 580px; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(155deg, rgba(20, 32, 58, 0.96), rgba(10, 18, 36, 0.98));
  border: 1.5px solid rgba(250, 204, 21, 0.5);
  border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
  animation: modalPop .15s ease-out;
}
@keyframes modalPop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.article-modal-header {
  position: relative; padding: 20px 24px 16px; border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.article-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.article-tag { font-size: 12px; font-weight: 900; color: #f59e0b; }
.article-date { font-size: 12px; color: #94a3b8; }
.article-modal-header h3 { margin: 0; font-size: 18px; font-weight: 900; color: #f8fafc; padding-right: 32px; }
.btn-modal-close {
  position: absolute; right: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); border: none; color: #cbd5e1; font-size: 15px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.btn-modal-close:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.article-modal-body {
  padding: 22px 24px; overflow-y: auto; color: #e2e8f0; font-size: 14px; line-height: 1.65;
}
.article-modal-body h4 { margin: 0 0 8px; color: #facc15; font-size: 16px; }
.article-modal-body b { color: #93c5fd; }
.article-modal-body p { margin: 4px 0; }
.article-modal-footer {
  padding: 16px 24px; border-top: 1px solid rgba(148, 163, 184, 0.2); display: flex; justify-content: flex-end;
}
.article-modal-footer button {
  min-width: 100px; padding: 9px 20px; font-size: 14px; font-weight: 800; border-radius: 10px;
}

/* ───────── 우측 글래스모피즘 로그인/크리에이터 패널 ───────── */
.launcher-action-panel {
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: 440px; flex-shrink: 0;
}
.login-card {
  background: linear-gradient(160deg, rgba(17, 27, 49, 0.8) 0%, rgba(9, 15, 30, 0.88) 100%);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px; padding: 24px 26px 20px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  display: flex; flex-direction: column; gap: 14px;
  max-height: min(780px, calc(100vh - 90px));
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 204, 21, 0.35) transparent;
}
.login-card::-webkit-scrollbar { width: 5px; }
.login-card::-webkit-scrollbar-thumb { background: rgba(250, 204, 21, 0.35); border-radius: 10px; }

.card-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 12px;
}
.card-header h3 {
  margin: 0; font-size: 22px; font-weight: 900; color: #f8fafc;
  letter-spacing: -0.01em;
}
.card-subtitle {
  font-size: 13px; color: #94a3b8; margin-top: 4px; display: block;
}

.input-fields { display: flex; flex-direction: column; gap: 12px; }
.input-group label {
  display: block; font-size: 13px; font-weight: 800; color: #cbd5e1; margin-bottom: 5px;
}
.input-group input {
  width: 100%; padding: 13px 15px; border-radius: 14px;
  border: 1.5px solid rgba(148, 163, 184, 0.35);
  background: rgba(10, 17, 33, 0.8); font-size: 15px; color: #ffffff;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.input-group input:focus {
  background: rgba(10, 17, 33, 0.95) !important; color: #ffffff !important;
  border-color: #facc15; box-shadow: 0 0 16px rgba(250, 204, 21, 0.4);
}
.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover, 
.input-group input:-webkit-autofill:focus, 
.input-group input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #0b1224 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* 호요버스(원신) 스타일 대형 엠버/골드 CTA 액션 버튼 */
.launcher-actions {
  display: flex; flex-direction: column; gap: 9px; margin-top: 2px;
}
.btn-game-start {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 24px; border-radius: 16px; font-size: 18px; font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #ffe082 0%, #ffb300 45%, #f57c00 100%);
  color: #2b1402;
  border: 2px solid #fff3b0; cursor: pointer;
  box-shadow: 0 8px 26px rgba(245, 158, 11, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.85), 0 0 24px rgba(250, 204, 21, 0.3);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.btn-game-start:hover {
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 10px 32px rgba(245, 158, 11, 0.65), inset 0 2px 2px rgba(255, 255, 255, 0.9), 0 0 30px rgba(250, 204, 21, 0.45);
}
.btn-game-start:active {
  transform: translateY(1px); filter: brightness(0.95);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}
.btn-game-start .play-icon {
  font-size: 17px; width: 26px; height: 26px; border-radius: 50%;
  background: #3f1d04; color: #fde047; display: inline-flex; align-items: center; justify-content: center;
}

/* 버튼 광택 훑기 애니메이션 (Shimmer) */
.btn-shimmer {
  position: absolute; top: -50%; left: -100%; width: 60%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: rotate(25deg);
  animation: btnShimmerSweep 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnShimmerSweep {
  0%, 60% { left: -100%; }
  100% { left: 200%; }
}

.btn-mode-toggle {
  padding: 11px; border-radius: 14px; font-size: 13px; font-weight: 700;
  background: rgba(30, 41, 59, 0.65); color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer; transition: all 0.15s ease;
}
.btn-mode-toggle:hover {
  background: rgba(51, 65, 85, 0.85); color: #fff; border-color: rgba(250, 204, 21, 0.35);
  transform: translateY(-1px);
}

.launcher-global-footer {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #f1f5f9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 10;
}

/* ───────── 신규 캐릭터 생성 중앙 팝업 모달 ───────── */
.launcher-creator-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.creator-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 8, 18, 0.75);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: modalFadeIn 0.2s ease-out;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }

.creator-modal-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 680px;
  background: linear-gradient(160deg, rgba(20, 32, 58, 0.94) 0%, rgba(10, 18, 36, 0.98) 100%);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1.5px solid rgba(250, 204, 21, 0.45);
  border-radius: 26px; padding: 26px 30px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: flex; flex-direction: column; gap: 18px;
  animation: creatorPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes creatorPop {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.creator-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 12px;
}
.creator-header-text h3 {
  margin: 0; font-size: 22px; font-weight: 900; color: #ffffff;
  letter-spacing: -0.01em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.creator-header-sub {
  font-size: 13px; color: #94a3b8; margin-top: 4px; display: block;
}

.creator-modal-body {
  display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start;
}

/* 캐릭터 미리보기: 화사한 햇살 언덕 배경 복원! */
.creator-preview-pane {
  display: flex; flex-direction: column; align-items: center;
}
.creator-preview {
  position: relative; width: 100%; min-height: 220px;
  overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
  border: 2.5px solid rgba(250, 204, 21, 0.55); border-radius: 20px;
  background: radial-gradient(circle at 52% 22%, #fffdf4 0 18%, transparent 19%), linear-gradient(to bottom, #e9f7f8 0 72%, #d6e8c8 72% 100%);
  box-shadow: inset 0 0 24px rgba(74, 125, 98, 0.25), 0 8px 24px rgba(0, 0, 0, 0.5);
}
.creator-preview::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 27%; height: 1.5px;
  background: rgba(145, 189, 138, 0.6);
}
.creator-preview canvas {
  position: absolute; z-index: 1; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: 154px; height: 164px;
}
.creator-preview .preview-tag {
  position: absolute; z-index: 2; left: 6px; right: 6px; top: 8px; text-align: center;
  font-size: 11px; font-weight: 900; color: #2d4533;
}

.creator-form-pane {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.creator-input-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

.creator-options { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.look-row { display: flex; gap: 12px; }
.look-pick { flex: 1; }
.look-pick > span { font-size: 12px; font-weight: 800; color: #cbd5e1; display: block; margin-bottom: 3px; }
.gender-row { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; }
.gender-row > span { color: #cbd5e1; font-size: 12px; font-weight: 800; }
.gender-pick { display: flex; gap: 6px; }
.gender-pick button {
  flex: 1; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px;
  background: rgba(30, 41, 59, 0.65); color: #cbd5e1; font-size: 12px; font-weight: 800; cursor: pointer;
  transition: all 0.12s ease;
}
.gender-pick button:hover { background: rgba(51, 65, 85, 0.85); color: #fff; }
.gender-pick button.on {
  color: #1e1002; border-color: #fff3b0; background: linear-gradient(135deg, #ffe082, #f59e0b);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
}
.swatches { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.swatches i {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.25); display: block;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.swatches i:hover { transform: scale(1.1); }
.swatches i.on {
  border-color: #fde047; box-shadow: 0 0 10px #fde047; transform: scale(1.18);
}
.choice-row { display: flex; flex-direction: column; gap: 3px; }
.choice-row > span { color: #cbd5e1; font-size: 12px; font-weight: 800; }
.look-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.look-choices button {
  min-width: 0; padding: 6px 3px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px;
  background: rgba(30, 41, 59, 0.65); color: #cbd5e1; font-size: 11.5px; font-weight: 800; line-height: 1.2;
  cursor: pointer; transition: all 0.12s ease;
}
.look-choices button:hover { background: rgba(51, 65, 85, 0.85); color: #fff; }
.look-choices button.on {
  color: #1e1002; border-color: #fff3b0; background: linear-gradient(135deg, #ffe082, #f59e0b);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.creator-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 16px; margin-top: 2px;
}
.btn-creator-cancel {
  padding: 14px 22px; border-radius: 14px; font-size: 14px; font-weight: 800;
  background: rgba(30, 41, 59, 0.7); color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer; transition: all 0.15s ease;
}
.btn-creator-cancel:hover { background: rgba(51, 65, 85, 0.9); color: #fff; }
.btn-creator-submit {
  flex: 1; max-width: 320px;
}

.msg { min-height: 18px; margin-top: 4px; font-size: 12.5px; color: #f87171; text-align: center; }
.hint { margin-top: 10px; font-size: 11.5px; line-height: 1.6; opacity: .75; text-align: center; }

/* ───────── 모바일 & 반응형 미디어 쿼리 ───────── */
@media (max-width: 900px), (max-height: 620px) {
  .launcher-overlay { padding: 14px 16px 22px; justify-content: flex-start; gap: 14px; }
  .launcher-topbar { flex-direction: column; gap: 10px; align-items: center; text-align: center; }
  .launcher-hero-brand { align-items: center; }
  .launcher-bottom-deck { flex-direction: column-reverse; align-items: center; gap: 14px; }
  .launcher-news-dock { display: none; }
  .launcher-action-panel { max-width: 440px; margin: 0 auto; }
}

/* ───────── HUD ───────── */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }

#announcement-bar {
  position:absolute; top:54px; left:50%; transform:translateX(-50%); width:min(760px, 72vw);
  overflow:hidden; padding:8px 0; border:2px solid #d6a844; border-radius:10px;
  background:linear-gradient(90deg,#34250eee,#68491eee,#34250eee); color:#fff0a8;
  box-shadow:0 7px 24px #0008, inset 0 0 16px #f4bc4326; font-size:13px; font-weight:900;
  white-space:nowrap; z-index:18;
}
#announcement-bar::before { content:'📣 서버 공지'; position:absolute; left:0; top:0; bottom:0; z-index:2; display:flex; align-items:center; padding:0 12px; background:#4e3516; border-right:1px solid #d6a844; }
#announcement-bar span { display:inline-block; padding-left:100%; animation:announcementFlow 12s linear; }
@keyframes announcementFlow { from { transform:translateX(0); } to { transform:translateX(-115%); } }

/* 화면 아래 한 줄 — 왼쪽(채팅+상태바) · 가운데(핫바) · 오른쪽(메뉴바).
   플렉스로 나란히 두면 창 크기가 바뀌어도 서로 밀어낼 뿐 겹치지 않는다. */
#bottombar {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
#bottombar > * { pointer-events: auto; }

#combat-status-stack {
  flex:0 0 auto; min-width:202px; display:flex; flex-direction:column; align-items:center; gap:5px;
}
#status-effects {
  max-width:330px; display:flex; align-items:flex-end; justify-content:center; gap:4px; flex-wrap:wrap;
}
.status-effect {
  --effect-color:#67d68a; min-width:72px; max-width:112px; height:31px; padding:3px 6px;
  display:flex; align-items:center; gap:5px; overflow:hidden; border:1px solid color-mix(in srgb,var(--effect-color) 76%,#fff 24%);
  border-radius:8px; background:linear-gradient(145deg,#1b2e29ed,#101923f2); color:#f7fff9;
  box-shadow:0 3px 10px #02070da8,inset 0 0 9px color-mix(in srgb,var(--effect-color) 24%,transparent);
  font-variant-numeric:tabular-nums;
}
.status-effect.debuff { --effect-color:#ff6874; background:linear-gradient(145deg,#3a1820ed,#16131bf2); }
.status-effect-icon { flex:none; width:21px; height:21px; display:grid; place-items:center; border-radius:6px; background:color-mix(in srgb,var(--effect-color) 28%,#111 72%); color:var(--effect-color); font-size:14px; }
.status-effect-text { min-width:0; display:flex; flex-direction:column; line-height:1.05; }
.status-effect-text b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.status-effect-text small { margin-top:2px; color:var(--effect-color); font-size:8px; font-weight:900; }
.status-effect.expiring { animation:statusEffectExpiring .48s steps(2,end) infinite; }
@keyframes statusEffectExpiring { 50% { opacity:.32; filter:brightness(1.7); transform:translateY(-1px); } }

#bottomleft {
  flex: 0 1 380px; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: calc(100vh - 24px);
  pointer-events: none;
}
#bottomleft > * { pointer-events: auto; }

#statusbar {
  display: flex; gap: 9px; align-items: center; flex: none;
  background: #1b2534cc; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 2px solid #40546e; border-radius: 12px; padding: 8px 12px 8px 8px;
  min-width: 290px;
}
.hud-level-badge {
  position:relative; width:58px; height:52px; flex:none; overflow:visible;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-shadow:0 2px 3px #000e,0 0 10px #6dbaff99;
  font-variant-numeric:tabular-nums;
}
.hud-level-badge small { margin-bottom:-3px; color:#bfe1ff; font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.hud-level-badge b { max-width:56px; font-size:26px; line-height:1; letter-spacing:-.075em; white-space:nowrap; }
.bars { flex: 1; }
.line1 { display: flex; align-items: baseline; gap: 6px; font-size: 12px; margin-bottom: 4px; }
.line1 #hud-name { font-weight: bold; font-size: 13px; }
.line1 .tag { background: #3a5a80; padding: 1px 6px; border-radius: 6px; font-size: 10px; }
#hud-power { position:relative; padding:1px 6px; border:1px solid #e5b95a88; border-radius:6px; background:#322816; color:#ffe083; font-size:10px; font-weight:900; font-variant-numeric:tabular-nums; transition:color .2s,transform .2s,box-shadow .2s; }
#hud-power.power-up { color:#8fffb0; transform:scale(1.08); box-shadow:0 0 12px #43ed7988; }
#hud-power.power-down { color:#ff9b9b; transform:scale(1.08); box-shadow:0 0 12px #ff4f5f88; }
.power-delta-pop { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); pointer-events:none; white-space:nowrap; font-size:11px; font-weight:1000; text-shadow:0 2px 3px #000; animation:powerDeltaPop 1.35s ease-out forwards; }
.power-delta-pop.up { color:#78ff9e; }.power-delta-pop.down { color:#ff8e93; }
@keyframes powerDeltaPop { 0%{opacity:0;transform:translate(-50%,8px) scale(.85)} 18%{opacity:1;transform:translate(-50%,0) scale(1.08)} 100%{opacity:0;transform:translate(-50%,-24px) scale(1)} }
.unique-line.negative { color:#ff8d95; }
.raid-power-guide { margin-top:6px; padding:5px 7px; border-radius:6px; background:#181f2c; color:#dce8ff; font-size:10px; }
.raid-power-guide strong { color:#ffe083; }.raid-power-guide.ready strong { color:#7dffa4; }.raid-power-guide.low strong { color:#ff9a9f; }
.bar {
  position: relative; height: 13px; border-radius: 7px; background: #0e1620;
  border: 1px solid #000a; margin-bottom: 3px; overflow: hidden;
}
.bar i { position: absolute; inset: 0; width: 0; display: block; border-radius: 7px; transition: width .18s; }
.bar span { position: absolute; inset: 0; font-size: 9px; text-align: center; line-height: 13px; text-shadow: 0 1px 2px #000; }
.bar.hp i { background: linear-gradient(#ff8b93, var(--hp)); }
.bar.mp i { background: linear-gradient(#8ecbff, var(--mp)); }
.bar.exp i { background: linear-gradient(#ffe98a, var(--exp)); }
.bar.exp.fame { border-color:#7259a8; box-shadow:inset 0 0 5px #9b7cff66; }
.bar.exp.fame i { background:linear-gradient(90deg,#7156d9,#b17cff 58%,#6ee7df); }
.bar.exp { height: 12px; }
.bar.exp span { line-height: 12px; font-size: 9px; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.fame-stat-card { display:flex; flex-direction:column; gap:4px; padding:8px; border:1px solid #9d82ce; border-radius:9px; background:linear-gradient(135deg,#f5efff,#ecfbff); color:#4d3d70; }
.combat-power-card { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:2px 10px; margin:8px 0; padding:9px 11px; border:1px solid #c69b3f; border-radius:9px; background:linear-gradient(135deg,#282014,#3c2b17); color:#ffe7a2; }
.combat-power-card span { font-weight:900; }.combat-power-card strong { justify-self:end; font-size:20px; color:#fff0a8; }.combat-power-card small { grid-column:1/-1; color:#d8cba9; }
.warehouse-summary { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-bottom:7px; }
.warehouse-summary > div { display:grid; grid-template-columns:1fr; align-items:center; gap:3px; padding:9px 11px; border:1px solid #c7a66a; border-radius:10px; background:#fffaf0; }
.warehouse-summary small { color:#79694e; }.warehouse-summary b { font-size:17px; color:#5d421c; }
.warehouse-summary label { display:flex; gap:5px; margin-top:3px; }.warehouse-summary input { min-width:0; width:100%; padding:5px 7px; border:1px solid #c3a879; border-radius:6px; background:#fff; color:#4d3b25; font-weight:800; text-align:right; }.warehouse-summary button { flex:none; }
.warehouse-summary > span { color:#b18b4d; font-size:22px; }.warehouse-note { margin-bottom:8px; color:#75664e; }
.warehouse-tabs { margin-bottom:8px; }.warehouse-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; min-width:710px; }
.warehouse-columns section { min-width:0; padding:8px; border:1px solid #cdbb98; border-radius:10px; background:#f7f0df; }
.warehouse-columns h3 { display:flex; justify-content:space-between; margin:0 0 7px; color:#604b2d; }.warehouse-columns h3 small { color:#8c7d65; font-weight:500; }
.warehouse-grid { display:grid; grid-template-columns:repeat(8,minmax(34px,1fr)); gap:4px; max-height:430px; overflow:auto; padding:2px; }
.warehouse-cell { position:relative; min-width:0; height:46px; padding:2px; border:1px solid #cdbb98; border-radius:7px; background:#fffaf0; color:#493a2b; overflow:hidden; }
.warehouse-cell.empty { opacity:.42; background:#eee4d0; }.warehouse-cell > span:first-child { font-size:18px; }.warehouse-cell i { position:absolute; right:3px; bottom:2px; padding:0 2px; border-radius:4px; background:#2a2118d9; color:#fff; font-size:8px; font-style:normal; }
.warehouse-cell small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:7px; }
@media(max-width:800px){.warehouse-columns{grid-template-columns:1fr;min-width:0}.warehouse-grid{grid-template-columns:repeat(8,1fr);max-height:180px}}
.fame-stat-card span { font-size:10px; }
.fame-stat-card strong { color:#784db2; }
.fame-stat-card small { font-size:9px; opacity:.72; }
.fame-stat-card > i { display:block; height:7px; overflow:hidden; border-radius:5px; background:#251f35; }
.fame-stat-card > i > em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7658d7,#b780f3,#65d8d4); }

#topright {
  position: absolute; right: 12px; top: 12px; text-align: right;
  background: #1b2534bb; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 2px solid #40546e; border-radius: 12px; padding: 8px 12px;
  font-size: 12px; line-height: 1.6;
}
#map-name { font-weight: bold; font-size: 14px; }
#online-count { opacity: .8; }

.inventory-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid #2a3b56;
}
.meso-balance {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 7px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, #1a2a44, #0d1730);
  border: 1px solid #425a80; box-shadow: inset 0 1px 0 #ffffff1f, 0 1px 3px #00000055;
  transition: filter .12s ease, transform .12s ease, border-color .12s ease;
}
.meso-balance:hover { filter: brightness(1.16); transform: translateY(-1px); border-color: #5c7aa8; }
.meso-balance:active { transform: translateY(0); }
.meso-coin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 30% 26%, #fff6c4, #ffd93d 55%, #d89a12);
  border: 1px solid #8a5c00; box-shadow: inset 0 2px 2px #ffffffb3, inset 0 -2px 3px #9c6a00, 0 1px 2px #00000044;
  color: #7a5200; font-size: 11px; font-weight: 800; line-height: 1;
}
.meso-amount { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.meso-amount b { color: #ffe98a; font-size: 13px; font-weight: 800; letter-spacing: .3px; }
.meso-amount i { font-style: normal; color: #9fb3cc; font-size: 9px; font-weight: 600; }

#quest-track {
  position: absolute; right: 12px; top: 92px; width: 210px; font-size: 11px;
  background: #1b2534aa; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 2px solid #40546e; border-radius: 10px; padding: 8px 10px;
  line-height: 1.6;
}
#quest-track:empty { display: none; }
#quest-track b { color: var(--accent); }
#quest-track .ok { color: #8ee87a; }

/* ── 미니맵 ── */
#minimap-box {
  position: absolute; left: 12px; top: 12px; width: 236px;
  background: #1b2534cc; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 2px solid #40546e; border-radius: 12px; padding: 7px 8px 5px;
}
#minimap-title { font-size: 11px; font-weight: bold; margin-bottom: 4px; color: #ffe9a8; }
#minimap { display: block; width: 220px; height: 128px; border-radius: 7px; background: #0e162099; }
#minimap-legend { display: flex; gap: 7px; margin-top: 4px; font-size: 9px; opacity: .75; flex-wrap: wrap; }
#minimap-legend span { display: flex; align-items: center; gap: 3px; }
#minimap-legend i { width: 7px; height: 7px; border-radius: 2px; display: block; }

#party-panel {
  position: absolute; left: 12px; top: 196px; width: 190px; font-size: 11px;
  background: #1b2534bb; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 2px solid #40546e; border-radius: 10px; padding: 8px 10px;
}
#rogue-invasion-hud {
  position:absolute; z-index:14; right:12px; top:92px; width:270px; padding:9px 11px;
  border:2px solid #ff5265; border-radius:11px; color:#ffe8e5;
  background:linear-gradient(145deg,#280a17ee,#671121ee 58%,#2b1028ee);
  box-shadow:0 0 18px #ff263c66,0 8px 24px #09030a99,inset 0 1px #ffffff20;
  animation:rogueHudPulse 1.15s ease-in-out infinite alternate;
}
#rogue-invasion-hud b,#rogue-invasion-hud strong,#rogue-invasion-hud span { display:block; }
#rogue-invasion-hud b { color:#ff7180; font-size:12px; }
#rogue-invasion-hud strong { margin-top:3px; color:#fff0b8; font-size:11px; }
#rogue-invasion-hud span { margin-top:3px; color:#f5c4ca; font-size:9px; }
#rogue-invasion-hud i { color:#ffe76f; font-style:normal; font-weight:900; }
.rogue-event-clock { display:flex; align-items:baseline; justify-content:space-between; margin:7px 0 5px; padding:6px 9px; border:1px solid #ffda6e80; border-radius:8px; background:#12070dcc; }
.rogue-event-clock small { color:#f3bec6; font-size:9px; font-weight:900; }.rogue-event-clock i { font-size:24px; line-height:1; letter-spacing:.04em; text-shadow:0 0 12px #ffb423aa; }
.rogue-contribution-self { margin-top:8px; padding:6px 7px; border-radius:7px; color:#fbe1e5; background:#13070cad; font-size:10px; }
.rogue-mystery-reward { color:#f4b5c0!important; letter-spacing:.04em; }.rogue-mystery-reward b { display:inline!important; color:#ffe76f!important; text-shadow:0 0 8px #ffca3a88; }
.rogue-meso-warning { margin-top:5px!important; padding:5px 6px; border:1px solid #ff536866; border-radius:6px; color:#ff9eaa!important; background:#3b0710cc; font-weight:900; }
.rogue-contribution-self b { display:inline!important; color:#ffe76f!important; font-size:10px!important; }
.rogue-contribution-list { margin:6px 0 0; padding:0; list-style:none; max-height:105px; overflow:auto; }
.rogue-contribution-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; padding:3px 5px; border-top:1px solid #ff83952c; }
.rogue-contribution-list li b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#ffd5db!important; font-size:9px!important; }
.rogue-contribution-list li span { margin:0!important; white-space:nowrap; color:#e7aeb8!important; }
.rogue-contribution-list li.mine { border-radius:5px; background:#ffdc6830; }
#rogue-invasion-hud:not(.hidden) ~ #quest-track { top:350px; }
@keyframes rogueHudPulse { from { box-shadow:0 0 10px #ff263c44,0 8px 20px #09030a88; } to { box-shadow:0 0 24px #ff263c88,0 8px 28px #09030aaa; } }

/* ── 전직/안내 배너 ── */
#guide-banner {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  background: linear-gradient(#ffd93d, #ff9f43); color: #3a2a10;
  border: 2px solid #c9741f; border-radius: 12px; padding: 8px 18px;
  font-size: 13px; font-weight: bold; box-shadow: 0 6px 20px #0007;
  animation: bannerPulse 1.6s ease-in-out infinite; text-align: center; line-height: 1.5;
}
#guide-banner small { display: block; font-weight: normal; font-size: 11px; opacity: .8; }
#guide-banner.world-guide { background:linear-gradient(#cda9ff,#7c5dcc); color:#21143d; border-color:#5d3d9b; }
@keyframes bannerPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.035); }
}
#party-panel .pm { margin-bottom: 5px; }
#party-panel .pbar { height: 6px; background: #0e1620; border-radius: 4px; overflow: hidden; margin-top: 2px; }
#party-panel .pbar i { display: block; height: 100%; background: var(--hp); }

/* 퀵슬롯은 4×2 고정 격자 — 창 너비에 따라 줄바꿈이 들쭉날쭉해지지 않는다 */
#hotbar {
  flex: 0 0 auto; margin: 0 auto;   /* 남는 공간 가운데. 줄어들지 않아 슬롯이 잘리지 않는다 */
  display: grid; grid-template-columns: repeat(4, 46px); gap: 6px;
  align-content: end;
}
.slot {
  width: 46px; height: 46px; border-radius: 10px; background: #1b2534dd; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 2px solid #40546e;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 18px; position: relative; cursor: pointer;
}
.slot .k { position: absolute; top: 1px; left: 4px; font-size: 9px; opacity: .6; }
.slot .lv { position: absolute; bottom: 1px; right: 4px; font-size: 9px; color: var(--exp); }
.slot.empty { opacity: .45; }
.slot.cd { filter: grayscale(1) brightness(.6); }
.slot.out { filter: grayscale(1); opacity: .62; }
.drag-source { touch-action: none; }
.drag-source:not(.empty) { cursor: grab; }
.drag-source:not(.empty):active { cursor: grabbing; }
.drag-ghost {
  position: fixed; z-index: 10000; pointer-events: none; display: flex; align-items: center; gap: 5px;
  max-width: 190px; padding: 6px 9px; border-radius: 9px; border: 2px solid #ffb347;
  background: #172230ee; color: #fff; box-shadow: 0 8px 20px #0009; font-size: 12px;
}
.drag-ghost span { font-size: 20px; }
.drag-active #game { outline: 4px solid #ffd16688; outline-offset: -4px; }
.drag-active #hotbar .slot { border-color: #ffd166; box-shadow: 0 0 8px #ffd16688; }
#chatwrap { display: flex; flex-direction: column; min-height: 0; }
#chatlog {
  max-height: 148px; overflow-y: auto; font-size: 12px; line-height: 1.55;
  background: #0e1620aa; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 9px; padding: 6px 9px; margin-bottom: 5px;
  scrollbar-width: thin;
}
#chatlog:empty { display: none; }
#chatlog .sys { color: #ffd93d; }
#chatlog .world { color: #7ee0ff; }
#chatlog .rogue-world { color:#ff596c; font-weight:800; text-shadow:0 0 7px #ff233f55; }
#chatlog .whisper { color: #ff9fe0; }
#chatlog .who { color: #9fe8b0; }
#chatlog b { color: #fff; }
#chatlog .chat-who {
  display:inline; width:auto; min-width:0; padding:0; border:0; border-radius:0;
  background:none; color:#fff; box-shadow:none !important; transform:none !important; filter:none !important;
  font:inherit; font-weight:bold; cursor:pointer;
}
#chatlog .chat-who:hover { color:#ffd36b; background:none; box-shadow:none !important; transform:none !important; filter:none !important; text-decoration:underline; }
.chat-user-menu { position:fixed; z-index:80; width:138px; padding:7px; border:2px solid #d29843; border-radius:9px; color:#263344; background:#fff7e5; box-shadow:0 8px 24px #07111d66; }
.chat-user-menu strong { display:block; padding:2px 4px 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-user-menu button { width:100%; margin-top:4px; padding:5px 7px; border-width:1px; font-size:10px; }
#chat-compose { display:flex; align-items:center; gap:5px; }
#chat-channel {
  flex:none; width:66px; padding:6px 5px; border-radius:9px; border:2px solid #40546e;
  background:#182536ee; color:#fff; font:700 11px inherit; cursor:pointer;
}
#chat-channel:focus { outline:none; border-color:var(--accent); }
#whisper-target {
  flex:none; width:96px; min-width:0; max-width:108px; padding:5px 7px; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; border:1px solid #e277bd; border-radius:8px;
  background:#4a2344; color:#ffd1ef; font:700 10px inherit;
}
#whisper-target::placeholder { color:#c98fb4; font-weight:400; }
#whisper-target:focus { outline:none; border-color:#ffd1ef; }
#chat-link-chip { flex:none; padding:5px 8px; border-radius:8px; border:1px solid #ffd36b; background:#5b421b; color:#ffe9a8; font-size:11px; cursor:pointer; }
.item-link { display:inline-flex; align-items:center; color:#e9edf2; border:1px solid #737c89; background:#252b34; border-radius:5px; padding:0 4px; margin-right:4px; cursor:pointer; font-weight:bold; }
.item-link .item-icon { display:inline-block; min-width:1.2em; text-align:center; filter:none; text-shadow:none; }
.mythic-item-icon { position:relative; display:inline-grid; width:1.34em; height:1.34em; place-items:center; vertical-align:-.24em; isolation:isolate; filter:drop-shadow(0 0 .18em #d6b5ff) drop-shadow(0 0 .34em #64d7e6aa); animation:mythicItemBreath 1.8s ease-in-out infinite alternate; }
.mythic-item-icon i,.mythic-item-icon b { position:absolute; z-index:3; color:#fff8cf; font:900 .34em/1 serif; text-shadow:0 0 .24em #fff,0 0 .42em #b997ff; }
.mythic-relic { border-radius:50%; background:radial-gradient(circle,#fffbd6 0 9%,#87edff 10% 17%,#8062d4 18% 30%,#2b234f 31% 40%,transparent 42%); }
.mythic-relic::before,.mythic-relic::after { content:''; position:absolute; inset:18% -5%; z-index:1; border:1.5px solid #e5c8ff; border-radius:50%; box-shadow:0 0 .2em #8eefff,inset 0 0 .18em #9a79ff; transform:rotate(30deg); }
.mythic-relic::after { inset:-3% 23%; border-color:#8ce9f5; transform:rotate(-32deg); }
.mythic-relic i { left:3%; top:4%; }.mythic-relic b { right:1%; bottom:5%; color:#91f5ff; }
.mythic-supernova { clip-path:polygon(50% 0,59% 27%,79% 8%,73% 35%,100% 37%,76% 52%,96% 71%,68% 66%,65% 96%,50% 72%,33% 98%,34% 68%,5% 76%,27% 54%,0 40%,29% 36%,18% 10%,42% 28%); background:conic-gradient(from 15deg,#fffbd2,#d8a7ff,#5fe5ef,#7b59d6,#fffbd2); }
.mythic-supernova::before { content:''; position:absolute; inset:27%; z-index:1; border:1px solid #fff7d0; border-radius:50%; background:radial-gradient(circle at 38% 32%,#fff 0 13%,#fff2a7 14% 30%,#d18cff 48%,#4b367c 72%); box-shadow:0 0 .22em #fff,0 0 .45em #a879ff; }
.mythic-supernova::after { content:''; position:absolute; inset:38% 4%; z-index:2; border:1px solid #b9f7ff; border-radius:50%; transform:rotate(-18deg); box-shadow:0 0 .2em #64e7f2; }
.mythic-supernova i { right:5%; top:8%; }
.mythic-sky-scale { border-radius:50% 50% 46% 46% / 62% 62% 38% 38%; background:conic-gradient(from 210deg,#fffbd2,#f0e9ff,#8ce9ff,#b997ff,#ffe9a8,#fffbd2); }
.mythic-sky-scale::before { content:''; position:absolute; inset:20%; z-index:1; border:1.5px solid #eafdff; border-radius:46% 46% 54% 54%; background:radial-gradient(circle at 50% 36%,#fff 0 18%,#d7ecff 32%,#7a5fd8 58%,#231a48 78%); box-shadow:0 0 .26em #fff,0 0 .5em #b997ff; transform:rotate(-12deg); }
.mythic-sky-scale::after { content:''; position:absolute; inset:-8% 28%; z-index:2; border:1px solid #b9f7ff; border-radius:50%; transform:rotate(-38deg); box-shadow:0 0 .22em #64e7f2,0 0 .42em #ffe9a8; }
.mythic-sky-scale i { left:6%; top:5%; color:#fff8cf; }.mythic-sky-scale b { right:2%; bottom:6%; color:#8ce9ff; }
@keyframes mythicItemBreath { from { transform:scale(.96); filter:drop-shadow(0 0 .12em #d6b5ff) drop-shadow(0 0 .22em #64d7e677); } to { transform:scale(1.04); filter:drop-shadow(0 0 .26em #f0dcff) drop-shadow(0 0 .48em #64d7e6cc); } }
.item-link.enhanced { text-shadow:0 0 5px currentColor; }
.item-link.chaos-item { border-color:#ffd55f; background:linear-gradient(135deg,#3b234e,#6e421c); box-shadow:0 0 8px #f4ba485c; }
.item-link.imperfect-item { border-color:#8d72b1; background:#302b3b; opacity:.9; }
.item-name.rarity-common { color:#303943; }.tip .rarity-common { color:#dfe5ed; }.item-name.rarity-uncommon,.tip .rarity-uncommon { color:#45a85e; }.item-name.rarity-rare,.tip .rarity-rare { color:#3989db; }.item-name.rarity-epic,.tip .rarity-epic { color:#9d5ddd; }.item-name.rarity-unique,.tip .rarity-unique { color:#e77726; }.item-name.rarity-legendary,.tip .rarity-legendary { color:#e1ae17; text-shadow:0 0 7px #ffd34d77; }.item-name.rarity-mythic,.tip .rarity-mythic { color:#d7afff; text-shadow:0 0 3px #ebd6ffaa,0 0 7px #8d5fe866; }
.item-link.rarity-common { color:#e9edf2; border-color:#737c89; }.item-link.rarity-uncommon { color:#86e496; border-color:#3f9d55; }.item-link.rarity-rare { color:#78bfff; border-color:#3989db; }.item-link.rarity-epic { color:#d2a2ff; border-color:#9d5ddd; }.item-link.rarity-unique { color:#ffad63; border-color:#e77726; }.item-link.rarity-legendary { color:#ffe26a; border-color:#e1ae17; box-shadow:0 0 7px #ffd34d55; }.item-link.rarity-mythic { color:#e5ccff; border-color:#a979e2; background:linear-gradient(100deg,#2d204b,#4f3a78 58%,#345f68); box-shadow:0 0 9px #9a65e788,inset 0 0 8px #8ee7e630; text-shadow:0 0 3px #d9c1ff77; }
.rarity-border-uncommon { border-color:#4fa966 !important; }.rarity-border-rare { border-color:#4a91da !important; }.rarity-border-epic { border-color:#9d64d3 !important; }.rarity-border-unique { border-color:#e77f32 !important; }.rarity-border-legendary { border-color:#ddb82e !important; box-shadow:inset 0 0 9px #ffd34d44; }.rarity-border-mythic { border-color:#a97ce2 !important; box-shadow:inset 0 0 11px #9e78e655,0 0 9px #6e9fd566; }
.item-scroll-icon { position:relative; display:inline-grid; place-items:center; width:1.34em; height:1.48em; border-radius:.2em .2em .28em .28em; vertical-align:-.22em; box-sizing:border-box; font:900 .72em/1 sans-serif; isolation:isolate; }
.item-scroll-icon::before,.item-scroll-icon::after { content:''; position:absolute; pointer-events:none; }
.item-scroll-icon i { position:relative; z-index:2; font:normal 1.05em/1 serif; }.item-scroll-icon b { position:absolute; z-index:3; right:-.32em; bottom:-.3em; min-width:1.35em; padding:.13em .2em; border-radius:.5em; color:#fff; background:#34234f; box-shadow:0 1px 3px #0007; font-size:.5em; }
.item-scroll-icon.corrupted { color:#e8d6ff; border:1px solid #9a6adb; background:linear-gradient(145deg,#3d285d 0 38%,#171425 40% 100%); box-shadow:0 0 .38em #914de899,inset 0 0 .32em #ba7df866; transform:rotate(-3deg); }
.item-scroll-icon.corrupted::before { inset:-.12em; z-index:-1; border:1px solid #6f43a8; border-radius:.26em; transform:rotate(7deg); opacity:.75; }.item-scroll-icon.corrupted::after { left:50%; top:48%; width:.14em; height:1.15em; background:linear-gradient(transparent,#bb7cff,transparent); transform:translate(-50%,-50%) rotate(45deg); filter:drop-shadow(0 0 .16em #bb76ff); }
.item-scroll-icon.corrupted.rate-30 { border-color:#c287ff; box-shadow:0 0 .48em #ae5cffbb,inset 0 0 .34em #d2a1ff77; }.item-scroll-icon.corrupted.rate-30 b { background:#6d3196; }
.item-scroll-icon.white { color:#8b759a; border:1px solid #d4c6df; background:linear-gradient(145deg,#fff 0 38%,#e8e3ed 42% 100%); box-shadow:0 0 .32em #e8dbffaa,inset 0 0 .3em #fff; transform:rotate(2deg); }
.item-scroll-icon.white::before { inset:-.1em; z-index:-1; border:1px solid #c8b7d6; border-radius:.27em; transform:rotate(-6deg); }.item-scroll-icon.white.pure { color:#7355b0; border-color:#ccb1ff; background:linear-gradient(135deg,#fff,#f4ecff 45%,#dff7ff); box-shadow:0 0 .5em #c48effaa,inset 0 0 .34em #fff; }.item-scroll-icon.white.pure b { background:linear-gradient(135deg,#8159c1,#3f8fa0); }
.item-scroll-icon.white.faded { color:#9a8d79; border-color:#cbbfa7; background:linear-gradient(145deg,#eee9dc,#cfc6b5); filter:saturate(.55); box-shadow:0 0 .22em #a99a8155,inset 0 0 .25em #fff8; }.item-scroll-icon.white.faded b { background:#756b5d; }
#chatinput {
  flex:1; min-width:0;
  width: 100%; padding: 7px 10px; border-radius: 9px; border: 2px solid #40546e;
  background: #0e1620dd; color: #fff; font-size: 12px; font-family: inherit; opacity: .55;
}
#chatinput:focus { opacity: 1; outline: none; border-color: var(--accent); }
#chatinput:focus {
  background:#0e1620ee !important; color:#fff !important; caret-color:#fff;
}
#chatinput::placeholder { color:#b9c0c9; opacity:.72; }
#mobile-chat-toggle { display:none; }

#menubar { flex: 0 0 auto; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }
#menubar button {
  flex: none; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  padding: 8px 10px; font-size: 11px;
  background: #1b2534dd; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff;
  border: 2px solid #40546e;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
#menubar button:hover { background: #2b3a4f; border-color: #5c7aa8; }
#menubar .menu-icon { display:inline-grid; place-items:center; width:15px; height:15px; flex:none; font-size:12px; line-height:1; filter:drop-shadow(0 1px 1px #0008); }

#menubar button[data-win="endgame"] {
  background: linear-gradient(135deg, #2b1a4d, #4a2b7a 45%, #143c5c);
  border-color: #9b6de8;
  box-shadow: 0 0 10px #8a5cf6aa, inset 0 0 12px #ffffff22;
  animation: endgameButtonBreath 2.4s ease-in-out infinite;
}
#menubar button[data-win="endgame"]:hover { background: linear-gradient(135deg, #3a2567, #5c3a96 45%, #1c4f78); }
#menubar button[data-win="endgame"] .menu-icon {
  color: #ffd76a; font-size:14px;
  filter: drop-shadow(0 0 4px #ffd76a) drop-shadow(0 0 9px #b78aff);
  animation: endgameSparkle 1.6s ease-in-out infinite;
}
@keyframes endgameButtonBreath {
  0%, 100% { box-shadow: 0 0 8px #8a5cf688, inset 0 0 10px #ffffff22; }
  50% { box-shadow: 0 0 18px #b78affbb, inset 0 0 14px #ffffff44; }
}
@keyframes endgameSparkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.25) rotate(15deg); }
}

/* ───────── 창 ───────── */
.win {
  position: absolute; background: linear-gradient(#fffdf5, #f3e6c8); color: var(--ink);
  border: 3px solid var(--line); border-radius: 14px; box-shadow: 0 12px 34px #000a;
  min-width: 260px; z-index: 20; pointer-events: auto;
}
.win .title {
  padding: 8px 12px; font-weight: bold; font-size: 13px; cursor: move;
  border-bottom: 2px solid var(--line); display: flex; align-items: center;
  background: linear-gradient(#ffe0a8, #f2c97a); border-radius: 10px 10px 0 0;
}
.win .title .x { margin-left: auto; cursor: pointer; padding: 0 4px; opacity: .7; }
.win .title .x:hover { opacity: 1; color: #c0392b; }
.win .body { padding: 10px 12px; font-size: 12px; max-height: 62vh; overflow-y: auto; }
.win.layout-stable-window > .body {
  height:min(var(--stable-body-height, 660px), calc(100vh - 92px));
  max-height:none; overflow-y:auto; overflow-anchor:none;
}
.win.layout-stable-window {
  width:min(var(--stable-window-width, 660px), calc(100vw - 16px));
  max-width:calc(100vw - 16px);
}

.player-card { width:310px; }
.player-summary { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.player-portrait {
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  border:2px solid #c8b184; border-radius:12px; background:#fff6df; font-size:34px;
}
/* 별무리는 얼굴 그림이 있다. 정사각 칸에 얼굴만 담기도록 배역마다 잘라내는 자리가 다르다
   (shared/asterism.js 의 faceCrop — 여기 200% 기준으로 맞춰져 있다). */
.player-portrait.cast { background-color:#efe6d5; background-size:200%; background-repeat:no-repeat; border-color:#a48fd6; }
.player-cast-line { margin-top:4px; color:#5c3f86; font-size:10px; }
.player-cast-line button { padding:1px 6px; border-color:#a48fd6; color:#fff; background:#5b4b9e; font-size:9px; }
.player-summary .name { font-size:17px; font-weight:900; }
.player-summary .meta { margin-top:3px; color:#6f6048; }
.player-equips { display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; margin:8px 0 11px; }
.player-equip {
  min-height:54px; padding:5px 3px; border:1px dashed #c8b184; border-radius:8px;
  background:#f8edcf; text-align:center; font-size:9px; color:#78684f;
}
.player-equip.filled { border-style:solid; background:#fffaf0; cursor:help; }
.player-equip .icon { display:block; min-height:24px; font-size:20px; }
.player-actions { display:flex; flex-wrap:wrap; gap:7px; }
.player-actions button { padding:8px 7px; }
.player-actions .hostility { flex-basis:100%; color:#8b2331; border-color:#c96069; background:#fff0ee; }
.player-actions .hostility:not(:disabled):hover { color:#fff; background:#b93648; border-color:#8f1f30; }

.notice-logo {
  position:relative; margin:-2px -4px 14px; padding:17px 10px 14px; overflow:hidden;
  border:2px solid #c78d2c; border-radius:13px; text-align:center;
  background:radial-gradient(circle at 50% 0,#fff7c8 0,#ffd56b 28%,#e79231 75%,#b95c21 100%);
  color:#4a2a13; box-shadow:inset 0 2px #fff9, inset 0 -5px 14px #8d351f55, 0 5px 13px #8c4b2433;
}
.notice-logo::before, .notice-logo::after { position:absolute; top:9px; color:#fff7ba; font-size:20px; text-shadow:0 2px 4px #8b431e; }
.notice-logo::before { content:'✦'; left:22px; transform:rotate(-12deg); }
.notice-logo::after { content:'✦'; right:22px; transform:rotate(12deg); }
.notice-logo .crest { display:block; font-size:10px; font-weight:900; letter-spacing:.24em; color:#236b69; }
.notice-logo strong { display:block; margin-top:1px; font-size:25px; letter-spacing:-.06em; text-shadow:0 2px #fff7ad, 0 4px 8px #94432455; }
.notice-window .body { max-height:min(720px, 76vh); }
.notice-head { padding:9px 10px; border-left:4px solid var(--accent); border-radius:7px; background:#fff8e7; }
.notice-date { color:#8b7553; font-size:10px; font-weight:bold; }
.notice-title { margin-top:2px; font-size:16px; font-weight:900; }
.notice-latest { padding-bottom:2px; }
.notice-pinned .notice-head {
  border-left-color: #b8860b; background: linear-gradient(180deg, #fff3cf, #ffe8b0);
  box-shadow: 0 0 10px #e8b04a66, inset 0 0 0 1px #e6c878;
}
.notice-pinned .notice-date { color:#a9701f; }
.notice-pinned .notice-title { color:#5c3a0a; text-shadow:0 1px #fff2bd; }
.notice-list { margin:10px 0 12px; padding-left:21px; line-height:1.65; }
.notice-list li { margin:5px 0; }
.notice-archive { margin:9px 0 13px; padding-top:10px; border-top:1px solid #d8c59b; }
.notice-archive-title { margin:0 2px 7px; color:#6d5839; font-size:12px; font-weight:900; }
.notice-archive-item { margin:5px 0; border:1px solid #d8c49a; border-radius:8px; background:#fffaf0; overflow:hidden; }
.notice-archive-item summary { display:grid; grid-template-columns:74px 1fr 18px; align-items:center; gap:7px; padding:9px 10px; cursor:pointer; list-style:none; color:#3c3428; }
.notice-archive-item summary::-webkit-details-marker { display:none; }
.notice-archive-item summary:hover { background:#fff2d4; }
.notice-archive-item summary time { color:#8b7553; font-size:10px; font-weight:700; }
.notice-archive-item summary span { font-size:12px; font-weight:900; }
.notice-archive-item summary b { color:#b56a1f; font-size:14px; text-align:center; transition:transform .18s; }
.notice-archive-item[open] summary b { transform:rotate(180deg); }
.notice-archive-item .notice-list { margin:0; padding:8px 14px 11px 31px; border-top:1px solid #eadbbe; background:#fffdf7; }
.notice-dismiss {
  position:sticky; z-index:3; bottom:-10px; display:flex; justify-content:flex-end; align-items:center; gap:6px;
  margin:4px -2px -10px; padding:10px 4px 11px; border-top:1px solid #ddc89c;
  color:#6f6048; background:linear-gradient(180deg,#fffaf0ee 0,#fff8e7 35%); font-size:11px; cursor:pointer;
  box-shadow:0 -7px 12px #fffaf0cc;
}
.notice-dismiss input { accent-color:var(--accent); }

.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tabs button { padding: 5px 10px; font-size: 11px; }
.tabs button.on { background: var(--accent); color: #fff; border-color: #c9741f; }
.skill-tabs { position: sticky; top: 0; z-index: 2; padding: 2px 0 7px; background: var(--panel, #fffaf0); }
.skill-tabs button { flex: 1; min-width: 62px; }
.skill-point-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid #dbc28e; border-radius: 10px; background: #fff7df; color: #5b4a36; }
.skill-point-summary b { font-size: 13px; color: #c66d18; }
.skill-point-summary span { font-size: 11px; }
.skill-point-summary strong { color: #2a7ac0; font-size: 13px; }
.tip .fixed-effect-title { margin-top: 7px; padding-top: 6px; border-top: 1px solid #8e76ad66; color: #ffe089; font-weight: 900; }
.tip .fixed-effect-line { color: #fff0ad; font-weight: 800; text-shadow: 0 1px 3px #000; }
.invasion-reward-window { width: min(570px, calc(100vw - 20px)); }
.invasion-reward-window .body { padding: 18px; }
.invasion-reward-hero { display: grid; grid-template-columns: 54px 1fr; gap: 2px 12px; align-items: center; margin-bottom: 12px; padding: 14px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #56356f, #8b3f64 58%, #c56a4e); box-shadow: inset 0 0 24px #f6d5ff24; }
.invasion-reward-hero > span { grid-row: 1 / 3; font-size: 38px; text-align: center; filter: drop-shadow(0 0 8px #fff2ae); }
.invasion-reward-hero b { font-size: 18px; }
.invasion-reward-hero small { color: #f8e8ff; }
.invasion-basic-rewards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.invasion-basic-rewards div { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; border: 1px solid #d2b678; border-radius: 11px; background: #fff6d8; }
.invasion-basic-rewards i { color: #695944; font-style: normal; }
.invasion-basic-rewards strong { color: #c77216; font-size: 15px; }
.invasion-guarantee-note { margin:-3px 0 12px; padding:8px 10px; border-radius:9px; color:#78511f; background:#fff0c5; text-align:center; font-weight:800; }
.invasion-reward-hero.rift { background:linear-gradient(135deg,#2f2454,#59448f); }
.invasion-reward-hero.raid { background:linear-gradient(135deg,#4b260e,#9a591c 54%,#d6a43b); box-shadow:inset 0 0 30px #fff1a52b,0 8px 28px #4b260e33; }
.invasion-reward-hero.rogue { background:linear-gradient(135deg,#1b0a12,#78152b 58%,#261020); box-shadow:inset 0 0 30px #ff74852b,0 8px 28px #31081155; }
.rogue-lottery-note { margin:-3px 0 10px; padding:8px 10px; border-radius:9px; color:#7a2334; background:#ffe5e9; text-align:center; font-weight:800; }
.rogue-lottery-list { display:grid; gap:7px; max-height:300px; overflow:auto; }
.rogue-lottery-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:2px 9px; align-items:center; padding:9px 10px; border:1px solid #d8b5bc; border-radius:10px; background:linear-gradient(135deg,#fffaf7,#f5e4e7); animation:rogueLotteryReveal .42s ease-out both; animation-delay:var(--lottery-delay); }
.rogue-lottery-row.won { border-color:#e19b20; background:linear-gradient(135deg,#fff6c7,#ffe0a1); box-shadow:0 0 15px #ffbf3b55; }
.rogue-lottery-icon { grid-row:1/3; font-size:27px; text-align:center; }
.rogue-lottery-row span b { display:block; color:#4b2730; }.rogue-lottery-row span small { display:block; color:#8d6870; font-size:9px; }
.rogue-lottery-row > strong { color:#b51e3d; text-align:right; }.rogue-lottery-row > i { grid-column:3; color:#8b6570; font-size:9px; font-style:normal; text-align:right; }
@keyframes rogueLotteryReveal { from { opacity:0; transform:translateX(18px); filter:blur(2px); } to { opacity:1; transform:none; filter:none; } }
.raid-reward-window .title .keys { color:#f4d993; }
.raid-reward-summary { margin:10px 4px 0; color:#6d5436; font-weight:700; line-height:1.55; text-align:center; }
.invasion-no-bonus { padding: 18px; border: 1px dashed #c5aa78; border-radius: 11px; text-align: center; color: #726654; background: #fffaf0; }
.invasion-reward-ok { display: block; width: 180px; margin: 14px auto 0; }

.grid { display: grid; grid-template-columns: repeat(8, 38px); gap: 4px; }
.cell {
  width: 38px; height: 38px; border-radius: 7px; background: #e7d8b4; border: 2px solid #c8b184;
  position: relative; display: flex; align-items: center; justify-content: center;
  font-size: 17px; cursor: pointer;
}
.cell:hover { border-color: var(--accent); }
.cell .q { position: absolute; right: 2px; bottom: 0; font-size: 9px; font-weight: bold; }
.cell .slot-stars { position:absolute; left:2px; top:1px; padding:0 2px; border-radius:4px; color:#ffd34d; background:#33204dcc; font-size:8px; font-weight:900; line-height:12px; text-shadow:0 1px #000; }
.item-stars { color:#e4a900; font-size:.82em; font-style:normal; white-space:nowrap; text-shadow:0 1px #fff; }
.cell.empty { cursor: default; opacity: .55; }
.drag-active .grid .cell[data-inventory-index] { border-color:#ffb04d; box-shadow:0 0 0 2px #ffb04d44,inset 0 1px 2px #fff9; opacity:1; }
.inventory-sort { flex:0 0 auto !important; min-width:58px; margin-left:4px; }
.scroll-target-banner { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 9px; padding:9px 10px; border:2px solid #d99a31; border-radius:10px; background:linear-gradient(135deg,#fff4c8,#ffe1a4); box-shadow:0 3px 10px #8a571f26; }
.scroll-target-banner span { display:flex; flex-direction:column; min-width:0; }
.scroll-target-banner b { color:#a9550a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scroll-target-banner small { color:#70563a; margin-top:2px; }
.scroll-target-banner button { flex:0 0 auto; padding:6px 10px; color:#8d321f; border-color:#bd755b; background:#fffaf0; }

.eqgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 10px; }
.eqslot {
  border: 2px dashed #c8b184; border-radius: 8px; padding: 5px; text-align: center; font-size: 10px;
  background: #efe2c2; cursor: pointer; min-height: 46px;
}
.eqslot.filled { border-style: solid; background: #fff6df; }
.eqslot .n { font-size: 10px; font-weight: bold; display: block; margin-top: 2px; }

.statrow { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.statrow .lab { width: 74px; opacity: .8; }
.statrow .val { font-weight: bold; }
.statrow button { flex: none; width: 22px; height: 22px; padding: 0; font-size: 14px; line-height: 1; }
.statrow .stat-info-trigger { width:74px; height:auto; display:flex; align-items:center; padding:2px 4px; border:0; border-radius:5px; background:transparent; box-shadow:none; color:#4f5b67; font-size:12px; font-weight:500; text-align:left; }
.statrow .stat-info-trigger:hover,.statrow .stat-info-trigger.on { transform:none; color:#74479a; background:#eee4f7; box-shadow:none; }
.stat-metric { padding:1px 0; }
.ap-ledger { margin-left:auto; color:#745990; font-size:9px; }
.stat-explanation { display:grid; gap:4px; margin:7px 0 9px; padding:9px 10px; border:1px solid #bfa7d2; border-radius:9px; background:linear-gradient(145deg,#fbf7ff,#eee5f6); color:#5e5268; line-height:1.45; }
.stat-explanation b { color:#69418b; font-size:13px; }.stat-explanation span,.stat-explanation small { display:block; }.stat-explanation span { color:#514659; font-size:11px; }.stat-explanation small { color:#796b80; }.stat-explanation strong { color:#70469a; }
.stat-guide { margin:7px 0; padding:8px 9px; border:1px solid #d7b67b; border-radius:8px; background:#fff5d8; font-size:10px; line-height:1.45; color:#725019; }
.stat-auto { width:100%; margin:6px 0 2px; padding:7px 9px; border-width:1px; font-size:11px; }
hr { border: none; border-top: 1px solid #d9c69b; margin: 8px 0; }

.skillrow { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; }
.skillrow:hover { background: #ffffff8c; }
.skillrow .ic { font-size: 20px; width: 26px; text-align: center; }
.skillrow .ic.drag-source { border-radius: 7px; outline: 1px dashed #b89b6a; }
.skillrow .nm { font-weight: bold; }
.skillrow .ds { font-size: 10px; opacity: .7; }
.skillrow .lv { margin-left: auto; font-weight: bold; }
.skillrow button { flex: none; width: 24px; height: 24px; padding: 0; }
.list-loading { padding: 24px 12px; text-align: center; color: #775a2a; font-weight: bold; }

.qrow { padding: 7px 8px; border-radius: 8px; margin-bottom: 5px; background: #ffffff7a; }
.qrow .qn { font-weight: bold; }
.qrow .qd { font-size: 11px; opacity: .8; margin: 3px 0; }
.qrow .qp { font-size: 11px; }
.qrow .qp.ok { color: #1f8a3f; font-weight: bold; }
.qrow button { margin-top: 5px; padding: 5px 8px; font-size: 11px; }
.quest-skip-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-2px 0 8px; padding:8px 9px; border:1px solid #d5b56f; border-radius:9px; background:linear-gradient(135deg,#fff6d9,#f2e1bb); }
.quest-skip-toolbar > span { display:flex; flex-direction:column; min-width:0; }
.quest-skip-toolbar b { color:#805315; font-size:11px; }
.quest-skip-toolbar small { margin-top:1px; color:#7a6a52; font-size:9px; }
.quest-skip-toolbar button { flex:none; padding:6px 9px; color:#693d13; border-color:#bc8a50; background:#fffaf0; font-size:10px; }
.quest-actions { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.quest-actions button { margin-top:5px; }
.quest-actions .quest-skip { color:#704294; border-color:#9d79b8; background:linear-gradient(#faf4ff,#eadcf5); }
.quest-skipped-badge { display:inline-block; margin-left:5px; padding:1px 5px; border-radius:8px; color:#6c4688; background:#eadcf5; font-size:9px; vertical-align:1px; }
.quest-skip-guide-window { z-index:50 !important; }
.quest-skip-guide-window .body { width:auto; padding:16px 18px 18px; }
.quest-skip-guide { text-align:center; }
.quest-skip-guide-icon { width:52px; height:52px; display:grid; place-items:center; margin:0 auto 8px; border-radius:50%; color:#fff; background:linear-gradient(145deg,#a16bcc,#64418d); box-shadow:0 5px 13px #55316f44,inset 0 2px #fff5; font-size:25px; }
.quest-skip-guide h3 { margin:0 0 6px; color:#493055; font-size:17px; }
.quest-skip-guide p { margin:0 0 10px; color:#655b69; font-size:12px; }
.quest-skip-rule { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0 0 9px; }
.quest-skip-rule > * { padding:9px 7px; border-radius:8px; }
.quest-skip-rule b { color:#fff; background:#7f55a3; font-size:14px; }
.quest-skip-rule span { color:#874b35; background:#ffe5d7; font-size:11px; font-weight:800; }
.quest-skip-guide small { display:block; margin-bottom:12px; color:#796d62; line-height:1.5; }
.quest-skip-guide button { min-width:150px; padding:8px 16px; }

.shoprow { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; }
.shoprow:hover { background: #ffffff8c; }
.shoprow .nm { flex: 1; }
.shoprow .pr { color: #b8860b; font-weight: bold; }
.shoprow button { flex: none; width: auto; padding: 4px 9px; font-size: 11px; }
.fame-shop-balance { display:flex; align-items:baseline; gap:8px; padding:9px 11px; margin-bottom:7px; border-radius:9px; background:#34254a; color:#f4e9ff; }
.fame-shop-balance b { color:#ffe47e; font-size:15px; }
.fame-shop-balance small { margin-left:auto; opacity:.72; }
.fame-shop-row { min-width:480px; border-bottom:1px solid #d8c79b66; }
.fame-shop-row .nm .mini { display:inline-block; max-width:280px; white-space:pre-line; line-height:1.35; }
.fame-shop-note { margin-top:9px; padding:8px 10px; border-radius:8px; background:#fff7d9; line-height:1.55; }
.vanity-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:6px 0 8px; }
.vanity-slot { min-width:0; display:flex; align-items:center; gap:6px; padding:5px 7px; font-size:10px; text-align:left; }
.vanity-slot.pet-slot { grid-column:1 / -1; }
.vanity-slot.sleeping { filter:grayscale(1); opacity:.65; }
.pet-time { margin-top:4px; color:#9ee7ad; font-weight:bold; }
.pet-time.sleeping { color:#aaa; }
.mini { font-size: 10px; opacity: .65; }

#npcdlg .body { width:min(560px, calc(100vw - 48px)); max-width:none; font-size:15px; }
.npc-dialog-layout { display:grid; grid-template-columns:112px minmax(0,1fr); gap:14px; align-items:start; }
.npc-dialog-main { min-width:0; }
.npc-portrait-card {
  display:grid; justify-items:center; gap:7px; padding:10px 8px 9px; border:2px solid #d7bd82;
  border-radius:14px; background:linear-gradient(160deg,#fff9e9,#ead9af); color:#574329; text-align:center;
  box-shadow:inset 0 1px #fff, 0 4px 12px #6845161c;
}
.npc-portrait-card > b { max-width:100%; font-size:12px; line-height:1.25; }
.npc-portrait {
  position:relative; width:92px; height:92px; overflow:hidden; border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#fffdf5 0 43%,#dbe8d0 44% 70%,#b8d2ac 71%);
  box-shadow:inset 0 0 0 3px #fff9, 0 2px 8px #5f4a2833;
}
.npc-portrait i { position:absolute; display:block; pointer-events:none; }
.npc-bust { z-index:1; left:17px; bottom:-13px; width:58px; height:45px; border-radius:28px 28px 8px 8px; background:var(--npc-cloth); box-shadow:inset 0 4px #fff2; }
.npc-face-head { z-index:2; left:20px; top:23px; width:52px; height:55px; border-radius:47% 47% 44% 44%; background:var(--npc-skin); box-shadow:inset 0 -5px #b9784b13; }
.npc-face-hair { z-index:3; left:16px; top:16px; width:60px; height:34px; border-radius:48% 52% 35% 35%; background:var(--npc-hair); transform:rotate(-2deg); }
.npc-face-lock { z-index:3; top:35px; width:13px; height:34px; border-radius:50%; background:var(--npc-hair); }
.npc-face-lock.left { left:15px; transform:rotate(8deg); }
.npc-face-lock.right { right:15px; transform:rotate(-8deg); }
.npc-face-hat { z-index:5; left:13px; top:10px; width:66px; height:21px; border-radius:32px 32px 8px 8px; background:var(--npc-hat); box-shadow:0 5px 0 -1px var(--npc-hat), inset 0 3px #fff2; }
.npc-face-eye { z-index:4; top:50px; width:5px; height:7px; border-radius:50%; background:#29241f; box-shadow:inset 1px 1px #fff9; }
.npc-face-eye.left { left:35px; }
.npc-face-eye.right { right:35px; }
.npc-face-mouth { z-index:4; left:42px; top:64px; width:9px; height:5px; border-bottom:2px solid #a44f55; border-radius:0 0 9px 9px; }
.npc-greet {
  background: #fff8e0; border: 2px solid #e0cda0; border-radius: 10px; padding: 9px 11px;
  min-height:3.2em; margin-bottom: 9px; font-size:15px; line-height: 1.6;
}
.npc-greet-text { display:block; width:100%; }
.npc-greet-text.revealing {
  animation:npcTextReveal var(--npc-reveal-duration, 360ms) cubic-bezier(.32,.18,.72,.86) both;
  will-change:clip-path;
}
.shop-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.shop-head b { color:#b8860b; }.shop-head > span:last-child { color:#77592d; font-size:10px; font-weight:800; }
.shop-drop-zone { margin:0 0 8px; padding:9px 12px; border:2px dashed #bd9560; border-radius:9px; color:#795827; background:#fff4d6; text-align:center; font-size:11px; font-weight:800; transition:.15s ease; }
.drag-active .shop-window .shop-drop-zone { border-color:#ff8c32; color:#9c480f; background:#ffe0ad; box-shadow:inset 0 0 12px #ff9f4340,0 0 10px #ff9f4355; }
.shop-buyback { margin-top:10px; padding-top:7px; border-top:1px solid #cdb789; }.shop-buyback h4 { margin:0 0 5px; }.shop-buyback h4 small { margin-left:5px; color:#806d50; font-size:9px; font-weight:500; }
.buyback-row { background:#fff8e8; }.buyback-row .item-name { font-weight:900; }.shop-buyback-empty { padding:9px; border-radius:7px; background:#efe4cc; text-align:center; }
.shop-sell-help { margin-top:8px; color:#6d604d; }
@keyframes npcTextReveal {
  from { clip-path:inset(0 100% 0 0); }
  to { clip-path:inset(0 0 0 0); }
}
.npc-actions button { display:block; width:100%; margin-bottom:7px; padding:9px 12px; font-size:14px; text-align:left; }

.death-box {
  position: fixed; width: 226px; box-sizing: border-box; pointer-events: auto;
  background: linear-gradient(#fffdf5, #f3e6c8); color: var(--ink); padding: 15px 18px;
  border-radius: 14px; border: 3px solid var(--line); text-align: center;
  box-shadow: 0 8px 24px #0a172766;
}
.death-box::after { content:''; position:absolute; left:50%; bottom:-10px; width:16px; height:16px; background:#f3e6c8; border-right:3px solid var(--line); border-bottom:3px solid var(--line); transform:translateX(-50%) rotate(45deg); }
.death-box h2 { margin: 0 0 5px; font-size:18px; }
.death-box p { font-size: 11px; opacity: .75; margin:0 0 10px; }
#death { background:transparent; pointer-events:none; }
#death .death-box button { position:relative; z-index:1; padding:7px 13px; }

#toasts {
  position: fixed; left: 50%; top: 76px; transform: translateX(-50%); z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none;
}
.toast {
  background: #1b2534e6; border: 2px solid var(--accent); border-radius: 10px;
  padding: 6px 14px; font-size: 12px; animation: pop .3s;
}
@keyframes pop { from { transform: translateY(-8px); opacity: 0; } }

.tip {
  position: fixed; z-index: 60; background: #1b2534f2; color: #fff; border: 2px solid var(--accent);
  border-radius: 9px; padding: 7px 10px; font-size: 11px; line-height: 1.6; max-width: 220px;
  max-height: calc(100vh - 16px); overflow: hidden; box-sizing: border-box; pointer-events: none;
}
.tip .tn { font-weight: bold; }.tip .tn small { margin-left:5px; font-size:9px; opacity:.75; }
.tip .up { color:#cfa8ff; font-weight:bold; }
.tip .unique-title { color:#ffcc47; font-weight:900; border-top:1px solid #ffffff30; margin-top:5px; padding-top:4px; }
.tip .unique-line { color:#ffd86a; font-weight:bold; }
.tip .grade-note { margin:4px 0 6px; padding:5px 7px; border-radius:6px; font-weight:800; line-height:1.35; }
.tip .grade-note.chaos { color:#ffe690; border:1px solid #d6a83f; background:linear-gradient(135deg,#54284c,#65421e); box-shadow:inset 0 0 8px #ffcd5340; }
.tip .grade-note.imperfect { color:#cbbbe0; border:1px solid #746887; background:#34303d; }
.tip.chaos-tip { border-color:#f3bd46; box-shadow:0 0 18px #f0a92c77,0 7px 22px #0009; }
.tip.tip-rarity-common { border-color:#7d8794; box-shadow:0 7px 22px #0009; }
.tip.tip-rarity-uncommon { border-color:#4fa966; box-shadow:0 0 8px #4fa96644,0 7px 22px #0009; }
.tip.tip-rarity-rare { border-color:#4a91da; box-shadow:0 0 9px #4a91da55,0 7px 22px #0009; }
.tip.tip-rarity-epic { border-color:#9d64d3; box-shadow:0 0 10px #9d64d366,0 7px 22px #0009; }
.tip.tip-rarity-unique { border-color:#e77f32; box-shadow:0 0 10px #e77f3266,0 7px 22px #0009; }
.tip.tip-rarity-legendary { border-color:#ddb82e; box-shadow:0 0 11px #ffd34d66,0 7px 22px #0009; }
.tip.tip-rarity-mythic { border-color:#a97ce2; box-shadow:0 0 10px #a97ce277,0 0 16px #6e9fd544,0 7px 22px #0009; }
.tip .tip-desc { opacity:.78; margin-top:6px; padding-top:5px; border-top:1px solid #ffffff20; white-space:pre-line; line-height:1.45; }

#raid-hud {
  position:absolute; left:50%; top:14px; transform:translateX(-50%); min-width:360px;
  padding:8px 14px; border:2px solid #ff8b5c; border-radius:12px; text-align:center;
  background:#261824e8; box-shadow:0 7px 24px #0009; font-size:12px;
}
#raid-hud strong { display:block; color:#ffd166; margin-top:3px; animation:raidWarn .55s alternate infinite; }
@keyframes raidWarn { to { transform:scale(1.04); color:#ff6b6b; } }
.raid-note { background:#31253de8; color:#ffe4ae; border-radius:9px; padding:8px 10px; margin-bottom:8px; }
.raid-card { display:grid; grid-template-columns:42px 1fr 110px; gap:10px; align-items:center; padding:10px; margin-bottom:7px; border-left:5px solid var(--raid); border-radius:10px; background:#fff9; }
.raid-card .raid-icon { font-size:27px; text-align:center; }
.raid-card p { margin:3px 0; font-size:11px; }
.raid-card small { opacity:.7; }
.reward-toggle { display:block; width:auto; min-width:0; margin:6px 0 0; padding:4px 8px; border-width:1px; border-radius:7px; color:#76501d; background:#fff6dc; font-size:10px; }
.reward-preview { margin-top:6px; padding:7px; border:1px solid #dfca9f; border-radius:9px; background:#f6ecd7; }
.reward-popover-anchor { position:relative; z-index:4; width:max-content; max-width:100%; }
.reward-popover-anchor:has(.reward-preview) { z-index:18; }
.reward-popover-anchor > .reward-preview {
  position:absolute; z-index:20; left:0; top:calc(100% + 3px);
  width:min(610px, calc(100vw - 56px)); max-height:min(330px, 48vh); overflow:auto;
  margin:0; box-shadow:0 13px 30px #15101d73,0 2px 7px #5f431d42;
  animation:rewardPopoverIn .14s ease-out;
}
@keyframes rewardPopoverIn { from { opacity:0; transform:translateY(-4px) scale(.99); } to { opacity:1; transform:none; } }
.reward-slots { display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; }
.reward-slot { position:relative; flex:0 0 62px; width:62px; min-width:62px; height:70px; padding:4px 3px 3px; overflow:hidden; border-width:2px; border-radius:8px; background:radial-gradient(circle at 42% 24%,#fffef6,#e9d9b8); }
.reward-slot > span { display:block; height:28px; font-size:22px; line-height:28px; }
.reward-slot > small { display:block; margin-top:3px; overflow:hidden; color:#534a3b; font-size:8px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.reward-slot > i { position:absolute; top:2px; right:2px; max-width:48px; padding:1px 3px; overflow:hidden; border-radius:4px; color:#fff; background:#6b436f; font-size:7px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.reward-slot.chaos-reward { border-color:#a97ce2; background:radial-gradient(circle at 38% 23%,#f7edff,#c7a6e6 45%,#574077 76%,#304e63); box-shadow:0 0 10px #9f70e8aa,inset 0 0 9px #d9f7ff99; animation:chaosRewardGlow 1.05s ease-in-out infinite alternate; }
.reward-slot.chaos-reward::after { content:'✦'; position:absolute; left:3px; top:1px; color:#e9dcff; font-size:11px; text-shadow:0 0 5px #fff,0 0 8px #8cdfe1; }
.reward-slot.imperfect-reward { border-color:#8e7ca5; background:radial-gradient(circle at 38% 23%,#ece8f0,#c8bdcb 55%,#8d8292); filter:saturate(.72); }
@keyframes chaosRewardGlow { to { filter:brightness(1.1); box-shadow:0 0 15px #a87bedcc,0 0 22px #69c7d477,inset 0 0 10px #fff; } }
.reward-preview > p { margin:6px 1px 0; color:#776750; font-size:9px; }
.invasion-actions { display:flex; gap:6px; align-items:center; width:100%; }.invasion-actions .reward-toggle { margin:0; }.invasion-actions [data-invasion-map] { margin-left:auto; }
.raid-my { margin:10px 0; padding:10px; background:#fff2c9; border:2px solid #d49a42; border-radius:10px; }
.raid-actions { display:flex; gap:6px; margin-top:8px; }
.raid-lobby { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#ffffff80; padding:7px 9px; border-radius:8px; margin-bottom:5px; }
.raid-lobby button { flex:0 0 70px; padding:5px; }
.raid-link button { display:inline-block; width:auto; padding:1px 7px; margin-left:5px; border-width:1px; font-size:10px; }
.raid-link.closed { opacity:.55; }

.auction-tools { display:flex; gap:5px; margin-bottom:8px; }
.auction-tools input { flex:1; padding:6px; }
.auction-detail { margin:-2px 0 8px; padding:5px 8px; border:1px solid #d9bf8d; border-radius:8px; background:#fff8e8; }
.auction-detail summary { cursor:pointer; color:#825a22; font-size:11px; font-weight:bold; }
.auction-detail-grid { display:grid; grid-template-columns:repeat(4,minmax(105px,1fr)); gap:5px; align-items:end; margin-top:7px; }
.auction-detail-grid label { display:flex; flex-direction:column; gap:2px; min-width:0; color:#806c4a; font-size:9px; }
.auction-detail-grid input, .auction-detail-grid select { width:100%; min-width:0; padding:5px; border:1px solid #bfa572; border-radius:6px; background:#fff; font:inherit; }
.auction-detail-grid button { padding:6px 8px; white-space:nowrap; }
.auction-mode { display:flex; gap:6px; margin-bottom:8px; }
.auction-mode button { padding:6px 12px; }
.auction-mode button.on { background:var(--accent); border-color:#c9741f; color:#fff; }
.auction-guide { margin-bottom:9px; padding:6px 8px; border-radius:7px; background:#fff3cf; }
.auction-lock { padding:38px 24px; border:2px dashed #c9a96c; border-radius:12px; background:#fff8e7; text-align:center; color:#5f4a27; }
.auction-lock strong { display:block; margin-bottom:10px; color:#b56818; font-size:24px; }
.auction-lock p { margin:0 0 12px; }
.auction-lock span { font-weight:bold; }
.auction-sell-grid { display:grid; grid-template-columns:repeat(4, minmax(112px, 1fr)); gap:5px; max-height:210px; overflow:auto; margin-bottom:9px; }
.auction-sell-item {
  position:relative; display:grid; grid-template-columns:28px 1fr; align-items:center; gap:5px;
  min-width:0; padding:6px; text-align:left; font-size:10px; font-weight:normal;
}
.auction-sell-item span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.auction-sell-item i { position:absolute; right:4px; bottom:1px; color:#9c6909; font-size:9px; font-style:normal; font-weight:bold; }
.auction-sell-item.selected { border-color:var(--accent); background:#ffe0a8; box-shadow:inset 0 0 0 1px var(--accent); }
.auction-pick-hint { padding:22px; border:2px dashed #c8b184; border-radius:9px; color:#806c4a; text-align:center; }
.auction-sell-form { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:7px; align-items:end; padding:9px; border:2px solid #d7bc83; border-radius:10px; background:#fff8e8; }
.auction-sell-picked { grid-column:1 / -1; display:flex; align-items:center; gap:7px; font-size:15px; }
.auction-sell-picked span { margin-left:auto; font-size:10px; opacity:.65; }
.auction-sell-form label { display:flex; flex-direction:column; gap:3px; font-size:10px; font-weight:bold; }
.auction-sell-form input, .auction-sell-form select { min-width:0; width:100%; padding:6px; border:1px solid #b89b6a; border-radius:7px; background:#fff; font:inherit; }
.auction-sell-form button { padding:7px 10px; }
.auctionrow { display:grid; grid-template-columns:1fr 88px 90px 58px; gap:6px; align-items:center; padding:6px; border-radius:7px; background:#ffffff85; margin-bottom:4px; }
.auctionrow.pending { background:#fff0c2; border:1px dashed #d2942e; }
.auctionrow.pending .mini { color:#b36a08; opacity:1; font-weight:bold; }
.auctionrow .avg { font-size:10px; opacity:.7; }
.auctionrow button { padding:4px 6px; font-size:10px; }
.auction-pager { display:flex; align-items:center; justify-content:center; gap:5px; padding:9px 4px 2px; position:sticky; bottom:0; background:linear-gradient(180deg,#fff8e400,#fff8e4 28%); }

/* 우편함 / 외형 변경 */
.mail-list { display:flex; flex-direction:column; gap:8px; }
.mail-card { padding:11px 12px; border:1px solid #cfb37e; border-left:5px solid #d8c39a; border-radius:10px; background:#fffaf0; color:var(--ink); }
.mail-card.unread { border-left-color:var(--accent); box-shadow:0 3px 10px #9b610a18; }
.mail-card.claimed { opacity:.6; }
.mail-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:3px; }
.mail-head strong { font-size:13px; }
.mail-head time { font-size:10px; color:#8e7a57; }
.mail-from { font-size:10px; color:#8e7a57; margin-bottom:5px; }
.mail-attachments { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:6px; padding-top:6px; border-top:1px solid #e8d8b5; }
.mail-attachments span { font-size:11px; }
.mail-attachments button { margin-left:auto; padding:4px 10px; }
.auction-pager button { min-width:32px; padding:5px 8px; }
.auction-pager button.on { background:var(--accent); border-color:#c9741f; color:#fff; font-weight:bold; }
.auction-pager span { margin-left:7px; font-size:10px; opacity:.7; white-space:nowrap; }
.raid-difficulties { display:flex; gap:4px; margin:5px 0; }
.raid-difficulty { padding:3px 8px; font-size:10px; min-width:58px; }
.raid-difficulty.on { color:#fff; background:var(--raid,#ca7c30); border-color:var(--raid,#ca7c30); }
.raid-chat-difficulty { display:inline-block; margin:0 2px; font-size:10px; font-weight:900; letter-spacing:.02em; color:#dce8f7; }
.raid-chat-difficulty.raid-easy { color:#80d69d; }
.raid-chat-difficulty.raid-normal { color:#7fc8ff; }
.raid-chat-difficulty.raid-hard { color:#ff877d; text-shadow:0 0 7px #ff4c454f; }
.raid-chat-difficulty.raid-weekly { color:#e0a7ff; text-shadow:0 0 7px #bd67ff4f; }
.raid-requirement { margin:7px 0; padding:6px 8px; border-radius:7px; background:#2b2039; color:#ffe499; font-size:11px; }
#raid-hud em { color:#ffe16e; font-style:normal; }
.naver-cafe-link { display:inline-flex; align-items:center; gap:6px; width:max-content; color:#2a6d48; text-decoration:none; font-size:11px; font-weight:800; }
.naver-cafe-link:hover { color:#16884c; text-decoration:underline; }
.naver-n { display:inline-grid; place-items:center; width:21px; height:21px; border-radius:6px; color:#fff; background:#03c75a; box-shadow:0 2px 5px #0003; font:900 13px/1 Arial,sans-serif; }
.login-cafe { margin:9px auto 0; padding:7px 10px; border:1px solid #8ed9ad; border-radius:8px; background:#f0fff6; }
.notice-logo .naver-cafe-link { margin-left:auto; color:#48624f; }
.feedback-form { display:grid; gap:9px; min-width:440px; }
.feedback-form > p { margin:0 0 3px; padding:8px 10px; border-radius:8px; background:#fff1cf; color:#735727; font-size:11px; line-height:1.45; }
.feedback-form label { display:grid; gap:4px; font-size:11px; font-weight:bold; }
.feedback-form input, .feedback-form select, .feedback-form textarea { width:100%; padding:8px 9px; border:1px solid #b89b6a; border-radius:7px; background:#fffdf7; color:#342817; font:inherit; resize:vertical; }
.feedback-form textarea { min-height:110px; line-height:1.5; }
.feedback-form input:focus, .feedback-form textarea:focus { outline:2px solid #ff9f4366; border-color:var(--accent); }
.feedback-foot { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.feedback-foot span { margin-right:auto; font-size:10px; opacity:.6; }
.feedback-foot button { padding:8px 14px; background:var(--accent); color:#fff; }

/* Large desktop displays need physically larger controls, not just more empty game view. */
@media (min-width: 1600px) and (hover: hover) and (pointer: fine) {
  .win { min-width: 320px; border-width: 3px; border-radius: 17px; }
  .win .title { padding: 10px 15px; font-size: 16px; }
  .win .title .keys { font-size: 12px; padding-right: 10px; }
  .win .body { padding: 13px 15px; font-size: 14px; max-height: 68vh; }

  .tabs { gap: 5px; margin-bottom: 10px; }
  .tabs button { padding: 7px 13px; font-size: 13px; }
  .grid { grid-template-columns: repeat(8, 44px); gap: 5px; }
  .cell { width: 44px; height: 44px; font-size: 20px; }
  .cell .q { font-size: 11px; }
  .eqgrid { gap: 7px; margin-bottom: 13px; }
  .eqslot { min-height: 56px; padding: 7px; font-size: 12px; }
  .eqslot .n { font-size: 12px; }

  .statrow { gap: 8px; margin: 5px 0; }
  .statrow .lab { width: 90px; }
  .statrow .stat-info-trigger { width:90px; font-size:14px; }
  .statrow button, .skillrow button { width: 29px; height: 29px; font-size: 16px; }
  .skillrow { gap: 10px; padding: 8px; }
  .skillrow .ic { width: 32px; font-size: 25px; }
  .skillrow .ds, .mini { font-size: 12px; }
  .qrow { min-width: 320px; padding: 9px 10px; margin-bottom: 7px; }
  .qrow .qd, .qrow .qp { font-size: 13px; }
  .qrow button, .shoprow button { padding: 7px 11px; font-size: 13px; }
  .shoprow { gap: 10px; padding: 7px 8px; }

  #npcdlg .body { width:min(650px, calc(100vw - 64px)); max-width:none; font-size:17px; }
  .npc-dialog-layout { grid-template-columns:132px minmax(0,1fr); gap:17px; }
  .npc-portrait { width:108px; height:108px; transform:scale(1.08); margin:5px 0 7px; }
  .npc-portrait-card > b { font-size:14px; }
  .npc-greet { padding:13px 16px; margin-bottom:13px; font-size:17px; }
  .npc-actions button { padding:11px 14px; font-size:16px; }
  .auction-tools { gap: 7px; margin-bottom: 10px; }
  .auction-tools input { padding: 9px; font-size: 14px; }
  .auctionrow { grid-template-columns: 1fr 110px 112px 72px; gap: 8px; padding: 8px; margin-bottom: 6px; }
  .auctionrow .avg, .auctionrow button { font-size: 12px; }
  .auction-sell-grid { grid-template-columns:repeat(4, minmax(135px,1fr)); max-height:260px; }
  .auction-sell-item { padding:8px; font-size:12px; }
  .tip { max-width: 280px; padding: 9px 13px; font-size: 13px; }
}

.worldmap-window { width:min(1000px, 96vw); }
.worldmap-window .body { width:auto; max-height:min(78vh, 790px); overflow:hidden; padding:12px 14px 14px; }
.continent-tabs { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:9px; }
.continent-tabs button { padding:9px 10px; background:#eee0bf; }
.continent-tabs button.on { color:#fff; background:linear-gradient(#ffac53,#e8842b); border-color:#bb671e; }
.continent-tabs button small { display:block; margin-top:2px; font-size:9px; opacity:.75; }
.continent-lock { margin-bottom:8px; padding:9px 11px; border:2px solid #8c6bb3; border-radius:9px; background:#eee3ff; color:#5a397c; line-height:1.55; }
.world-map-guide { display:flex; align-items:center; gap:12px; min-height:27px; padding:0 5px 7px; color:#59626a; font-size:10px; }
.world-map-guide .town-legend { display:inline-flex; align-items:center; gap:3px; }
.town-glyph { display:block; width:15px; height:15px; overflow:visible; fill:#fff7d7; stroke:#24577d; stroke-width:1.15; stroke-linejoin:round; filter:drop-shadow(0 1px 0 #154564); }
.town-glyph .town-door { fill:#f4a640; stroke:#24577d; stroke-width:1.05; }
.world-map-guide .town-glyph { width:13px; height:13px; fill:#249edf; }
.world-map-guide b { margin-left:auto; color:#ad7500; font-size:11px; }
.world-map-guide small { color:#7a756b; }
.world-map-scroll { overflow:auto; border:3px solid #a77b42; border-radius:14px; background:#b8e2e8; box-shadow:inset 0 0 18px #385d5c77; }
.world-map-canvas { position:relative; width:100%; min-width:850px; height:590px; overflow:hidden; isolation:isolate; background:
  radial-gradient(ellipse at 18% 8%, #fff9 0 4%, transparent 4.5%), radial-gradient(ellipse at 78% 12%, #fff8 0 7%, transparent 7.5%),
  repeating-radial-gradient(circle at 40% 35%, #9dd8df 0 2px, #91ced8 3px 5px); }
.world-map-canvas::before { content:""; position:absolute; z-index:-3; inset:5% 4%; filter:drop-shadow(0 8px 3px #3c605d77); background:#78b45f; border:7px solid #e7d58c; clip-path:polygon(2% 30%,11% 14%,29% 8%,42% 16%,54% 5%,75% 9%,96% 26%,91% 43%,98% 59%,88% 78%,66% 94%,47% 88%,31% 98%,15% 84%,4% 65%,9% 49%); }
.world-map-canvas.lumina::before { background:#8087d0; border-color:#d9c6f3; clip-path:polygon(6% 69%,15% 49%,29% 38%,35% 20%,50% 5%,63% 22%,77% 37%,94% 52%,88% 72%,72% 89%,50% 96%,29% 86%,13% 91%); }
.world-map-canvas::after { content:""; position:absolute; z-index:-2; inset:10%; opacity:.82; background:radial-gradient(circle at 20% 42%,#bbdc77 0 10%,transparent 11%),radial-gradient(circle at 42% 70%,#3f8e50 0 13%,transparent 14%),radial-gradient(circle at 68% 33%,#bf9865 0 12%,transparent 13%),radial-gradient(circle at 81% 70%,#718c56 0 11%,transparent 12%),linear-gradient(135deg,transparent 45%,#e7be7a 46% 51%,transparent 52%); clip-path:polygon(0 25%,12% 8%,30% 3%,44% 13%,57% 0,78% 5%,100% 24%,93% 45%,100% 63%,87% 83%,65% 100%,47% 93%,30% 100%,12% 85%,0 64%,6% 47%); }
.world-map-canvas.lumina::after { background:radial-gradient(circle at 25% 65%,#8de0cf 0 10%,transparent 11%),radial-gradient(circle at 54% 65%,#9272bd 0 13%,transparent 14%),radial-gradient(circle at 72% 45%,#454b91 0 14%,transparent 15%),radial-gradient(circle at 50% 18%,#ded2ff 0 10%,transparent 11%); }
.map-land { position:absolute; z-index:-1; pointer-events:none; opacity:.8; }
.map-land.land-a { left:8%; top:26%; width:25%; height:20%; border-radius:55% 45% 52% 48%; background:#d6c36c; transform:rotate(-12deg); }
.map-land.land-b { left:36%; top:55%; width:28%; height:22%; border-radius:45% 55% 35% 65%; background:#4e9456; transform:rotate(7deg); }
.map-land.land-c { right:7%; top:27%; width:25%; height:25%; border-radius:60% 40% 55% 45%; background:#a87a4f; }
.lumina .map-land.land-a { background:#68c8cf; }.lumina .map-land.land-b { background:#69549f; }.lumina .map-land.land-c { background:#353b77; }
.map-watermark { position:absolute; right:5%; bottom:3%; z-index:0; color:#fff6; font:900 43px/1 Georgia,serif; letter-spacing:7px; text-shadow:0 2px #385d5c77; pointer-events:none; }
.map-route-svg { position:absolute; z-index:1; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.map-route-svg line { stroke:#9a5528; stroke-width:.75; stroke-linecap:round; stroke-dasharray:1.3 1.1; filter:drop-shadow(0 1px #fff9); }
.map-route-svg .map-route-curve { fill:none; stroke:#ffffff9c; stroke-width:.85; stroke-linecap:round; stroke-dasharray:1.4 1.2; filter:drop-shadow(0 0 2px #ffffff88) drop-shadow(0 1px #ffffff44); }
.map-node { position:absolute; z-index:2; left:var(--mx); top:var(--my); width:0; height:0; padding:0; border:0; background:none; transform:translate(-50%,-50%); overflow:visible; }
.map-node-dot { display:grid; place-items:center; width:21px; height:21px; border:3px solid #fff4aa; border-radius:50%; color:#fff8cf; background:radial-gradient(circle at 35% 28%,#ffe95b,#e98b10 68%,#984811 70%); box-shadow:0 1px 0 #6a3517,0 2px 5px #1d372888; font-size:9px; line-height:1; cursor:default; transition:.14s transform,.14s filter; }
.map-node.town .map-node-dot { width:26px; height:26px; color:#fff; background:radial-gradient(circle at 35% 28%,#7de9ff,#1e91db 67%,#145087 70%); }
.map-node.warpable .map-node-dot { cursor:pointer; }
.map-node.warpable:hover .map-node-dot,.map-node:focus-visible .map-node-dot { transform:scale(1.35); filter:brightness(1.15); outline:2px solid #fff; }
.map-node.here .map-node-dot { background:radial-gradient(circle at 35% 28%,#ff8edb,#d82494 67%,#85125c 70%); animation:mapHere 1.1s ease-in-out infinite alternate; }
.map-node.unvisited .map-node-dot,.map-node.locked .map-node-dot { filter:grayscale(1) brightness(.72); opacity:.78; }
.map-node.invasion { z-index:8; }
.map-node.invasion .map-node-dot {
  position:relative; filter:none; opacity:1; color:#fff2dc;
  border-color:#ffd1a3; background:radial-gradient(circle at 35% 28%,#ffbc64,#d83c3c 62%,#681c38 72%);
  box-shadow:0 0 10px #ff5252,0 0 24px #b21854aa,inset 0 0 5px #fff8;
  animation:invasionNode 1s ease-in-out infinite alternate;
}
.map-node.invasion .map-node-dot::before,.map-node.invasion .map-node-dot::after {
  content:''; position:absolute; inset:-10px; border:2px solid #ff554f; border-radius:50%; pointer-events:none;
  animation:invasionRing 1.35s ease-out infinite;
}
.map-node.invasion .map-node-dot::after { animation-delay:.68s; }
.map-node.invasion .map-node-label { color:#5e1825; border:2px solid #c53e45; background:#fff0e4f2; box-shadow:0 0 12px #ff654c99; }
.map-node.invasion .map-node-label b::before { content:'⚠ '; color:#c32936; }
.map-node.invasion .map-node-label em { display:block; color:#b21f36; font-weight:900; }
.map-node.invasion.density-mid .map-node-dot { box-shadow:0 0 13px #ff684f,0 0 29px #c72b62cc,inset 0 0 6px #fff9; animation-duration:.85s; }
.map-node.invasion.density-high .map-node-dot { transform:scale(1.08); border-color:#ffed9b; box-shadow:0 0 16px #ff9a3c,0 0 38px #d01958,inset 0 0 8px #fff; animation-duration:.68s; }
.map-node.invasion.density-extreme .map-node-dot { transform:scale(1.18); border-color:#fff7c7; background:radial-gradient(circle at 35% 28%,#fffbd1,#ff7338 43%,#a80e50 68%,#350d39 76%); box-shadow:0 0 19px #fff0a1,0 0 46px #e0145f,0 0 68px #6d1bd7aa,inset 0 0 9px #fff; animation-duration:.5s; }
.map-node.invasion.density-high .map-node-label,.map-node.invasion.density-extreme .map-node-label { border-color:#ff963d; box-shadow:0 0 18px #ff4a50cc; }
.world-map-invasion-panel { position:absolute; z-index:15; right:16px; top:14px; width:min(360px,42%); padding:10px 11px; color:#fff4ed; border:2px solid #d66572; border-radius:12px; background:linear-gradient(145deg,#34182fee,#6f2938ee); box-shadow:0 7px 22px #17091a99,inset 0 0 22px #d75a6d20; text-align:left; pointer-events:auto; }
.world-map-invasion-title { display:flex; gap:9px; align-items:center; }.world-map-invasion-title > span { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border:1px solid #ff9b8f; border-radius:50%; color:#ffe0a8; background:#711f3b; box-shadow:0 0 11px #dc375c88; font-size:16px; }
.world-map-invasion-title b { display:block; font-size:13px; }.world-map-invasion-title small { display:block; margin-top:2px; color:#f4ced5; font-size:9px; }
.world-map-invasion-title small i,#invasion-hud i { color:#ffe590; font-style:normal; font-weight:900; }
.world-map-invasion-panel p { margin:7px 0 8px; color:#efcbd4; font-size:9px; }.world-map-invasion-actions { display:flex; gap:6px; align-items:flex-start; }.world-map-invasion-actions > * { min-width:0; }.world-map-invasion-actions > button,.world-map-invasion-actions .reward-toggle { min-height:31px; padding:5px 8px; font-size:9px; }.world-map-invasion-actions > button { flex:1; }
.world-map-invasion-panel .reward-popover-anchor { flex:1; }.world-map-invasion-panel .reward-popover-anchor > .reward-preview { left:auto; right:0; width:min(470px,70vw); color:#2d2731; }
.world-map-invasion-panel .reward-preview > p { color:#563e50; font-size:10px; font-weight:700; line-height:1.5; text-shadow:0 1px #fff9; }
.world-map-invasion-panel .invasion-current { flex:1; padding:8px 7px; border:1px solid #f0a071; border-radius:8px; color:#ffe0a8; background:#63283d; text-align:center; font-size:9px; font-weight:900; }
.world-map-invasion-panel.density-high { border-color:#ff9b50; background:linear-gradient(145deg,#30142fee,#7d292eee 58%,#551546ee); box-shadow:0 0 20px #ff543e77,0 8px 24px #160816aa; }.world-map-invasion-panel.density-extreme { border-color:#ffe28a; background:linear-gradient(145deg,#251132f2,#8b271ff0 50%,#4b145ff0); box-shadow:0 0 23px #ff674888,0 0 38px #8028b577,0 9px 26px #100613bb; }
.map-node.targeted:not(.invasion) .map-node-dot { animation:mapTarget 1s ease-in-out infinite alternate; box-shadow:0 0 0 6px #7ee0ff66,0 0 15px #198fce; }
.map-node-label { position:absolute; left:50%; top:25px; min-width:86px; padding:3px 5px; transform:translateX(-50%); color:#293223; background:#fff7dcdd; border:1px solid #79663d; border-radius:5px; box-shadow:0 2px 4px #2335; font-size:8px; line-height:1.25; white-space:nowrap; pointer-events:none; }
.map-node:hover .map-node-label,.map-node:focus-visible .map-node-label,.map-node.here .map-node-label { z-index:10; padding:5px 7px; font-size:10px; background:#fffdf2; border-color:#e78325; }
.map-node:hover .map-node-label em,.map-node:focus-visible .map-node-label em,.map-node.here .map-node-label em { display:block; }
@keyframes mapHere { to { transform:scale(1.18); box-shadow:0 0 0 5px #ffdcf277,0 2px 7px #591347; } }
@keyframes invasionNode { to { transform:scale(1.22); filter:brightness(1.18); } }
@keyframes invasionRing { from { transform:scale(.6); opacity:.95; } to { transform:scale(1.75); opacity:0; } }
@keyframes mapTarget { to { transform:scale(1.2); filter:brightness(1.2); } }

/* ───────── 모바일 공통 (터치 기기 전용) ───────── */
@media (hover: none) and (pointer: coarse) {
  html, body, #game { touch-action:none; overscroll-behavior:none; }
  #mobile-controls { display:block; position:fixed; inset:0; pointer-events:none; z-index:35; }
  #mobile-controls button { pointer-events:auto; touch-action:none; -webkit-tap-highlight-color:transparent; color:#fff; background:#172434cc; border-color:#7292b6; box-shadow:0 3px 8px #0008; transition:transform .08s ease, background .08s ease; }
  #mobile-controls button:active { transform:scale(.92); background:#365778e8; }

  /* 가상 조이스틱 */
  .joystick-zone {
    position:absolute; left:max(12px, env(safe-area-inset-left)); bottom:max(12px, env(safe-area-inset-bottom));
    width:136px; height:136px; touch-action:none; user-select:none; pointer-events:auto;
    display:flex; align-items:center; justify-content:center;
  }
  .joystick-base {
    position:relative; width:120px; height:120px; border-radius:50%;
    background:radial-gradient(circle, rgba(25, 41, 62, 0.78) 0%, rgba(10, 18, 30, 0.92) 100%);
    border:2px solid rgba(130, 175, 220, 0.5);
    box-shadow:0 4px 18px rgba(0, 0, 0, 0.55), inset 0 0 14px rgba(114, 168, 224, 0.2);
    display:flex; align-items:center; justify-content:center;
  }
  .joystick-arrow {
    position:absolute; color:rgba(255, 255, 255, 0.38); font-size:12px; pointer-events:none;
    transition:color 0.1s, transform 0.1s;
  }
  .joystick-arrow.u { top:7px; }
  .joystick-arrow.d { bottom:7px; }
  .joystick-arrow.l { left:8px; }
  .joystick-arrow.r { right:8px; }
  .joystick-arrow.active {
    color:var(--accent); text-shadow:0 0 8px rgba(255, 159, 67, 0.9); transform:scale(1.25);
  }
  .joystick-stick {
    width:52px; height:52px; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, #5a85b0, #1b3450);
    border:2px solid #a4cef0;
    box-shadow:0 2px 8px rgba(0, 0, 0, 0.6), inset 0 1px 3px rgba(255, 255, 255, 0.6);
    position:absolute; pointer-events:none; will-change:transform;
  }
  .joystick-stick.active {
    border-color:#ffd285;
    box-shadow:0 0 14px rgba(255, 175, 75, 0.7), inset 0 1px 3px rgba(255, 255, 255, 0.85);
  }

  /* 인체공학적 원형 액션 버튼 클러스터 */
  .mobile-actions {
    position:absolute; right:max(8px, env(safe-area-inset-right)); bottom:max(8px, env(safe-area-inset-bottom));
    width:200px; height:185px; pointer-events:none;
    background:none !important; border:none !important; box-shadow:none !important; outline:none !important;
  }
  .mobile-actions button {
    position:absolute; border-radius:50% !important; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(0, 0, 0, 0.5); border:2px solid; pointer-events:auto;
  }
  /* 메인 공격 버튼 */
  .mobile-actions .attack {
    right:56px; bottom:20px; width:64px; height:64px; font-size:26px;
    background:radial-gradient(circle at 35% 35%, #ba3b4d, #681723); border-color:#ff8e9b;
    box-shadow:0 0 18px rgba(255, 60, 85, 0.5), inset 0 1px 3px rgba(255, 255, 255, 0.6);
    transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  /* NPC/조사 오브젝트 근처 시 상호작용(대화) 모드로 자동 변환 */
  .mobile-actions .attack.is-interact {
    background:radial-gradient(circle at 35% 35%, #92692e, #4c3412);
    border-color:#ffe177;
    box-shadow:0 0 20px rgba(255, 210, 80, 0.7), inset 0 1px 3px rgba(255, 255, 255, 0.8);
    font-size:27px;
  }
  /* 점프 버튼 */
  .mobile-actions .jump {
    right:4px; bottom:6px; width:56px; height:56px; font-size:24px;
    background:radial-gradient(circle at 35% 35%, #397fc4, #1b426e); border-color:#8bd2ff;
    box-shadow:0 0 14px rgba(70, 166, 255, 0.45), inset 0 1px 3px rgba(255, 255, 255, 0.6);
  }
  /* 줍기 버튼 */
  .mobile-actions .pickup {
    right:126px; bottom:16px; width:44px; height:44px; font-size:19px;
    background:radial-gradient(circle at 35% 35%, #2a686b, #153a3c); border-color:#6ee6d8;
  }

  /* 퀵메뉴 */
  .mobile-quick {
    position:absolute; top:max(6px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
    display:flex; gap:4px; max-width:96vw; overflow-x:auto; padding:2px 4px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; z-index:36;
  }
  .mobile-quick::-webkit-scrollbar { display:none; }
  .mobile-quick button { padding:5px 9px; font-size:10px; border-radius:8px; white-space:nowrap; flex-shrink:0; }

  #minimap-box { display:none; }
  #topright { top:max(42px, calc(env(safe-area-inset-top) + 36px)); right:max(7px, env(safe-area-inset-right)); padding:4px 7px; font-size:9px; line-height:1.35; }
  #map-name { font-size:11px; }
  #quest-track { top:max(88px, calc(env(safe-area-inset-top) + 82px)); right:7px; width:175px; max-height:90px; overflow:hidden; padding:5px 7px; font-size:9px; line-height:1.35; }
  #guide-banner { top:max(38px, calc(env(safe-area-inset-top) + 34px)); max-width:56vw; padding:4px 10px; font-size:10px; line-height:1.25; }
  #guide-banner small { font-size:8px; }
  #party-panel { left:7px; top:max(48px, calc(env(safe-area-inset-top) + 42px)); width:145px; padding:5px 7px; font-size:9px; max-height:105px; overflow:hidden; }
  #rogue-invasion-hud { left:auto; right:7px; top:max(48px, calc(env(safe-area-inset-top) + 42px)); width:190px; padding:6px 8px; max-height:170px; overflow:auto; }
  #rogue-invasion-hud b { font-size:10px; } #rogue-invasion-hud strong { font-size:9px; }
  #rogue-invasion-hud:not(.hidden) ~ #quest-track { top:230px; }

  #raid-hud { top:max(6px, env(safe-area-inset-top)); min-width:260px; max-width:58vw; padding:4px 8px; font-size:9px; }
  .world-map-invasion-panel { right:8px; top:8px; width:46%; padding:7px; }
  #announcement-bar { top:max(34px, calc(env(safe-area-inset-top) + 30px)); width:58vw; padding:5px 0; font-size:9px; }
  #announcement-bar::before { padding:0 7px; font-size:8px; }
  .raid-card { grid-template-columns:30px 1fr 82px; gap:6px; padding:6px; }

  /* 하단 바 (채팅창 + HP/MP/EXP 상태바) */
  #bottombar {
    position:fixed; left:152px; bottom:max(6px, env(safe-area-inset-bottom));
    width:min(300px, calc(100vw - 350px)); gap:4px; align-items:flex-end; z-index:34;
  }
  #bottomleft { flex:1 1 auto; width:100%; max-width:none; gap:2px; }
  #chatlog { height:25px; max-height:25px; overflow:hidden; font-size:8px; line-height:1.35; padding:2px 4px; margin-bottom:1px; }
  body.mobile-chat-open #chatlog { height:auto; max-height:64px; overflow-y:auto; }
  #chatinput { height:24px; padding:2px 5px; font-size:16px; border-width:1px; }
  #mobile-chat-toggle { display:block; flex:0 0 24px; width:24px; height:24px; min-width:24px; padding:0; border-width:1px; border-radius:7px; background:#182536dd; color:#fff; font-size:10px; }
  #chat-channel { width:54px; padding:2px 1px; font-size:16px; border-width:1px; }
  #whisper-target { width:62px; max-width:72px; padding:2px 4px; font-size:16px; }
  #chat-link-chip { padding:3px 5px; font-size:8px; }
  #statusbar { min-width:0; width:100%; padding:3px 5px; border-radius:8px; gap:4px; }
  #statusbar .hud-level-badge { width:38px; height:32px; }
  #statusbar .hud-level-badge small { margin-bottom:-2px; font-size:7px; }
  #statusbar .hud-level-badge b { max-width:36px; font-size:15px; }
  .line1 { font-size:9px; margin-bottom:2px; }
  .line1 #hud-name { font-size:10px; }
  .bar { height:9px; margin-bottom:1px; }
  .bar span { font-size:7px; line-height:9px; }
  .bar.exp { height:6px; }
  .bar.exp span { display:none; }

  /* 모바일 전용 원형 퀵슬롯 아크(Radial Arc) — 오른쪽 패드를 자연스럽게 감싸는 배치 */
  #combat-status-stack {
    position:fixed; right:max(8px, env(safe-area-inset-right)); bottom:max(8px, env(safe-area-inset-bottom));
    width:200px; height:185px; pointer-events:none; z-index:35; min-width:0;
    background:none !important; border:none !important; box-shadow:none !important; outline:none !important;
  }
  #hotbar {
    position:absolute; inset:0; pointer-events:none; display:block;
    background:none !important; border:none !important; box-shadow:none !important; outline:none !important;
  }
  #hotbar .slot {
    position:absolute; width:44px; height:44px; border-radius:50% !important;
    pointer-events:auto; touch-action:none; display:flex; align-items:center; justify-content:center;
    font-size:19px; border:2px solid; box-shadow:0 4px 12px rgba(0,0,0,0.55), inset 0 1px 2px rgba(255,255,255,0.35);
  }
  /* 1번 슬롯 (가장 가까운 우측: 점프/공격 바로 위) */
  #hotbar .slot:nth-child(1) {
    right:8px; bottom:78px;
    background:radial-gradient(circle at 35% 35%, #2c5462, #132731); border-color:#6ee6d8;
  }
  /* 2번 슬롯 (상단 우측) */
  #hotbar .slot:nth-child(2) {
    right:50px; bottom:118px;
    background:radial-gradient(circle at 35% 35%, #2a4768, #122132); border-color:#8bc9ff;
  }
  /* 3번 슬롯 (상단 좌측) */
  #hotbar .slot:nth-child(3) {
    right:104px; bottom:118px;
    background:radial-gradient(circle at 35% 35%, #3d2c56, #1c1428); border-color:#c4b5fd;
  }
  /* 4번 슬롯 (좌측 상단: 줍기 바로 위) */
  #hotbar .slot:nth-child(4) {
    right:146px; bottom:78px;
    background:radial-gradient(circle at 35% 35%, #523924, #26190e); border-color:#f5b561;
  }
  #hotbar .slot:nth-child(n+5) { display:none; }

  #hotbar .slot .k {
    position:absolute; top:-2px; left:-2px; width:14px; height:14px; border-radius:50%;
    background:#172434ee; border:1px solid #7292b6; font-size:8px; line-height:13px;
    text-align:center; font-weight:800; color:#fff;
  }
  #hotbar .slot .lv {
    position:absolute; bottom:-2px; right:-2px; padding:0 4px; border-radius:6px;
    background:#101822ee; font-size:8px; color:var(--exp); font-weight:800;
  }
  #hotbar .slot:active { transform:scale(0.92); filter:brightness(1.25); }

  #status-effects {
    position:absolute; right:0; bottom:190px; max-width:180px; gap:2px;
    max-height:52px; overflow:hidden; justify-content:flex-end;
  }
  .status-effect { min-width:0; width:32px; height:25px; padding:2px; justify-content:center; }
  .status-effect-icon { width:20px; height:20px; font-size:12px; }
  .status-effect-text { display:none; }
  #menubar { display:none; }

  .win { top:max(44px, env(safe-area-inset-top)) !important; left:50% !important; transform:translateX(-50%) !important; max-width:94vw !important; min-width:240px !important; max-height:calc(100vh - 54px); overflow:hidden; z-index:40 !important; }
  .win.focused { z-index:42 !important; }
  .win .body { max-height:calc(100vh - 88px); padding:7px 8px; font-size:10px; }
  .win .title { padding:6px 9px; font-size:11px; }
  .auction-sell-grid { grid-template-columns:repeat(2, minmax(105px, 1fr)); max-height:120px; }
  .auction-sell-form { grid-template-columns:repeat(2, 1fr); }
  .auction-detail-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .feedback-form { min-width:320px; }
  .auction-sell-picked, .auction-sell-form button { grid-column:1 / -1; }
  .grid { grid-template-columns:repeat(8,32px); gap:3px; }
  .cell { width:32px; height:32px; }
  .auctionrow { grid-template-columns:1fr 70px 72px 48px; font-size:9px; }
}

/* ───────── 인게임 세로 파지 시 가로화면 자동 90도 회전 ───────── */
@media (hover: none) and (pointer: coarse) and (orientation: portrait), (max-width: 768px) and (orientation: portrait) {
  body.mobile-connected {
    width: 100vh !important;
    height: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 100% !important;
    transform: rotate(90deg) !important;
    transform-origin: top left !important;
    overflow: hidden !important;
  }
}

/* ───────── 모바일 로그인 (세로 화면) ───────── */
@media (hover: none) and (pointer: coarse) and (orientation: portrait), (max-width: 700px) and (orientation: portrait) {
  #login.overlay { overflow-y:auto; display:flex; align-items:center; justify-content:center; padding:16px 12px; }
  .login-box { width:min(440px, 92vw); min-height:0; padding:20px 22px; border-width:2px; border-radius:16px; margin:auto; }
  .login-box h1 { font-size:24px; }
  .login-box .sub { margin:2px 0 14px; font-size:11px; }
  .login-box label { font-size:11px; margin:8px 0 4px; }
  .login-box input { padding:8px 10px; font-size:16px; border-width:1px; border-radius:8px; }
  .creator-customize { grid-template-columns:100px 1fr; gap:12px; margin-top:8px; }
  .creator-preview { min-height:105px; border-radius:9px; }
  .creator-preview canvas { width:92px; height:105px; }
  .gender-row { grid-template-columns:36px 1fr; gap:6px; }
  .gender-pick button { padding:5px 8px; font-size:11px; }
  .look-row { margin-top:6px; gap:10px; }
  .look-pick > span { font-size:10px; }
  .swatches { gap:4px; margin-top:3px; }
  .swatches i { width:18px; height:18px; }
  .look-choices { grid-template-columns:repeat(4, 1fr); gap:3px; margin-top:3px; }
  .look-choices button { padding:4px 2px; font-size:9px; }
  .btn-row { margin-top:10px; }
  .btn-row button { padding:9px; font-size:12px; }
  .pc-download-card { display:none; }
  .login-copyright { margin-top:6px; font-size:8px; }
}

/* ───────── 모바일 로그인 (가로 화면) ───────── */
@media (hover: none) and (pointer: coarse) and (orientation: landscape), (max-height: 620px) and (orientation: landscape) {
  #login.overlay { overflow-y:auto; align-items:center; justify-content:center; padding:max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .login-box { width:min(680px, 92vw); min-height:0; padding:10px 16px 9px; border-width:2px; border-radius:13px; margin:auto 0; }
  .login-box h1 { font-size:20px; }
  .login-box .sub { margin:1px 0 6px; font-size:9px; }
  .login-box label { font-size:10px; margin:4px 0 2px; }
  .login-box input { padding:6px 8px; font-size:16px; border-width:1px; border-radius:7px; }
  .creator-customize { grid-template-columns:92px 1fr; gap:9px; margin-top:5px; }
  .creator-preview { min-height:96px; border-width:1px; border-radius:9px; }
  .creator-preview canvas { width:88px; height:96px; }
  .creator-preview canvas { bottom:1px; }
  .creator-preview > span { display:none; }
  .gender-row { grid-template-columns:34px 1fr; gap:5px; }
  .gender-pick { gap:4px; }
  .gender-pick button { padding:4px 6px; font-size:10px; }
  .look-row { margin-top:4px; gap:10px; }
  .look-pick > span { font-size:10px; }
  .swatches { gap:4px; margin-top:3px; flex-wrap:nowrap; }
  .swatches i { width:17px; height:17px; border-width:1px; }
  .choice-row { margin-top:3px; }
  .look-choices { grid-template-columns:repeat(6,1fr); gap:2px; margin-top:2px; }
  #pick-face.look-choices { grid-template-columns:repeat(4,1fr); }
  .look-choices button { padding:2px 1px; font-size:8px; border-radius:5px; }
  .btn-row { margin-top:7px; }
  .btn-row button { padding:7px; font-size:11px; }
  .pc-download-card { margin-top:5px; padding:5px 7px; gap:8px; }
  .pc-download-card b { font-size:9px; }
  .pc-download-card small { display:none; }
  .pc-download-card a { padding:4px 7px; border-width:1px; font-size:9px; }
  .login-copyright { margin-top:3px; font-size:7px; }
  .login-cafe { margin:5px auto 0; padding:4px 8px; font-size:9px; }
  .login-box .msg { min-height:11px; margin-top:3px; font-size:9px; }
  .login-box .hint { margin-top:3px; font-size:8px; line-height:1.3; }
}

@media (max-width:700px), (max-height:540px) and (orientation:landscape) {
  .appearance-editor { grid-template-columns:115px 1fr; gap:8px; min-width:430px; }
  .appearance-preview { min-height:190px; }
  .appearance-preview canvas { width:112px; height:130px; }
  .appearance-preview small { display:none; }
  .appearance-options { gap:3px; }
  .appearance-choices button { padding:2px; font-size:8px; }
  .appearance-colors .look-color { flex-basis:18px; width:18px; height:18px; min-width:18px; }
  .mail-card { padding:6px 8px; }
}

/* ── 키보드 내비게이션 ── */
.navsel {
  outline: 3px solid var(--accent) !important;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px #ff9f4340;
}
.win.focused { border-color: var(--accent); box-shadow: 0 12px 34px #000a, 0 0 0 3px #ff9f4355; }
.win .title .keys {
  margin-left: auto; font-size: 10px; font-weight: normal; opacity: .7; padding-right: 8px;
}
.win .title .x { margin-left: 0; }

/* 퀘스트 내비게이션 */
#quest-track .nav { color: #7ee0ff; }
#quest-track .qsel { border-left: 3px solid var(--accent); padding-left: 5px; }
#quest-track div + div { margin-top: 6px; }

/* ── 옵션창 ── */
.optlist { min-width: 250px; }
.optrow { padding: 5px 0; border-bottom: 1px solid #0002; }
.optrow:last-child { border-bottom: 0; }
.optname { display: inline-block; min-width: 90px; font-weight: bold; }
.optbtns { display: inline-flex; gap: 4px; }
.optbtns button {
  padding: 3px 12px; font-size: 11px; cursor: pointer;
  border: 1px solid #0003; border-radius: 4px; background: #e8dcc0; color: #3a2c18;
}
.optbtns button.on { background: var(--accent); color: #fff; border-color: #c9741f; }
.opthint { font-size: 10px; opacity: .65; margin-top: 3px; }

/* Lv.120 성좌 장비 · 성흔 · 랭킹 */
.endgame-window { width: min(880px, 96vw); }
.rift-window { width: min(710px, 94vw); }
.ranking-window { width: min(600px, 92vw); }
.endgame-window > .body { max-height: min(720px, 84vh); overflow-y: auto; padding: 12px 16px; }
.rift-window > .body, .ranking-window > .body { max-height: min(690px, 78vh); overflow-y: auto; }
.endgame-tabs, .ranking-tabs { display: flex; gap: 8px; margin-bottom: 12px; position: sticky; top: 0; z-index: 5; background: #fff8e8; padding-bottom: 6px; }
.endgame-tabs button {
  flex: 1; padding: 9px 12px; font-size: 13px; font-weight: 800; border-radius: 9px;
  background: #f1e6d4; border: 1.5px solid #cbaf86; color: #4a3820;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.endgame-tabs button.on, .ranking-tabs button.on {
  color: #fff; border-color: #633ea5;
  background: linear-gradient(135deg, #7c44c2 0%, #4a247a 100%);
  box-shadow: 0 3px 10px rgba(99, 44, 163, 0.4);
}
.endgame-lock, .empty-state { text-align: center; padding: 28px 14px; color: #766b5b; }
.endgame-lock strong { display: block; color: #614188; font-size: 18px; }

/* ───────── 룬 각인 2열 레이아웃 ───────── */
.endgame-runes-layout {
  display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start;
}

/* 좌측: 성좌 룬 보드 */
.runes-col-left { display: flex; flex-direction: column; gap: 10px; }
.constellation-box {
  background: linear-gradient(145deg, #1b1631 0%, #0d0a1c 100%);
  border: 2px solid #58417c; border-radius: 14px; padding: 10px 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 0 25px rgba(124, 76, 212, 0.2);
  display: flex; flex-direction: column; align-items: center;
}
.constellation-layout {
  width: 290px; height: 250px; position: relative; margin: 4px auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #37235a 0%, #15102a 60%, transparent 70%);
}
.constellation-layout::before {
  content: ''; position: absolute; inset: 18px;
  clip-path: polygon(50% 0, 61% 35%, 98% 38%, 68% 59%, 79% 97%, 50% 74%, 21% 97%, 32% 59%, 2% 38%, 39% 35%);
  background: rgba(167, 139, 250, 0.16); pointer-events: none;
}
.constellation-layout::after {
  content: ''; position: absolute; inset: 16px; border: 1.5px dashed rgba(216, 194, 255, 0.45);
  border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 74% 16%, #ffe79b 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 84% 68%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 30% 82%, #bfe8ff 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 57% 34%, #ffffff 0 2px, transparent 3px);
  box-shadow: 0 0 22px rgba(157, 118, 220, 0.45), inset 0 0 26px rgba(185, 153, 255, 0.35);
  animation: constellationOrbit 14s linear infinite;
}
.constellation-layout.active::after {
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow: 0 0 26px rgba(210, 173, 255, 0.6), inset 0 0 32px rgba(255, 215, 106, 0.4);
  animation-duration: 10s;
}

/* 룬 소켓 노드 (보드 위 버튼) */
.rune-socket {
  position: absolute; width: 78px; height: 54px; padding: 3px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 9px; border: 2px solid #5d4682; background: rgba(30, 24, 53, 0.95);
  color: #ede9fe; cursor: pointer; z-index: 2;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.rune-socket .socket-badge {
  position: absolute; top: -5px; left: -5px; width: 15px; height: 15px;
  border-radius: 50%; background: #4c3374; border: 1px solid #9067d8;
  font-size: 8px; font-weight: 800; line-height: 14px; text-align: center; color: #fff;
}
.rune-socket b { font-size: 16px; line-height: 1; }
.rune-socket .socket-label {
  font-size: 9px; font-weight: 700; max-width: 70px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 2px;
}
.rune-socket.s1 { left: 106px; top: 0px; }
.rune-socket.s2 { right: 6px; top: 68px; }
.rune-socket.s3 { right: 36px; bottom: 2px; }
.rune-socket.s4 { left: 36px; bottom: 2px; }
.rune-socket.s5 { left: 6px; top: 68px; }

/* 중앙 고유 룬 슬롯 */
.rune-socket.golden {
  left: 106px; top: 96px; border-color: #d97706; background: rgba(66, 42, 10, 0.95);
  color: #fef3c7; box-shadow: 0 0 12px rgba(217, 119, 6, 0.35);
}
.rune-socket.golden .socket-badge { background: #b45309; border-color: #fcd34d; }

.rune-socket.filled { border-color: #8b5cf6; box-shadow: 0 0 10px rgba(139, 92, 246, 0.45); }
.rune-socket.golden.filled { border-color: #f59e0b; box-shadow: 0 0 16px rgba(245, 158, 11, 0.6); }
.rune-socket.selected { border-color: #ff9f43 !important; box-shadow: 0 0 0 3px rgba(255, 159, 67, 0.5), 0 0 14px #ff9f43 !important; transform: scale(1.06); }
.rune-socket.compatible {
  border-color: #10b981; box-shadow: 0 0 0 2.5px rgba(16, 185, 129, 0.5), 0 0 16px #10b981;
  animation: socketReadyPulse 1s ease-in-out infinite alternate;
}
@keyframes socketReadyPulse { to { transform: scale(1.05); filter: brightness(1.2); } }

.constellation-hint {
  margin-top: 6px; font-size: 10px; color: #a594c7; text-align: center; line-height: 1.35;
}
.constellation-hint .glow-hint { color: #fde047; font-weight: 800; }

/* 활성 세트 요약 카드 */
.rune-set-summary-card {
  background: #fff; border: 1.5px solid #d4c5e8; border-radius: 12px;
  padding: 9px 11px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.rune-set-summary-card .summary-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #eee5f8; padding-bottom: 5px; margin-bottom: 6px;
}
.rune-set-summary-card .summary-head strong { font-size: 11px; color: #4a2872; }
.rune-set-summary-card .summary-head small { font-size: 9px; color: #16a34a; font-weight: 800; }
.summary-list { display: flex; flex-direction: column; gap: 5px; max-height: 160px; overflow-y: auto; }
.set-summary-item {
  padding: 5px 7px; border-radius: 7px; background: #fbf9ff; border: 1px solid #e7ddf5; font-size: 10px;
}
.set-summary-item.active { background: #f0fdf4; border-color: #bbf7d0; }
.set-summary-item .set-title { display: flex; gap: 5px; align-items: center; margin-bottom: 2px; }
.set-summary-item .set-title b { font-size: 9px; }
.set-summary-item .set-desc { font-size: 9px; color: #475569; line-height: 1.3; }
.empty-set { text-align: center; color: #8c7e9c; font-size: 10px; padding: 10px 4px; line-height: 1.4; }

/* 우측: 룬 인벤토리 & 인스펙터 */
.runes-col-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rune-inv-header {
  display: flex; justify-content: space-between; align-items: center;
}
.rune-inv-header strong { font-size: 12px; color: #3b2756; }
.rune-inv-header .inv-guide { font-size: 10px; color: #735d8e; }

.rune-inventory-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  max-height: 220px; overflow-y: auto; padding-right: 2px;
}
.rune-item-card {
  display: flex; flex-direction: column; gap: 3px; padding: 7px 8px;
  border-radius: 8px; border: 1.5px solid #d9cbef; background: #fff;
  cursor: pointer; transition: transform 0.1s, border-color 0.12s, box-shadow 0.12s;
}
.rune-item-card:hover { transform: translateY(-1px); border-color: #9d75db; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); }
.rune-item-card.selected {
  border-color: #ff9f43; background: #fffaf0; box-shadow: 0 0 0 2px rgba(255, 159, 67, 0.35);
}
.rune-item-card.golden { border-color: #f59e0b; background: #fffdf5; }
.rune-item-card .card-top { display: flex; gap: 6px; align-items: center; }
.rune-item-card .card-icon { flex: none; font-size: 15px; }
.rune-item-card .card-name { min-width: 0; flex: 1; }
.rune-item-card .card-name b { font-size: 11px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #432b68; }
.rune-item-card .card-affixes {
  display: flex; flex-wrap: wrap; gap: 3px 6px; font-size: 10px; color: #475569; border-top: 1px solid #f2eafc; padding-top: 4px; margin-top: 2px;
}
.rune-affix-tag {
  display: inline-block; padding: 1px 5px; border-radius: 4px;
  background: rgba(99, 102, 241, 0.08); color: #4338ca; font-weight: 700; font-size: 10px;
}
.inspector-affixes .rune-affix-tag {
  background: rgba(255, 255, 255, 0.14); color: #f8fafc; font-size: 11px;
}

/* 하단 룬 인스펙터 패널 */
.rune-inspector-panel {
  background: linear-gradient(135deg, #2b1f47 0%, #1a142e 100%);
  border: 2px solid #634b8c; border-radius: 11px; padding: 9px 12px;
  color: #f5f3ff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); min-height: 80px;
}
.inspector-card { display: flex; flex-direction: column; gap: 5px; }
.inspector-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.inspector-title { display: flex; gap: 7px; align-items: center; font-size: 15px; }
.inspector-title strong { font-size: 12px; color: #ffd76a; }
.inspector-title .job-tag { display: block; font-size: 9px; color: #cbd5e1; }
.inspector-actions { display: flex; gap: 6px; }
.btn-equip-action {
  padding: 6px 13px; font-size: 11px; font-weight: 900;
  background: linear-gradient(180deg, #f59e0b, #d97706); border: 1px solid #fbbf24;
  color: #fff; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4);
}
.btn-equip-action:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-unequip-action {
  padding: 5px 10px; font-size: 10px; font-weight: 700;
  background: #475569; border: 1px solid #64748b; color: #fff; border-radius: 7px; cursor: pointer;
}
.btn-unequip-action:hover { background: #dc2626; border-color: #ef4444; }
.inspector-affixes { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; color: #e2e8f0; line-height: 1.4; margin: 3px 0; }
.inspector-set { font-size: 9px; color: #fde68a; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 4px; }
.inspector-empty { padding: 8px; font-size: 10px; color: #a594c7; text-align: center; }

/* ───────── 스타포스 & 카오스 큐브 ───────── */
.material-bar { display: flex; gap: 7px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 10px; border-radius: 8px; background: #25213c; color: #eee5ff; font-size: 12px; }
.material-bar span { padding: 3px 7px; }
.material-bar b { color: #ffe478; }
.endgame-columns { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(250px, 1.1fr); gap: 12px; }
.endgame-columns h3, .endgame-window h3 { margin: 5px 0 7px; color: #432b68; font-size: 13px; }
.endgame-equip-list { max-height: 410px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.endgame-equip-list button { display: flex; text-align: left; align-items: center; gap: 7px; padding: 7px; border: 1px solid #d4c3e8; border-radius: 8px; background: #fff; cursor: pointer; }
.endgame-equip-list button.selected { outline: 2px solid #944fd4; background: #f0e1ff; }
.endgame-equip-list button span { flex: 1; font-size: 11px; }
.endgame-equip-list small { display: block; color: #84768c; font-size: 9px; }
.gain-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 7px 0; text-align: left; font-size: 11px; }
.gain-list span { padding: 5px 7px; border-radius: 6px; background: #eee8f6; color: #332048; }
.gain-list em { color: #2e8d4f; font-style: normal; font-weight: bold; }
.starforce-panel, .cube-target { position:relative; overflow:hidden; border: 1px solid #c9b4d7; border-radius: 10px; padding: 14px; background: linear-gradient(145deg,#fff,#f5edff); text-align: center; }
.equipped-badge { display:inline-flex; align-items:center; padding:2px 7px; margin-left:5px; border-radius:999px; background:#5d42a5; color:#fff; font-size:10px; font-style:normal; font-weight:800; vertical-align:middle; }
.starforce-tip { color:#d19500; font-weight:700; }
.starforce-item { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; }.starforce-item strong { font-size: 16px; }.stars { flex-basis: 100%; min-height: 32px; color: #ffc028; letter-spacing: 1px; overflow-wrap: anywhere; text-shadow: 0 1px #6c4700; }
.starforce-panel .success { color: #477c35; font-weight: bold; }.tower-exchange { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 9px; background: #eae3f4; border-radius: 9px; }.tower-exchange span { flex: 1; min-width: 180px; font-size: 11px; color: #6e6476; }
.cube-compare { position:relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.cube-compare > div { border: 1px solid #bba7c9; border-radius: 10px; padding: 14px; background: #fff; }.cube-compare .new { border-color: #f0a02f; box-shadow: 0 0 12px #ffc86166; }.cube-compare h3 { color: #6d3d8e; }.cube-compare button { width: 100%; margin-top: 14px; }
.starforce-panel.ui-fx-charge::after,.cube-target.ui-fx-charge::after {
  content:''; position:absolute; inset:-35%; pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 32%,#cba6ff99 42%,#fff3a9dd 49%,transparent 58% 100%);
  animation:enhanceUiCharge .72s cubic-bezier(.3,.65,.3,1) both;
}
.starforce-panel.ui-fx-charge,.cube-target.ui-fx-charge { animation:enhanceUiBreath .72s ease-in-out; border-color:#9d6fd0; }
.starforce-panel.ui-fx-success { animation:starforceUiSuccess .9s ease-out; }
.starforce-panel.ui-fx-success .stars,.starforce-panel.ui-fx-awaken .stars { animation:starRowSuccess .9s ease-out; }
.starforce-panel.ui-fx-awaken { animation:starforceUiAwaken 1s ease-out; }
.starforce-panel.ui-fx-fail { animation:starforceUiFail .72s ease-out; }
.cube-compare.ui-fx-reveal .new { animation:cubeOptionReveal 1s cubic-bezier(.2,.8,.25,1); }
.cube-compare.ui-fx-reveal::after { content:'✦'; position:absolute; z-index:3; left:75%; top:38%; color:#fff4a4; font-size:42px; text-shadow:0 0 8px #fff,0 0 24px #ae60ff; transform:translate(-50%,-50%); animation:cubeSparkReveal .9s ease-out both; pointer-events:none; }
.cube-compare.ui-fx-apply .new,.cube-target.ui-fx-apply { animation:cubeChoiceApply .8s ease-out; }
.cube-compare.ui-fx-keep > div:first-child,.cube-target.ui-fx-keep { animation:cubeChoiceKeep .8s ease-out; }
@keyframes enhanceUiCharge { from { transform:rotate(-95deg) scale(.72); opacity:0; } 35% { opacity:1; } to { transform:rotate(135deg) scale(1.08); opacity:0; } }
@keyframes enhanceUiBreath { 40% { box-shadow:inset 0 0 28px #bf8cff77,0 0 18px #9d68d166; filter:brightness(1.08); } }
@keyframes starforceUiSuccess { 0% { box-shadow:none; } 30% { border-color:#ffd65c; box-shadow:inset 0 0 36px #fff3a899,0 0 24px #ffc745a8; } 100% { box-shadow:none; } }
@keyframes starRowSuccess { 25% { transform:scale(1.1); color:#fff3a0; text-shadow:0 0 6px #fff,0 0 20px #ffc629; } }
@keyframes starforceUiAwaken { 25% { border-color:#e4c0ff; box-shadow:inset 0 0 46px #b86dff99,0 0 28px #9f63e6aa; background:#f8edff; } }
@keyframes starforceUiFail { 28% { border-color:#a57e91; box-shadow:inset 0 0 25px #6e526040; filter:saturate(.35) brightness(.93); } }
@keyframes cubeOptionReveal { from { opacity:.15; transform:perspective(500px) rotateY(82deg) scale(.92); filter:blur(3px); } 55% { filter:blur(0); } to { opacity:1; transform:none; } }
@keyframes cubeSparkReveal { from { opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(-25deg); } 45% { opacity:1; } to { opacity:0; transform:translate(-50%,-50%) scale(1.8) rotate(25deg); } }
@keyframes cubeChoiceApply { 35% { border-color:#ffc548; box-shadow:inset 0 0 30px #fff2a388,0 0 22px #ffbd3f99; transform:scale(1.015); } }
@keyframes cubeChoiceKeep { 35% { border-color:#8ac6ef; box-shadow:inset 0 0 28px #bde7ff88,0 0 18px #73b8e777; transform:scale(1.015); } }
.rift-record { display: flex; gap: 10px; margin-bottom: 10px; }.rift-record span { flex: 1; padding: 12px; border-radius: 9px; text-align: center; background: #27213f; color: #efe6ff; }.rift-record b { color: #ffe274; }
#rift-start-form > label { display: block; margin: 8px 0; }#rift-start-form input,#rift-start-form select { width: 100%; margin-top: 4px; }#rift-start-form label small { display: block; color: #84768c; }
.rift-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 9px 0; }.rift-themes div { padding: 7px; border-radius: 7px; background: #f1eafb; }.rift-themes small { display: block; line-height: 1.35; color: #726879; }
.rift-active { text-align: center; padding: 20px; border-radius: 12px; color: #eee7ff; background: radial-gradient(circle at top,#664896,#211d39 70%); }.rift-active span,.rift-active strong { display: block; }.rift-active strong { color: #ffe474; font-size: 20px; margin: 6px; }
.invasion-card { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding: 10px; color: #fff2de; background:linear-gradient(135deg,#682c37,#4c2638); border:1px solid #a9575f; border-radius: 9px; }.invasion-card span { flex: 1; min-width: 220px; }
.invasion-card.density-mid { background:linear-gradient(135deg,#7b3137,#5c253f); box-shadow:0 0 12px #d74b4b55; }
.invasion-card.density-high { border-color:#ff9b51; background:linear-gradient(135deg,#8b352b,#691c4b); box-shadow:0 0 17px #ff5a4b88; animation:invasionUiPulse 1.15s ease-in-out infinite alternate; }
.invasion-card.density-extreme { border-color:#ffe08a; background:linear-gradient(135deg,#a33b24,#7e164e 56%,#3d195e); box-shadow:0 0 22px #ff5b42aa,0 0 34px #812ad977; animation:invasionUiPulse .72s ease-in-out infinite alternate; }
.invasion-card .reward-preview { color:#2b2630; }
.ranking-list { display: flex; flex-direction: column; gap: 4px; }.ranking-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; background: #f7f0df; }.ranking-row > b { font-size: 16px; color: #9b6b1d; }.ranking-row small { display: block; color: #82786b; }.ranking-row > strong { color: #633d88; }.ranking-row.mine { outline: 2px solid #f4a340; background: #fff5cf; }
.ranking-row .ranking-name { display:inline; width:auto; min-width:0; padding:0; border:0; border-radius:0; background:none; color:#2a2a2a; box-shadow:none !important; transform:none !important; filter:none !important; font:inherit; font-weight:bold; cursor:pointer; }
.ranking-row .ranking-name:hover { color:#a4621c; text-decoration:underline; }
#rift-hud,#invasion-hud { position: fixed; z-index: 13; right: 12px; display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 9px; color: #fff; pointer-events: auto; }
#rift-hud { top: 102px; background: #302550dd; border: 1px solid #a98dec; }#invasion-hud { top: 155px; cursor: pointer; background: #702b38dd; border: 1px solid #ff8f77; }#rift-hud span,#invasion-hud span { font-size: 11px; }
#invasion-hud.density-mid { background:#80313ee8; box-shadow:0 0 13px #e44f5455; }
#invasion-hud.density-high { border-color:#ffb05d; background:linear-gradient(135deg,#8e392de8,#681b4be8); animation:invasionUiPulse 1.15s ease-in-out infinite alternate; }
#invasion-hud.density-extreme { border-color:#ffe38c; background:linear-gradient(135deg,#a23a22ec,#7a1450ec,#3c175dec); animation:invasionUiPulse .72s ease-in-out infinite alternate; }
@keyframes invasionUiPulse { to { filter:brightness(1.13); box-shadow:0 0 21px #ff654e99,0 0 30px #8730c666; } }

@media (max-height: 540px) and (orientation: landscape) {
  .endgame-window, .rift-window, .ranking-window { width: min(720px, 90vw); }
  .endgame-window > .body, .rift-window > .body, .ranking-window > .body { max-height: calc(100vh - 74px); }
  .constellation-layout { transform: scale(.66); transform-origin: top center; margin-bottom: -122px; }
  .rune-inventory { grid-template-columns: 1fr 1fr; }
  #rift-hud { top: 44px; right: 5px; } #invasion-hud { top: 91px; right: 5px; }
  #rogue-invasion-hud { left:auto; right:7px; top:48px; width:190px; padding:6px 8px; max-height:180px; overflow:auto; }
}
@media (max-width: 620px) {
  .rune-inventory,.endgame-columns,.cube-compare,.rift-themes { grid-template-columns: 1fr; }
  .endgame-equip-list { max-height: 180px; }
}

/* Procedural commercial-polish pass: depth and response without bitmap assets. */
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button {
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(180deg,#fffdf6 0%,#f6ead0 100%);
  box-shadow: inset 0 1px #fff,0 2px 4px #57431f24;
  transition: transform .1s ease,box-shadow .14s ease,filter .14s ease,background .14s ease;
}
button:hover:not(:disabled) { transform:translateY(-1px); box-shadow:inset 0 1px #fff,0 4px 9px #5c432b2e; filter:saturate(1.05); }
button:active:not(:disabled) { transform:translateY(1px); box-shadow:inset 0 2px 5px #6a4b2928; }
button.primary { background:linear-gradient(180deg,#ffb25f,#f18a29); box-shadow:inset 0 1px #ffe0b5,0 3px 7px #b7542540; }
.win { background:linear-gradient(145deg,#fffdf6f5,#f2e4c4f7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow:0 16px 42px #07111d80,0 3px 8px #07111d55,inset 0 0 0 1px #fff9; animation:windowArrive .16s ease-out; }
.win .title { position:relative; background:linear-gradient(180deg,#ffe5a6 0%,#f5c86f 100%); box-shadow:inset 0 1px #fff8,0 2px 6px #6f4a1f22; text-shadow:0 1px #fff7; }
.win .body { background:linear-gradient(145deg,#fffdf7e8,#f9f1dfe8); scrollbar-color:#bd9a60 #efe2c5; scrollbar-width:thin; }
.win .body::-webkit-scrollbar { width:9px; }.win .body::-webkit-scrollbar-track { background:#efe2c5; border-radius:8px; }.win .body::-webkit-scrollbar-thumb { background:linear-gradient(#d1b57d,#a98750); border:2px solid #efe2c5; border-radius:8px; }
@keyframes windowArrive { from { opacity:0; transform:translateY(5px) scale(.992); } to { opacity:1; transform:none; } }
#statusbar,#topright,#quest-track,#party-panel,#minimap-box,#chatbox,#raid-hud,#rift-hud,#invasion-hud,#rogue-invasion-hud { box-shadow:0 7px 20px #07111d55,inset 0 1px #ffffff18; }
.bar i::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 15%,#fff5 44%,transparent 70%); transform:translateX(-120%); animation:barSheen 3.8s ease-in-out infinite; }
@keyframes barSheen { 55%,100% { transform:translateX(140%); } }
.cell { background:radial-gradient(circle at 35% 24%,#f8eed5,#dfcfaa); box-shadow:inset 0 1px 2px #fff9,0 2px 4px #49391c22; transition:transform .12s ease,border-color .12s ease,filter .12s ease; }
.cell:hover { transform:translateY(-1px); filter:brightness(1.04); }
/* 핫바는 인벤토리의 밝은 슬롯과 분리한다. 숫자는 빈 슬롯에서도 항상 읽혀야 한다. */
#hotbar .slot { color:#f6f9ff; background:linear-gradient(145deg,#263648d9,#111a27e8); border-color:#48637f; box-shadow:inset 0 1px 1px #ffffff18,0 3px 7px #02070d70; transition:transform .12s ease,border-color .12s ease,filter .12s ease; }
#hotbar .slot:hover { transform:translateY(-1px); filter:brightness(1.12); }
#hotbar .slot .k { color:#f8fbff; opacity:.92; font-weight:800; text-shadow:0 1px 2px #000; }
#hotbar .slot .lv { color:#ffe36a; opacity:1; font-weight:800; text-shadow:0 1px 2px #000; }
#hotbar .slot.empty { opacity:.72; }
input,select,textarea { transition:border-color .13s ease,box-shadow .13s ease,background .13s ease; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--accent) !important; box-shadow:0 0 0 3px #ff9f4338; background:#fff !important; }
#chat-channel:focus { outline:none; border-color:var(--accent) !important; background:#182536ee !important; color:#fff !important; }
#chat-channel option { background:#fff; color:#172536; }
.help-unread { position:relative !important; overflow:visible !important; }
.help-unread::after {
  content:''; position:absolute; z-index:3; top:-3px; right:-3px; width:7px; height:7px;
  border:1px solid #fff1e8; border-radius:50%; background:#f13232;
  box-shadow:0 0 0 1px #8f1515,0 0 5px #ff3030;
  animation:mailDotPulse .7s ease-in-out infinite alternate;
}
.help-window { width:min(720px,94vw); }
.help-window > .body { max-height:min(690px,78vh); overflow-y:auto; }
.help-tabs { display:flex; gap:6px; margin-bottom:10px; }
.help-tabs button { position:relative; padding:8px 12px; }.help-tabs button.on { color:#fff; border-color:#c9741f; background:var(--accent); }
.help-tabs button i { margin-left:5px; padding:1px 4px; border-radius:6px; color:#fff; background:#e83d3d; font-size:7px; font-style:normal; vertical-align:2px; }
.endgame-help-intro { padding:11px 13px; margin-bottom:9px; border-radius:10px; color:#eee7ff; background:linear-gradient(135deg,#30244c,#574073); }
.endgame-help-intro b,.endgame-help-intro span { display:block; }.endgame-help-intro span { margin-top:3px; color:#d6cae5; font-size:10px; }
.endgame-help-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.endgame-help-grid article { display:flex; flex-direction:column; min-width:0; padding:10px; border:1px solid #d8c095; border-radius:10px; background:#fffaf0; }
.endgame-help-grid strong { color:#613d7a; }.endgame-help-grid p { flex:1; margin:5px 0 8px; color:#685e50; font-size:10px; line-height:1.5; }
.endgame-help-grid button { padding:6px 8px; font-size:10px; }
@media (max-width:700px), (max-height:540px) and (orientation:landscape) {
  .help-window > .body { max-height:calc(100vh - 72px); }
  .endgame-help-grid { grid-template-columns:1fr; }
  .reward-slot { flex-basis:56px; width:56px; min-width:56px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }

/* ───────── 별무리 ─────────
   이 게임에만 있는 것이라 메뉴 줄에 섞지 않고 오른쪽에 따로 세운다.
   비어 보이던 자리를 채우면서, 처음 들어온 사람 눈에 제일 먼저 걸린다. */
/* 스티커 자체가 이미 테두리와 색을 다 갖고 있다. 여기에 판을 깔고 후광을 돌리면
   그림이 아니라 장식이 먼저 보인다. 그림만 두고 나머지는 전부 지운다. */
/* ───────── 별무리 (입체 캔뱃지 스타일) ───────── */
#asterism-launcher {
  flex: 0 0 auto;
  position: relative;
  display: block;
  width: 124px;
  height: 124px;
  padding: 0;
  margin-left: 6px;
  border-radius: 50% !important;
  background: radial-gradient(circle at 38% 30%, #ffffff 0%, #dbeafe 25%, #93c5fd 60%, #475569 100%) !important;
  border: 3px solid #cbd5e1 !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.7),
    0 3px 8px rgba(0, 0, 0, 0.5),
    inset 0 3px 6px rgba(255, 255, 255, 0.95),
    inset 0 -4px 8px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(100, 116, 139, 0.6) !important;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

/* 캔뱃지 표면 아크릴 돔 광택 & 하이라이트 레이어 */
#asterism-launcher::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 45% at 50% 16%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.2) 45%, transparent 75%),
    radial-gradient(circle at 78% 80%, rgba(255, 255, 255, 0.35) 0%, transparent 35%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, transparent 40%);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
  transition: opacity 0.16s ease;
}

#asterism-launcher img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-radius: 50%;
  filter: contrast(1.05) brightness(1.02);
}

#asterism-launcher:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.8),
    0 4px 10px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(192, 219, 254, 0.5),
    inset 0 3px 7px rgba(255, 255, 255, 1),
    inset 0 -4px 8px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(147, 197, 253, 0.9) !important;
}

#asterism-launcher:hover::after {
  opacity: 0.95;
}

#asterism-launcher:active {
  transform: translateY(1px) scale(0.97);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.6),
    inset 0 4px 8px rgba(0, 0, 0, 0.6) !important;
}

.asterism-launcher-key { display:none; }
.mobile-quick .mobile-asterism { color:#efe6ff; border-color:#8b7ad6; background:linear-gradient(#3a3468,#211f40); }

/* ── 창 ── */
.asterism-hero { display:flex; gap:14px; align-items:center; padding:12px 14px; margin-bottom:12px; border:1px solid #b9a2e0; border-radius:14px; color:#efe9ff; background:linear-gradient(135deg,#2c2550,#4a3c7d 55%,#35558c); }
.asterism-logo { flex:none; width:112px; height:112px; object-fit:contain; filter:drop-shadow(0 3px 7px #0007); }
.asterism-hero h3 { margin:0 0 6px; font-size:16px; letter-spacing:.5px; }
.asterism-hero p { margin:0; color:#d8cfee; font-size:11px; line-height:1.65; }
.asterism-away { margin-top:6px !important; color:#ffd9a8 !important; }

.asterism-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.asterism-card { display:flex; flex-direction:column; min-width:0; border:1px solid #d8c095; border-radius:12px; background:#fffaf0; overflow:hidden; }

.asterism-illust { flex:none; position:relative; aspect-ratio:1/1; overflow:hidden; background:#efe6d5; }
.asterism-illust img { width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block; }
.asterism-presence { position:absolute; top:7px; left:7px; padding:2px 7px; border-radius:9px; color:#e6dccb; background:#1d1a2acc; font-size:9px; }
.asterism-presence.on { color:#0f2417; background:#8ee87add; }
.asterism-ident { position:absolute; left:0; right:0; bottom:0; padding:16px 9px 7px; background:linear-gradient(transparent,#151228dd 55%); color:#fff; }
.asterism-ident b { display:block; font-size:15px; letter-spacing:.5px; text-shadow:0 1px 3px #000; }
.asterism-ident span { display:block; margin-top:1px; color:var(--cast-tint,#dcd4ff); font-size:9px; text-shadow:0 1px 3px #000; }

.asterism-facts { display:flex; gap:8px; align-items:center; padding:8px 9px; border-bottom:1px solid #e6d6b4; }
.asterism-facts canvas { flex:none; width:86px; height:104px; border:1px solid #e0cda6; border-radius:9px; background:linear-gradient(#f7f0e0,#e9dcc2); }
.asterism-facts ul { flex:1; min-width:0; margin:0; padding:0; list-style:none; }
.asterism-facts li { color:#6d6252; font-size:10px; line-height:1.5; }
.asterism-tagline { margin-top:4px !important; color:#4b4234 !important; font-size:10px !important; line-height:1.55 !important; }

.asterism-relation { padding:8px 9px; border-bottom:1px solid #e6d6b4; background:#fdf7ea; }
.asterism-relation.distant { background:#f7f0f4; }
.asterism-relation-top { display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
.asterism-relation-top b { color:#5c3f86; font-size:13px; }
.asterism-relation-top span { color:#8c8172; font-size:9px; }
.asterism-gauge { height:7px; margin:5px 0 4px; border:1px solid #d3bd93; border-radius:6px; background:#efe4cd; overflow:hidden; }
.asterism-gauge i { display:block; height:100%; background:linear-gradient(90deg,#9ad8ff,#c9a8ff 55%,#ffd9a8); }
.asterism-steps { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:5px; }
.asterism-steps span { padding:1px 5px; border-radius:7px; color:#a2988a; background:#f0e7d5; font-size:8px; }
.asterism-steps span.on { color:#41306b; background:#e0d3f6; font-weight:bold; }
.asterism-metrics { display:grid; grid-template-columns:1fr 1fr; gap:2px 6px; color:#8c8172; font-size:9px; }
.asterism-metrics b { color:#4b4234; }
.asterism-distant-note { margin:6px 0 0; color:#8a6a86; font-size:9px; line-height:1.5; }

.asterism-traits { flex:none; display:flex; flex-wrap:wrap; gap:3px; padding:8px 9px 0; }
.asterism-traits span { padding:2px 6px; border:1px solid #ddc9a4; border-radius:8px; color:#6d6252; background:#fff; font-size:9px; }
.asterism-story { flex:1; margin:7px 9px 9px; color:#685e50; font-size:10px; line-height:1.62; }

/* 창 안의 button 은 전역 규칙에서 flex:1 을 받는다. 그대로 두면 카드마다 남는 공간을
   본문과 나눠 가져서 버튼 키가 제각각이 된다 — 여백은 본문이 갖고 버튼은 고정한다. */
.asterism-talk { flex:none; margin:0 9px 9px; padding:0 8px; height:38px; border-color:#7a6bc4; color:#fff; background:linear-gradient(#5b4b9e,#3d3272); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asterism-talk:hover:not(:disabled) { background:linear-gradient(#6d5cb8,#4a3d88); }
.asterism-talk:disabled { color:#9a9088; border-color:#d6c6a6; background:#efe6d4; }

.asterism-guide { margin-top:12px; padding:11px 12px; border:1px solid #d8c095; border-radius:12px; background:#fffaf0; }
.asterism-guide h4 { margin:0 0 8px; color:#5c3f86; font-size:13px; }
.asterism-guide-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:8px; }
.asterism-guide-grid > div { padding:9px 10px; border:1px solid #e6d6b4; border-radius:10px; background:#fff; }
.asterism-guide-icon { font-size:15px; }
.asterism-guide-grid b { display:block; margin:3px 0 3px; color:#4b4234; font-size:11px; }
.asterism-guide-grid p { margin:0; color:#776d5e; font-size:10px; line-height:1.55; }
.asterism-note { margin:9px 0 0; color:#8c8172; font-size:10px; line-height:1.55; }

@media (max-width:700px), (max-height:540px) and (orientation:landscape) {
  .asterism-cards { grid-template-columns:1fr; }
  .asterism-illust { aspect-ratio:16/9; }
  .asterism-illust img { object-position:50% 18%; }
  .asterism-hero { flex-direction:column; text-align:center; }
  .asterism-logo { width:84px; height:84px; }
}

/* ───────── 모바일 퀵슬롯 등록 시스템 UI ───────── */
.btn-mobile-quickslot {
  display: none;
}
@media (hover: none) and (pointer: coarse), (max-width: 950px) {
  .btn-mobile-quickslot {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 8px; font-size: 11px; font-weight: 800; border-radius: 6px;
    background: linear-gradient(180deg, #37577d, #1f3752); color: #dbeafe;
    border: 1px solid #60a5fa; margin-left: 4px; flex-shrink: 0;
  }
  .btn-mobile-quickslot:active {
    background: #2563eb; transform: scale(0.95);
  }
}

.mobile-hotbar-picker {
  padding: 6px 2px;
}
.mobile-hotbar-picker-header {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px;
  border-bottom: 1px solid #d4be98; margin-bottom: 10px;
}
.mobile-hotbar-picker-header .picker-icon {
  font-size: 30px; line-height: 1; flex-shrink: 0;
}
.mobile-hotbar-picker-header .picker-info {
  display: flex; flex-direction: column; gap: 2px;
}
.mobile-hotbar-picker-header .picker-info b {
  font-size: 14px; color: #43311e;
}
.mobile-hotbar-picker-header .picker-info small {
  font-size: 11px; color: #78644e;
}

.mobile-hotbar-slots-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;
}
.mobile-slot-choice {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 6px; border-radius: 10px; border: 2px solid #cdb48c;
  background: linear-gradient(145deg, #fffdf8, #f5ebd5); gap: 3px;
  cursor: pointer; transition: transform 0.1s, border-color 0.1s;
}
.mobile-slot-choice:active {
  transform: scale(0.96);
}
.mobile-slot-choice.selected {
  border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 10px rgba(37, 99, 235, 0.25);
}
.mobile-slot-choice .slot-badge {
  font-size: 12px; font-weight: 900; color: #1e3a8a; background: #dbeafe;
  padding: 1px 8px; border-radius: 10px;
}
.mobile-slot-choice .slot-curr-icon {
  font-size: 22px; margin: 2px 0;
}
.mobile-slot-choice .slot-curr-name {
  font-size: 11px; color: #5c4630; max-width: 130px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-weight: 700;
}

.mobile-hotbar-clear-btn {
  width: 100%; padding: 8px; font-size: 12px; font-weight: 800; border-radius: 8px;
  background: #fef2f2; border: 1px solid #f87171; color: #991b1b; cursor: pointer;
}
.mobile-hotbar-clear-btn:active {
  background: #fee2e2;
}

.mobile-slot-picker-content {
  max-height: 380px; overflow-y: auto; padding: 4px;
}
.picker-subhead {
  font-size: 11px; font-weight: 900; color: #78644e; margin-bottom: 4px; padding-left: 2px;
}
.picker-item-list {
  display: flex; flex-direction: column; gap: 4px;
}
.picker-item-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid #d8c7a6; background: #fffdf8; text-align: left; cursor: pointer;
}
.picker-item-row:active {
  background: #f4ebd6; transform: scale(0.98);
}
.picker-item-row .p-icon {
  font-size: 24px; flex-shrink: 0;
}
.picker-item-row .p-info {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
}
.picker-item-row .p-info b {
  font-size: 13px; color: #3b2b18;
}
.picker-item-row .p-info small {
  font-size: 10px; color: #7a664e;
}
.picker-item-row .p-action {
  font-size: 11px; font-weight: 800; color: #2563eb; background: #dbeafe;
  padding: 3px 8px; border-radius: 6px; flex-shrink: 0;
}

.potion-mobile-action-box {
  padding: 8px; display: flex; flex-direction: column; gap: 12px;
}
.potion-mobile-header {
  display: flex; align-items: center; gap: 10px;
}
.potion-mobile-header .p-icon {
  font-size: 32px;
}
.potion-mobile-header .p-info b {
  font-size: 14px; color: #43311e;
}
.potion-mobile-header .p-info small {
  font-size: 11px; color: #78644e;
}
.potion-action-buttons {
  display: flex; gap: 8px;
}
.potion-action-buttons button {
  flex: 1; padding: 10px 6px; font-size: 12px; font-weight: 800; border-radius: 8px;
}
.accent-btn {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8); color: #fff; border: 1px solid #60a5fa;
}