/* ============================================================================
   RAGNAROK ONLINE 3D SANCTUARY RPG — ROYAL PRONTERA SAPPHIRE & GOLD GLASS UI
   Classic RO Window Chrome + Modern High-Craft Fantasy Glassmorphism
   Layout leaves 76%+ of the center 3D viewport completely open & unobstructed
   ============================================================================ */
:root {
  --ro-bg-window: linear-gradient(180deg, rgba(16, 26, 48, 0.86) 0%, rgba(10, 17, 32, 0.90) 100%);
  --ro-bg-header: linear-gradient(180deg, #5288e5 0%, #2b57a8 42%, #193875 85%, #122857 100%);
  --ro-border-outer: rgba(14, 23, 42, 0.95);
  --ro-border-light: rgba(162, 206, 255, 0.78);
  --ro-border-gold: rgba(255, 214, 102, 0.90);
  --ro-gold-bright: #ffe47a;
  --ro-gold-mid: #f59e0b;
  --ro-text-main: #f8fbff;
  --ro-text-sub: #bfd6f6;
  --ro-hp-green: linear-gradient(180deg, #7dff9e 0%, #20e05a 45%, #109e3c 100%);
  --ro-hp-yellow: linear-gradient(180deg, #fff078 0%, #f59e0b 50%, #b45309 100%);
  --ro-hp-red: linear-gradient(180deg, #ff8a8a 0%, #ef4444 48%, #991b1b 100%);
  --ro-sp-blue: linear-gradient(180deg, #8ce5ff 0%, #2992ff 45%, #1554b8 100%);
  --ro-exp-gold: linear-gradient(180deg, #fff394 0%, #fbbf24 48%, #b45309 100%);
  --ro-crit-red: #ff1e27;
  --ro-crit-border: #fff275;
}

* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #080e1a;
  font-family: 'Segoe UI', Tahoma, 'Prompt', 'Noto Sans Thai', sans-serif;
  color: var(--ro-text-main);
  -webkit-font-smoothing: antialiased;
}

#game-viewport {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

#ro-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

/* ============================================================================
   3D SCREEN-SPACE OVERLAY LAYER
   (Floating Nameplates, Under-Foot HP/SP Bars, Cast Bars, Skill Shouts, Crits)
   ============================================================================ */
#world-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

/* Entity HUD Container (Players, Monsters, MVP Bosses, NPCs) */
.entity-tag {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  transition: opacity 0.12s ease;
  will-change: transform, left, top;
}

.entity-tag.npc-tag {
  pointer-events: auto;
  cursor: pointer;
}

.entity-tag.npc-tag:hover .tag-name {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 0 16px rgba(255, 222, 115, 0.92), 0 3px 10px rgba(0, 0, 0, 0.7);
  border-color: #fff3a1;
}

.tag-badge {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.45px;
  padding: 1.5px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(20, 32, 60, 0.94) 0%, rgba(9, 15, 30, 0.96) 100%);
  border: 1px solid rgba(255, 224, 122, 0.75);
  color: #ffe27a;
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}

.tag-badge.mvp-badge {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 55%, #450a0a 100%);
  border: 1.5px solid #fde047;
  color: #fffbeb;
  font-size: 10.5px;
  padding: 2px 9px;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.85), 0 2px 8px rgba(0, 0, 0, 0.8);
  animation: roMvpPulse 1.6s ease-in-out infinite alternate;
}

@keyframes roMvpPulse {
  0% { transform: scale(1); box-shadow: 0 0 10px rgba(251, 191, 36, 0.7); }
  100% { transform: scale(1.06); box-shadow: 0 0 18px rgba(255, 77, 77, 0.95), 0 0 8px #fde047; }
}

.tag-name {
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(14, 24, 45, 0.88) 0%, rgba(7, 13, 26, 0.92) 100%);
  border: 1px solid rgba(158, 204, 255, 0.58);
  color: #ffffff;
  text-shadow: 0 1px 3px #000, 0 0 6px rgba(0, 0, 0, 0.85);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.npc-tag .tag-name {
  background: linear-gradient(180deg, rgba(41, 88, 168, 0.94) 0%, rgba(18, 42, 92, 0.96) 100%);
  border: 1px solid #ffd86b;
  color: #fff5ba;
}

.monster-tag .tag-name {
  background: linear-gradient(180deg, rgba(42, 16, 26, 0.90) 0%, rgba(20, 8, 14, 0.94) 100%);
  border-color: rgba(255, 120, 120, 0.75);
  color: #ffe0e0;
}

.monster-tag.boss-tag .tag-name {
  background: linear-gradient(180deg, rgba(136, 19, 55, 0.95) 0%, rgba(60, 7, 24, 0.97) 100%);
  border: 1.5px solid #ffd86b;
  color: #ffef99;
  font-size: 12.5px;
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.65), 0 3px 10px rgba(0, 0, 0, 0.8);
}

.player-tag .tag-name {
  background: linear-gradient(180deg, rgba(24, 72, 138, 0.92) 0%, rgba(11, 34, 72, 0.95) 100%);
  border: 1px solid #7ce8ff;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4), 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* Classic RO Mini HP/SP Gauge Box under/above Character */
.ro-mini-bars {
  width: 70px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #040811;
  border: 1px solid #0f172a;
  outline: 1px solid rgba(148, 163, 184, 0.4);
  padding: 1px;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.85);
}

.ro-mini-bar-track {
  width: 100%;
  height: 5px;
  background: #131b2e;
  overflow: hidden;
  position: relative;
}

.ro-mini-hp-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #6eff9b 0%, #19e355 55%, #0c9935 100%);
  transition: width 0.12s ease;
}

.ro-mini-hp-fill.hp-mid {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 55%, #b45309 100%);
}

.ro-mini-hp-fill.hp-low {
  background: linear-gradient(180deg, #fca5a5 0%, #ef4444 55%, #991b1b 100%);
}

.ro-mini-hp-fill.monster-hp {
  background: linear-gradient(180deg, #ff7a8a 0%, #ff1e42 50%, #a3001b 100%);
}

.ro-mini-sp-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #8ee5ff 0%, #2484ff 55%, #1248a8 100%);
  transition: width 0.12s ease;
}

/* RO Cast Bar above caster's head */
.ro-cast-bar-wrap {
  width: 102px;
  height: 12px;
  background: rgba(5, 11, 24, 0.94);
  border: 1.5px solid #ffd86b;
  border-radius: 3px;
  padding: 1px;
  margin-bottom: 3px;
  box-shadow: 0 0 12px rgba(56, 232, 255, 0.8), 0 2px 6px rgba(0, 0, 0, 0.85);
  display: none;
  position: relative;
  overflow: hidden;
}

.ro-cast-bar-wrap.active {
  display: block;
}

.ro-cast-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #10b981 0%, #22d3ee 55%, #e0f2fe 100%);
  border-radius: 1.5px;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.9);
  transition: width 0.05s linear;
}

