:root {
  --bg-deep: #070b14;
  --panel-bg: rgba(11, 16, 28, 0.88);
  --panel-border: rgba(94, 126, 176, 0.44);
  --gold-border: rgba(234, 179, 8, 0.62);
  --cyan: #38bdf8;
  --gold: #facc15;
  --crimson: #fb7185;
  --jade: #2dd4bf;
  --violet: #c084fc;
  --txt-main: #f8fafc;
  --txt-muted: #94a3b8;
}

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

body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--txt-main);
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  word-break: keep-all;
  overflow-wrap: break-word;
}

#canvas-wrap {
  position: fixed;
  inset: 0;
  z-index: 1;
}

#labels-layer, #dmg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.hidden {
  display: none !important;
}

/* ==================== 3D OVERHEAD NAMEPLATES ==================== */
.ent-label {
  position: absolute;
  transform: translate(-50%, -100%);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.96), 0 0 2px #000;
  font-size: 11.5px;
  line-height: 1.2;
}
.ent-label .badge-ai {
  display: inline-block;
  padding: 1px 4px;
  margin-right: 3px;
  border-radius: 3px;
  background: rgba(20, 184, 166, 0.28);
  border: 1px solid #2dd4bf;
  color: #5eead4;
  font-size: 9.5px;
  font-weight: 800;
}
.ent-label .badge-npc {
  display: inline-block;
  padding: 1px 5px;
  margin-right: 3px;
  border-radius: 3px;
  background: rgba(250, 204, 21, 0.24);
  border: 1px solid #facc15;
  color: #fef08a;
  font-size: 9.5px;
  font-weight: 800;
}
.ent-label .ent-title {
  font-size: 9.5px;
  color: #cbd5e1;
}
.ent-label .mini-hp {
  width: 64px;
  height: 5px;
  background: rgba(10, 15, 28, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 3px;
  margin: 2px auto 0;
  overflow: hidden;
}
.ent-label .mini-hp > div {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
}
.ent-label.mob .mini-hp > div {
  background: linear-gradient(90deg, #e11d48, #fb7185);
}
.ent-label.loot {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(8, 12, 22, 0.92);
  border: 1px solid var(--gold);
  font-weight: 800;
  font-size: 11px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
}

/* ==================== VISCERAL FLOATING COMBAT POPUPS ==================== */
.float-dmg {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 20px;
  color: #f8fafc;
  text-shadow: 0 2px 0 #000, 0 4px 10px rgba(0, 0, 0, 0.95);
  animation: floatUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  text-align: center;
  line-height: 1.05;
}
.float-dmg.crit {
  font-size: 29px;
  color: #fde047;
  text-shadow: 0 2px 0 #78350f, 0 0 14px rgba(250, 204, 21, 0.75), 0 4px 10px #000;
}
.float-dmg.crit .crit-tag {
  display: block;
  font-size: 12px;
  letter-spacing: 1px;
  color: #fb923c;
}
.float-dmg.special {
  font-size: 27px;
  color: #38bdf8;
  text-shadow: 0 2px 0 #082f49, 0 0 14px rgba(56, 189, 248, 0.8);
}
.float-dmg.synergy {
  font-size: 33px;
  color: #f0abfc;
  text-shadow: 0 2px 0 #4a044e, 0 0 18px rgba(232, 121, 249, 0.9);
}
@keyframes floatUp {
  0% { opacity: 1; transform: translate(-50%, 6px) scale(0.75); }
  22% { transform: translate(-50%, -22px) scale(1.16); }
  100% { opacity: 0; transform: translate(-50%, -62px) scale(0.95); }
}

/* ==================== AAA INTRO / 3D CHARACTER SHOWCASE OVERLAY ==================== */
#login-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  background: #04070f;
}

.intro-bg-art {
  position: absolute;
  inset: -3%;
  background: url('../assets/ui/intro_keyart_bg.jpg') center center / cover no-repeat;
  filter: saturate(1.12) contrast(1.06);
  animation: introPanZoom 22s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes introPanZoom {
  0% { transform: scale(1.02) translateY(0px); }
  100% { transform: scale(1.08) translateY(-8px); }
}

.intro-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 46% 48%, rgba(8, 16, 32, 0.16) 0%, rgba(5, 9, 20, 0.76) 62%, rgba(3, 6, 14, 0.94) 100%),
    linear-gradient(90deg, rgba(4, 8, 18, 0.88) 0%, rgba(4, 8, 18, 0.18) 32%, rgba(4, 8, 18, 0.18) 58%, rgba(4, 8, 18, 0.90) 100%),
    linear-gradient(180deg, rgba(4, 7, 15, 0.82) 0%, transparent 22%, transparent 78%, rgba(4, 7, 15, 0.90) 100%);
}

#intro-embers-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.intro-shell {
  position: relative;
  z-index: 4;
  width: min(1360px, 98vw);
  height: min(860px, 96vh);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.intro-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 16px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(7, 12, 24, 0.88), rgba(12, 20, 38, 0.68), rgba(7, 12, 24, 0.88));
  border: 1px solid rgba(250, 204, 21, 0.36);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
}

.intro-brand-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.intro-crest-wrap {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #facc15, #38bdf8, #fb7185);
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.55);
  flex-shrink: 0;
}
.intro-crest-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.brand-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #7dd3fc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;
}

.intro-title-block h1 {
  font-size: 28px;
  line-height: 1.12;
  margin-top: 2px;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff 15%, #fef08a 65%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9));
}
.intro-title-block h1 span {
  font-size: 15px;
  margin-left: 8px;
  background: none;
  -webkit-text-fill-color: #7dd3fc;
  font-weight: 700;
}
.subtitle {
  color: #cbd5e1;
  font-size: 12px;
  margin-top: 2px;
  text-shadow: 0 1px 4px #000;
}

.server-live-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 13px;
  border-radius: 11px;
  background: rgba(8, 18, 32, 0.85);
  border: 1px solid rgba(45, 212, 191, 0.45);
}
.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
  animation: livePulse 1.6s infinite;
}
@keyframes livePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.28); opacity: 0.65; }
}
.server-live-pill strong {
  display: block;
  font-size: 12px;
  color: #ecfdf5;
}
.server-live-pill small {
  display: block;
  font-size: 10.5px;
  color: #94a3b8;
}

.intro-main-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 276px minmax(300px, 1fr) 486px;
  gap: 14px;
  align-items: stretch;
}

/* 좌측 세계관 & 게이트 화보 컬럼 */
.intro-lore-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
  padding: 11px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(8, 13, 25, 0.86), rgba(6, 10, 20, 0.92));
  border: 1px solid rgba(94, 126, 176, 0.38);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
}
.intro-section-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fde047;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(250, 204, 21, 0.28);
}
.lore-story-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.38);
  flex: 1;
  min-height: 92px;
}
.lore-story-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lore-story-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 6px 8px;
  background: linear-gradient(180deg, transparent, rgba(4, 8, 18, 0.92) 45%);
}
.lore-story-caption strong {
  display: block;
  font-size: 11.5px;
  color: #fef08a;
}
.lore-story-caption span {
  display: block;
  font-size: 10px;
  color: #cbd5e1;
  line-height: 1.25;
}

.intro-gates-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.igate-thumb {
  position: relative;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.35);
}
.igate-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.igate-thumb span {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3px 6px;
  background: rgba(5, 9, 18, 0.86);
  font-size: 9.5px;
  font-weight: 700;
  color: #f8fafc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  gap: 4px;
}
.igate-thumb span em {
  font-style: normal;
  font-size: 9px;
  color: #7dd3fc;
}

/* 중앙 실시간 3D 골격 리깅 쇼케이스 스테이지 */
.intro-stage-col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.32);
  background: radial-gradient(ellipse at 50% 78%, rgba(56, 189, 248, 0.16), rgba(6, 10, 20, 0.18) 68%);
  overflow: hidden;
}
.stage-floating-badge {
  position: relative;
  z-index: 3;
  margin-top: 8px;
  text-align: center;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(6, 11, 24, 0.82);
  border: 1px solid rgba(250, 204, 21, 0.45);
}
.stage-floating-badge span {
  display: block;
  font-size: 12.5px;
  font-weight: 900;
  color: #fef08a;
}
.stage-floating-badge small {
  display: block;
  font-size: 9.5px;
  color: #94a3b8;
}
.intro-3d-viewport {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: grab;
}
.intro-3d-viewport:active {
  cursor: grabbing;
}
#intro-hero-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.stage-controls-dock {
  position: relative;
  z-index: 3;
  width: calc(100% - 20px);
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(7, 12, 24, 0.86);
  border: 1px solid rgba(94, 126, 176, 0.4);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gender-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.gender-btn {
  padding: 6px 8px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 7px;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.gender-btn.active {
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.42), rgba(56, 189, 248, 0.25));
  border-color: var(--cyan);
  color: #fff;
}
.intro-pose-btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.ipose-btn {
  padding: 5px 4px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(100, 116, 139, 0.45);
  color: #cbd5e1;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.ipose-btn:hover, .ipose-btn.active {
  border-color: #facc15;
  color: #fef08a;
  background: rgba(234, 179, 8, 0.18);
}

/* 우측 유파 선택 & 출격 패널 */
.intro-create-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(9, 15, 28, 0.90), rgba(6, 10, 20, 0.95));
  border: 1px solid rgba(56, 189, 248, 0.45);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.72);
}

.sect-header {
  font-size: 12.5px;
  font-weight: 800;
  color: #fef08a;
}
.sect-header span {
  color: var(--txt-muted);
  font-weight: 400;
  font-size: 10.5px;
}