.ro-cast-bar-label {
  position: absolute;
  inset: 0;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.25px;
  color: #ffffff;
  text-shadow: 0 1px 2px #000, -1px 0 2px #000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ============================================================================
   RO SKILL SHOUT CALLOUTS, CRITICAL STARBURST, COMBO DAMAGE & MISS/LUCKY
   ============================================================================ */
.ro-floater {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 25;
  will-change: transform, opacity, left, top;
}

/* Classic RO Overhead Skill Shout Box ("Storm Gust !!", "Sonic Blow !!") */
.ro-skill-shout {
  position: relative;
  background: linear-gradient(180deg, #fffef2 0%, #ffebb3 62%, #ffd466 100%);
  color: #151e36;
  border: 2px solid #b45309;
  outline: 1.5px solid #fffbeb;
  border-radius: 7px;
  padding: 3.5px 13px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.35px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.72),
    0 0 18px rgba(255, 204, 64, 0.85),
    inset 0 1px 0 #ffffff;
  white-space: nowrap;
}

.ro-skill-shout::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #b45309 transparent transparent;
}

/* Iconic RO CRITICAL! Spiky Red Starburst Badge with Golden Rim */
.ro-crit-badge {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  filter:
    drop-shadow(0 0 2px #fff380)
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 16px rgba(255, 36, 36, 0.92));
}