.sect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
}
.sect-card {
  background: rgba(10, 16, 30, 0.92);
  border: 1px solid #26334d;
  border-radius: 11px;
  padding: 9px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.14s, border-color 0.14s, box-shadow 0.14s;
}
.sect-card:hover {
  transform: translateY(-2px);
  border-color: var(--sect-col);
}
.sect-card.active {
  border-color: var(--sect-col);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.85), rgba(9, 14, 26, 0.96));
  box-shadow: 0 0 0 1px var(--sect-col) inset, 0 8px 20px rgba(0, 0, 0, 0.55);
}
.sect-card-top {
  display: flex;
  align-items: center;
  gap: 9px;
}
.login-sect-portrait {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center 16%;
  border: 2px solid var(--sect-col);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
  flex-shrink: 0;
}
.sect-meta {
  min-width: 0;
  flex: 1;
}
.sect-name {
  font-size: 14px;
  font-weight: 900;
  color: var(--sect-col);
}
.sect-name span {
  font-size: 10px;
  opacity: 0.78;
}
.sect-role {
  font-size: 10px;
  font-weight: 700;
  color: #e2e8f0;
  margin-top: 1px;
}
.sect-bars {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.sect-bars span {
  flex: 1;
  font-size: 9px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.sect-bars span i {
  display: inline-block;
  height: 4px;
  border-radius: 3px;
  background: var(--sect-col);
}
.sect-card p {
  font-size: 10.5px;
  color: #cbd5e1;
  line-height: 1.32;
  margin: 5px 0 4px;
}
.sect-skills {
  font-size: 9.8px;
  color: #fde68a;
  padding-top: 4px;
  border-top: 1px dashed rgba(148, 163, 184, 0.24);
}

.intro-launch-dock {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(94, 126, 176, 0.3);
}
.field-group label {
  display: block;
  font-size: 11px;
  color: #e2e8f0;
  margin-bottom: 4px;
  font-weight: 800;
}
.field-group label span {
  font-weight: 400;
  color: #94a3b8;
  font-size: 10px;
}
.input-inline {
  display: flex;
  gap: 8px;
}
#inp-name {
  flex: 1;
  background: #060b16;
  border: 1px solid #3b4f70;
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  user-select: text;
}
#inp-name:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}
.btn-ghost {
  background: #172338;
  color: #fde047;
  border: 1px solid rgba(250, 204, 21, 0.45);
  border-radius: 8px;
  padding: 0 13px;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
}
.btn-primary {
  width: 100%;
  padding: 10px 14px;
  border-radius: 11px;
  border: 1px solid rgba(250, 204, 21, 0.72);
  background: linear-gradient(90deg, #0369a1 0%, #1d4ed8 35%, #b45309 75%, #ca8a04 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.48), 0 0 18px rgba(250, 204, 21, 0.26);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.btn-start-main {
  font-size: 15.5px;
  font-weight: 900;
  letter-spacing: 0.4px;
}
.btn-start-sub {
  font-size: 10px;
  color: #fef08a;
  opacity: 0.92;
}

@media (max-width: 1180px) {
  .intro-main-grid {
    grid-template-columns: 320px 1fr;
  }
  .intro-lore-col {
    display: none;
  }
}

/* ==================== MAIN ARPG HUD (4-QUADRANT ZERO-OVERLAP) ==================== */
#hud-root {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
#hud-root button,
#hud-root input,
#hud-root .hud-panel,
#hud-root .hero-unit-frame,
#hud-root .minimap-wrap,
#hud-root #right-drawer,
#hud-root #center-modal,
#hud-root #chat-hud {
  pointer-events: auto;
}

/* 1. TOP-LEFT: Character Portrait, Buffs & Party */
#topleft-hud {
  position: absolute;
  top: 12px;
  left: 14px;
  width: 248px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-unit-frame {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(12, 18, 32, 0.94), rgba(18, 26, 44, 0.88));
  border: 1px solid rgba(234, 179, 8, 0.45);
  border-radius: 32px 12px 12px 32px;
  padding: 5px 10px 5px 5px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
}
.portrait-ring {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #facc15;
  overflow: hidden;
  flex-shrink: 0;
  background: #0f172a;
}
.portrait-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}
.lv-chip {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #090d16;
  border: 1px solid #facc15;
  color: #fde047;
  font-size: 10px;
  font-weight: 900;
  padding: 0 5px;
  border-radius: 8px;
}
.hero-unit-meta {
  flex: 1;
  min-width: 0;
}
.hero-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 3px;
}
.hero-name-row strong {
  font-size: 12.5px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.realm-pill {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.55);
  color: #7dd3fc;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
}
.unit-mini-bar {
  height: 6px;
  background: #090d16;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 3px;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.unit-mini-bar.hp > div {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #be123c, #fb7185);
  transition: width 0.15s;
}
.unit-mini-bar.qi > div {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #1d4ed8, #38bdf8);
  transition: width 0.15s;
}
.gold-txt {
  font-size: 10.5px;
  color: #fde047;
  font-weight: 700;
}

.buff-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  min-height: 2px;
}
.buff-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(12, 18, 32, 0.92);
  border: 1px solid rgba(250, 204, 21, 0.55);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fef08a;
}
.buff-chip img {
  width: 15px;
  height: 15px;
  border-radius: 3px;
}

.hud-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 8px 10px;
  backdrop-filter: blur(5px);
}
.panel-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #e2e8f0;
  margin-bottom: 5px;
}
.mini-actions {
  display: flex;
  gap: 4px;
}
.mini-actions button {
  background: rgba(20, 184, 166, 0.22);
  border: 1px solid #2dd4bf;
  color: #99f6e4;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.pty-list {
  font-size: 10.5px;
  color: #94a3b8;
}
.pty-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  border-top: 1px solid rgba(51, 65, 85, 0.35);
  color: #e2e8f0;
}

/* 2. TOP-CENTER: Slim News Ticker & Ornate Boss Raid Bar */
#topcenter-hud {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(470px, calc(100vw - 560px));
  min-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ticker-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(9, 14, 26, 0.82);
  border: 1px solid rgba(71, 98, 138, 0.4);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
}
.ticker-tag {
  background: rgba(56, 189, 248, 0.2);
  color: var(--cyan);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 10px;
  flex-shrink: 0;
}
.ticker-text {
  color: #cbd5e1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#boss-hud {
  width: 100%;
  background: linear-gradient(180deg, rgba(20, 12, 24, 0.95), rgba(10, 11, 20, 0.95));
  border: 1.5px solid rgba(250, 204, 21, 0.62);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.78);
}
.boss-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.boss-name-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}
.boss-sub {
  font-size: 10.5px;
  color: #fde047;
  font-weight: 700;
}
.tel-pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  background: rgba(56, 189, 248, 0.25);
  border: 1px solid var(--cyan);
  color: #bae6fd;
  white-space: nowrap;
}
.boss-hp-track {
  position: relative;
  height: 15px;
  background: #140c1c;
  border: 1px solid rgba(251, 113, 133, 0.45);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}
#boss-hp-lag {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: #fef08a;
  transition: width 0.55s ease-out;
}
#boss-hp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(90deg, #9f1239, #e11d48, #fb7185);
  transition: width 0.12s;
}
#boss-hp-txt {
  position: relative;
  z-index: 2;
  display: block;
  text-align: center;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 13px;
  text-shadow: 0 1px 4px #000;
}
.boss-sh-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.boss-sh-track {
  position: relative;
  flex: 1;
  height: 10px;
  background: #0c1729;
  border-radius: 4px;
  overflow: hidden;
}
#boss-sh-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
}
#boss-sh-txt {
  position: relative;
  z-index: 2;
  display: block;
  text-align: center;
  font-size: 9.5px;
  line-height: 10px;
  color: #e0f2fe;
}
.synergy-pips {
  font-size: 10.5px;
  font-weight: 800;
  color: #f0abfc;
  white-space: nowrap;
}

/* 3. TOP-RIGHT: Zone Pill, Menu Strip, Live Minimap & Quest Tracker */
#topright-hud {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 264px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.zone-header-row {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  justify-content: flex-end;
}
.zone-pill {
  background: rgba(11, 18, 33, 0.92);
  border: 1px solid rgba(250, 204, 21, 0.5);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  color: #fef9c3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.return-btn {
  background: rgba(2, 132, 199, 0.35) !important;
  border-color: #38bdf8 !important;
  color: #e0f2fe !important;
}
.top-menu-btns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}
.qbtn, .mbtn {
  background: rgba(13, 20, 36, 0.92);
  border: 1px solid rgba(100, 116, 139, 0.52);
  color: #e2e8f0;
  padding: 4px 2px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.qbtn:hover, .mbtn:hover {
  border-color: var(--cyan);
  color: #fff;
}
.mbtn.accent-cyan { border-color: rgba(56, 189, 248, 0.7); color: #7dd3fc; }
.mbtn.accent-gold { border-color: rgba(250, 204, 21, 0.7); color: #fde047; }
.mbtn.accent-jade { border-color: rgba(45, 212, 191, 0.7); color: #5eead4; }
.rig-btn { border-color: rgba(250, 204, 21, 0.55); color: #fde047; }

.minimap-wrap {
  position: relative;
  width: 100%;
  background: rgba(9, 14, 25, 0.9);
  border: 1.5px solid rgba(234, 179, 8, 0.45);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
}
#minimap-canvas {
  width: 164px;
  height: 164px;
  border-radius: 8px;
  background: #060a12;
  border: 1px solid rgba(71, 98, 138, 0.45);
}
.minimap-north {
  position: absolute;
  top: 9px;
  right: 48px;
  font-size: 10px;
  font-weight: 900;
  color: #fde047;
  text-shadow: 0 1px 3px #000;
}
.gate-mini-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  width: 100%;
}
.gmini-btn {
  background: rgba(18, 28, 48, 0.9);
  border: 1px solid rgba(71, 98, 138, 0.5);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 2px;
  border-radius: 5px;
  cursor: pointer;
}
.gmini-btn:hover {
  border-color: var(--cyan);
  color: #fff;
}
.gmini-btn.rift {
  border-color: rgba(244, 63, 94, 0.65);
  color: #fda4af;
}

#quest-panel {
  width: 100%;
  max-height: 205px;
  overflow-y: auto;
  padding: 7px 9px 10px;
}
#quest-panel .panel-hdr {
  color: #fde047;
}
.q-item {
  font-size: 10.5px;
  padding: 4px 0;
  border-top: 1px solid rgba(51, 65, 85, 0.35);
}
.q-item strong {
  color: #f8fafc;
  display: block;
}
.q-sub {
  color: #94a3b8;
  font-size: 10px;
  margin-top: 1px;
}
.q-claim-btn {
  margin-top: 4px;
  width: 100%;
  padding: 4px;
  border-radius: 5px;
  border: 1px solid #facc15;
  background: rgba(234, 179, 8, 0.25);
  color: #fef08a;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}
.next-goal {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed rgba(250, 204, 21, 0.35);
  font-size: 10px;
  color: #bae6fd;
  line-height: 1.35;
}

/* ==================== CENTER FANFARE, BANNER & INTERACT ==================== */
#fanfare-banner {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 36px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(180, 83, 9, 0.92), rgba(15, 23, 42, 0.92));
  border: 2px solid #fde047;
  color: #fef9c3;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 2px 12px #000;
  box-shadow: 0 0 40px rgba(250, 204, 21, 0.6);
  animation: fanfarePop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fanfarePop {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

#center-banner {
  position: absolute;
  top: 142px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(9, 14, 26, 0.93);
  border: 1px solid rgba(250, 204, 21, 0.7);
  color: #fef08a;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.72);
  max-width: 72vw;
  text-align: center;
}

#interact-prompt {
  position: absolute;
  bottom: 126px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(11, 20, 38, 0.94);
  border: 1.5px solid var(--cyan);
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  color: #e0f2fe;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7);
}
#interact-prompt button {
  background: var(--cyan);
  color: #082f49;
  border: none;
  border-radius: 999px;
  padding: 4px 11px;
  font-weight: 900;
  cursor: pointer;
}

/* ==================== 4. BOTTOM-CENTER ORBS & ILLUSTRATED SKILL DOCK ==================== */
#bottom-combat-hud {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: linear-gradient(180deg, rgba(14, 19, 32, 0.92), rgba(7, 10, 18, 0.97));
  border: 1.5px solid rgba(148, 163, 184, 0.36);
  border-radius: 44px;
  padding: 7px 12px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.85);
}