.ro-crit-starburst {
  position: absolute;
  inset: -7px -14px;
  background: linear-gradient(135deg, #fff587 0%, #fbbf24 50%, #f59e0b 100%);
  clip-path: polygon(
    50% 0%, 63% 14%, 82% 4%, 80% 24%, 98% 22%, 88% 42%,
    100% 58%, 85% 68%, 94% 88%, 74% 84%, 66% 100%, 50% 86%,
    34% 100%, 26% 84%, 6% 88%, 15% 68%, 0% 58%, 12% 42%,
    2% 22%, 20% 24%, 18% 4%, 37% 14%
  );
  z-index: -1;
}

.ro-crit-starburst::before {
  content: '';
  position: absolute;
  inset: 2.5px;
  background: linear-gradient(180deg, #ff3b24 0%, #e10600 55%, #8f0000 100%);
  clip-path: inherit;
}

.ro-crit-header {
  font-size: 11px;
  font-weight: 900;
  color: #fff89c;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  text-shadow:
    -1.5px -1.5px 0 #6e0000,
     1.5px -1.5px 0 #6e0000,
    -1.5px  1.5px 0 #6e0000,
     1.5px  1.5px 0 #6e0000;
  line-height: 1;
  margin-bottom: 1px;
}

.ro-crit-value {
  font-size: 25px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.6px;
  text-shadow:
    -2px -2px 0 #7c0000,
     2px -2px 0 #7c0000,
    -2px  2px 0 #7c0000,
     2px  2px 0 #7c0000,
     0px  3px 7px #000000;
  line-height: 1.02;
}

/* Normal White RO Damage Numbers */
.ro-dmg-normal {
  font-size: 19px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.3px;
  text-shadow:
    -1.5px -1.5px 0 #0f172a,
     1.5px -1.5px 0 #0f172a,
    -1.5px  1.5px 0 #0f172a,
     1.5px  1.5px 0 #0f172a,
     0 3px 6px rgba(0, 0, 0, 0.88);
}

/* Multi-Hit Yellow-Gold Combo Damage Numbers (Sonic Blow / Double Strafe) */
.ro-dmg-combo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 22px;
  font-weight: 900;
  color: #ffe44d;
  letter-spacing: 0.4px;
  text-shadow:
    -2px -2px 0 #592600,
     2px -2px 0 #592600,
    -2px  2px 0 #592600,
     2px  2px 0 #592600,
     0 0 12px rgba(251, 191, 36, 0.8),
     0 3px 6px rgba(0, 0, 0, 0.92);
}

.ro-dmg-combo-tag {
  font-size: 9.5px;
  font-weight: 900;
  color: #fff7b2;
  background: linear-gradient(90deg, rgba(146, 64, 14, 0.92), rgba(180, 83, 9, 0.92));
  border: 1px solid #fde047;
  border-radius: 99px;
  padding: 0 6px;
  letter-spacing: 0.7px;
  margin-bottom: -2px;
  text-shadow: 0 1px 2px #000;
}

/* Heal Numbers (+2,850 Emerald Green) */
.ro-dmg-heal {
  font-size: 21px;
  font-weight: 900;
  color: #4ade80;
  letter-spacing: 0.4px;
  text-shadow:
    -1.5px -1.5px 0 #052e16,
     1.5px -1.5px 0 #052e16,
    -1.5px  1.5px 0 #052e16,
     1.5px  1.5px 0 #052e16,
     0 0 14px rgba(74, 222, 128, 0.9);
}

/* MISS & LUCKY! Badges */
.ro-badge-miss {
  font-size: 15px;
  font-weight: 900;
  color: #ff5252;
  letter-spacing: 1.2px;
  padding: 1.5px 8px;
  background: linear-gradient(180deg, rgba(40, 8, 14, 0.88), rgba(18, 4, 8, 0.92));
  border: 1.5px solid #ff5252;
  border-radius: 4px;
  text-shadow: 0 1px 3px #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

.ro-badge-lucky {
  font-size: 14.5px;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 0.8px;
  padding: 2px 10px;
  background: linear-gradient(180deg, rgba(161, 98, 7, 0.94), rgba(66, 32, 6, 0.96));
  border: 1.5px solid #fde047;
  border-radius: 99px;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.85), 0 2px 6px rgba(0, 0, 0, 0.8);
  text-shadow: 0 1px 2px #000;
}

/* Level Up Banner & Refine Banner */
.ro-levelup-banner {
  font-size: 26px;
  font-weight: 900;
  color: #fffbeb;
  padding: 6px 24px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(180, 83, 9, 0.2), rgba(245, 158, 11, 0.95), rgba(180, 83, 9, 0.2));
  border: 2px solid #fef08a;
  text-shadow: 0 0 14px #f59e0b, 0 2px 4px #000;
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.95);
  letter-spacing: 1.4px;
  white-space: nowrap;
}