.orb-shell {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #161826, #060810);
  border: 2.5px solid #64748b;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.85) inset;
}
.orb-shell.hp-orb { border-color: #fda4af; }
.orb-shell.qi-orb { border-color: #7dd3fc; }

.orb-liquid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transition: height 0.18s ease-out;
}
.orb-liquid.hp-liq {
  background: radial-gradient(circle at 35% 30%, #fb7185, #be123c 65%, #4c0519);
}
.orb-liquid.qi-liq {
  background: radial-gradient(circle at 35% 30%, #60a5fa, #1d4ed8 65%, #1e1b4b);
}
.orb-gloss {
  position: absolute;
  top: 6px;
  left: 11px;
  width: 24px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  transform: rotate(-22deg);
  pointer-events: none;
}
.orb-shield-ring {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 3px solid #38bdf8;
  opacity: 0;
  box-shadow: 0 0 10px #38bdf8;
  pointer-events: none;
  transition: opacity 0.2s;
}
.orb-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 4px #000, 0 0 3px #000;
}
.orb-label strong {
  font-size: 11px;
  font-weight: 900;
  color: #fff;
}
.orb-label small {
  font-size: 9px;
  color: #e2e8f0;
}

.dock-center {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dock-top-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.combo-pill {
  background: linear-gradient(90deg, #c2410c, #eab308);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  padding: 1px 9px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.55);
}
.exp-track {
  flex: 1;
  height: 5px;
  background: #0c1322;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  overflow: hidden;
}
#bar-exp {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #eab308, #fde047, #34d399);
  transition: width 0.25s;
}

.skill-hotbar {
  display: flex;
  align-items: center;
  gap: 5px;
}
.dock-sep {
  width: 1px;
  height: 40px;
  background: rgba(148, 163, 184, 0.25);
  margin: 0 2px;
}

.sk-slot {
  position: relative;
  width: 50px;
  height: 54px;
  border-radius: 9px;
  background: #0c1322;
  border: 1.5px solid rgba(100, 116, 139, 0.55);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 2px;
  transition: transform 0.08s, border-color 0.12s;
}
.sk-slot:hover {
  transform: translateY(-2px);
  border-color: #e2e8f0;
}
.sk-slot:active {
  transform: scale(0.94);
}
.sk-slot.main-sk { border-color: rgba(56, 189, 248, 0.65); }
.sk-slot.ult-sk { border-color: rgba(250, 204, 21, 0.85); box-shadow: 0 0 12px rgba(250, 204, 21, 0.25); }
.sk-slot.parry { border-color: rgba(56, 189, 248, 0.75); }
.sk-slot.dash { border-color: rgba(45, 212, 191, 0.65); }

.sk-ico {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  pointer-events: none;
}
.sk-key {
  position: absolute;
  top: 1px;
  left: 3px;
  z-index: 3;
  background: rgba(7, 11, 20, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: #f8fafc;
  font-size: 8.5px;
  font-weight: 900;
  padding: 0 3.5px;
  border-radius: 4px;
}
.sk-stars {
  position: absolute;
  top: 1px;
  right: 3px;
  z-index: 3;
  font-size: 8px;
  color: #fde047;
  text-shadow: 0 1px 2px #000;
}
.sk-sub {
  position: absolute;
  top: 1px;
  right: 3px;
  z-index: 3;
  font-size: 8.5px;
  font-weight: 800;
  color: #bae6fd;
  text-shadow: 0 1px 2px #000;
}
.sk-cap {
  position: relative;
  z-index: 3;
  font-size: 9px;
  font-weight: 800;
  color: #e2e8f0;
  max-width: 46px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000;
}

/* Clean Cooldown Overlay — dims icon cleanly, zero text overlap! */
.cd-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(5, 8, 16, 0.82);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  color: #fde047;
  text-shadow: 0 2px 6px #000;
}

/* ==================== BOTTOM-LEFT COMPACT CHAT ==================== */
#chat-hud {
  position: absolute;
  left: 14px;
  bottom: 12px;
  width: 248px;
  background: rgba(9, 14, 26, 0.78);
  border: 1px solid rgba(71, 98, 138, 0.38);
  border-radius: 10px;
  padding: 6px 8px;
  backdrop-filter: blur(4px);
}
#chat-messages {
  height: 104px;
  overflow-y: auto;
  font-size: 11px;
  line-height: 1.38;
  margin-bottom: 5px;
}
.chat-line { margin-bottom: 2px; word-break: break-word; }
.c-sys { color: #fde047; }
.c-ai {
  color: #2dd4bf;
  font-weight: 800;
  margin-right: 3px;
}
#chat-form {
  display: flex;
  gap: 4px;
}
#chat-input {
  flex: 1;
  background: rgba(6, 9, 17, 0.9);
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 5px 8px;
  color: #fff;
  font-size: 11px;
  user-select: text;
}
#chat-form button {
  background: #1e293b;
  border: 1px solid #475569;
  color: #e2e8f0;
  border-radius: 6px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

/* ==================== CENTER VISUAL MODAL ([M] GATES / [I] FORGE / [B] SHOP) ==================== */
#center-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: radial-gradient(circle at 50% 50%, rgba(4, 7, 14, 0.04) 0%, rgba(4, 7, 14, 0.34) 100%);
  backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}
#center-modal .cmodal-card {
  pointer-events: auto;
}
#hud-root:has(#center-modal:not(.hidden)) #topright-hud,
#hud-root:has(#center-modal:not(.hidden)) #interact-prompt,
#hud-root:has(#right-drawer:not(.hidden)) .minimap-wrap,
#hud-root:has(#right-drawer:not(.hidden)) #quest-panel,
#hud-root:has(#right-drawer:not(.hidden)) #interact-prompt {
  opacity: 0;
  pointer-events: none;
}
#center-modal.vista-mode {
  background: linear-gradient(180deg, rgba(4, 8, 18, 0.0) 0%, rgba(4, 8, 18, 0.04) 62%, rgba(4, 8, 18, 0.68) 100%);
  align-items: flex-end;
  padding-bottom: 92px;
}
#center-modal.vista-mode .cmodal-card {
  width: min(860px, 90vw);
  background: linear-gradient(180deg, rgba(13, 19, 32, 0.90), rgba(7, 11, 20, 0.95));
}
#center-modal.vista-mode .cmodal-hdr {
  padding: 7px 14px;
}
#center-modal.vista-mode .cmodal-body {
  padding: 9px 12px;
}
#center-modal.vista-mode .gshow-card img {
  height: 66px;
}
#center-modal.vista-mode .gshow-info {
  padding: 7px 8px;
  gap: 2px;
}
/* [I] Blacksmith Forge Stage: right-aligned panel so 3D roaring furnace + glowing anvil + 마도현 + hunter shine unobstructed on the left! */
#center-modal.forge-stage-mode {
  background: linear-gradient(90deg, rgba(20, 10, 6, 0.0) 0%, rgba(12, 10, 14, 0.04) 52%, rgba(8, 10, 16, 0.42) 100%);
  justify-content: flex-end;
  align-items: center;
  padding-right: 26px;
}
#center-modal.forge-stage-mode .cmodal-card {
  width: min(468px, 43vw);
  max-height: 74vh;
  background: linear-gradient(180deg, rgba(22, 16, 14, 0.94), rgba(12, 10, 14, 0.97));
  border-color: rgba(251, 146, 60, 0.78);
}
#center-modal.forge-stage-mode .forge-layout {
  grid-template-columns: 1fr;
  gap: 8px;
}
#center-modal.forge-stage-mode .forge-stage-box {
  padding: 10px;
}
#center-modal.forge-stage-mode .forge-target-card {
  width: 68px;
  height: 68px;
}
#center-modal.forge-stage-mode .forge-target-card img {
  width: 52px;
  height: 52px;
}
/* [B] Apothecary Shop Stage: right-aligned RPG shop panel so 3D 설아, glowing potions & hunter shine on the left! */
#center-modal.shop-stage-mode {
  background: linear-gradient(90deg, rgba(4, 10, 16, 0.0) 0%, rgba(4, 10, 16, 0.05) 52%, rgba(4, 10, 16, 0.42) 100%);
  justify-content: flex-end;
  align-items: center;
  padding-right: 26px;
}
#center-modal.shop-stage-mode .cmodal-card {
  width: min(568px, 47vw);
  max-height: 76vh;
  background: linear-gradient(180deg, rgba(12, 24, 28, 0.94), rgba(8, 14, 20, 0.97));
  border-color: rgba(45, 212, 191, 0.72);
}
#center-modal.shop-stage-mode .shop-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.cmodal-card {
  width: min(860px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(16, 22, 36, 0.98), rgba(9, 12, 22, 0.99));
  border: 1.5px solid rgba(234, 179, 8, 0.65);
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
.cmodal-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 18px;
  background: rgba(24, 31, 50, 0.9);
  border-bottom: 1px solid rgba(234, 179, 8, 0.35);
}
.cmodal-hdr strong {
  font-size: 16px;
  color: #fef08a;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#btn-close-cmodal {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: #e2e8f0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 900;
}
.cmodal-body {
  padding: 14px 18px;
  overflow-y: auto;
}

/* Gate Showcase Cards (v1_135 style!) */
.gate-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.gshow-card {
  background: #0a101e;
  border: 1.5px solid var(--gcol, #38bdf8);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s;
}
.gshow-card:hover {
  transform: translateY(-3px);
}
.gshow-card img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  border-bottom: 1.5px solid var(--gcol, #38bdf8);
}
.gshow-info {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gshow-grade {
  font-size: 10px;
  font-weight: 900;
  color: var(--gcol, #38bdf8);
}
.gshow-info strong {
  font-size: 13.5px;
  color: #fff;
}
.gshow-boss {
  font-size: 11px;
  color: #cbd5e1;
}
.gshow-btns {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  gap: 5px;
}
.gshow-btns button {
  flex: 1;
  padding: 7px 4px;
  border-radius: 6px;
  border: 1px solid var(--gcol, #38bdf8);
  background: rgba(30, 41, 59, 0.9);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.gshow-btns button.primary {
  background: linear-gradient(90deg, #0284c7, #0d9488);
}

/* Blacksmith Forge Upgrade Stage (v2_135 style!) */
.forge-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
}
.forge-stage-box {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(251, 146, 60, 0.55);
  background: #120d0b;
  padding: 14px;
  text-align: center;
}
.forge-banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  pointer-events: none;
}
.forge-stage-inner {
  position: relative;
  z-index: 2;
}
.forge-slot-tabs {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.forge-anvil-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 10px 0;
}
.anvil-side-ico {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(250, 204, 21, 0.55);
}
.forge-target-card {
  width: 82px;
  height: 82px;
  border-radius: 12px;
  border: 2px solid #facc15;
  background: radial-gradient(circle, rgba(234, 179, 8, 0.32), #0f172a);
  box-shadow: 0 0 26px rgba(250, 204, 21, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.forge-target-card img {
  width: 64px;
  height: 64px;
}
.forge-lv-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}
.forge-lv-track {
  flex: 1;
  height: 12px;
  background: #1c1917;
  border: 1px solid rgba(250, 204, 21, 0.45);
  border-radius: 999px;
  overflow: hidden;
}
.forge-lv-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #fde047);
  transition: width 0.25s;
}
.forge-stat-preview {
  background: rgba(9, 13, 22, 0.84);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 8px;
  padding: 8px;
  font-size: 12px;
  color: #4ade80;
  font-weight: 800;
  margin-bottom: 10px;
}

/* Shop Grid (백초당 만물단약방 [B]) */
.shop-banner-bar {
  position: relative;
  height: 78px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(45, 212, 191, 0.5);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
}
.shop-banner-bar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.36;
}
.shop-banner-bar > div {
  position: relative;
  z-index: 2;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.shop-card {
  background: rgba(13, 20, 35, 0.94);
  border: 1px solid rgba(71, 98, 138, 0.48);
  border-radius: 10px;
  padding: 9px;
  display: flex;
  gap: 9px;
  align-items: center;
}
.shop-card img {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  flex-shrink: 0;
}
.shop-info {
  flex: 1;
  min-width: 0;
}
.shop-info strong {
  font-size: 12px;
  display: block;
}
.shop-info p {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.3;
  margin: 2px 0 5px;
}
.shop-card button {
  white-space: nowrap;
}

/* ==================== RIGHT DRAWER ([C] / [K] / [P] / [F9]) ==================== */
#right-drawer {
  position: absolute;
  top: 108px;
  right: 14px;
  width: 356px;
  max-height: calc(100vh - 196px);
  z-index: 25;
  display: flex;
  flex-direction: column;
  background: rgba(10, 15, 28, 0.96);
  border: 1.5px solid rgba(56, 189, 248, 0.52);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.82);
  overflow: hidden;
}
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(19, 28, 48, 0.92);
  border-bottom: 1px solid rgba(71, 98, 138, 0.4);
  font-size: 13.5px;
}
#btn-close-drawer {
  background: transparent;
  border: 1px solid #475569;
  color: #e2e8f0;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  cursor: pointer;
}
#drawer-body {
  padding: 10px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.d-card {
  background: rgba(17, 25, 42, 0.88);
  border: 1px solid rgba(71, 98, 138, 0.38);
  border-radius: 9px;
  padding: 9px 10px;
  font-size: 12px;
}
.d-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.d-btn {
  background: #1e293b;
  border: 1px solid #475569;
  color: #e2e8f0;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.d-btn:hover {
  border-color: var(--cyan);
  color: #fff;
}
.d-btn.gold {
  background: linear-gradient(90deg, rgba(180, 83, 9, 0.65), rgba(202, 138, 4, 0.65));
  border-color: #facc15;
  color: #fef9c3;
}

/* ==================== WEBTOON PROLOGUE STORY CUTSCENE OVERLAY ==================== */
#prologue-overlay {
  position: fixed;
  inset: 0;
  z-index: 68;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  background: radial-gradient(circle at 50% 38%, rgba(12, 22, 42, 0.96) 0%, rgba(3, 6, 13, 0.99) 100%);
  backdrop-filter: blur(10px);
}