/* ============================================================================
   RO CLASSIC-MODERN GLASS HUD WINDOWS (.ro-window)
   Royal Prontera Sapphire Header + Gold Filigree Trim + Glossy Tubes
   ============================================================================ */
.ro-window {
  background: var(--ro-bg-window);
  border: 1.5px solid var(--ro-border-light);
  outline: 1px solid rgba(8, 15, 30, 0.92);
  border-radius: 10px;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(255, 214, 102, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  z-index: 20;
  overflow: hidden;
}

.ro-win-titlebar {
  position: relative;
  background: var(--ro-bg-header);
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #ffffff;
  border-bottom: 1.5px solid var(--ro-border-gold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Glossy RO Titlebar Top Specular Sheen */
.ro-win-titlebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.04) 100%);
  pointer-events: none;
}

.ro-win-titlebar .win-dots {
  display: flex;
  gap: 5px;
  z-index: 1;
}

.ro-win-titlebar .win-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #93c5fd 45%, #1d4ed8 100%);
  border: 1px solid #0f2557;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 1px 1px #ffffff;
}

.ro-win-titlebar .win-dot:first-child {
  background: radial-gradient(circle at 32% 28%, #fffbeb 0%, #fde047 48%, #b45309 100%);
  border-color: #78350f;
}

.ro-win-body {
  padding: 8px 10px;
}

/* ----------------------------------------------------------------------------
   1. TOP-LEFT: RO BASIC INFORMATION WINDOW
   ---------------------------------------------------------------------------- */
#hud-basic-info {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 298px;
}

.char-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.char-name-job {
  display: flex;
  flex-direction: column;
}

.char-hero-name {
  font-size: 13.5px;
  font-weight: 900;
  color: var(--ro-gold-bright);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.char-job-badge {
  font-size: 11px;
  color: #93c5fd;
  font-weight: 700;
}

.lv-pill {
  background: linear-gradient(180deg, rgba(22, 34, 62, 0.92) 0%, rgba(10, 17, 34, 0.95) 100%);
  border: 1px solid var(--ro-border-gold);
  border-radius: 6px;
  padding: 2px 7px;
  text-align: right;
  font-size: 10.5px;
  font-weight: 800;
  color: #fef08a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.gauge-row {
  margin-bottom: 4px;
}

.gauge-label-line {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 800;
  margin-bottom: 2px;
  color: #e2e8f0;
  text-shadow: 0 1px 2px #000;
}

/* Glossy RO Glass Tube Track */
.gauge-track {
  position: relative;
  width: 100%;
  height: 10px;
  background: #060b16;
  border: 1px solid rgba(148, 182, 230, 0.55);
  border-radius: 99px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Glass Tube Specular Highlight Bar */
.gauge-track::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 3px;
  right: 3px;
  height: 3.5px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}

.gauge-fill-hp {
  height: 100%;
  width: 100%;
  background: var(--ro-hp-green);
  box-shadow: 0 0 8px rgba(34, 229, 92, 0.55);
  transition: width 0.18s ease, background 0.18s ease;
}

.gauge-fill-hp.hp-mid {
  background: var(--ro-hp-yellow);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.55);
}

.gauge-fill-hp.hp-low {
  background: var(--ro-hp-red);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.75);
}

.gauge-fill-sp {
  height: 100%;
  width: 100%;
  background: var(--ro-sp-blue);
  box-shadow: 0 0 8px rgba(41, 146, 255, 0.6);
  transition: width 0.18s ease;
}

.gauge-fill-exp {
  height: 100%;
  width: 88%;
  background: var(--ro-exp-gold);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  transition: width 0.2s ease;
}

.stats-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(148, 163, 184, 0.24);
  font-size: 10.5px;
}

.stat-chip {
  background: rgba(7, 13, 25, 0.76);
  border: 1px solid rgba(148, 180, 228, 0.30);
  border-radius: 4px;
  padding: 2px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-chip span:first-child {
  color: #93c5fd;
  font-weight: 800;
  font-size: 9.5px;
}

.stat-chip span:last-child {
  color: #ffffff;
  font-weight: 800;
}

/* Active RO Buff Icons Row */
.buff-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.buff-icon {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.82) 0%, rgba(17, 36, 94, 0.88) 100%);
  border: 1px solid #60a5fa;
  color: #e0f2fe;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.buff-icon.gold {
  background: linear-gradient(180deg, rgba(146, 64, 14, 0.88) 0%, rgba(78, 32, 7, 0.92) 100%);
  border-color: #fbbf24;
  color: #fef3c7;
}

/* ----------------------------------------------------------------------------
   2. LEFT-MIDDLE: CLASS & 3D WEAPON/SHIELD SWITCHER + HOLLGREHENN REFINE
   Positioned cleanly below #hud-basic-info with zero overlap
   ---------------------------------------------------------------------------- */
#hud-class-equipment {
  position: fixed;
  top: 238px;
  left: 10px;
  width: 298px;
}

.section-sub {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  color: #93c5fd;
  margin: 4px 0 3px;
}

.section-sub:first-child {
  margin-top: 0;
}

.class-btn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.ro-btn {
  background: linear-gradient(180deg, #294582 0%, #16274f 100%);
  border: 1px solid rgba(154, 202, 255, 0.58);
  color: #f8fafc;
  border-radius: 5px;
  padding: 4.5px 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.12s ease;
  text-shadow: 0 1px 2px #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 5px rgba(0, 0, 0, 0.45);
}

.ro-btn:hover {
  background: linear-gradient(180deg, #3b63b5 0%, #1f3973 100%);
  border-color: #fde047;
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ro-btn:active {
  transform: translateY(0) scale(0.98);
}

.ro-btn.active {
  background: linear-gradient(180deg, #eab308 0%, #b45309 100%);
  border-color: #fef08a;
  color: #fffbeb;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.weapon-select-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 3px;
}

.ro-select {
  width: 100%;
  background: #0a1324;
  color: #f8fafc;
  border: 1px solid rgba(147, 197, 253, 0.58);
  border-radius: 5px;
  padding: 3.5px 5px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}

.ro-select:focus {
  border-color: #fde047;
}

/* Hollgrehenn Blacksmith Refine Box */
.refine-box {
  margin-top: 6px;
  padding: 6px 7px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(45, 24, 12, 0.82) 0%, rgba(22, 12, 7, 0.90) 100%);
  border: 1px solid rgba(251, 191, 36, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.refine-header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.refine-level-badge {
  font-size: 13px;
  font-weight: 900;
  color: #fde047;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.85);
}

.refine-btn-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr 0.75fr;
  gap: 4px;
}

.ro-btn.anvil-btn {
  background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
  border-color: #fca5a5;
}

.ro-btn.anvil-btn:hover {
  background: linear-gradient(180deg, #f87171 0%, #b91c1c 100%);
  border-color: #fef08a;
}

.ro-btn.gold-btn {
  background: linear-gradient(180deg, #d97706 0%, #78350f 100%);
  border-color: #fde047;
}

/* ----------------------------------------------------------------------------
   3. TOP-RIGHT: RO SOUND ENGINE & FX TEST DECK + AUTO-HUNT
   ---------------------------------------------------------------------------- */
#hud-sound-fx-deck {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 312px;
}

.audio-status-pill {
  background: rgba(7, 13, 26, 0.88);
  border: 1px solid rgba(96, 165, 250, 0.48);
  border-radius: 5px;
  padding: 3.5px 8px;
  font-size: 10.5px;
  color: #7dd3fc;
  font-weight: 700;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-controls-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 4px;
  align-items: center;
  margin-bottom: 5px;
}

.fx-test-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

/* ----------------------------------------------------------------------------
   4. BOTTOM-CENTER: 6-SLOT RO SKILL HOTBAR (Keys 1-6)
   Royal Gold Bezel + Glossy Skill Slots + Cooldown Sweep & Active Glow
   ---------------------------------------------------------------------------- */
#hud-skill-hotbar {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 22;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hotbar-slots {
  display: flex;
  gap: 7px;
  padding: 6px 9px;
  background: linear-gradient(180deg, rgba(19, 31, 58, 0.92) 0%, rgba(9, 15, 30, 0.95) 100%);
  border: 1.5px solid var(--ro-border-gold);
  outline: 1px solid rgba(10, 16, 30, 0.95);
  border-radius: 11px;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.78),
    0 0 18px rgba(251, 191, 36, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
}

.skill-slot {
  width: 70px;
  height: 64px;
  background: radial-gradient(circle at 50% 35%, #233b6e 0%, #13203d 65%, #091122 100%);
  border: 1.5px solid rgba(253, 224, 71, 0.68);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.65);
}

/* Subtle glossy reflection on top half of each skill slot */
.skill-slot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.0) 100%);
  pointer-events: none;
}

/* Optional Cooldown radial/vertical sweep overlay */
.skill-slot::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--cooldown-pct, 0%);
  background: rgba(6, 11, 24, 0.76);
  border-top: 1px solid rgba(56, 189, 248, 0.8);
  transition: height 0.08s linear;
  pointer-events: none;
}