.prologue-backdrop {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -35deg,
      rgba(56, 189, 248, 0.02) 0px,
      rgba(56, 189, 248, 0.02) 2px,
      transparent 2px,
      transparent 16px
    );
  pointer-events: none;
}

.prologue-shell {
  position: relative;
  z-index: 2;
  width: min(1280px, 97vw);
  height: min(860px, 96vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
}

.prologue-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(8, 13, 25, 0.92);
  border: 1px solid rgba(250, 204, 21, 0.4);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65);
}

.prologue-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.prologue-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.25), rgba(56, 189, 248, 0.25));
  border: 1px solid #facc15;
  color: #fef08a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  white-space: nowrap;
}
.prologue-brand strong {
  font-size: 13px;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prologue-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}
.prologue-tab-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(100, 116, 139, 0.42);
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.prologue-tab-btn .ptab-num {
  font-weight: 900;
  color: #64748b;
}
.prologue-tab-btn.done {
  border-color: rgba(56, 189, 248, 0.45);
  color: #cbd5e1;
}
.prologue-tab-btn.done .ptab-num {
  color: #38bdf8;
}
.prologue-tab-btn.active {
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.45), rgba(234, 179, 8, 0.28));
  border-color: #facc15;
  color: #fff;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.35);
}
.prologue-tab-btn.active .ptab-num {
  color: #fde047;
}

.prologue-top-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.prologue-ctrl-pill {
  padding: 5px 10px;
  border-radius: 8px;
  background: #0f172a;
  border: 1px solid #475569;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.prologue-ctrl-pill.active {
  border-color: #38bdf8;
  color: #7dd3fc;
  background: rgba(2, 132, 199, 0.2);
}
.prologue-skip-btn {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(251, 113, 133, 0.65);
  color: #fecdd3;
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.15s;
}
.prologue-skip-btn:hover {
  background: rgba(225, 29, 72, 0.35);
  color: #fff;
}

/* Main Animated Webtoon Panel */
.prologue-art-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border-radius: 14px;
  overflow: hidden;
  background: #03060d;
  border: 2px solid rgba(250, 204, 21, 0.55);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(56, 189, 248, 0.25) inset;
  cursor: pointer;
}

.prologue-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  will-change: transform, filter;
}

/* 7 Per-Cut Animated Webtoon Camera Motions */
.motion-zoom-up {
  animation: wbZoomUp 7.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes wbZoomUp {
  0% { transform: scale(1.02) translateY(2.2%); filter: brightness(0.88); }
  18% { filter: brightness(1.06); }
  100% { transform: scale(1.12) translateY(-2.4%); filter: brightness(1.02); }
}

.motion-pan-right {
  animation: wbPanRight 7.4s ease-out forwards;
}
@keyframes wbPanRight {
  0% { transform: scale(1.10) translateX(-2.8%); filter: saturate(0.92); }
  100% { transform: scale(1.04) translateX(2.2%); filter: saturate(1.08); }
}

.motion-crisis-shake {
  animation: wbCrisisShake 6.8s ease-out forwards;
}
@keyframes wbCrisisShake {
  0% { transform: scale(1.15) translate(0, 0); filter: contrast(1.18); }
  4% { transform: scale(1.13) translate(-9px, 5px); }
  8% { transform: scale(1.12) translate(8px, -6px); }
  12% { transform: scale(1.11) translate(-5px, 3px); }
  16% { transform: scale(1.10) translate(0, 0); }
  100% { transform: scale(1.04) translate(0, -1.5%); filter: contrast(1.06); }
}

.motion-rise-glow {
  animation: wbRiseGlow 8.0s ease-out forwards;
}
@keyframes wbRiseGlow {
  0% { transform: scale(1.04) translateY(3.2%); filter: brightness(0.92) saturate(1.05); }
  35% { filter: brightness(1.12) saturate(1.18); }
  100% { transform: scale(1.12) translateY(-2.6%); filter: brightness(1.05) saturate(1.12); }
}

.motion-slash-punch {
  animation: wbSlashPunch 7.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes wbSlashPunch {
  0% { transform: scale(1.22) rotate(-1.2deg); filter: brightness(1.35) contrast(1.2); }
  14% { transform: scale(1.06) rotate(0deg); filter: brightness(1.06) contrast(1.08); }
  100% { transform: scale(1.11) translateX(1.4%); filter: brightness(1.04); }
}

.motion-wide-pan {
  animation: wbWidePan 7.4s ease-out forwards;
}
@keyframes wbWidePan {
  0% { transform: scale(1.12) translateY(-1.5%); }
  100% { transform: scale(1.02) translateY(0.5%); }
}

.motion-hero-push {
  animation: wbHeroPush 7.8s ease-out forwards;
}
@keyframes wbHeroPush {
  0% { transform: scale(1.02) translateY(1.8%); }
  100% { transform: scale(1.11) translateY(-1.8%); }
}

#prologue-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.prologue-ink-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(3, 6, 14, 0.45) 0%, transparent 22%, transparent 74%, rgba(3, 6, 14, 0.78) 100%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(2, 5, 12, 0.68) 100%);
}

.prologue-sfx-stamp {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 4;
  padding: 6px 16px;
  border-radius: 8px;
  background: rgba(5, 9, 20, 0.86);
  border: 2px solid var(--stamp-col, #38bdf8);
  color: #ffffff;
  font-size: 21px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 #000, 0 0 16px var(--stamp-col, #38bdf8);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
  transform: rotate(3deg);
  pointer-events: none;
}
.prologue-sfx-stamp.stamp-pop {
  animation: stampSlam 0.42s cubic-bezier(0.18, 1.35, 0.4, 1) forwards;
}
@keyframes stampSlam {
  0% { opacity: 0; transform: scale(1.65) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(3deg); }
}

.prologue-click-hint {
  position: absolute;
  bottom: 14px;
  right: 16px;
  z-index: 4;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(6, 11, 22, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.38);
  color: #cbd5e1;
  font-size: 10.5px;
  pointer-events: none;
}

.prologue-progress-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: rgba(15, 23, 42, 0.88);
  z-index: 5;
}
.prologue-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #38bdf8, #facc15, #fb7185);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.85);
}