.skill-slot:hover {
  border-color: #fff08a;
  transform: translateY(-3px);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.75),
    0 0 14px rgba(250, 204, 21, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.skill-slot:active,
.skill-slot.triggered,
.skill-slot.active {
  transform: translateY(-1px) scale(0.95);
  border-color: #38bdf8;
  box-shadow:
    0 0 20px rgba(56, 189, 248, 0.95),
    0 0 8px #fde047,
    inset 0 0 10px rgba(56, 189, 248, 0.55);
}

.skill-key {
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: 9.5px;
  font-weight: 900;
  color: #fde047;
  background: rgba(6, 11, 23, 0.82);
  border: 1px solid rgba(253, 224, 71, 0.55);
  padding: 0 4px;
  border-radius: 3px;
  line-height: 1.25;
  z-index: 2;
}

.skill-sp {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 8.5px;
  font-weight: 800;
  color: #7dd3fc;
  text-shadow: 0 1px 2px #000;
  z-index: 2;
}

.skill-icon {
  font-size: 22px;
  line-height: 1;
  margin-top: 7px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
  z-index: 2;
}

.skill-name {
  font-size: 9.5px;
  font-weight: 800;
  color: #f8fafc;
  text-align: center;
  margin-top: 3px;
  line-height: 1.05;
  text-shadow: 0 1px 2px #000;
  z-index: 2;
}

.controls-hint-bar {
  font-size: 10.5px;
  font-weight: 700;
  color: #dbeafe;
  background: rgba(8, 14, 28, 0.86);
  border: 1px solid rgba(147, 197, 253, 0.40);
  padding: 2.5px 12px;
  border-radius: 99px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.controls-hint-bar b {
  color: #fde047;
}

/* ----------------------------------------------------------------------------
   5. BOTTOM-RIGHT: COMBAT & SYSTEM LOG + MODEL INVENTORY BADGE
   ---------------------------------------------------------------------------- */
#hud-combat-log {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 312px;
  height: 148px;
  display: flex;
  flex-direction: column;
}

#combat-log-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 9px;
  font-size: 10.5px;
  line-height: 1.42;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#combat-log-list::-webkit-scrollbar {
  width: 5px;
}

#combat-log-list::-webkit-scrollbar-thumb {
  background: rgba(147, 197, 253, 0.4);
  border-radius: 99px;
}

.log-entry {
  color: #e2e8f0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.log-entry.crit { color: #fca5a5; font-weight: 800; }
.log-entry.skill { color: #67e8f9; font-weight: 700; }
.log-entry.refine { color: #fde047; font-weight: 800; }
.log-entry.loot { color: #86efac; font-weight: 700; }

/* ----------------------------------------------------------------------------
   6. INTERACTIVE NPC DIALOG MODAL (Kafra / Hollgrehenn / Job Master)
   ---------------------------------------------------------------------------- */
#npc-dialog-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  z-index: 40;
  display: none;
}

#npc-dialog-modal.open {
  display: block;
}

.npc-dialog-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.npc-avatar-badge {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  border: 1.5px solid #fde047;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}

.npc-dialog-speech {
  font-size: 12px;
  line-height: 1.5;
  color: #f1f5f9;
  background: rgba(7, 13, 25, 0.82);
  border: 1px solid rgba(148, 182, 230, 0.38);
  border-radius: 6px;
  padding: 9px 11px;
  margin-bottom: 9px;
}

.npc-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}