/* Bottom Narrative & Dialogue Card */
.prologue-story-dock {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(9, 15, 29, 0.96), rgba(5, 9, 19, 0.98));
  border: 1px solid rgba(56, 189, 248, 0.48);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.78);
}

.prologue-chapter {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #fde047;
}
.prologue-headline {
  font-size: 19px;
  font-weight: 900;
  color: #ffffff;
  margin: 2px 0 5px;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.prologue-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prologue-body p {
  font-size: 12.8px;
  line-height: 1.45;
  color: #dbeafe;
}
.prologue-body b {
  color: #fef08a;
  font-weight: 900;
}

.prologue-quote-box {
  margin-top: 7px;
  padding: 6px 11px;
  border-radius: 8px;
  background: rgba(15, 26, 48, 0.85);
  border-left: 3px solid #38bdf8;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.prologue-quote-speaker {
  font-size: 11.5px;
  font-weight: 900;
  color: #7dd3fc;
  white-space: nowrap;
}
.prologue-quote-text {
  font-size: 12px;
  color: #f1f5f9;
  font-style: italic;
}

.prologue-nav-btns {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 215px;
}
.prologue-nav-prev {
  padding: 8px 14px;
  border-radius: 9px;
  background: #0f172a;
  border: 1px solid #334155;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.prologue-nav-prev:disabled {
  opacity: 0.38;
  cursor: default;
}
.prologue-nav-next {
  padding: 12px 16px;
  border-radius: 10px;
  background: linear-gradient(90deg, #0284c7, #2563eb);
  border: 1px solid #7dd3fc;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45);
  transition: transform 0.14s, box-shadow 0.14s;
}
.prologue-nav-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.65);
}
.prologue-nav-next.finish-cta {
  background: linear-gradient(90deg, #d97706, #ea580c, #e11d48);
  border-color: #fde047;
  box-shadow: 0 0 24px rgba(250, 204, 21, 0.55);
}

/* ==================== INTRO SCREEN WEBTOON HERO CARD & REPLAY CONTROLS ==================== */
.intro-status-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bgm-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 9px;
  background: rgba(12, 24, 44, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.55);
  color: #e0f2fe;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.bgm-status-pill:hover {
  border-color: #facc15;
  color: #fef08a;
}
.bgm-status-pill.muted {
  border-color: rgba(148, 163, 184, 0.4);
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.85);
}
.bgm-status-pill.blocked {
  border-color: #facc15;
  color: #fef08a;
  background: rgba(161, 98, 7, 0.28);
  animation: bgmPulsePrompt 1.5s infinite;
}
@keyframes bgmPulsePrompt {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.45); }
  50% { box-shadow: 0 0 14px 2px rgba(250, 204, 21, 0.55); }
}
.eq-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.eq-bars i {
  display: block;
  width: 2.5px;
  height: 4px;
  border-radius: 1px;
  background: #38bdf8;
}
.bgm-status-pill.playing .eq-bars i:nth-child(1) {
  animation: eqBounce 0.65s ease-in-out infinite alternate;
}
.bgm-status-pill.playing .eq-bars i:nth-child(2) {
  animation: eqBounce 0.48s ease-in-out 0.15s infinite alternate;
}
.bgm-status-pill.playing .eq-bars i:nth-child(3) {
  animation: eqBounce 0.72s ease-in-out 0.28s infinite alternate;
}
.bgm-status-pill.muted .eq-bars i {
  height: 3px;
  background: #64748b;
  animation: none !important;
}
@keyframes eqBounce {
  0% { height: 3px; }
  100% { height: 12px; background: #fde047; }
}
.btn-prologue-replay {
  padding: 8px 13px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.35), rgba(234, 179, 8, 0.25));
  border: 1px solid #facc15;
  color: #fef08a;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.25);
  transition: transform 0.14s, box-shadow 0.14s;
  white-space: nowrap;
}
.btn-prologue-replay span {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: #bae6fd;
}
.btn-prologue-replay:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(250, 204, 21, 0.5);
}

.hero-webtoon-card {
  position: relative;
  border-radius: 11px;
  overflow: hidden;
  border: 1.5px solid rgba(250, 204, 21, 0.55);
  flex: 1.55;
  min-height: 175px;
  background: #050914;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
}
.hero-webtoon-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 14%;
  display: block;
  transition: transform 0.35s ease;
}
.hero-webtoon-card:hover img {
  transform: scale(1.04);
}
.hero-webtoon-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 9px 7px;
  background: linear-gradient(180deg, transparent, rgba(4, 8, 18, 0.94) 48%);
}
.hw-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.24);
  border: 1px solid #38bdf8;
  color: #7dd3fc;
  font-size: 9.5px;
  font-weight: 800;
}
.hero-webtoon-caption strong {
  display: block;
  font-size: 12px;
  color: #fef08a;
  margin-top: 2px;
}
.hero-webtoon-caption small {
  display: block;
  font-size: 9.8px;
  color: #cbd5e1;
  line-height: 1.25;
}

.prologue-mini-trigger {
  cursor: pointer;
  flex: 0.85;
  min-height: 82px;
  border-color: rgba(250, 204, 21, 0.45);
  transition: transform 0.15s, border-color 0.15s;
}
.prologue-mini-trigger:hover {
  transform: translateY(-2px);
  border-color: #facc15;
}

.stage-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.stage-art-toggle-btn {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(234, 179, 8, 0.2);
  border: 1px solid #facc15;
  color: #fef08a;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.stage-art-toggle-btn:hover {
  background: rgba(234, 179, 8, 0.38);
}

.intro-2d-illust-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 42%, rgba(14, 26, 48, 0.94), rgba(5, 9, 18, 0.98));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 54px 14px 86px;
}
.intro-2d-illust-stage img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  border: 1.5px solid rgba(250, 204, 21, 0.55);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85);
  object-fit: contain;
}

@media (max-width: 1200px) {
  .prologue-tabs .ptab-lbl {
    display: none;
  }
}