/* ==========================================================================
   Ragnarok Online HTML5 - Theme & Stylesheet (v2.1 Multi-Class)
   ========================================================================== */

:root {
  --ro-blue-dark: #141c2b;
  --ro-blue-mid: #1e293b;
  --ro-blue-light: #334155;
  --ro-gold: #f59e0b;
  --ro-gold-bright: #fbbf24;
  --ro-hp-green: #10b981;
  --ro-hp-red: #ef4444;
  --ro-sp-blue: #3b82f6;
  --ro-exp-gold: #f59e0b;
  --ro-border: rgba(255, 255, 255, 0.18);
  --ro-glass: rgba(15, 23, 42, 0.88);
  --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-hud: 'Chakra Petch', 'Outfit', sans-serif;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0b0f19;
  font-family: var(--font-main);
  color: #f8fafc;
}

#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #0b0f19;
}

#gameCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* Custom Ragnarok Interactive Cursors */
body {
  cursor: default;
}

/* Monster Attack Cursor */
body.cursor-sword, 
body.cursor-sword *,
#gameCanvas.cursor-sword,
#game-container.cursor-sword,
.cursor-sword {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48ZGVmcz48ZmlsdGVyIGlkPSJzIiB4PSItMjAlIiB5PSItMjAlIiB3aWR0aD0iMTUwJSIgaGVpZ2h0PSIxNTAlIj48ZmVEcm9wU2hhZG93IGR4PSIxIiBkeT0iMiIgc3RkRGV2aWF0aW9uPSIxIiBmbG9vZC1jb2xvcj0iIzAwMDAwMCIgZmxvb2Qtb3BhY2l0eT0iMC42Ii8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbHRlcj0idXJsKCNzKSI+PHBhdGggZD0iTTIgMiBMMTYgMTYgTDEyIDIwIEwwIDYgWiIgZmlsbD0iIzBmMTcyYSIvPjxwYXRoIGQ9Ik0zIDIgTDE1IDE0IEwxMiAxNyBMMiA1IFoiIGZpbGw9IiNlMmU4ZjAiIHN0cm9rZT0iIzBmMTcyYSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48cG9seWdvbiBwb2ludHM9IjMsMiAxNSwxNCAxMywxNCAyLDMiIGZpbGw9IiNmZmZmZmYiLz48cG9seWdvbiBwb2ludHM9IjIsNSAxMiwxNyAxNCwxNSAzLDMiIGZpbGw9IiM5NGEzYjgiLz48cGF0aCBkPSJNOSAxOSBMMTkgOSBMMjIgMTIgTDEyIDIyIFoiIGZpbGw9IiNmNTllMGIiIHN0cm9rZT0iIzc4MzUwZiIgc3Ryb2tlLXdpZHRoPSIxIi8+PGNpcmNsZSBjeD0iMTUuNSIgY3k9IjE1LjUiIHI9IjIuMiIgZmlsbD0iI2VmNDQ0NCIgc3Ryb2tlPSIjOTkxYjFiIiBzdHJva2Utd2lkdGg9IjAuOCIvPjxwYXRoIGQ9Ik0xNiAyMCBMMjMgMjcgTDI1IDI1IEwxOCAxOCBaIiBmaWxsPSIjNzgzNTBmIiBzdHJva2U9IiM0NTFhMDMiIHN0cm9rZS13aWR0aD0iMSIvPjxjaXJjbGUgY3g9IjI1IiBjeT0iMjciIHI9IjIuNiIgZmlsbD0iI2ZiYmYyNCIgc3Ryb2tlPSIjOTI0MDBlIiBzdHJva2Utd2lkdGg9IjAuOCIvPjwvZz48L3N2Zz4=') 2 2, crosshair !important;
}

/* NPC Dialogue / Talk Speech Bubble Cursor */
body.cursor-npc,
body.cursor-npc *,
#gameCanvas.cursor-npc,
#game-container.cursor-npc,
.cursor-npc {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9InMiIHg9Ii0yMCUiIHk9Ii0yMCUiIHdpZHRoPSIxNTAlIiBoZWlnaHQ9IjE1MCUiPgogICAgICA8ZmVEcm9wU2hhZG93IGR4PSIxIiBkeT0iMiIgc3RkRGV2aWF0aW9uPSIxIiBmbG9vZC1jb2xvcj0iIzAwMDAwMCIgZmxvb2Qtb3BhY2l0eT0iMC42Ii8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGcgZmlsdGVyPSJ1cmwoI3MpIj4KICAgIDxwYXRoIGQ9Ik0gNCA0IEwgMjYgNCBDIDI4LjIgNCAzMCA1LjggMzAgOCBMIDMwIDIwIEMgMzAgMjIuMiAyOC4yIDI0IDI2IDI0IEwgMTQgMjQgTCA2IDMwIEwgNyAyNCBMIDQgMjQgQyAxLjggMjQgMCAyMi4yIDAgMjAgTCAwIDggQyAwIDUuOCAxLjggNCA0IDQgWiIgZmlsbD0iIzBmMTcyYSIgc3Ryb2tlPSIjZmJiZjI0IiBzdHJva2Utd2lkdGg9IjEuOCIvPgogICAgPHBhdGggZD0iTSA0IDUgTCAyNiA1IEMgMjcuNiA1IDI5IDYuNCAyOSA4IEwgMjkgMjAgQyAyOSAyMS42IDI3LjYgMjMgMjYgMjMgTCAxMy41IDIzIEwgNy41IDI3LjUgTCA4LjIgMjMgTCA0IDIzIEMgMi40IDIzIDEgMjEuNiAxIDIwIEwgMSA4IEMgMSA2LjQgMi40IDUgNCA1IFoiIGZpbGw9IiMxZTI5M2IiLz4KICAgIDxjaXJjbGUgY3g9IjgiIGN5PSIxNCIgcj0iMi4yIiBmaWxsPSIjZmJiZjI0Ii8+CiAgICA8Y2lyY2xlIGN4PSIxNSIgY3k9IjE0IiByPSIyLjIiIGZpbGw9IiNmYmJmMjQiLz4KICAgIDxjaXJjbGUgY3g9IjIyIiBjeT0iMTQiIHI9IjIuMiIgZmlsbD0iI2ZiYmYyNCIvPgogIDwvZz4KPC9zdmc+') 4 4, pointer !important;
}

/* Loot Pickup Cursor */
body.cursor-loot,
body.cursor-loot *,
#gameCanvas.cursor-loot,
#game-container.cursor-loot,
.cursor-loot {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9InMiIHg9Ii0yMCUiIHk9Ii0yMCUiIHdpZHRoPSIxNTAlIiBoZWlnaHQ9IjE1MCUiPgogICAgICA8ZmVEcm9wU2hhZG93IGR4PSIxIiBkeT0iMiIgc3RkRGV2aWF0aW9uPSIxIiBmbG9vZC1jb2xvcj0iIzAwMDAwMCIgZmxvb2Qtb3BhY2l0eT0iMC42Ii8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGcgZmlsdGVyPSJ1cmwoI3MpIj4KICAgIDxyZWN0IHg9IjUiIHk9IjEwIiB3aWR0aD0iMjAiIGhlaWdodD0iMTgiIHJ4PSI0IiBmaWxsPSIjMWUyOTNiIiBzdHJva2U9IiMzOGJkZjgiIHN0cm9rZS13aWR0aD0iMS44Ii8+CiAgICA8cGF0aCBkPSJNIDkgMTAgQyA5IDQgMjEgNCAyMSAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmJiZjI0IiBzdHJva2Utd2lkdGg9IjIuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNIDE1IDE0IEwgMTUgMjQgTSAxMCAxOSBMIDIwIDE5IiBzdHJva2U9IiMzOGJkZjgiIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8L2c+Cjwvc3ZnPg==') 4 4, pointer !important;
}

/* Remote Player Interaction Cursor */
body.cursor-player,
body.cursor-player *,
#gameCanvas.cursor-player,
#game-container.cursor-player,
.cursor-player {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9InMiIHg9Ii0yMCUiIHk9Ii0yMCUiIHdpZHRoPSIxNTAlIiBoZWlnaHQ9IjE1MCUiPgogICAgICA8ZmVEcm9wU2hhZG93IGR4PSIxIiBkeT0iMiIgc3RkRGV2aWF0aW9uPSIxIiBmbG9vZC1jb2xvcj0iIzAwMDAwMCIgZmxvb2Qtb3BhY2l0eT0iMC42Ii8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGcgZmlsdGVyPSJ1cmwoI3MpIj4KICAgIDxwYXRoIGQ9Ik0gMiAyIEwgMTIgMjYgTCAxNiAxNyBMIDI1IDE1IFoiIGZpbGw9IiMxMGI5ODEiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICAgIDxjaXJjbGUgY3g9IjIxIiBjeT0iNyIgcj0iNSIgZmlsbD0iIzBmMTcyYSIgc3Ryb2tlPSIjMzRkMzk5IiBzdHJva2Utd2lkdGg9IjEuMiIvPgogICAgPGNpcmNsZSBjeD0iMjEiIGN5PSI3IiByPSIyIiBmaWxsPSIjMzRkMzk5Ii8+CiAgPC9nPgo8L3N2Zz4=') 4 4, pointer !important;
}

/* Vending Shop Signboard Interactive Cursor */
body.cursor-vending,
body.cursor-vending *,
#gameCanvas.cursor-vending,
#game-container.cursor-vending,
.cursor-vending {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9InMiIHg9Ii0yMCUiIHk9Ii0yMCUiIHdpZHRoPSIxNTAlIiBoZWlnaHQ9IjE1MCUiPgogICAgICA8ZmVEcm9wU2hhZG93IGR4PSIxIiBkeT0iMiIgc3RkRGV2aWF0aW9uPSIxIiBmbG9vZC1jb2xvcj0iIzAwMDAwMCIgZmxvb2Qtb3BhY2l0eT0iMC42Ii8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGcgZmlsdGVyPSJ1cmwoI3MpIj4KICAgIDxwYXRoIGQ9Ik0gNiAyIEwgMTAgMiBDIDExLjEgMiAxMiAyLjkgMTIgNCBMIDEyIDEyIEwgMTQgMTIgQyAxNS4xIDEyIDE2IDEyLjkgMTYgMTQgTCAxNiAxNSBMIDE4IDE1IEMgMTkuMSAxNSAyMCAxNS45IDIwIDE3IEwgMjAgMjAgQyAyMCAyNSAxNiAyOSAxMSAyOSBDIDYgMjkgMyAyNSAzIDIwIEwgMyAxNCBDIDMgMTMgMy44IDEyLjIgNC44IDEyLjIgTCA2IDEyLjIgWiIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjMGYxNzJhIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogICAgPHBhdGggZD0iTSA2IDQgTCAxMCA0IEwgMTAgMTQgTCA2IDE0IFoiIGZpbGw9IiNmOGZhZmMiLz4KICAgIDxjaXJjbGUgY3g9IjIxIiBjeT0iOSIgcj0iNyIgZmlsbD0iIzBmMTcyYSIgc3Ryb2tlPSIjZjU5ZTBiIiBzdHJva2Utd2lkdGg9IjEuNSIvPgogICAgPHBhdGggZD0iTSAxNyA2LjUgTCAxOC41IDYuNSBMIDIwIDEwIEwgMjQgMTAgTCAyNSA3LjUgTCAxOSA3LjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZiYmYyNCIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogICAgPGNpcmNsZSBjeD0iMTkuNSIgY3k9IjExLjUiIHI9IjAuOSIgZmlsbD0iI2ZiYmYyNCIvPgogICAgPGNpcmNsZSBjeD0iMjMuNSIgY3k9IjExLjUiIHI9IjAuOSIgZmlsbD0iI2ZiYmYyNCIvPgogIDwvZz4KPC9zdmc+') 6 2, pointer !important;
}

/* Container */
#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#gameCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

#ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.ro-panel, .ro-window, .player-context-menu, .trade-dialog, .trade-request-dialog, .item-qty-dialog {
  pointer-events: auto;
}

.ro-panel {
  position: absolute;
  background: var(--ro-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--ro-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   0. Dynamic Video Background (Login & Character Selection)
   ========================================================================== */
.login-video-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 950;
  pointer-events: none;
  background: #020617;
  transition: opacity 0.5s ease;
}

.login-bg-img,
.login-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  filter: brightness(0.95) contrast(1.05) saturate(1.1);
  user-select: none;
  pointer-events: none;
}

.login-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.45) 0%, rgba(2, 6, 23, 0.82) 100%);
  pointer-events: none;
}

#auth-screen, #char-select-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hidden {
  display: none !important;
}

#auth-screen.hidden, #char-select-screen.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
  visibility: hidden !important;
}

.auth-box {
  position: relative;
  width: 90%;
  max-width: 440px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.82) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(245, 158, 11, 0.22);
  animation: fadeInDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ro-logo-title {
  text-align: center;
  margin-bottom: 12px;
}

.ro-logo-title .logo-subtitle {
  font-family: var(--font-thai, 'Kanit', sans-serif);
  font-size: 15px;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.75), 0 2px 4px rgba(0, 0, 0, 0.9);
  margin-bottom: 2px;
  text-transform: uppercase;
}

.ro-logo-title h1 {
  font-family: var(--font-hud, 'Chakra Petch', sans-serif);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.8), 0 2px 6px rgba(0, 0, 0, 0.9);
  margin: 0;
  line-height: 1.15;
}

.ro-logo-title .logo-edition {
  font-family: var(--font-hud, 'Outfit', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 2.5px;
  margin-top: 4px;
}

.auth-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 8px;
}

.auth-tab {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #94a3b8;
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.auth-tab.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35));
  border-color: var(--ro-gold);
  color: #fbbf24;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}

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

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
}

.form-group input {
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
  color: #fbbf24;
  font-size: 14px;
  font-family: var(--font-main);
  outline: none;
  transition: all 0.2s ease;
}

.form-group input:focus {
  border-color: var(--ro-gold);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
  background: rgba(0, 0, 0, 0.75);
}

.auth-error-msg {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #ef4444;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: #fca5a5;
  text-align: center;
}

.btn-auth-submit {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 1px solid #fbbf24;
  border-radius: 8px;
  color: #0f172a;
  font-family: var(--font-hud);
  font-size: 14px;
  font-weight: 800;
  padding: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

.btn-auth-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
  filter: brightness(1.1);
}

.btn-auth-submit.btn-reg {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #34d399;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.auth-footer-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 14px 0 10px;
  color: #64748b;
  font-size: 11px;
}

.auth-footer-divider::before, .auth-footer-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-footer-divider span {
  padding: 0 10px;
}

.btn-guest-play {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #e2e8f0;
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 700;
  padding: 9px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-guest-play:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #38bdf8;
  color: #38bdf8;
}

.auth-server-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.4px;
}

.auth-server-status #auth-status-text {
  color: #cbd5e1;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.status-indicator {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-indicator.online {
  background: #10b981;
  box-shadow: 0 0 8px #10b981, 0 0 16px rgba(16, 185, 129, 0.6);
  animation: statusPulse 1.8s infinite ease-in-out;
}

.status-indicator.online::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(52, 211, 153, 0.6);
  animation: statusRipple 1.8s infinite ease-out;
  pointer-events: none;
}

@keyframes statusPulse {
  0%, 100% {
    transform: scale(0.95);
    background: #059669;
    box-shadow: 0 0 6px #10b981, 0 0 12px rgba(16, 185, 129, 0.4);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.25);
    background: #34d399;
    box-shadow: 0 0 14px #34d399, 0 0 24px rgba(52, 211, 153, 0.9);
    opacity: 1;
  }
}

@keyframes statusRipple {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* ==========================================================================
   2. Character Selection Screen (Epic MMORPG Overhaul)
   ========================================================================== */
.char-slots-box {
  width: 95%;
  max-width: 940px;
  animation: fadeInDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.char-select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.char-select-header h2 {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-hud);
  color: #fef08a;
  letter-spacing: 1.5px;
  text-align: center;
  text-shadow: 0 0 16px rgba(245, 158, 11, 0.6);
}

.user-account-badge {
  font-size: 13px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-account-badge strong {
  color: #fbbf24;
  font-weight: 800;
}

.badge-role {
  font-size: 10px;
  background: rgba(59, 130, 246, 0.25);
  border: 1px solid #3b82f6;
  color: #93c5fd;
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: 4px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.btn-logout {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-logout:hover {
  background: rgba(239, 68, 68, 0.4);
  border-color: #ef4444;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.4);
}

.char-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 8px;
}

/* Character Card */
.char-slot-card {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.char-slot-card:hover {
  transform: none;
}

.char-slot-card.has-honor {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

/* Honor Header Badge */
.char-slot-honor-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35));
  border: 1px solid rgba(251, 191, 36, 0.6);
  color: #fef08a;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.8);
  margin-bottom: 2px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Live Character Stage */
.char-slot-stage {
  position: relative;
  width: 130px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.char-slot-canvas {
  width: 130px;
  height: 120px;
  display: block;
}

.char-slot-job-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.char-slot-job-icon canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Info Section */
.char-slot-info {
  width: 100%;
  text-align: center;
}

.char-slot-name {
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-hud);
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  margin-bottom: 4px;
}

.char-slot-job-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.job-badge-swordsman { background: rgba(59, 130, 246, 0.2); border: 1px solid #3b82f6; color: #93c5fd; }
.job-badge-archer { background: rgba(16, 185, 129, 0.2); border: 1px solid #10b981; color: #6ee7b7; }
.job-badge-mage { background: rgba(168, 85, 247, 0.2); border: 1px solid #a855f7; color: #d8b4fe; }
.job-badge-thief { background: rgba(236, 72, 153, 0.2); border: 1px solid #ec4899; color: #f472b6; }

/* Stats Details */
.char-slot-stats {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
}

.char-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.char-stat-row .stat-label {
  color: #94a3b8;
  font-size: 10px;
}

.char-stat-row .stat-val-lv {
  color: #fbbf24;
  font-weight: 700;
  font-family: var(--font-hud);
}

.char-stat-row .stat-val-map {
  color: #38bdf8;
  font-weight: 600;
}

.char-stat-row .stat-val-zeny {
  color: #34d399;
  font-weight: 700;
  font-family: var(--font-hud);
}

/* Actions */
.char-slot-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

.btn-play-slot {
  flex: 1;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 1px solid #fef08a;
  border-radius: 8px;
  color: #0f172a;
  font-family: var(--font-hud);
  font-weight: 800;
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-play-slot:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
  filter: brightness(1.1);
}

.btn-del-slot {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-del-slot:hover {
  background: rgba(239, 68, 68, 0.4);
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

/* Empty Slot */
.char-slot-empty {
  min-height: 280px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #64748b;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 20px 14px;
}

.char-slot-empty:hover {
  transform: none;
}

.empty-rune-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.1);
  border: 1.5px dashed rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #38bdf8;
  transition: all 0.3s ease;
}

.char-slot-empty:hover .empty-rune-circle {
  transform: scale(1.1) rotate(45deg);
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.2);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}

.btn-create-slot {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid #38bdf8;
  border-radius: 8px;
  color: #e0f2fe;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 14px;
  pointer-events: none;
  transition: all 0.2s ease;
}

.char-slot-empty:hover .btn-create-slot {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
}

/* Character Creation Overlay (Full-Screen Cinematic Experience) */
.char-create-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.95) 0%, rgba(2, 6, 23, 0.99) 100%);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  animation: fadeIn 0.3s ease-out;
}

.char-create-box {
  width: 95%;
  max-width: 960px;
  padding: 22px 26px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.98) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(245, 158, 11, 0.2) !important;
}

.char-create-header {
  font-size: 17px;
  font-weight: 800;
  font-family: var(--font-hud);
  color: #fef08a;
  letter-spacing: 1px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 18px;
}

.char-create-body-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 24px;
  align-items: center;
}

/* Left Column: 3D Video Showcase */
.char-create-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(circle at center, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0) 75%);
  border-radius: 16px;
  padding: 10px;
}

/* Steady RPG Character Catchphrase Box (Above Video - Prontera NPC Style) */
.char-create-quote-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 380px;
  min-height: 62px;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 41, 59, 0.94) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.6);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 10;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.char-create-quote-bubble:hover {
  border-color: #fbbf24;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 16px rgba(245, 158, 11, 0.4);
}

.char-create-quote-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: rgba(245, 158, 11, 0.7) transparent transparent transparent;
  display: block;
  width: 0;
}

.quote-icon {
  font-size: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.quote-text-container {
  display: block;
  flex: 1;
  text-align: left;
}

.quote-text {
  font-family: var(--font-thai, 'Kanit', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: #fffbeb;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(251, 191, 36, 0.4);
  line-height: 1.45;
  letter-spacing: 0.3px;
  word-break: break-word;
}

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

.char-create-video-wrapper {
  position: relative;
  width: 380px;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.char-create-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 98%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 98%);
  filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.35));
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  pointer-events: none;
}

.char-create-video.active {
  opacity: 1;
  pointer-events: auto;
}

.video-pedestal-glow {
  position: absolute;
  bottom: 10px;
  width: 240px;
  height: 45px;
  background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.4) 0%, rgba(56, 189, 248, 0.2) 50%, transparent 80%);
  border-radius: 50%;
  pointer-events: none;
}

.char-create-class-badge-preview {
  margin-top: 10px;
  font-family: var(--font-hud);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.8);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.4);
  padding: 4px 16px;
  border-radius: 12px;
}

/* Right Column: Form Controls */
.char-create-form-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.class-icon-wrapper {
  width: 38px;
  height: 38px;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.class-icon-wrapper canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.class-desc-box.full-desc {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px 16px;
}

.btn-create-confirm {
  margin-top: 6px;
  padding: 14px;
  font-size: 15px;
  letter-spacing: 1px;
}

/* Delete Character Confirmation Overlay */
.delete-char-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  animation: fadeIn 0.2s ease-out;
}

.delete-char-box {
  width: 90%;
  max-width: 440px;
  background: linear-gradient(180deg, rgba(28, 20, 35, 0.98) 0%, rgba(15, 23, 42, 0.99) 100%) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.7) !important;
  box-shadow: 0 0 45px rgba(239, 68, 68, 0.35), 0 25px 50px -12px rgba(0, 0, 0, 0.9) !important;
  border-radius: 14px;
  overflow: hidden;
  animation: duplicateModalPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.delete-char-header {
  background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 100%) !important;
  border-bottom: 1px solid rgba(239, 68, 68, 0.5) !important;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 13px;
  color: #fee2e2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.delete-char-body {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.del-char-avatar-box {
  width: 68px;
  height: 68px;
  background: rgba(239, 68, 68, 0.15);
  border: 2px solid #ef4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.del-char-title {
  font-size: 16px;
  font-weight: 800;
  color: #f8fafc;
}

.del-char-info-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 14px;
  border-radius: 20px;
}

.del-char-info-badge .del-name {
  font-size: 14px;
  font-weight: 700;
  color: #fbbf24;
}

.del-char-info-badge .del-class {
  font-size: 12px;
  color: #94a3b8;
}

.del-char-warning {
  width: 100%;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: #fca5a5;
  line-height: 1.5;
  text-align: left;
}

.del-password-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  margin-top: 4px;
}

.del-password-group label {
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
}

.del-password-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.del-password-input:focus {
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
  background: rgba(0, 0, 0, 0.8);
}

.del-char-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.btn-del-cancel {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-del-cancel:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.btn-del-confirm {
  flex: 1.3;
  padding: 10px 14px;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  border: 1px solid #f87171;
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-del-confirm:hover:not(:disabled) {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.7);
  transform: translateY(-1px);
}

.btn-del-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

/* Save Toast Notification */
.save-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid #10b981;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(16, 185, 129, 0.35);
  border-radius: 20px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #34d399;
  z-index: 2000;
  pointer-events: none;
  animation: toastSlideDown 0.3s ease;
  transition: opacity 0.3s ease;
}

.save-toast.hidden {
  opacity: 0;
  visibility: hidden;
}

@keyframes toastSlideDown {
  from { opacity: 0; transform: translate(-50%, -15px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ro-logo-title {
  text-align: center;
  margin-bottom: 12px;
}

.logo-subtitle {
  font-size: 10px;
  font-family: var(--font-hud);
  letter-spacing: 4px;
  color: var(--ro-gold-bright);
}

.ro-logo-title h1 {
  font-size: 28px;
  font-weight: 800;
  font-family: var(--font-hud);
  color: #ffffff;
  text-shadow: 0 0 15px rgba(245, 158, 11, 0.6), 0 2px 4px #000;
  letter-spacing: 2px;
}

.logo-edition {
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 2px;
}

/* Name Input */
.name-input-group {
  margin: 14px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.name-input-group label {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
}

.name-input-group input {
  background: rgba(0, 0, 0, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fbbf24;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-main);
  outline: none;
  transition: all 0.2s ease;
}

.name-input-group input:focus {
  border-color: var(--ro-gold);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
  background: rgba(0, 0, 0, 0.7);
}

/* Class Selection Cards Grid */
.class-section-header {
  font-size: 13px;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 10px;
}

.class-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.class-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.class-card:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-3px);
  border-color: rgba(251, 191, 36, 0.5);
}

.class-card.active {
  background: rgba(245, 158, 11, 0.2);
  border-color: var(--ro-gold-bright);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
}

.class-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.class-name {
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
}

.class-role {
  font-size: 9px;
  color: #94a3b8;
  margin-top: 2px;
}

.class-stats-preview {
  font-size: 8px;
  color: var(--ro-gold-bright);
  margin-top: 4px;
  font-family: var(--font-hud);
}

/* Character Live Preview Box */
.char-preview-container {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
}

#previewCanvas {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.class-desc-box {
  flex: 1;
}

.preview-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ro-gold-bright);
  margin-bottom: 4px;
}

.preview-desc {
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.4;
}

/* Start Game Button */
.btn-start-ro {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  border: 1px solid #fef08a;
  border-radius: 10px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-hud);
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
  transition: all 0.2s ease;
}

.btn-start-ro:hover {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.6);
}

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

/* ==========================================================================
   1. Player HUD (Top Left) & Quick Menu Buttons
   ========================================================================== */
#player-hud-group {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 50;
  pointer-events: none;
}

#player-hud {
  position: static;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 12px 8px 10px;
  min-width: 290px;
  max-width: 340px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.92) 50%, rgba(15, 23, 42, 0.98) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.55) !important;
  border-radius: 12px !important;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.75), 
    0 0 20px rgba(245, 158, 11, 0.15),
    inset 0 1px 1px rgba(254, 240, 138, 0.4),
    inset 0 -1px 2px rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(14px) !important;
  position: relative;
}

.player-quick-menu {
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.quick-menu-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.96) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(0, 0, 0, 0.8);
  border-radius: 9px;
  color: #f8fafc;
  font-family: var(--font-main);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.quick-menu-btn:hover {
  transform: translateY(-2px);
  border-color: #fbbf24;
  box-shadow: 
    0 6px 18px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(245, 158, 11, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.quick-menu-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.quick-menu-btn .btn-icon {
  font-size: 14px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.quick-menu-btn .btn-text {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.quick-menu-btn .btn-hotkey {
  font-size: 9px;
  font-family: var(--font-hud);
  font-weight: 800;
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  color: #ffffff;
  border: 1px solid #fef08a;
  padding: 1px 5px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 1px #000;
}

/* Network Connection Status Badge */
.net-badge {
  pointer-events: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  cursor: default;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  user-select: none;
}

.net-badge:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.net-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
}

.net-badge.net-online {
  border-color: rgba(34, 197, 94, 0.4);
  color: #4ade80;
}

.net-badge.net-online .net-dot {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.net-badge.net-connecting {
  border-color: rgba(234, 179, 8, 0.4);
  color: #facc15;
}

.net-badge.net-connecting .net-dot {
  background: #eab308;
  animation: pulse 1s infinite alternate;
}

.net-badge.net-offline {
  border-color: rgba(148, 163, 184, 0.25);
  color: #94a3b8;
}

.net-badge.net-offline .net-dot {
  background: #64748b;
}

.net-ping {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  letter-spacing: 0.3px;
  margin-left: 2px;
}

.net-ping.ping-good {
  color: #4ade80;
}

.net-ping.ping-med {
  color: #fbbf24;
}

.net-ping.ping-high {
  color: #f87171;
}

.hud-avatar {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hud-avatar:hover {
  transform: scale(1.08);
}

.avatar-frame {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1e293b, #090d16);
  border: 2px solid #fbbf24;
  outline: 1.5px solid rgba(180, 83, 9, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 
    0 0 14px rgba(245, 158, 11, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.8);
}

.avatar-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-icon img,
.avatar-icon canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.avatar-level-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 50%, #991b1b 100%);
  color: #ffffff;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 12px;
  border: 1.5px solid #fef08a;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6), 0 0 8px rgba(239, 68, 68, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.2px;
}

.player-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
  cursor: grab;
  cursor: -webkit-grab;
  user-select: none;
  touch-action: none;
}

.player-name-row:active,
#player-hud-group.is-dragging .player-name-row {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.player-name-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.hud-drag-indicator {
  font-size: 13px;
  color: #fbbf24;
  opacity: 0.6;
  margin-right: 2px;
  cursor: grab;
  user-select: none;
  transition: opacity 0.2s ease;
}

.player-name-row:hover .hud-drag-indicator {
  opacity: 1;
}

.player-hud-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Minimize / Compact Mode Toggle Button */
.hud-toggle-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fde047;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
  user-select: none;
}

.hud-toggle-btn:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: #fbbf24;
  color: #ffffff;
  transform: scale(1.1);
}

.hud-toggle-btn:active {
  transform: scale(0.95);
}

/* Compact Mode Bars (Mini Inline) */
.player-hud-compact-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 2px 0 4px 0;
}

.compact-bar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
}

.compact-bar-tag {
  width: 16px;
  font-family: var(--font-hud);
  font-size: 9px;
  font-weight: 800;
  color: #94a3b8;
  text-shadow: 0 1px 2px #000;
}

.compact-bar-item.hp .compact-bar-tag { color: #f87171; }
.compact-bar-item.sp .compact-bar-tag { color: #60a5fa; }

.compact-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}

.compact-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.25s ease;
}

.compact-bar-num {
  font-family: var(--font-hud);
  font-size: 9.5px;
  color: #ffffff;
  text-shadow: 0 1px 2px #000;
  min-width: 50px;
  text-align: right;
}

/* Compact Mode Transitions & Rules */
#player-hud-group.is-compact #player-hud {
  min-width: 210px;
  max-width: 250px;
  padding: 6px 10px 6px 8px;
  gap: 4px;
}

#player-hud-group.is-compact .player-name-row {
  border-bottom: none;
  padding-bottom: 0;
}

#player-hud-group.is-compact #player-hud-main,
#player-hud-group.is-compact #player-hud-footer {
  display: none !important;
}

#player-hud-group.is-compact .player-hud-compact-bars {
  display: flex !important;
}

#player-hud-group.is-compact .player-quick-menu {
  gap: 4px;
}

/* ==========================================================
   🎮 AAA Fantasy MMORPG Player HUD (Ornate Frame System)
   ========================================================== */
#player-hud.rpg-fantasy-hud {
  position: relative !important;
  width: clamp(380px, 32vw, 490px) !important;
  aspect-ratio: 1024 / 420 !important;
  min-width: 0 !important;
  max-width: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.65)) !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  user-select: none;
  touch-action: none;
  cursor: grab;
}

#player-hud-group.is-dragging #player-hud.rpg-fantasy-hud {
  cursor: grabbing !important;
}

/* Background Artwork Frame */
.hud-frame-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 3;
  user-select: none;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
}

/* 1. Circular Avatar Aperture (Layer 1: Behind frame bevel) */
.hud-avatar-aperture {
  position: absolute;
  top: 13.5%;
  left: 3.2%;
  width: 25.8%;
  height: 63.5%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  background: radial-gradient(circle, #1a2a44 0%, #0b1320 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.hud-avatar-aperture:hover {
  filter: brightness(1.15);
}

.hud-avatar-aperture .avatar-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(24px, 2.8vw, 36px);
}

.hud-avatar-aperture img,
.hud-avatar-aperture canvas,
.hud-avatar-aperture .avatar-icon canvas,
.hud-avatar-aperture .avatar-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* 2. Crimson Red Level Pill Badge */
.hud-level-pill {
  position: absolute;
  left: 10.2%;
  top: 63.8%;
  width: 9.5%;
  height: 7.2%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(9.5px, 1.0vw, 11.5px);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

/* 3. Top Header Bar (Draggable) */
.hud-top-bar {
  position: absolute;
  top: 16%;
  left: 0;
  width: 100%;
  height: 18%;
  z-index: 6;
  display: block !important;
  cursor: grab;
  cursor: -webkit-grab;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hud-top-bar:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

/* Small Job Emblem Circle */
.hud-job-emblem-socket {
  position: absolute;
  top: 25%;
  left: 24.5%;
  width: 4.8%;
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 1.1vw, 13px);
  pointer-events: none;
}

/* Player Name */
.hud-name-container {
  position: absolute;
  top: 22%;
  left: 30.2%;
  width: 24.0%;
  height: 65%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hud-name-container .player-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: clamp(11.5px, 1.25vw, 14.5px);
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(30, 58, 138, 0.6);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Server Status & Ping Capsule */
#player-hud.rpg-fantasy-hud #net-status-badge,
.hud-server-capsule {
  position: absolute !important;
  top: 20% !important;
  left: 56.5% !important;
  width: 33.0% !important;
  height: 65% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(9.5px, 1.05vw, 11.5px) !important;
  font-weight: 700 !important;
  color: #4ade80 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  z-index: 7 !important;
}

/* Menu Toggle Button (Gold 3-bar circular button) */
.hud-menu-btn {
  position: absolute;
  top: 2%;
  right: 1.8%;
  width: 8.0%;
  height: 96%;
  border-radius: 50%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.hud-menu-btn:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.8));
}

.hud-menu-btn:active {
  transform: scale(0.92);
}

.hud-menu-icon {
  display: none; /* Already illustrated on the golden 3D button */
}

/* 4. Status Bars Column (HP, SP, EXP) */
.hud-bars-column {
  position: absolute;
  top: 37.8%;
  left: 33.2%;
  width: 58.6%;
  height: 32.2%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 !important;
  margin: 0 !important;
}

.hud-status-bar-row {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 28.5%;
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.hud-bar-socket {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border-radius: 12px;
  overflow: hidden;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.hud-bar-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.hud-bar-fill.hp-fill {
  background: linear-gradient(180deg, #ff7188 0%, #ef4444 48%, #b91c1c 100%);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.hud-bar-fill.sp-fill {
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 48%, #1d4ed8 100%);
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.hud-bar-fill.exp-fill {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 48%, #b45309 100%);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.hud-bar-label {
  position: relative;
  width: 100%;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(9px, 1.0vw, 11.5px);
  color: #ffffff;
  text-shadow: 
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  z-index: 2;
  letter-spacing: 0.5px;
}

/* 5. Footer Row (Zeny, Weight, Job Badges & Magical Spellbook) */
.hud-footer-row {
  position: absolute;
  top: 76.5%;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 14.5%;
  z-index: 6;
  display: block !important;
  border-top: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hud-capsule-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', 'Kanit', sans-serif;
  font-weight: 700;
  color: #fde68a;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  font-size: clamp(9.5px, 1.05vw, 12px);
  cursor: default;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hud-capsule-slot.zeny-slot {
  position: absolute;
  top: 0;
  left: 13.0%;
  width: 30.5%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10.5px, 1.15vw, 13px);
}

.hud-capsule-slot.weight-slot {
  position: absolute;
  top: 0;
  left: 51.8%;
  width: 10.8%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ade80;
}

.hud-capsule-slot.weight-warning {
  color: #fb923c !important;
}

.hud-capsule-slot.weight-overweight {
  color: #f87171 !important;
}

.hud-capsule-slot.job-slot {
  position: absolute;
  top: 0;
  left: 67.0%;
  width: 21.0%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fef08a;
  font-size: clamp(9.5px, 1.05vw, 11.5px);
  white-space: nowrap;
}

/* 3D Magical Spellbook Button */
.hud-book-btn {
  position: absolute;
  top: -4%;
  right: 2.8%;
  width: 7.2%;
  height: 110%;
  background: transparent !important;
  border: none !important;
  border-radius: 8px;
  cursor: pointer;
  z-index: 10;
  padding: 0 !important;
  margin: 0 !important;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.hud-book-btn:hover {
  transform: scale(1.15) rotate(4deg);
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.85));
}

.hud-book-btn:active {
  transform: scale(0.92);
}

.hud-book-btn:hover {
  transform: scale(1.12) rotate(3deg);
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.8));
}

.hud-book-btn:active {
  transform: scale(0.92);
}

/* Compact Mode override for fantasy HUD */
#player-hud-group.is-compact #player-hud.rpg-fantasy-hud {
  width: clamp(240px, 22vw, 290px) !important;
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 74px !important;
  max-height: 84px !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(11, 19, 36, 0.98) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.8) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  padding: 8px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#player-hud-group.is-compact .hud-frame-art,
#player-hud-group.is-compact .hud-avatar-aperture,
#player-hud-group.is-compact .hud-level-pill,
#player-hud-group.is-compact .hud-bars-column,
#player-hud-group.is-compact .hud-footer-row,
#player-hud-group.is-compact #net-status-badge {
  display: none !important;
}

/* Compact Mode Mini Header */
#player-hud-group.is-compact .hud-top-bar {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 0 0 4px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#player-hud-group.is-compact .hud-job-emblem-socket {
  position: static !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  font-size: 13px !important;
  margin-right: 6px !important;
}

#player-hud-group.is-compact .hud-name-container {
  position: static !important;
  width: auto !important;
  flex: 1 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}

#player-hud-group.is-compact .hud-name-container .player-title {
  font-size: 12.5px !important;
  color: #fef08a !important;
  text-shadow: 0 1px 3px #000 !important;
}

#player-hud-group.is-compact #btn-toggle-hud-compact {
  position: static !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px !important;
  background: rgba(245, 158, 11, 0.2) !important;
  border: 1px solid rgba(245, 158, 11, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #fbbf24 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  padding: 0 !important;
  margin-left: 8px !important;
  transition: all 0.2s ease !important;
}

#player-hud-group.is-compact #btn-toggle-hud-compact:hover {
  background: rgba(245, 158, 11, 0.45) !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

#player-hud-group.is-compact .hud-menu-icon {
  display: inline-block !important;
  font-family: monospace, sans-serif !important;
  line-height: 1 !important;
}

/* Compact Mode Mini Bars */
#player-hud-group.is-compact .player-hud-compact-bars {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 0 !important;
}

#player-hud-group.is-compact .compact-bar-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
}

#player-hud-group.is-compact .compact-bar-tag {
  width: 20px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

#player-hud-group.is-compact .compact-bar-track {
  flex: 1 !important;
  height: 10px !important;
  background: rgba(0, 0, 0, 0.75) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

#player-hud-group.is-compact .compact-bar-fill {
  height: 100% !important;
  border-radius: 5px !important;
  transition: width 0.3s ease !important;
}

#player-hud-group.is-compact .compact-bar-num {
  font-family: 'Outfit', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px #000 !important;
  min-width: 58px !important;
  text-align: right !important;
}

#player-hud-group.is-compact .quick-menu-btn {
  padding: 4px 6px;
  font-size: 10.5px;
}

#player-hud-group.is-compact .quick-menu-btn .btn-text {
  display: none;
}

#player-hud-group.is-compact .quick-menu-btn .btn-icon {
  font-size: 13px;
}

.player-title {
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

/* ==========================================================
   🎮 AAA Fantasy MMORPG Inventory Window System
   ========================================================== */
#inventory-window.rpg-fantasy-inventory {
  position: absolute !important;
  width: clamp(420px, 36vw, 520px) !important;
  aspect-ratio: 1170 / 1344 !important;
  min-width: 0 !important;
  max-width: 95vw !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 18px 45px rgba(0, 0, 0, 0.85)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  user-select: none;
  touch-action: none;
  overflow: visible !important;
  z-index: 120;
}

#inventory-window.rpg-fantasy-inventory.ro-modal-hidden {
  display: none !important;
}

#inventory-window.rpg-fantasy-inventory::before {
  display: none !important; /* disable generic game-windows gold bar */
}

/* Background Artwork Frame */
.inven-frame-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 2;
  user-select: none;
}

/* 1. Header Drag Handle (covers poring & gold title crest on left/center, leaving right side free) */
.inven-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 78% !important;
  height: 16% !important;
  z-index: 15 !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: grab;
}

.inven-header:active {
  cursor: grabbing;
}

.inven-header .header-title-group {
  position: absolute;
  top: 52%;
  left: 23%;
  width: 58%;
  height: 38%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.inven-title-icon {
  font-size: 15px;
  display: inline-block;
  filter: drop-shadow(0 1px 2px #000);
}

.inven-title-text {
  font-family: 'Kanit', sans-serif !important;
  font-size: clamp(12.5px, 1.2vw, 15px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 10px rgba(245, 158, 11, 0.6) !important;
  white-space: nowrap;
}

/* Blue Sort Button in Header (positioned on window frame inside dark blue header bar) */
#inventory-window.rpg-fantasy-inventory .btn-sort-inven {
  position: absolute !important;
  top: 10.5% !important;
  right: 16.5% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  margin: 0 !important;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  border: 1.5px solid rgba(147, 197, 253, 0.75) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-family: 'Kanit', sans-serif !important;
  font-size: clamp(10.5px, 1.0vw, 12px) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
  pointer-events: auto !important;
  z-index: 30 !important;
}

#inventory-window.rpg-fantasy-inventory .btn-sort-inven:hover {
  transform: translateY(-1px) scale(1.05);
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
}

#inventory-window.rpg-fantasy-inventory .btn-sort-inven:active {
  transform: scale(0.95);
}

/* 3D Red Close Button Target - Perfectly covers the red square button in the artwork */
#inventory-window.rpg-fantasy-inventory .inven-btn-close {
  position: absolute !important;
  top: 10.0% !important;
  right: 4.8% !important;
  width: 48px !important;
  height: 48px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  color: transparent !important;
  font-size: 0 !important;
  z-index: 30 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  transform: none !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
  pointer-events: auto !important;
}

#inventory-window.rpg-fantasy-inventory .inven-btn-close:hover {
  filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.9));
  background: rgba(255, 255, 255, 0.08) !important;
}

#inventory-window.rpg-fantasy-inventory .inven-btn-close:active {
  transform: scale(0.92) !important;
}

/* 2. Window Body Container */
.inven-dialog.rpg-fantasy-inventory .inven-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* 3. Category Tabs (Overlaying the 4 illustrated capsules) */
#inventory-window.rpg-fantasy-inventory .inven-category-tabs {
  position: absolute !important;
  top: 17.6% !important;
  left: 5.5% !important;
  width: 89.0% !important;
  height: 5.4% !important;
  display: flex !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 10 !important;
}

#inventory-window.rpg-fantasy-inventory .inven-tab-btn {
  flex: 1 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 26px !important;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  border-radius: 9px !important;
  font-family: 'Kanit', sans-serif !important;
  font-size: clamp(10.5px, 1.0vw, 12px) !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

#inventory-window.rpg-fantasy-inventory .inven-tab-btn:hover {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
}

#inventory-window.rpg-fantasy-inventory .inven-tab-btn.active {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.28) 0%, rgba(180, 83, 9, 0.18) 100%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.95) !important;
  color: #fef08a !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(245, 158, 11, 0.6) !important;
}

/* 4. Subheader (Moved down into the shelf below the capsules) */
#inventory-window.rpg-fantasy-inventory .inven-section-header {
  position: absolute !important;
  top: 26.2% !important;
  left: 6.2% !important;
  width: 87.6% !important;
  height: 3.5% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 4px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  z-index: 10 !important;
}

#inventory-window.rpg-fantasy-inventory .inven-count-label {
  font-family: 'Outfit', 'Kanit', sans-serif !important;
  font-size: clamp(10.5px, 1.0vw, 12px) !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  text-shadow: 0 1px 3px #000 !important;
}

#inventory-window.rpg-fantasy-inventory .inven-hint-text {
  font-family: 'Kanit', sans-serif !important;
  font-size: clamp(9.5px, 0.9vw, 11px) !important;
  color: #94a3b8 !important;
  text-shadow: 0 1px 2px #000 !important;
  letter-spacing: 0.2px;
}

/* 5. Scrollable 6-Column Grid Viewport (Moved down below subheader with clean breathing room) */
#inventory-window.rpg-fantasy-inventory .inven-grid-viewport {
  position: absolute !important;
  top: 30.6% !important;
  left: 5.4% !important;
  width: 89.2% !important;
  height: 52.0% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px 6px 8px 4px !important;
  box-sizing: border-box !important;
  z-index: 7 !important;
}

/* Golden Fantasy Custom Scrollbar */
.inven-grid-viewport::-webkit-scrollbar {
  width: 5px;
}

.inven-grid-viewport::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
}

.inven-grid-viewport::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.inven-dialog.rpg-fantasy-inventory .inven-grid-expanded {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 6. Item Socket Cells */
.inven-dialog.rpg-fantasy-inventory .inven-item-cell {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  background: radial-gradient(circle at center, rgba(20, 32, 54, 0.6) 0%, rgba(8, 12, 22, 0.95) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 2px 5px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s ease, border-color 0.16s ease !important;
  cursor: pointer !important;
}

.inven-dialog.rpg-fantasy-inventory .inven-item-cell:hover {
  transform: translateY(-2px) scale(1.06) !important;
  border-color: #fcd34d !important;
  background: radial-gradient(circle at center, rgba(245, 158, 11, 0.3) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.6), inset 0 0 10px rgba(245, 158, 11, 0.3), 0 6px 12px rgba(0, 0, 0, 0.7) !important;
  z-index: 10 !important;
}

.inven-dialog.rpg-fantasy-inventory .inven-item-cell:active {
  transform: scale(0.96) !important;
}

.inven-dialog.rpg-fantasy-inventory .inven-item-cell.empty-slot {
  background: rgba(8, 12, 22, 0.38) !important;
  border: 1px dashed rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7) !important;
  cursor: default !important;
  transform: none !important;
}

.inven-dialog.rpg-fantasy-inventory .inven-item-cell.is-equipped {
  border-color: rgba(245, 158, 11, 0.95) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.55), inset 0 0 10px rgba(245, 158, 11, 0.35) !important;
}

/* Rarity border glows */
.inven-dialog.rpg-fantasy-inventory .inven-item-cell.rarity-uncommon {
  border-color: #22c55e !important;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.45), inset 0 1px 2px rgba(34, 197, 94, 0.3) !important;
}

.inven-dialog.rpg-fantasy-inventory .inven-item-cell.rarity-rare {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.45), inset 0 1px 2px rgba(56, 189, 248, 0.3) !important;
}

.inven-dialog.rpg-fantasy-inventory .inven-item-cell.rarity-epic {
  border-color: #c084fc !important;
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.5), inset 0 1px 2px rgba(192, 132, 252, 0.3) !important;
}

.inven-dialog.rpg-fantasy-inventory .inven-item-cell.rarity-legendary {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.6), inset 0 1px 2px rgba(251, 191, 36, 0.35) !important;
}

/* 7. Footer Row: Weight & Zeny */
#inventory-window.rpg-fantasy-inventory .inven-footer-info-row {
  position: absolute !important;
  top: 85.0% !important;
  left: 0 !important;
  width: 100% !important;
  height: 9.0% !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 8 !important;
}

#inventory-window.rpg-fantasy-inventory .inven-weight-section {
  position: absolute !important;
  top: 15% !important;
  left: 5.8% !important;
  width: 44.0% !important;
  height: 75% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 0 14px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

#inventory-window.rpg-fantasy-inventory .inven-weight-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(9.5px, 0.95vw, 11.5px) !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
  text-shadow: 0 1px 2px #000 !important;
  margin-bottom: 4px !important;
}

#inventory-window.rpg-fantasy-inventory .inven-weight-track {
  height: 8px !important;
  background: rgba(0, 0, 0, 0.75) !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

#inventory-window.rpg-fantasy-inventory .inven-weight-fill {
  height: 100% !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, #2dd4bf 0%, #10b981 100%) !important;
  transition: width 0.3s ease !important;
}

#inventory-window.rpg-fantasy-inventory .inven-footer-zeny {
  position: absolute !important;
  top: 16% !important;
  left: 68.0% !important;
  width: 25.5% !important;
  height: 75% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

#inventory-window.rpg-fantasy-inventory .zeny-label {
  font-family: 'Kanit', sans-serif !important;
  font-size: clamp(9.5px, 0.95vw, 11px) !important;
  color: #cbd5e1 !important;
  text-shadow: 0 1px 2px #000 !important;
  margin-bottom: 2px !important;
}

#inventory-window.rpg-fantasy-inventory .zeny-val {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(14px, 1.4vw, 17px) !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 10px rgba(245, 158, 11, 0.5) !important;
}

#inventory-window.rpg-fantasy-inventory .zeny-unit {
  color: #fde68a !important;
  font-size: 12px !important;
  margin-left: 3px !important;
}

.job-badge,
.hud-job-badge {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.16) 0%, rgba(180, 83, 9, 0.32) 100%);
  border: 1px solid rgba(251, 191, 36, 0.55);
  color: #fde047;
  font-family: var(--font-hud);
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(253, 224, 71, 0.35);
  letter-spacing: 0.3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.player-hud-main {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.hud-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.player-hud-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hud-zeny-badge {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.25) 0%, rgba(180, 83, 9, 0.4) 100%);
  border: 1px solid #fbbf24;
  color: #fef08a;
  font-family: var(--font-hud);
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 6px rgba(251, 191, 36, 0.5);
  letter-spacing: 0.3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* HUD Weight Limit Badge */
.hud-weight-badge {
  font-family: var(--font-hud);
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.hud-weight-badge.weight-normal {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.4) 100%);
  border: 1px solid #34d399;
  color: #a7f3d0;
}

.hud-weight-badge.weight-warn-50,
.hud-weight-badge.weight-warn-80 {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.65);
  color: #fbbf24;
}

.hud-weight-badge.weight-danger-90 {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.8);
  color: #f87171;
  animation: pulseWeightDanger 1.2s infinite ease-in-out;
}

@keyframes pulseWeightDanger {
  0%, 100% { box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.9); transform: scale(1.05); }
}

.job-badge {
  color: var(--ro-gold-bright);
  font-size: 11px;
  font-family: var(--font-hud);
  white-space: nowrap;
}

/* --- Inventory & Storage Weight Limit Sections --- */
.inven-footer-info-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.inven-weight-section {
  flex: 1.25;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.storage-weight-section {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inven-weight-header,
.storage-weight-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
}

.inven-weight-header .weight-label,
.storage-weight-header .weight-label {
  color: #94a3b8;
  font-weight: 600;
}

.inven-weight-header .weight-numbers,
.storage-weight-header .weight-numbers {
  font-family: var(--font-hud);
  color: #cbd5e1;
  font-size: 11.5px;
}

.inven-weight-header .weight-numbers strong,
.storage-weight-header .weight-numbers strong {
  color: #f8fafc;
}

.inven-weight-track,
.storage-weight-track {
  height: 6px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.inven-weight-fill,
.storage-weight-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease, background 0.3s ease;
}

.inven-weight-fill.weight-normal,
.storage-weight-fill.weight-normal {
  background: linear-gradient(90deg, #10b981, #34d399);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.inven-weight-fill.weight-warn-50,
.storage-weight-fill.weight-warn-50,
.inven-weight-fill.weight-warn-80,
.storage-weight-fill.weight-warn-80 {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.inven-weight-fill.weight-danger-90,
.storage-weight-fill.weight-danger-90 {
  background: linear-gradient(90deg, #ef4444, #f87171);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
}

.inven-footer-zeny {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  gap: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 8px rgba(245, 158, 11, 0.15);
}

.inven-footer-zeny .zeny-label {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
}

.inven-footer-zeny .zeny-val {
  color: #fbbf24;
  font-family: var(--font-hud);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

/* Crystal Gloss Status Bars */
.bar-container {
  position: relative;
  height: 14px;
  width: 100%;
}

.bar-track {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #090d16 0%, #151d2e 100%);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.85);
  position: relative;
}

/* Crystal Tube Top-Gloss Sheen */
.bar-track::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 6px 6px 0 0;
  pointer-events: none;
  z-index: 2;
}

.bar-fill {
  height: 100%;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.hp-fill {
  background: linear-gradient(180deg, #fca5a5 0%, #ef4444 40%, #dc2626 75%, #991b1b 100%);
  box-shadow: 
    0 0 12px rgba(239, 68, 68, 0.65), 
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -1px 2px rgba(0, 0, 0, 0.6);
}

.sp-fill {
  background: linear-gradient(180deg, #93c5fd 0%, #3b82f6 40%, #2563eb 75%, #1d4ed8 100%);
  box-shadow: 
    0 0 12px rgba(59, 130, 246, 0.6), 
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -1px 2px rgba(0, 0, 0, 0.6);
}

.exp-fill {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 40%, #d97706 75%, #b45309 100%);
  box-shadow: 
    0 0 10px rgba(245, 158, 11, 0.5), 
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -1px 2px rgba(0, 0, 0, 0.6);
}

.bar-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9.5px;
  font-weight: 800;
  font-family: var(--font-hud);
  color: #ffffff;
  text-shadow: 0 1px 2px #000, 0 0 4px #000, 0 0 6px #000;
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
  letter-spacing: 0.3px;
}

/* ==========================================================================
   2. Target Monster HUD (Top Center)
   ========================================================================== */
#target-hud {
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  min-width: 220px;
  transition: all 0.25s ease;
}

#target-hud.target-hidden {
  opacity: 0;
  transform: translate(-50%, -15px);
  pointer-events: none;
}

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

.target-title {
  font-size: 13px;
  font-weight: 700;
  color: #f87171;
}

.target-level {
  font-size: 11px;
  color: #cbd5e1;
  font-family: var(--font-hud);
}

.target-hp-fill {
  background: linear-gradient(90deg, #b91c1c, #ef4444);
}

/* ==========================================================================
   3. Minimap & Info Dashboard (Top Right)
   ========================================================================== */
#minimap-panel {
  top: 16px;
  right: 16px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  user-select: none;
  z-index: 100;
}

.minimap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.map-title-box {
  display: flex;
  align-items: center;
  max-width: 180px;
  overflow: hidden;
}

.map-title {
  font-size: 11.5px;
  font-family: var(--font-hud);
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.minimap-tools {
  display: flex;
  gap: 4px;
}

.ro-icon-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 12px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ro-icon-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  transform: translateY(-1px);
}

.ro-icon-btn.active {
  background: rgba(245, 158, 11, 0.22);
  border-color: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.minimap-content {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.minimap-wrapper {
  position: relative;
  width: 140px;
  height: 140px;
  background: #0f172a;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6), 0 0 12px rgba(56, 189, 248, 0.15);
  flex-shrink: 0;
}

#minimapCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.minimap-compass-n {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fbbf24;
  font-size: 8px;
  font-weight: 900;
  font-family: var(--font-hud);
  padding: 0 4px;
  border-radius: 3px;
  pointer-events: none;
  text-shadow: 0 0 4px #fbbf24;
}

/* Minimap Dashboard on the right */
.minimap-dashboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 145px;
  justify-content: space-between;
}

.minimap-card {
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.minimap-card:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(255, 255, 255, 0.18);
}

.coord-card {
  border-color: rgba(245, 158, 11, 0.25);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(30, 41, 59, 0.7));
}

.card-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.card-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-label {
  font-size: 9px;
  color: #94a3b8;
  font-family: var(--font-hud);
  line-height: 1.1;
}

.card-val {
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-hud);
  line-height: 1.2;
  white-space: nowrap;
}

.highlight-gold {
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}

.highlight-cyan {
  color: #38bdf8;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
}

.highlight-red {
  color: #f87171;
}

.minimap-grid-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.stat-card {
  padding: 4px 6px;
  gap: 4px;
}

.stat-card .card-icon {
  font-size: 11px;
}

.stat-card .card-val {
  font-size: 10.5px;
}

.perf-card {
  display: flex;
  justify-content: space-around;
  padding: 4px 6px;
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.06);
}

.perf-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-family: var(--font-hud);
  font-weight: 600;
  color: #94a3b8;
}

.perf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.perf-dot.online {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  animation: pulse-dot 2s infinite;
}

.perf-icon {
  font-size: 10px;
  color: #fbbf24;
}

.perf-text {
  color: #cbd5e1;
}

.perf-divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
}


/* Collapsed Minimap State */
#minimap-panel.collapsed {
  padding-bottom: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

#minimap-panel.collapsed .minimap-header {
  padding-bottom: 0;
  border-bottom: none;
}

#minimap-panel.collapsed .minimap-content {
  display: none;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* ==========================================================================
   4. Chat & Combat Log (Bottom Left - Draggable & Resizable)
   ========================================================================== */
#chat-panel {
  position: absolute;
  bottom: 18px;
  left: 18px;
  width: 330px;
  height: 185px;
  min-width: 260px;
  min-height: 130px;
  max-width: 650px;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: background 0.2s ease, border-color 0.2s ease;
  user-select: none;
}

.chat-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--ro-border);
  padding: 2px 6px 0 6px;
  cursor: grab;
  user-select: none;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px 8px 0 0;
}

.chat-header-bar:active,
#chat-panel.is-dragging .chat-header-bar {
  cursor: grabbing;
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-drag-grip {
  color: #f59e0b;
  opacity: 0.75;
  font-size: 13px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  padding: 0 4px 2px 2px;
  line-height: 1;
  transition: all 0.15s ease;
}

.chat-drag-grip:hover,
.chat-header-bar:hover .chat-drag-grip {
  opacity: 1;
  transform: scale(1.2);
  color: #fbbf24;
}

.chat-drag-grip:active,
#chat-panel.is-dragging .chat-drag-grip {
  cursor: grabbing;
}

.chat-tabs {
  display: flex;
  gap: 4px;
}

.chat-tab {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 11.5px;
  font-family: var(--font-hud);
  font-weight: 600;
  padding: 3px 9px;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.chat-tab:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
}

.chat-tab.active {
  color: var(--ro-gold-bright);
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 2px solid var(--ro-gold);
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

.whisper-unread-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 6px #fbbf24;
  margin-left: 3px;
  vertical-align: middle;
  animation: whisper-dot-pulse 1.2s infinite ease-in-out;
}

@keyframes whisper-dot-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 4px #fbbf24;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.7;
    box-shadow: 0 0 10px #f59e0b;
  }
}

.chat-header-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 24px;
}

.chat-tool-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #cbd5e1;
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.chat-tool-btn:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: var(--ro-gold);
  color: #fbbf24;
}

.chat-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  cursor: nwse-resize;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1px 3px 0 0;
  user-select: none;
  border-top-right-radius: 10px;
  background: linear-gradient(225deg, transparent 40%, rgba(245, 158, 11, 0.35) 40%, rgba(217, 119, 6, 0.75) 100%);
  animation: resizerPulseGlowGold 2.2s ease-in-out 26 forwards;
  transition: all 0.2s ease;
  z-index: 15;
  font-size: 13px;
  line-height: 1;
  color: #fef08a;
  text-shadow: 0 0 6px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.9);
}

.chat-resize-handle:hover {
  width: 28px;
  height: 28px;
  background: linear-gradient(225deg, transparent 35%, rgba(245, 158, 11, 0.65) 35%, rgba(245, 158, 11, 1) 100%);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.95);
  color: #ffffff;
  transform: scale(1.15);
  text-shadow: 0 0 8px #ffffff, 0 0 16px #fbbf24;
}

/* Opacity presets */
#chat-panel.opacity-low {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(2px) !important;
}

#chat-panel.opacity-med {
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(6px) !important;
}

#chat-panel.opacity-solid {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(10px) !important;
}

.chat-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 8px;
  font-size: 13.5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid var(--ro-border);
  border-radius: 0 0 10px 10px;
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 2px 4px;
  transition: all 0.2s ease;
}

.chat-input-row:focus-within {
  border-color: var(--ro-gold);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
  background: rgba(0, 0, 0, 0.6);
}

.whisper-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.45));
  border: 1px solid rgba(245, 158, 11, 0.7);
  border-radius: 4px;
  padding: 1px 6px;
  color: #fbbf24;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  animation: chipPopIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.whisper-chip.hidden {
  display: none !important;
}

.whisper-chip-name {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-clear-whisper {
  background: transparent;
  border: none;
  color: #f87171;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.btn-clear-whisper:hover {
  transform: scale(1.25);
  color: #ef4444;
}

@keyframes chipPopIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

#chat-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 3px 4px;
  color: #ffffff;
  font-size: 13px;
  font-family: var(--font-main);
  outline: none;
}

#btn-send-chat {
  background: rgba(245, 158, 11, 0.25);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 6px;
  color: #fbbf24;
  font-size: 12px;
  width: 28px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

#btn-send-chat:hover {
  background: #f59e0b;
  border-color: #fbbf24;
  color: #0f172a;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
  transform: scale(1.06);
}

#btn-send-chat:active {
  transform: scale(0.94);
}

.btn-chat-emoji {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #fbbf24;
  font-size: 13px;
  width: 28px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  user-select: none;
}

.btn-chat-emoji:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: #fbbf24;
  transform: scale(1.08);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.btn-chat-emoji:active {
  transform: scale(0.92);
}

/* Chat Emoji Picker Popover */
.chat-emoji-picker {
  position: absolute;
  bottom: 38px;
  right: 6px;
  width: 280px;
  max-width: calc(100% - 12px);
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid var(--ro-gold);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 12px rgba(245, 158, 11, 0.3);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  z-index: 150;
  overflow: hidden;
  animation: emojiPickerSlideUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.chat-emoji-picker.hidden {
  display: none !important;
}

@keyframes emojiPickerSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.emoji-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.emoji-picker-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fbbf24;
  font-family: var(--font-hud);
}

.btn-close-emoji {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: all 0.15s ease;
}

.btn-close-emoji:hover {
  color: #ef4444;
  transform: scale(1.2);
}

.emoji-picker-tabs {
  display: flex;
  gap: 3px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.emoji-tab-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 11px;
  font-family: var(--font-hud);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.emoji-tab-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.08);
}

.emoji-tab-btn.active {
  color: var(--ro-gold-bright);
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-weight: 700;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  padding: 6px;
  max-height: 140px;
  overflow-y: auto;
  overflow-x: hidden;
}

.emoji-picker-grid::-webkit-scrollbar {
  width: 5px;
}

.emoji-picker-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}

.emoji-picker-grid::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.4);
  border-radius: 3px;
}

.emoji-picker-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.7);
}

.emoji-item-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 18px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s ease;
  line-height: 1;
}

.emoji-item-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(245, 158, 11, 0.5);
  transform: scale(1.22);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

.emoji-item-btn:active {
  transform: scale(0.95);
}

/* Clickable Player Names in Chat */
.chat-player-name {
  color: #facc15;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  transition: all 0.15s ease;
  padding: 0 2px;
  border-radius: 3px;
}

.chat-player-name.chat-self-name {
  color: #38bdf8;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
}

.chat-player-name:hover {
  color: #ffffff;
  background: rgba(245, 158, 11, 0.35);
  text-decoration: underline;
  text-shadow: 0 0 6px rgba(250, 204, 21, 0.6);
}

.chat-player-name.chat-self-name:hover {
  color: #ffffff;
  background: rgba(56, 189, 248, 0.35);
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
}

.chat-content-self {
  color: #f0fdf4;
  font-weight: 500;
}

.chat-content-other {
  color: #f8fafc;
  font-weight: 400;
}

.chat-content-shout {
  color: #ffedd5;
  font-weight: 600;
}

.chat-msg {
  font-size: 13.5px;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: break-word;
  animation: fadeIn 0.2s ease-out;
}

.chat-msg.chat { color: #f8fafc; font-weight: 400; }
.chat-msg.chat-self { color: #f0fdf4; font-weight: 500; }
.chat-msg.chat-other { color: #f8fafc; font-weight: 400; }
.chat-msg.world_chat { color: #38bdf8; font-weight: 500; text-shadow: 0 0 8px rgba(56, 189, 248, 0.25); }
.chat-msg.world_chat.chat-self { color: #67e8f9; font-weight: 600; text-shadow: 0 0 10px rgba(103, 232, 249, 0.35); }
.chat-msg.world_chat .world-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(56, 189, 248, 0.4));
  border: 1px solid rgba(56, 189, 248, 0.6);
  border-radius: 4px;
  padding: 0 3px;
  font-size: 11px;
  line-height: 1.2;
  margin-right: 4px;
  vertical-align: 1px;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.3);
  cursor: default;
}
.chat-msg.shout { color: #fb923c; font-weight: 700; text-shadow: 0 0 10px rgba(251, 146, 60, 0.5); }
.chat-msg.whisper { color: #fde047; font-weight: 600; text-shadow: 0 0 8px rgba(253, 224, 71, 0.4); }
.chat-msg.whisper-in { color: #fde047; font-weight: 600; text-shadow: 0 0 8px rgba(253, 224, 71, 0.4); }
.chat-msg.whisper-out { color: #38bdf8; font-weight: 600; text-shadow: 0 0 8px rgba(56, 189, 248, 0.4); }
.chat-msg.dice { color: #e879f9; font-weight: 700; text-shadow: 0 0 6px rgba(232, 121, 249, 0.4); }
.chat-msg.system { color: #38bdf8; }
.chat-msg.combat { color: #f87171; }
.chat-msg.exp { color: #fbbf24; }
.chat-msg.loot { color: #4ade80; }
.chat-msg.gain { color: #34d399; font-weight: 500; }
.chat-msg.hint { color: #a78bfa; font-style: italic; }
.chat-msg.error { color: #f87171; font-weight: 600; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

#action-bar {
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(20, 27, 45, 0.92) 0%, rgba(10, 15, 29, 0.96) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  cursor: grab;
  user-select: none;
  touch-action: none;
  z-index: 90;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#action-bar:hover {
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65), 0 0 16px rgba(245, 158, 11, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

#action-bar:active {
  cursor: grabbing;
}

.bar-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 48px;
  color: #64748b;
  font-size: 15px;
  letter-spacing: -2px;
  cursor: grab;
  border-radius: 4px;
  transition: all 0.15s ease;
  user-select: none;
}

.bar-drag-handle:hover {
  color: var(--ro-gold-bright);
  background: rgba(255, 255, 255, 0.08);
}

/* Hotbar Page Switcher Widget (1 - 3) */
.hotbar-page-switcher {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 22px;
  height: 48px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 6px;
  padding: 3px 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  user-select: none;
}

.hotbar-page-btn {
  width: 20px;
  height: 12px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 8px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
  line-height: 1;
}

.hotbar-page-btn:hover {
  color: #fde047;
  transform: scale(1.2);
  background: rgba(245, 158, 11, 0.25);
  border-radius: 3px;
}

.hotbar-page-btn:active {
  transform: scale(0.9);
}

.hotbar-page-badge {
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(245, 158, 11, 0.6);
  cursor: pointer;
  line-height: 1;
  transition: all 0.15s ease;
}

.hotbar-page-badge:hover {
  color: #ffffff;
  transform: scale(1.25);
}

.hotkey-slot {
  position: relative !important;
  width: 48px;
  height: 48px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.45);
}

.hotkey-slot:hover {
  border-color: var(--ro-gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.hotkey-slot:active {
  transform: translateY(0) scale(0.97);
}

.key-tag {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 9px;
  font-weight: 800;
  font-family: var(--font-hud);
  color: #f1f5f9;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 0 4px;
  line-height: 12px;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.slot-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.slot-icon canvas {
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px;
  display: block;
  object-fit: contain;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.hotkey-slot .slot-name {
  display: none !important;
}

.slot-count {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-hud);
  color: #fbbf24;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 4px;
  padding: 0 4px;
  line-height: 13px;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(245, 158, 11, 0.4);
}

/* Drag & Drop States for Hotkey Slots */
.hotkey-slot.slot-drag-over {
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.25) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.6) !important;
}

.hotkey-slot.dragging {
  opacity: 0.4;
  transform: scale(0.95);
}

.hotkey-slot.slot-empty {
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  background: rgba(15, 23, 42, 0.5);
  box-shadow: none;
}

.hotkey-slot.slot-empty:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.hotkey-slot.slot-empty .empty-icon {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.3);
  transition: all 0.15s ease;
}

.hotkey-slot.slot-empty:hover .empty-icon {
  color: #38bdf8;
  transform: scale(1.15);
}

.hotkey-slot.item-empty {
  opacity: 0.45;
  filter: grayscale(0.85);
}

/* Special Sitting State for Space Slot */
#slot-sit .slot-icon {
  font-size: 23px;
}

#slot-sit.is-sitting {
  border-color: #4ade80 !important;
  background: linear-gradient(180deg, rgba(20, 83, 45, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
}

.inven-item-cell[draggable="true"] {
  cursor: grab;
}

.inven-item-cell[draggable="true"]:active {
  cursor: grabbing;
}

.skill-card[draggable="true"] {
  cursor: grab;
}

.skill-card[draggable="true"]:active {
  cursor: grabbing;
}

/* ==========================================================================
   5.1 Radial Satellite Quick Menu Dock & Auto Combat Core Orb
   ========================================================================== */
.bottom-quick-dock.radial-satellite-dock {
  position: absolute;
  bottom: 16px;
  right: 18px;
  width: 235px;
  height: 235px;
  z-index: 95;
  pointer-events: none;
  user-select: none;
}

/* 🌌 Celestial Astrolabe Orbit Tracks */
.radial-orbit-track {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  border: 1px dashed rgba(245, 158, 11, 0.22);
}

.radial-orbit-track.track-inner {
  width: 176px;
  height: 176px;
  right: -43px;
  bottom: -43px;
  border-color: rgba(245, 158, 11, 0.28);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.1);
}

.radial-orbit-track.track-outer {
  width: 300px;
  height: 300px;
  right: -105px;
  bottom: -105px;
  border-color: rgba(96, 165, 250, 0.24);
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.08);
}

/* ⚔️ Center Auto Combat Core Orb (Enlarged 74px) */
.auto-combat-orb.radial-center-orb {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #1e293b 0%, #0f172a 65%, #020617 100%);
  border: 2.8px solid #f59e0b;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.85), 0 0 16px rgba(245, 158, 11, 0.35), inset 0 2px 5px rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  z-index: 15;
  pointer-events: auto;
}

.auto-combat-orb.radial-center-orb:hover {
  transform: translateY(-2px) scale(1.06);
  border-color: #fbbf24;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.92), 0 0 24px rgba(245, 158, 11, 0.7);
}

.auto-combat-orb.radial-center-orb:active {
  transform: translateY(0) scale(0.98);
}

.auto-orb-lens {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.auto-orb-canvas {
  width: 58px;
  height: 58px;
  pointer-events: none;
}

.auto-orb-badge {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #0f172a;
  border: 1.5px solid #f59e0b;
  color: #fbbf24;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.auto-orb-status-text {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  text-shadow: 0 2px 4px #000;
  letter-spacing: 0.5px;
  pointer-events: none;
  transition: all 0.2s ease;
}

.auto-orb-gear {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.94);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.auto-orb-gear:hover {
  border-color: #fbbf24;
  transform: rotate(45deg) scale(1.15);
  background: #1e293b;
}

/* Active Auto State: Pulsing Radiant Aura */
.auto-combat-orb.is-auto-active {
  border-color: #22c55e;
  box-shadow: 0 0 26px rgba(34, 197, 94, 0.85), inset 0 0 14px rgba(34, 197, 94, 0.45);
  animation: autoOrbPulseRing 1.8s ease-in-out infinite;
}

.auto-combat-orb.is-auto-active .auto-orb-status-text {
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
}

.auto-combat-orb.is-auto-active .auto-orb-badge {
  border-color: #22c55e;
  color: #4ade80;
}

@keyframes autoOrbPulseRing {
  0% { box-shadow: 0 0 14px rgba(34, 197, 94, 0.5), inset 0 0 8px rgba(34, 197, 94, 0.3); }
  50% { box-shadow: 0 0 28px rgba(34, 197, 94, 0.95), inset 0 0 16px rgba(34, 197, 94, 0.6); }
  100% { box-shadow: 0 0 14px rgba(34, 197, 94, 0.5), inset 0 0 8px rgba(34, 197, 94, 0.3); }
}

/* ⚔️ Floating Auto Combat Status Banner (Above Radial Satellite Dock) */
.hud-auto-combat-indicator {
  position: absolute;
  right: 20px;
  bottom: 254px;
  z-index: 96;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  background: rgba(10, 15, 30, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(34, 197, 94, 0.6);
  border-radius: 12px;
  padding: 6px 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75), 0 0 16px rgba(34, 197, 94, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  animation: autoIndicatorBreathing 2.2s infinite ease-in-out;
}

.hud-auto-combat-indicator.hidden {
  display: none !important;
}

.auto-indicator-header {
  display: flex;
  align-items: center;
  gap: 7px;
}

.auto-indicator-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: autoDotBlink 1.4s infinite ease-in-out;
}

.auto-indicator-title {
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 900;
  color: #4ade80;
  letter-spacing: 1.2px;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.75);
}

.auto-indicator-badge {
  font-family: var(--font-hud);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.22);
  border: 1px solid rgba(34, 197, 94, 0.6);
  color: #86efac;
  letter-spacing: 0.5px;
}

.auto-indicator-sub {
  display: flex;
  align-items: center;
  gap: 4px;
}

.auto-key-hint {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: color 0.18s ease;
}

.auto-kbd {
  display: inline-block;
  padding: 0 5px;
  min-width: 15px;
  height: 16px;
  line-height: 15px;
  text-align: center;
  font-family: var(--font-hud);
  font-size: 10px;
  font-weight: 800;
  color: #fbbf24;
  background: #1e293b;
  border: 1px solid rgba(245, 158, 11, 0.55);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.hud-auto-combat-indicator:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(239, 68, 68, 0.75);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 20px rgba(239, 68, 68, 0.45);
}

.hud-auto-combat-indicator:hover .auto-indicator-dot {
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
}

.hud-auto-combat-indicator:hover .auto-indicator-title {
  color: #f87171;
  text-shadow: 0 0 10px rgba(248, 113, 113, 0.8);
}

.hud-auto-combat-indicator:hover .auto-indicator-badge {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fca5a5;
}

.hud-auto-combat-indicator:hover .auto-key-hint {
  color: #fca5a5;
}

@keyframes autoIndicatorBreathing {
  0%, 100% {
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75), 0 0 12px rgba(34, 197, 94, 0.25);
  }
  50% {
    border-color: rgba(74, 222, 128, 0.95);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.85), 0 0 24px rgba(34, 197, 94, 0.55), inset 0 0 8px rgba(34, 197, 94, 0.2);
  }
}

@keyframes autoDotBlink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 8px #22c55e;
  }
  50% {
    opacity: 0.3;
    transform: scale(0.75);
    box-shadow: 0 0 2px #22c55e;
  }
}

/* 🛰️ Orbiting Satellite Jewel Orbs (Enlarged 50px) */
.bottom-dock-orb.satellite-orb {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #1e293b 0%, #0f172a 70%, #020617 100%);
  border: 2px solid rgba(251, 191, 36, 0.82);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.75), 0 0 10px rgba(245, 158, 11, 0.25), inset 0 1.5px 3px rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  pointer-events: auto;
}

.bottom-dock-orb.satellite-orb:hover {
  transform: scale(1.15);
  border-color: #fde047;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.88), 0 0 18px rgba(251, 191, 36, 0.8);
  z-index: 25;
}

.bottom-dock-orb.satellite-orb:active {
  transform: scale(0.95);
}

.bottom-dock-orb.satellite-orb.highlight-rank-orb {
  border-color: #f59e0b;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.75), 0 0 14px rgba(245, 158, 11, 0.5);
}

.bottom-dock-orb.satellite-orb.is-active-orb {
  border-color: #4ade80;
  box-shadow: 0 0 18px rgba(74, 222, 128, 0.85), inset 0 0 8px rgba(74, 222, 128, 0.45);
}

/* 🎯 Precise Mathematical Celestial Coordinates (Radius 88px & 150px) */
/* Inner Orbit: Radius 88px */
.satellite-orb.orb-inven { right: 108px; bottom: 20px; }
.satellite-orb.orb-equip { right: 82px; bottom: 82px; }
.satellite-orb.orb-skills { right: 20px; bottom: 108px; }

/* Outer Orbit: Radius 150px */
.satellite-orb.orb-stats { right: 170px; bottom: 25px; }
.satellite-orb.orb-friends { right: 150px; bottom: 95px; }
.satellite-orb.orb-rank { right: 95px; bottom: 150px; }
.satellite-orb.orb-worldmap { right: 25px; bottom: 170px; }

.orb-icon-lens {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.orb-icon-canvas {
  width: 38px;
  height: 38px;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.orb-hotkey {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0f172a;
  border: 1.5px solid #fbbf24;
  color: #fde68a;
  font-family: var(--font-hud);
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* Floating Sleek Tooltip Label on Hover */
.orb-floating-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  padding: 2.5px 8px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 5px;
  color: #fbbf24;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.16s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.75);
  z-index: 50;
}

.bottom-dock-orb.satellite-orb:hover .orb-floating-label {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}

/* ==========================================================================
   5.2 Top Center Service & Event Jewels Bar (News, Event, Quest, Reward, Shop, Report Bug)
   ========================================================================== */
.top-service-bar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  user-select: none;
}

.service-bar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 64px;
  border-radius: 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
  position: relative;
}

.service-bar-btn:hover {
  transform: translateY(-4px) scale(1.12);
}

.service-bar-btn:active {
  transform: translateY(-1px) scale(0.96);
}

.service-btn-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #1e293b 0%, #0f172a 70%, #020617 100%);
  border: 2px solid rgba(251, 191, 36, 0.8);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.75), 0 0 12px rgba(245, 158, 11, 0.25), inset 0 1.5px 3px rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-bar-btn:hover .service-btn-icon-wrap {
  border-color: #fde047;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.88), 0 0 20px rgba(251, 191, 36, 0.8), inset 0 1.5px 3px rgba(255, 255, 255, 0.35);
}

.service-icon-canvas {
  width: 40px;
  height: 40px;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65));
}

.service-btn-label {
  font-size: 9px;
  font-weight: 800;
  font-family: var(--font-hud);
  color: #e2e8f0;
  text-shadow: 0 2px 4px #000, 0 0 6px rgba(0, 0, 0, 0.9);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.18s ease;
}

.service-bar-btn:hover .service-btn-label {
  color: #fbbf24;
  text-shadow: 0 2px 4px #000, 0 0 8px rgba(251, 191, 36, 0.7);
}

.service-btn-pip {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.95);
  pointer-events: none;
  animation: servicePipPulse 1.6s ease-in-out infinite;
  z-index: 5;
}

@keyframes servicePipPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.22); opacity: 0.85; box-shadow: 0 0 12px rgba(239, 68, 68, 1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Service Modals Styling */
.service-dialog {
  min-width: 360px;
  max-width: 480px;
  width: 90vw;
  flex-direction: column;
  z-index: 2500;
  top: calc(50% - 240px);
  left: calc(50% - 240px);
  position: absolute;
}

.service-dialog:not(.ro-modal-hidden) {
  display: flex !important;
}

/* ==========================================================
   🔭🏡 Large Feature Preview / Sneak Peek Showcase Modal (Celestial & Homestead)
   ========================================================== */
.feature-preview-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(840px, 95vw);
  max-width: 840px;
  height: min(780px, 88vh);
  max-height: 88vh;
  z-index: 2600;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 15, 30, 0.99) 100%);
  border: 1.5px solid rgba(251, 191, 36, 0.45);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.92), 0 0 45px rgba(251, 191, 36, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: rpgPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-preview-dialog:not(.ro-modal-hidden) {
  display: flex !important;
}

/* Accent top glowing bar */
.feature-preview-accent-line {
  height: 3.5px;
  width: 100%;
  background: linear-gradient(90deg, #38bdf8, #fbbf24, #f59e0b, #38bdf8);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.8);
  flex-shrink: 0;
}

.feature-preview-dialog.theme-celestial {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.92), 0 0 45px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.feature-preview-dialog.theme-celestial .feature-preview-accent-line {
  background: linear-gradient(90deg, #0284c7, #38bdf8, #fef08a, #38bdf8, #0284c7);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.9);
}

.feature-preview-dialog.theme-homestead {
  border-color: rgba(74, 222, 128, 0.55);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.92), 0 0 45px rgba(74, 222, 128, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.feature-preview-dialog.theme-homestead .feature-preview-accent-line {
  background: linear-gradient(90deg, #16a34a, #4ade80, #fef08a, #4ade80, #16a34a);
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.9);
}

/* Header */
.feature-preview-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.7) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  flex-shrink: 0;
  user-select: none;
}

.feature-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.feature-header-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #1e293b 0%, #0f172a 70%, #020617 100%);
  border: 2px solid #fbbf24;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 12px rgba(251, 191, 36, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-preview-icon-canvas {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}

.feature-header-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.feature-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.feature-preview-title {
  font-family: var(--font-hud), 'Outfit', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.feature-status-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: 0.4px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.15));
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fde047;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.feature-preview-sub {
  font-size: 12px;
  color: #94a3b8;
  font-family: var(--font-hud), 'Chakra Petch', sans-serif;
}

.btn-close-feature-preview {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(239, 68, 68, 0.5);
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4);
  transition: all 0.18s ease;
}

.btn-close-feature-preview:hover {
  transform: scale(1.12);
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
  border-color: #fca5a5;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.65);
}

.btn-close-feature-preview:active {
  transform: scale(0.92);
}

/* Body */
.feature-preview-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 28px;
  box-sizing: border-box;
  color: #e2e8f0;
  font-family: var(--font-hud), 'Chakra Petch', sans-serif;
}

.feature-preview-body::-webkit-scrollbar {
  width: 8px;
}
.feature-preview-body::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 4px;
}
.feature-preview-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f59e0b, #d97706);
  border-radius: 4px;
}
.feature-preview-body::-webkit-scrollbar-thumb:hover {
  background: #fbbf24;
}

/* Hero / Highlight Banner */
.feature-hero-card {
  padding: 16px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
  margin-bottom: 22px;
  position: relative;
}

.feature-hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.feature-hero-author {
  color: #fbbf24;
  font-weight: 700;
}

.feature-hero-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: #f1f5f9;
  font-weight: 500;
}

/* Feature Content Cards */
.feature-section-card {
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3.5px solid #fbbf24;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.feature-section-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #fde047;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature-section-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: #e2e8f0;
}

/* Screenshot Display */
.feature-screenshot-wrap {
  margin: 18px 0;
  text-align: center;
}

.feature-screenshot-img {
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1.5px solid rgba(251, 191, 36, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.feature-screenshot-img:hover {
  transform: translateY(-2px);
  border-color: #fde047;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85), 0 0 20px rgba(251, 191, 36, 0.3);
}

.feature-screenshot-caption {
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 6px;
  text-align: center;
}

/* Footer */
.feature-preview-footer {
  padding: 12px 22px;
  background: rgba(15, 23, 42, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.feature-footer-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #94a3b8;
}

.feature-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-feature-action {
  padding: 8px 16px;
  border-radius: 8px;
  font-family: var(--font-hud), 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.18s ease;
  outline: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-feature-action.primary {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  color: #0f172a;
  border: 1px solid #fde68a;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35);
}
.btn-feature-action.primary:hover {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(245, 158, 11, 0.55);
}

.btn-feature-action.secondary {
  background: rgba(30, 41, 59, 0.85);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn-feature-action.secondary:hover {
  background: rgba(51, 65, 85, 0.9);
  color: #f8fafc;
  border-color: rgba(251, 191, 36, 0.5);
  transform: translateY(-1px);
}

/* ==========================================================
   🏰 Fantasy RPG Wooden Bulletin Board UI (Server News)
   ========================================================== */
.rpg-news-board-dialog {
  position: absolute;
  z-index: 2500;
  width: min(840px, 94vw);
  aspect-ratio: 1200 / 896;
  max-height: 90vh;
  top: calc(50% - 280px);
  left: calc(50% - 420px);
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.75));
  user-select: none;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  animation: rpgPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rpgPopIn {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.rpg-news-board-dialog:not(.ro-modal-hidden) {
  display: block !important;
}

.rpg-news-board-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent !important;
}

/* Background Board Frame Graphic */
.rpg-news-board-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  display: block;
}

/* Draggable Header (Top Plaque) */
.rpg-news-header {
  position: absolute;
  top: 5.2%;
  left: 28.5%;
  width: 44%;
  height: 11%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: grab;
  z-index: 15;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.rpg-news-header:active {
  cursor: grabbing;
}

.rpg-news-title {
  width: 100%;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Kanit', sans-serif !important;
  font-size: clamp(23px, 2.6vw, 30px) !important;
  font-weight: 800 !important;
  color: #fff4d6 !important;
  text-shadow: 
    0 2px 4px rgba(25, 10, 2, 0.95),
    0 0 14px rgba(245, 158, 11, 0.6) !important;
  letter-spacing: 2.5px !important;
  line-height: 1 !important;
  pointer-events: none;
}

/* 3D Red Glossy Circular Close Button */
.btn-close-rpg-news {
  position: absolute;
  top: 9.8%;
  right: 2.8%;
  width: 6.2%;
  height: 9.5%;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 30;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn-close-rpg-news:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.9));
  background: rgba(255, 255, 255, 0.15);
}

.btn-close-rpg-news:active {
  transform: scale(0.92);
}

/* Admin Quick Bar */
.rpg-news-board-dialog .news-admin-quick-bar {
  position: absolute;
  top: 15.5%;
  left: 28%;
  right: 4.5%;
  z-index: 15;
  background: rgba(46, 21, 5, 0.88);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 8px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #fde68a;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Board Body (2-Column Grid) */
.rpg-news-body {
  position: absolute;
  top: 21%;
  left: 4.2%;
  right: 4.5%;
  bottom: 7.5%;
  display: flex;
  gap: 12px;
  z-index: 5;
}

/* Left Sidebar Tabs */
.rpg-news-tabs {
  width: 23%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
}

.rpg-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Kanit', sans-serif;
  font-size: clamp(12px, 1.35vw, 15px);
  font-weight: 600;
  color: #6a3805;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  user-select: none;
}

.rpg-tab-btn:hover {
  background: rgba(180, 83, 9, 0.12);
  transform: translateX(4px);
  color: #b45309;
}

.rpg-tab-btn.active {
  background: linear-gradient(90deg, #d97706, #b45309);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.35);
  transform: translateX(6px);
  position: relative;
}

.rpg-tab-btn.active::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #b45309;
}

.rpg-tab-icon {
  font-size: clamp(14px, 1.6vw, 17px);
}

.rpg-tab-label {
  white-space: nowrap;
}

/* Right Content Area */
.rpg-news-content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.rpg-news-list-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

/* Top Banner Frame */
.rpg-news-banner-frame {
  position: relative;
  width: 100%;
  height: 42%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.12);
  background: #f1ede4;
  flex-shrink: 0;
}

.rpg-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform 0.35s ease;
}

.rpg-news-banner-frame:hover .rpg-banner-img {
  transform: scale(1.02);
}

.rpg-banner-overlay-text {
  position: absolute;
  right: 14px;
  bottom: 12px;
  text-align: right;
  pointer-events: none;
}

.rpg-banner-headline {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(14px, 1.8vw, 20px);
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 10px rgba(234, 88, 12, 0.85);
  line-height: 1.25;
}

.rpg-banner-sub {
  font-size: clamp(10px, 1.1vw, 12.5px);
  color: #fed7aa;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.rpg-banner-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}

.rpg-banner-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.rpg-banner-dots .dot.active {
  background: #ffffff;
  width: 16px;
  border-radius: 4px;
}

/* News Items List */
.rpg-news-items-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 6px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d97706 rgba(245, 239, 227, 0.85);
}

.rpg-news-items-list::-webkit-scrollbar {
  width: 10px;
}

.rpg-news-items-list::-webkit-scrollbar-track {
  background: rgba(245, 239, 227, 0.85);
  border: 1px solid rgba(217, 119, 6, 0.2);
  border-radius: 8px;
  margin: 4px 0;
}

.rpg-news-items-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}

.rpg-news-items-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.rpg-news-row {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(217, 119, 6, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.rpg-news-row:hover {
  background: #ffffff;
  border-color: #f59e0b;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.15);
}

.rpg-news-row.is-pinned {
  border-left: 4px solid #f59e0b;
  background: #fffdf7;
}

.rpg-news-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.rpg-pill-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.rpg-pill-badge.badge-update {
  background: #0284c7;
  color: #ffffff;
}

.rpg-pill-badge.badge-event {
  background: #ea580c;
  color: #ffffff;
}

.rpg-pill-badge.badge-notice {
  background: #dc2626;
  color: #ffffff;
}

.rpg-pill-badge.badge-promotion {
  background: #9f1239;
  color: #ffffff;
}

.rpg-pill-badge.badge-issue {
  background: #78350f;
  color: #ffffff;
}

.rpg-news-row-title {
  font-size: clamp(11.5px, 1.25vw, 13.5px);
  font-weight: 600;
  color: #292524;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rpg-news-row-date {
  font-size: clamp(10px, 1.1vw, 11.5px);
  color: #78716c;
  font-weight: 500;
  white-space: nowrap;
}

/* Detail Reader View */
.rpg-news-detail-view {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 10px;
  padding: 16px 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d97706 rgba(245, 239, 227, 0.85);
}

.rpg-news-detail-view::-webkit-scrollbar {
  width: 10px;
}

.rpg-news-detail-view::-webkit-scrollbar-track {
  background: rgba(245, 239, 227, 0.85);
  border: 1px solid rgba(217, 119, 6, 0.2);
  border-radius: 8px;
  margin: 4px 0;
}

.rpg-news-detail-view::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}

.rpg-news-detail-view::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.rpg-news-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.btn-rpg-news-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 60%, #b45309 100%);
  border: 1.5px solid #fef08a;
  border-radius: 8px;
  padding: 6px 14px;
  font-family: 'Kanit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(69, 26, 3, 0.9);
  box-shadow: 0 3px 0 #78350f, 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.btn-rpg-news-back:hover {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 60%, #d97706 100%);
  box-shadow: 0 3px 0 #78350f, 0 0 12px rgba(245, 158, 11, 0.6);
  transform: translateY(-1px);
  color: #ffffff;
}

.btn-rpg-news-back:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #78350f, 0 2px 4px rgba(0, 0, 0, 0.2);
}

.rpg-detail-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 800;
  color: #1c1917;
  line-height: 1.4;
}

.rpg-detail-meta {
  font-size: 11.5px;
  color: #78716c;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 8px;
}

.rpg-detail-content {
  font-size: clamp(12px, 1.25vw, 13.5px);
  color: #334155;
  line-height: 1.65;
  white-space: normal;
  word-break: break-word;
}

/* Clickable Links inside News Announcement Content */
.rpg-news-link {
  color: #0284c7;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(2, 132, 199, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(2, 132, 199, 0.25);
  cursor: pointer;
  transition: all 0.18s ease;
}

.rpg-news-link:hover {
  color: #0369a1;
  background: rgba(2, 132, 199, 0.18);
  border-color: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
}

/* Content Images (Markdown & Direct Image URLs hosted on Cloudflare/CDN) */
.rpg-news-img-wrap {
  margin: 16px 0;
  text-align: center;
  width: 100%;
}

.rpg-news-img-link {
  display: block;
  width: 100%;
  text-decoration: none;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: zoom-in;
}

.rpg-news-content-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 520px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  border: 1.5px solid rgba(217, 119, 6, 0.3);
  display: block;
  object-fit: cover;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.rpg-news-img-link:hover .rpg-news-content-img,
.rpg-news-content-img:hover {
  transform: scale(1.015);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.35);
  border-color: #f59e0b;
}

.service-modal-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
}

.service-modal-body::-webkit-scrollbar {
  width: 6px;
}
.service-modal-body::-webkit-scrollbar-thumb {
  background: rgba(251, 191, 36, 0.4);
  border-radius: 4px;
}

.news-admin-quick-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(245, 158, 11, 0.12);
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  font-size: 11.5px;
  color: #fbbf24;
  font-weight: 700;
}

.btn-admin-pill {
  background: linear-gradient(180deg, #f59e0b, #d97706);
  border: 1px solid #fbbf24;
  color: #ffffff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-admin-pill:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.btn-refresh-sm {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.18s ease;
}

.btn-refresh-sm:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fbbf24;
  transform: rotate(45deg);
}

.service-news-card, .service-event-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-news-card.is-pinned {
  border: 1px solid rgba(251, 191, 36, 0.45);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
}

.service-news-card .news-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
}

.service-news-card .news-badge.new {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.service-news-card .news-badge.update {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.service-news-card .news-badge.event {
  background: rgba(192, 132, 252, 0.2);
  color: #c084fc;
  border: 1px solid rgba(192, 132, 252, 0.4);
}

.service-news-card .news-badge.notice {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.4);
}

.service-news-card .news-title {
  font-size: 13px;
  font-weight: 700;
  color: #fde68a;
  line-height: 1.35;
}

.service-news-card .news-date {
  font-size: 10.5px;
  color: #64748b;
}

.service-news-card .news-content {
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.5;
}

.event-dev-notice-banner {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(180, 83, 9, 0.08));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  margin-bottom: 2px;
}

.event-dev-notice-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.event-dev-notice-title {
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
}

.event-dev-notice-sub {
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.4;
  margin-top: 2px;
}

.service-event-card {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.service-event-card:hover {
  transform: translateY(-1px);
  border-color: rgba(251, 191, 36, 0.3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.service-event-card.is-upcoming {
  border-left: 3px solid #38bdf8;
}

.event-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.event-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  letter-spacing: 0.3px;
}

.event-category-tag {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.service-event-card .event-banner-img {
  font-size: 13.5px;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.service-event-card .event-desc {
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.45;
}

.service-event-card .event-timer {
  font-size: 11px;
  color: #38bdf8;
  font-weight: 600;
}

/* ==========================================================
   💎 Fantasy Reward Event & Milestone Modal (AAA Luxury UI)
   ========================================================== */
.reward-modal-luxury {
  width: min(540px, 95vw) !important;
  max-width: 540px !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(9, 14, 26, 0.98) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(245, 158, 11, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(16px);
}

.reward-modal-top-bar {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, transparent, #f59e0b, #fde68a, #f59e0b, transparent);
  box-shadow: 0 0 12px #f59e0b;
}

.reward-modal-luxury .reward-modal-header {
  box-sizing: border-box !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.25) !important;
  position: relative;
}

.reward-modal-luxury .header-title-group {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.reward-modal-luxury .reward-campaign-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2.5px 8px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.15));
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fde68a;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.reward-modal-luxury .reward-campaign-badge.daily {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(14, 116, 144, 0.15));
  border-color: rgba(56, 189, 248, 0.5);
  color: #7dd3fc;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
}

.reward-modal-luxury .reward-title-glow,
.reward-modal-luxury .window-header span.reward-title-glow {
  box-sizing: border-box !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #fef08a !important;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.35) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 !important;
}

.reward-modal-luxury .reward-btn-close {
  flex-shrink: 0 !important;
  margin-left: 8px !important;
  margin-right: 0 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at 35% 35%, #ef4444 0%, #991b1b 100%) !important;
  border: 1.5px solid rgba(254, 202, 202, 0.6) !important;
  border-radius: 7px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.reward-modal-luxury .reward-btn-close:hover {
  background: radial-gradient(circle at 35% 35%, #f87171 0%, #dc2626 100%) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.08) !important;
}

.reward-modal-luxury .reward-btn-close:active {
  transform: scale(0.92) !important;
}

.reward-modal-body {
  padding: 14px 16px !important;
}

/* Banner Styling */
.daily-reward-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.daily-reward-banner.ready {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(5, 150, 105, 0.08));
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: inset 0 0 15px rgba(16, 185, 129, 0.1);
}

.daily-reward-banner.claimed {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(30, 41, 59, 0.6));
  border-color: rgba(59, 130, 246, 0.4);
}

.daily-reward-banner.locked {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(185, 28, 28, 0.08));
  border-color: rgba(239, 68, 68, 0.4);
}

.reward-banner-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.reward-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.daily-reward-banner-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.daily-reward-banner-title {
  font-size: 13px;
  font-weight: 800;
  color: #34d399;
  line-height: 1.3;
}

.daily-reward-banner.claimed .daily-reward-banner-title {
  color: #60a5fa;
}

.daily-reward-banner.locked .daily-reward-banner-title {
  color: #f87171;
}

.reward-status-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.reward-status-tag.tag-ready {
  background: rgba(16, 185, 129, 0.22);
  border: 1px solid #10b981;
  color: #6ee7b7;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
}

.reward-status-tag.tag-locked {
  background: rgba(239, 68, 68, 0.22);
  border: 1px solid #ef4444;
  color: #fca5a5;
}

.reward-status-tag.tag-claimed {
  background: rgba(59, 130, 246, 0.22);
  border: 1px solid #3b82f6;
  color: #93c5fd;
}

.daily-reward-banner-sub {
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.45;
}

/* Level Progress Bar */
.reward-progress-wrap {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reward-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.reward-progress-label {
  color: #94a3b8;
  font-weight: 600;
}

.reward-progress-val {
  color: #fde68a;
  font-weight: 800;
  font-family: monospace;
}

.reward-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(15, 23, 42, 0.85);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.reward-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399, #fde68a);
  border-radius: 999px;
  transition: width 0.4s ease;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.6);
  position: relative;
}

.reward-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: shimmer-sweep 2.2s infinite;
}

/* Rewards Grid Showcase */
.daily-reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.daily-reward-item-card {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 195px;
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  cursor: default;
}

.daily-reward-item-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), 0 0 18px rgba(245, 158, 11, 0.22);
}

.daily-reward-item-card.inspectable-reward-card {
  cursor: pointer !important;
}

.daily-reward-item-card.inspectable-reward-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(56, 189, 248, 0.75) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65), 0 0 22px rgba(56, 189, 248, 0.35) !important;
}

.daily-reward-item-card.inspectable-reward-card:active {
  transform: translateY(-1px) scale(0.99);
}

.reward-inspect-hint {
  font-size: 10px;
  font-weight: 700;
  color: #7dd3fc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px dashed rgba(56, 189, 248, 0.45);
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
  width: 90%;
  box-sizing: border-box;
  user-select: none;
}

.daily-reward-item-card.inspectable-reward-card:hover .reward-inspect-hint {
  background: rgba(56, 189, 248, 0.28);
  border-style: solid;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.reward-card-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.reward-card-tag.tag-exclusive {
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
}

.reward-card-tag.tag-currency {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
}

.reward-card-tag.tag-item {
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #c084fc;
}

/* Pedestal Socket */
.reward-pedestal-socket {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.28) 0%, rgba(15, 23, 42, 0.65) 70%, transparent 100%);
  border: 1px solid rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.28), inset 0 0 10px rgba(56, 189, 248, 0.15);
  margin-bottom: 6px;
  transition: all 0.3s ease;
}

.daily-reward-item-card:hover .reward-pedestal-socket {
  transform: scale(1.08);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.5);
}

.reward-pedestal-socket.currency-socket {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.28) 0%, rgba(15, 23, 42, 0.65) 70%, transparent 100%);
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.28), inset 0 0 10px rgba(245, 158, 11, 0.15);
}

.daily-reward-item-card:hover .reward-pedestal-socket.currency-socket {
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.5);
}

.reward-badge-count {
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #38bdf8;
  margin-top: 3px;
  letter-spacing: 0.3px;
}

.daily-reward-item-card.dola-card .reward-badge-count {
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.4);
}

.daily-reward-item-card .daily-item-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1.3;
  margin-top: 2px;
}

.reward-item-perk-hint {
  font-size: 10.5px;
  color: #94a3b8;
  margin-top: 3px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.daily-reward-action-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

/* Grand Claim Button */
.btn-reward-grand {
  width: 100%;
  padding: 13px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(16, 185, 129, 0.65);
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-reward-grand:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  border-color: #34d399;
}

.btn-reward-grand:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-reward-grand:disabled {
  background: rgba(30, 41, 59, 0.85) !important;
  color: #64748b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  text-shadow: none !important;
}

.reward-btn-glow-sweep {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  animation: shimmer-sweep 2.8s infinite;
}

@keyframes shimmer-sweep {
  0% { left: -100%; }
  45% { left: 160%; }
  100% { left: 160%; }
}

.daily-reward-reset-notice {
  text-align: center;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}

.service-hint-text {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.45;
  margin: 0;
}

.service-select {
  width: 100%;
  padding: 8px 12px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #f1f5f9;
  font-size: 12.5px;
  outline: none;
}

.service-select:focus {
  border-color: #fbbf24;
}

.service-textarea {
  width: 100%;
  padding: 10px 12px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #f1f5f9;
  font-size: 12.5px;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}

.service-textarea:focus {
  border-color: #fbbf24;
}

.btn-service-submit {
  width: 100%;
  padding: 10px;
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  border: 1px solid #fbbf24;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  transition: all 0.18s ease;
}

.btn-service-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.6);
}

/* ==========================================================
   💬 Official Discord Support & Community Hub Modal
   ========================================================== */
.discord-support-dialog {
  min-width: 380px;
  max-width: 520px;
  width: 92vw;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(10, 14, 26, 0.99) 100%) !important;
  border: 1.5px solid rgba(88, 101, 242, 0.5) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(88, 101, 242, 0.25) !important;
}

.discord-support-header {
  background: linear-gradient(90deg, rgba(88, 101, 242, 0.28) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
  border-bottom: 1px solid rgba(88, 101, 242, 0.35) !important;
}

.discord-support-body {
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
}

/* Discord Hero Card */
.discord-hero-card {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.15) 0%, rgba(15, 23, 42, 0.75) 100%);
  border: 1px solid rgba(88, 101, 242, 0.35);
  border-radius: 12px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.discord-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 3px 10px;
  background: rgba(88, 101, 242, 0.25);
  border: 1px solid rgba(88, 101, 242, 0.55);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #c7d2fe;
  letter-spacing: 0.3px;
}

.discord-dot {
  width: 7px;
  height: 7px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px #22c55e;
  display: inline-block;
  animation: pulseDiscordDot 1.8s infinite;
}

@keyframes pulseDiscordDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.discord-hero-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.discord-hero-desc {
  font-size: 12px;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0;
}

.discord-hero-desc strong {
  color: #93c5fd;
}

/* Limited Reward Box */
.discord-reward-box {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(217, 119, 6, 0.08) 100%);
  border: 1.2px solid rgba(251, 191, 36, 0.5);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12), inset 0 0 12px rgba(251, 191, 36, 0.06);
}

.reward-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 900;
  color: #fef08a;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.reward-gift-icon {
  font-size: 15px;
}

.reward-desc {
  font-size: 11.5px;
  line-height: 1.5;
  color: #fde68a;
  margin: 0;
}

.reward-desc strong {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
}

/* Discord Action Section */
.discord-action-section {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.discord-link-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  padding: 6px 10px;
}

.discord-link-bar .link-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}

.discord-link-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #93c5fd;
  font-family: monospace;
  font-size: 12px;
  font-weight: 600;
  user-select: all;
}

.btn-copy-discord {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e2e8f0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.16s ease;
}

.btn-copy-discord:hover {
  background: rgba(88, 101, 242, 0.35);
  border-color: #5865F2;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Primary CTA Button */
.btn-join-discord-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(180deg, #5865F2 0%, #4752C4 100%);
  border: 1.2px solid #7983f5;
  border-radius: 12px;
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.45), 0 0 12px rgba(88, 101, 242, 0.2);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.btn-join-discord-cta:hover {
  background: linear-gradient(180deg, #6774f5 0%, #515cdb 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(88, 101, 242, 0.65), 0 0 18px rgba(88, 101, 242, 0.35);
  border-color: #939bf8;
}

.btn-join-discord-cta:active {
  transform: translateY(1px);
}

/* 3 Guidance Steps */
.discord-steps-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 9px 12px;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #cbd5e1;
}

.step-item strong {
  color: #93c5fd;
}

.step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(88, 101, 242, 0.35);
  border: 1px solid rgba(88, 101, 242, 0.6);
  color: #c7d2fe;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .bottom-quick-dock.radial-satellite-dock {
    bottom: 8px;
    right: 8px;
    transform: scale(0.82);
    transform-origin: bottom right;
  }
  .hud-auto-combat-indicator {
    bottom: 205px;
    right: 12px;
    transform: scale(0.88);
    transform-origin: bottom right;
  }
  .top-service-bar {
    top: 6px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) scale(0.78);
    transform-origin: top center;
    gap: 4px;
  }
}

/* ==========================================================================
   6. Modals (Inventory, Equipment, Status)
   ========================================================================== */
.ro-window {
  pointer-events: auto;
  position: absolute;
  top: calc(50% - 180px);
  left: calc(50% - 190px);
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  z-index: 100;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: scale(1);
}

#stats-window {
  width: 380px;
  top: calc(50% - 220px);
  left: calc(50% - 190px);
  background: linear-gradient(180deg, #111827 0%, #0b0f19 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 24px rgba(245, 158, 11, 0.15);
  border-radius: 12px;
}

.stats-dialog .stats-body {
  padding: 12px 14px;
}

.stats-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.stats-header-flex .stats-overview {
  flex: 1;
}

.profile-avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.avatar-frame {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 12px;
  background: radial-gradient(circle at center, rgba(56, 189, 248, 0.2) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 2px solid rgba(56, 189, 248, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.6), 0 0 10px rgba(56, 189, 248, 0.25);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

.avatar-frame:hover {
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.6), 0 4px 12px rgba(0, 0, 0, 0.8);
  transform: scale(1.03);
}

.char-profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.char-avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  gap: 2px;
}

.avatar-placeholder-icon {
  font-size: 26px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.avatar-placeholder-hint {
  font-size: 9px;
  color: #38bdf8;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.avatar-overlay-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 10px;
  color: #f8fafc;
}

.avatar-frame:hover .avatar-overlay-hover {
  opacity: 1;
}

.avatar-overlay-hover .camera-icon {
  font-size: 16px;
}

.avatar-overlay-hover .overlay-text {
  font-size: 9px;
  font-weight: 700;
  color: #38bdf8;
  margin-top: 2px;
}

.avatar-actions-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.avatar-quota-pill {
  font-size: 9px;
  font-family: var(--font-hud);
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  white-space: nowrap;
}

.avatar-quota-pill.quota-depleted {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
}

.btn-remove-avatar {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-remove-avatar:hover {
  background: rgba(239, 68, 68, 0.35);
  border-color: #ef4444;
  color: #ffffff;
}

#inventory-window {
  width: 480px;
  max-width: 95vw;
  z-index: 120;
}

#equipment-window,
#inspect-modal {
  width: 590px;
  max-width: 95vw;
  z-index: 121;
}


#pvp-dialog, #pvp-guide-dialog {
  width: 480px;
  max-width: 90vw;
  z-index: 125;
}

#pvp-dialog {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 28px rgba(239, 68, 68, 0.25);
}

#pvp-dialog .window-header {
  border-bottom-color: rgba(239, 68, 68, 0.4);
}

#pvp-dialog .window-header span {
  color: #fca5a5;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

#pvp-guide-dialog {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 28px rgba(56, 189, 248, 0.25);
}

#pvp-guide-dialog .window-header {
  border-bottom-color: rgba(56, 189, 248, 0.4);
}

#pvp-guide-dialog .window-header span {
  color: #7dd3fc;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}


/* Universal NPC Dialogue Window Dimensions (Compact & Beautiful) */
.kafra-npc-window,
#kafra-dialog,
#shop-dialog,
#pvp-dialog,
#pvp-guide-dialog {
  width: 480px !important;
  max-width: 92vw !important;
  z-index: 125;
}

#shop-dialog {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 28px rgba(59, 130, 246, 0.25);
}

#shop-dialog .window-header {
  border-bottom-color: rgba(59, 130, 246, 0.4);
}

#shop-dialog .window-header span {
  color: #93c5fd;
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

#kafra-dialog {
  width: 530px;
  z-index: 125;
}

#shop-dialog {
  width: 530px;
  z-index: 125;
}

#pvp-dialog {
  width: 530px;
  z-index: 125;
}

#upgrade-npc-dialog,
#general-npc-dialog {
  width: 530px;
  z-index: 125;
}

#refine-modal-dialog {
  width: 680px !important;
  max-width: 95vw !important;
  height: 560px !important;
  max-height: 90vh !important;
  z-index: 2500 !important;
}

#storage-window {
  width: 460px;
  z-index: 122;
}

.inven-dialog, .equip-dialog, .kafra-npc-window, .storage-dialog {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 24px rgba(245, 158, 11, 0.25);
  border: 1px solid rgba(245, 158, 11, 0.5);
}

/* Unified NPC Video Showcase Card */
.npc-showcase-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}

.npc-video-wrapper {
  width: 108px;
  height: 108px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(245, 158, 11, 0.55);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.7), inset 0 0 8px rgba(0, 0, 0, 0.5);
  background: #090d16;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.npc-media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.npc-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.npc-dialogue-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.npc-dialogue-content .kafra-npc-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  margin-bottom: 0;
}

.npc-greeting-text {
  font-size: 13px;
  color: #f1f5f9;
  line-height: 1.55;
  font-weight: 500;
  margin: 0;
  user-select: none;
  min-height: 40px;
}

.typewriter-active::after {
  content: '▋';
  display: inline-block;
  color: #f59e0b;
  margin-left: 2px;
  font-size: 11px;
  vertical-align: baseline;
  animation: typewriterBlink 0.55s infinite alternate ease-in-out;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.8);
}

@keyframes typewriterBlink {
  0% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0.15; transform: scaleY(0.8); }
}

/* --- Kafra NPC Dialogue Window --- */
.kafra-portrait-row, .kafra-dialog-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.kafra-portrait-box {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: radial-gradient(circle at center, rgba(245, 158, 11, 0.3) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 2px solid var(--ro-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(245, 158, 11, 0.3);
  flex-shrink: 0;
}

.kafra-avatar-emoji {
  font-size: 36px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.kafra-speech-bubble {
  flex: 1;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  position: relative;
}

.kafra-npc-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ro-gold-bright);
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}

.kafra-speech-bubble p {
  font-size: 12.5px;
  color: #f1f5f9;
  margin: 0;
  line-height: 1.45;
}

.kafra-menu-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kafra-btn-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(30, 41, 59, 0.7);
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  user-select: none;
}

.kafra-btn-option:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(217, 119, 6, 0.16));
  border-color: var(--ro-gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

.kafra-btn-option:active {
  transform: scale(0.98);
}

.kafra-btn-cancel:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.kafra-btn-option .opt-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.opt-text-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.opt-text-col strong {
  font-size: 13px;
  color: var(--ro-gold-bright);
}

.opt-text-col small {
  font-size: 11px;
  color: #94a3b8;
}

/* --- Storage Window Styles --- */
.storage-category-tabs {
  display: flex;
  gap: 4px;
  background: rgba(15, 23, 42, 0.6);
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.storage-tab-btn {
  flex: 1;
  padding: 6px 2px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.storage-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.storage-tab-btn.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.2));
  border-color: var(--ro-gold);
  color: var(--ro-gold-bright);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
}

.storage-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.storage-count-label {
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
}

.storage-hint-text {
  font-size: 10.5px;
  color: #94a3b8;
}

.storage-grid-100 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 4px 6px 2px;
  scrollbar-gutter: stable;
}

.storage-zeny-bank {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 10px;
}

.zeny-bank-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bank-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #94a3b8;
}

.bank-val {
  font-size: 13px;
  font-weight: 800;
  color: #34d399;
}

.zeny-bank-actions {
  display: flex;
  gap: 6px;
}

.btn-bank-act {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-bank-deposit {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.6);
  color: #6ee7b7;
}

.btn-bank-deposit:hover {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}

.btn-bank-withdraw {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fde68a;
}

.btn-bank-withdraw:hover {
  background: #f59e0b;
  color: #0f172a;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
  transform: translateY(-1px);
}

/* Auto Sort Button in Inventory Header */
.btn-sort-inven {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.25));
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fde047;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sort-inven:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(217, 119, 6, 0.45));
  border-color: #fef08a;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
  transform: translateY(-1px);
}

.btn-sort-inven:active {
  transform: translateY(0) scale(0.96);
}

/* Category Filter Tabs in Inventory */
.inven-category-tabs {
  display: flex;
  gap: 6px;
  background: rgba(15, 23, 42, 0.7);
  padding: 5px;
  border-radius: 10px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4);
}

.inven-tab-btn {
  flex: 1;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.inven-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.inven-tab-btn.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.25));
  border-color: rgba(245, 158, 11, 0.8);
  color: #fde047;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.inven-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 2px;
}

.inven-count-label {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.3px;
}

.inven-hint-text {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

/* Paperdoll Equipment Layout (Modern Card-Based Sockets) */
.paperdoll-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 12px;
}

.paperdoll-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1.25;
  min-width: 175px;
}

/* Redesigned Equipment Slot Card */
.equip-slot-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.85));
  border: 1.5px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.equip-slot-item.empty {
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.55);
}

.equip-slot-item.locked-weapon {
  border-style: solid;
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(88, 28, 135, 0.25);
  cursor: not-allowed;
  opacity: 0.75;
}

.equip-slot-item.locked-weapon:hover {
  border-color: rgba(236, 72, 153, 0.6);
  background: rgba(88, 28, 135, 0.35);
  transform: none;
}

.equip-slot-item.equipped {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  border-color: rgba(148, 163, 184, 0.4);
}

.equip-slot-item.equipped.rarity-uncommon {
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}
.equip-slot-item.equipped.rarity-rare {
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2);
}
.equip-slot-item.equipped.rarity-epic {
  border-color: rgba(168, 85, 247, 0.75);
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.25);
}
.equip-slot-item.equipped.rarity-legendary {
  border-color: rgba(245, 158, 11, 0.85);
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.35);
  background: linear-gradient(135deg, rgba(69, 26, 3, 0.5), rgba(15, 23, 42, 0.95));
}

.equip-slot-item:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  border-color: #38bdf8;
}

.equip-slot-item:active {
  transform: scale(0.98);
}

/* 3D Item Socket Box */
.slot-icon-socket {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
  font-size: 24px;
  color: #64748b;
  position: relative;
}

.slot-icon-socket canvas {
  width: 42px !important;
  height: 42px !important;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.slot-icon-socket.rarity-uncommon { border-color: #22c55e; }
.slot-icon-socket.rarity-rare { border-color: #38bdf8; }
.slot-icon-socket.rarity-epic { border-color: #a855f7; }
.slot-icon-socket.rarity-legendary { border-color: #fbbf24; }

.slot-icon-socket.socket-empty {
  border: 1.5px dashed rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.45);
}

.socket-plus-icon {
  font-size: 18px;
  color: rgba(148, 163, 184, 0.45);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.equip-slot-item.empty:hover .socket-plus-icon {
  color: #38bdf8;
  transform: scale(1.2);
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6));
}

.equip-slot-item.empty:hover .slot-icon-socket.socket-empty {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.08);
}

/* Slot Info Column */
.slot-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.slot-type-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.slot-status-name {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.equip-slot-item.equipped .slot-status-name {
  color: #f8fafc;
}
.equip-slot-item.equipped.rarity-uncommon .slot-status-name { color: #4ade80; }
.equip-slot-item.equipped.rarity-rare .slot-status-name { color: #38bdf8; }
.equip-slot-item.equipped.rarity-epic .slot-status-name { color: #c084fc; }
.equip-slot-item.equipped.rarity-legendary .slot-status-name { color: #fef08a; text-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }

/* Center 3D Character Showcase Frame */
.paperdoll-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 175px;
  padding: 8px 6px 12px;
  background: radial-gradient(circle at center, rgba(245, 158, 11, 0.18) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  border-radius: 14px;
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.85), 0 0 20px rgba(245, 158, 11, 0.3);
  position: relative;
  overflow: hidden;
}

.paperdoll-avatar-frame {
  width: 165px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.paperdoll-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paperdoll-char-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.85));
  position: relative;
  z-index: 2;
}

.paperdoll-char-video.active {
  display: block;
}

.paperdoll-char-canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 2;
  cursor: pointer;
  border-radius: 12px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.75));
  transition: filter 0.2s ease, transform 0.15s ease;
}

.paperdoll-char-canvas:hover {
  filter: drop-shadow(0 8px 20px rgba(245, 158, 11, 0.45)) brightness(1.06);
}

.paperdoll-char-canvas:active {
  transform: scale(0.97);
}

.paperdoll-pedestal-glow {
  position: absolute;
  bottom: 8px;
  width: 110px;
  height: 18px;
  background: radial-gradient(ellipse, rgba(245, 158, 11, 0.65) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(5px);
  z-index: 1;
  animation: itemShadowPulse 3.2s ease-in-out infinite;
}

.paperdoll-char-info {
  text-align: center;
  margin-top: 4px;
  width: 100%;
  z-index: 3;
}

.paperdoll-name {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  font-family: 'Kanit', sans-serif;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.paperdoll-class {
  font-size: 11.5px;
  font-weight: 700;
  color: #fbbf24;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.paperdoll-char-info {
  text-align: center;
  margin-top: 4px;
  width: 100%;
}

.paperdoll-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.paperdoll-class {
  font-size: 11px;
  font-weight: 600;
  color: var(--ro-gold-bright);
}

/* Equipment Stats Summary Bar */
.equip-stats-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 7px 10px;
}

.eq-stat-pill {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.25s ease;
  user-select: none;
}

.eq-stat-pill.pulse-gain {
  animation: pillPulseGain 0.8s ease-out;
}

.eq-stat-pill.pulse-loss {
  animation: pillPulseLoss 0.8s ease-out;
}

@keyframes pillPulseGain {
  0% { transform: scale(1); background: rgba(34, 197, 94, 0.35); border-color: #22c55e; box-shadow: 0 0 12px rgba(34, 197, 94, 0.6); }
  50% { transform: scale(1.1); background: rgba(34, 197, 94, 0.2); border-color: #4ade80; box-shadow: 0 0 16px rgba(34, 197, 94, 0.8); }
  100% { transform: scale(1); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); box-shadow: none; }
}

@keyframes pillPulseLoss {
  0% { transform: scale(1); background: rgba(239, 68, 68, 0.35); border-color: #ef4444; box-shadow: 0 0 12px rgba(239, 68, 68, 0.6); }
  50% { transform: scale(1.1); background: rgba(239, 68, 68, 0.2); border-color: #f87171; box-shadow: 0 0 16px rgba(239, 68, 68, 0.8); }
  100% { transform: scale(1); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); box-shadow: none; }
}

/* Floating Delta over Stat Pills */
.pill-floating-delta {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 14px;
  font-weight: 900;
  font-family: 'Chakra Petch', 'Outfit', sans-serif;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
  animation: pillDeltaFloat 5.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pill-floating-delta.gain {
  color: #4ade80;
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.95), 0 2px 4px rgba(0, 0, 0, 0.95);
}

.pill-floating-delta.loss {
  color: #f87171;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.95), 0 2px 4px rgba(0, 0, 0, 0.95);
}

@keyframes pillDeltaFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.7);
  }
  6% {
    opacity: 1;
    transform: translate(-50%, -14px) scale(1.25);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -18px) scale(1.0);
  }
  85% {
    opacity: 1;
    transform: translate(-50%, -24px) scale(1.0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -36px) scale(0.85);
  }
}

/* Center Avatar Floating Stat Banners */
.paperdoll-stat-floating-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  pointer-events: none;
  z-index: 25;
}

.avatar-floating-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 12px;
  font-family: 'Outfit', 'Chakra Petch', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  pointer-events: none;
  animation: avatarStatFloat 5.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
  box-sizing: border-box;
}

.avatar-floating-banner .stat-banner-label {
  color: #f8fafc;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.avatar-floating-banner .stat-banner-val {
  font-size: 16px;
  font-weight: 900;
  font-family: 'Chakra Petch', sans-serif;
}

.avatar-floating-banner.gain {
  background: rgba(10, 25, 20, 0.95);
  border: 1.5px solid #22c55e;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.9), 0 0 12px rgba(34, 197, 94, 0.6);
}

.avatar-floating-banner.gain .stat-banner-val {
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.9), 0 2px 4px #000000;
}

.avatar-floating-banner.loss {
  background: rgba(30, 10, 15, 0.95);
  border: 1.5px solid #ef4444;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.9), 0 0 12px rgba(239, 68, 68, 0.6);
}

.avatar-floating-banner.loss .stat-banner-val {
  color: #f87171;
  text-shadow: 0 0 8px rgba(248, 113, 113, 0.9), 0 2px 4px #000000;
}

@keyframes avatarStatFloat {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.85);
  }
  5% {
    opacity: 1;
    transform: translateY(0px) scale(1.05);
  }
  10% {
    opacity: 1;
    transform: translateY(-2px) scale(1.0);
  }
  85% {
    opacity: 1;
    transform: translateY(-16px) scale(1.0);
  }
  100% {
    opacity: 0;
    transform: translateY(-32px) scale(0.92);
  }
}

.ro-modal-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.95) !important;
}

.window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--ro-border);
  font-size: 14px;
  font-weight: 700;
  color: var(--ro-gold-bright);
  cursor: grab;
  user-select: none;
}

.window-header:active {
  cursor: grabbing;
}

.btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(239, 68, 68, 0.2);
  border: 1.5px solid rgba(239, 68, 68, 0.55);
  color: #fecaca;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.btn-close:hover {
  color: #ffffff;
  background: #ef4444;
  border-color: #f87171;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.7);
  transform: scale(1.12);
}

.btn-close:active {
  transform: scale(0.92);
}

.window-body {
  padding: 14px;
}

.inven-grid,
.inven-grid-expanded {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  max-height: 330px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px 6px 8px 4px;
  scrollbar-gutter: stable;
}

/* =========================================================================
   Custom Sleek RO Game Scrollbars (No Browser Default Scrollbars!)
   ========================================================================= */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.45);
  border: 1px solid rgba(254, 240, 138, 0.2);
  border-radius: 4px;
  transition: all 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.85);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Vending & Buyer Specific Scrollbars */
.vending-monitor-items-list,
.vending-inven-picker,
.vending-monitor-sales-log,
.vending-body,
.vending-monitor-body {
  scrollbar-width: thin;
  scrollbar-color: #f59e0b rgba(15, 23, 42, 0.5);
}

.vending-buyer-items-list,
.vending-buyer-body {
  scrollbar-width: thin;
  scrollbar-color: #38bdf8 rgba(15, 23, 42, 0.5);
}

.vending-buyer-items-list::-webkit-scrollbar-thumb,
.vending-buyer-body::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.45);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.vending-buyer-items-list::-webkit-scrollbar-thumb:hover,
.vending-buyer-body::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.85);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.inven-item-cell {
  position: relative;
  width: 54px;
  height: 54px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.inven-item-cell:hover {
  border-color: var(--ro-gold);
  background: rgba(245, 158, 11, 0.22);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4), inset 0 0 8px rgba(245, 158, 11, 0.2);
  transform: translateY(-2px);
}

.inven-item-cell:hover canvas,
.inven-item-cell:hover span:not(.item-count-badge):not(.item-equipped-badge):not(.item-option-tier-dot) {
  transform: scale(1.15);
  transition: transform 0.15s ease;
}

/* Empty slot placeholder */
.inven-item-cell.empty-slot {
  background: rgba(15, 23, 42, 0.3);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  cursor: default;
  box-shadow: none;
}

.inven-item-cell.empty-slot:hover {
  background: rgba(15, 23, 42, 0.3);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  transform: none;
}

.inven-item-cell.rarity-rare { border-color: #3b82f6; }
.inven-item-cell.rarity-mvp { border-color: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.4); }

.item-count-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-hud);
  color: #fbbf24;
  background: rgba(0, 0, 0, 0.65);
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.item-equipped-badge {
  position: absolute;
  bottom: 3px;
  left: 3px;
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  font-family: var(--font-hud, 'Outfit', sans-serif);
  line-height: 1;
  padding: 2px 4.5px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 6px rgba(245, 158, 11, 0.8);
  border: 1px solid rgba(254, 240, 138, 0.95);
  pointer-events: none;
  z-index: 3;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.inven-item-cell.is-equipped {
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.8) !important;
  box-shadow: inset 0 0 8px rgba(245, 158, 11, 0.25), 0 0 6px rgba(245, 158, 11, 0.35) !important;
}

.inven-item-cell.is-equipped:hover {
  background: rgba(245, 158, 11, 0.28) !important;
  border-color: #fcd34d !important;
  box-shadow: inset 0 0 10px rgba(245, 158, 11, 0.45), 0 0 12px rgba(245, 158, 11, 0.65) !important;
}

.stats-overview {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.highlight-text {
  color: var(--ro-gold-bright);
  font-weight: 700;
}

.ro-divider {
  border: none;
  height: 1px;
  background: var(--ro-border);
  margin: 10px 0;
}

.stats-overview .stat-row {
  font-size: 14px;
  line-height: 1.6;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stats-overview .stat-row .stat-lbl {
  color: #94a3b8;
  font-weight: 600;
  font-size: 13.5px;
}

.stat-val-name {
  font-size: 15.5px;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-hud), 'Outfit', sans-serif;
  letter-spacing: 0.3px;
}

.stat-val-job {
  font-size: 14px;
  font-weight: 700;
  color: #fbbf24;
}

.stat-val-zeny {
  font-size: 14.5px;
  font-weight: 800;
  color: #34d399;
  font-family: var(--font-hud), 'Outfit', sans-serif;
}

.stat-val-points {
  font-size: 16px;
  font-weight: 800;
  color: #f59e0b;
  font-family: var(--font-hud), 'Outfit', sans-serif;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}

.attributes-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.attr-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 10px;
  transition: all 0.15s ease;
}

.attr-item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

.attr-name {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: 0.2px;
}

.attr-val {
  font-size: 16.5px;
  font-weight: 800;
  font-family: var(--font-hud), 'Outfit', sans-serif;
  color: #ffffff;
  min-width: 80px;
  text-align: right;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  letter-spacing: 0.3px;
}

.stat-bonus-val {
  color: #38bdf8;
  font-size: 13.5px;
  font-weight: 800;
  margin-left: 4px;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.btn-attr-up {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.5);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  line-height: 1;
}

.btn-attr-up:hover:not(:disabled) {
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
  transform: scale(1.12);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.8);
}

.btn-attr-up:disabled {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
  box-shadow: none;
}

.derived-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}

.derived-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.derived-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 6px 9px;
}

.derived-label {
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.3px;
}

.derived-value {
  font-size: 14.5px;
  font-weight: 800;
  font-family: var(--font-hud), 'Outfit', sans-serif;
  letter-spacing: 0.3px;
}

.stat-val-hp {
  color: #4ade80 !important;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.35);
}

.stat-val-sp {
  color: #60a5fa !important;
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.35);
}

.stat-val-atk {
  color: #fca5a5 !important;
}

.stat-val-def {
  color: #93c5fd !important;
}

.stat-val-aspd {
  color: #fde047 !important;
}

.stat-val-crit {
  color: #fb7185 !important;
}

.stat-val-flee {
  color: #c084fc !important;
}

.stat-val-move {
  color: #38bdf8 !important;
}

.pvp-stats-summary {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.pvp-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stat-pvp-val {
  color: #f87171;
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-hud), 'Outfit', sans-serif;
}

.stat-pvp-kd-val {
  color: #fbbf24;
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-hud), 'Outfit', sans-serif;
}

/* ==========================================================================
   7. Skills Window & Skill Cards
   ========================================================================== */
#skills-window {
  width: 440px;
  max-width: 95vw;
  top: calc(50% - 250px);
  left: calc(50% - 220px);
}

.skills-body {
  padding: 14px 16px;
}

.skills-overview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.skill-info-badge {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  text-align: center;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.skill-info-badge .badge-label {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.skill-info-badge .highlight-text {
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-hud), 'Outfit', sans-serif;
  color: #38bdf8;
}

.skill-info-badge.skill-badge-class .highlight-text {
  color: #c084fc;
}

.skill-info-badge.skill-badge-joblv .highlight-text {
  color: #38bdf8;
}

.skill-info-badge.skill-badge-points .highlight-gold {
  font-size: 14px;
  font-weight: 900;
  font-family: var(--font-hud);
  color: #fbbf24;
}

.skill-info-badge.skill-badge-points.points-available {
  border-color: rgba(245, 158, 11, 0.65);
  background: linear-gradient(180deg, rgba(78, 50, 15, 0.65) 0%, rgba(30, 20, 8, 0.9) 100%);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  animation: pointsGlowPulse 2s infinite ease-in-out;
}

@keyframes pointsGlowPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
    border-color: rgba(245, 158, 11, 0.5);
  }
  50% {
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.7);
    border-color: rgba(251, 191, 36, 0.95);
  }
}

.skills-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding: 6px 6px 8px 2px;
  margin-top: 4px;
}

.skills-list::-webkit-scrollbar {
  width: 5px;
}

.skills-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 4px;
}

.skills-list::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.45);
  border-radius: 4px;
}

.skills-list::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.75);
}

.skill-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.skill-card:hover {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.96) 100%);
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 12px rgba(245, 158, 11, 0.15);
  transform: translateY(-1px);
}

.skill-card.skill-can-upgrade {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

.skill-card.skill-maxed {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(180deg, rgba(45, 34, 18, 0.75) 0%, rgba(20, 16, 10, 0.88) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 0 14px rgba(245, 158, 11, 0.08);
}

.skill-card.skill-locked {
  opacity: 0.6;
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.06);
}

.skill-icon-box {
  position: relative;
  width: 44px;
  height: 44px;
  background: rgba(15, 23, 42, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.4);
}

.skill-icon-box canvas {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  display: block;
  object-fit: cover;
}

.skill-card.skill-locked .skill-icon-box canvas {
  filter: grayscale(85%) brightness(0.55);
}

.skill-hotkey-badge {
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-size: 8px;
  font-weight: 800;
  font-family: var(--font-hud);
  background: rgba(15, 23, 42, 0.88);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.5);
  padding: 0 4px;
  border-radius: 4px 0 6px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  line-height: 12px;
}

.skill-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.skill-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.skill-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.skill-name {
  font-size: 14.5px;
  font-weight: 800;
  font-family: var(--font-hud), 'Outfit', sans-serif;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.skill-type-tag {
  font-size: 9.5px;
  font-weight: 800;
  font-family: var(--font-hud);
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 15px;
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
}

.skill-type-tag.passive {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
  border: 1px solid rgba(167, 139, 250, 0.4);
}

.skill-type-tag.active {
  background: rgba(14, 165, 233, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.skill-level-tag {
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-hud);
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.skill-level-tag.active {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
}

.skill-level-tag.max {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.3) 100%);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.2);
}

.skill-desc-text {
  font-size: 12.5px;
  color: #e2e8f0;
  line-height: 1.45;
}

.skill-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.skill-meta-chip {
  font-size: 10.5px;
  font-family: var(--font-hud);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.skill-meta-chip.sp {
  background: rgba(14, 116, 144, 0.25);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.skill-meta-chip.cd {
  background: rgba(217, 119, 6, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.skill-meta-chip.passive-hint {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(167, 139, 250, 0.3);
}

.skill-meta-chip.req {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.btn-skill-up {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: 1px solid #60a5fa;
  color: #ffffff;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
  transition: all 0.18s ease;
  line-height: 1;
}

.btn-skill-up.can-upgrade {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
  animation: skillUpPulse 1.8s infinite;
}

@keyframes skillUpPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(96, 165, 250, 0.85);
  }
}

.btn-skill-up:hover:not(:disabled) {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  transform: scale(1.12);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.7);
}

.btn-skill-up:disabled {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.2);
  box-shadow: none;
  cursor: not-allowed;
  animation: none;
}

.skill-max-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(180, 83, 9, 0.35) 100%);
  border: 1px solid rgba(251, 191, 36, 0.6);
  border-radius: 6px;
  color: #fbbf24;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.25);
  flex-shrink: 0;
  user-select: none;
}

/* Skill Info Button (ℹ️) on Skill Tree Card */
.btn-skill-info {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cbd5e1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
  line-height: 1;
}

.btn-skill-info:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

/* ========================================================
   Skill Detail Inspection Modal (คลิกขวาดูข้อมูลเชิงลึก)
   ======================================================== */
.skill-detail-dialog {
  width: 395px;
  max-width: 95vw;
  background: rgba(13, 17, 28, 0.94);
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 25px rgba(245, 158, 11, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 2200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: skillDetailPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.skill-detail-header {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
  font-family: var(--font-hud);
  font-size: 13.5px;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.3px;
}

.skill-detail-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 490px;
  overflow-y: auto;
}

.skill-detail-body::-webkit-scrollbar {
  width: 5px;
}
.skill-detail-body::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.4);
  border-radius: 4px;
}

.skill-detail-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.skill-detail-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.95);
  border: 2px solid rgba(245, 158, 11, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
  overflow: hidden;
}

.skill-detail-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skill-detail-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.skill-detail-name {
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
  font-family: var(--font-hud), 'Outfit', sans-serif;
  letter-spacing: 0.3px;
}

.skill-detail-tag {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-hud);
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.skill-detail-tag.passive {
  background: rgba(139, 92, 246, 0.25);
  color: #c4b5fd;
  border: 1px solid rgba(167, 139, 250, 0.5);
}

.skill-detail-tag.active {
  background: rgba(14, 165, 233, 0.25);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.5);
}

.skill-detail-sub-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.skill-detail-element {
  font-size: 11.5px;
  font-weight: 700;
  color: #cbd5e1;
}
.skill-detail-element.fire { color: #f87171; }
.skill-detail-element.ghost { color: #c084fc; }
.skill-detail-element.poison { color: #4ade80; }
.skill-detail-element.holy { color: #fde047; }
.skill-detail-element.ranged { color: #38bdf8; }

.skill-detail-target {
  font-size: 11.5px;
  color: #cbd5e1;
}

.skill-detail-level-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(15, 23, 42, 0.6);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.skill-detail-level-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #cbd5e1;
  font-family: var(--font-hud);
  font-weight: 700;
}

.skill-detail-level-fraction {
  font-size: 12.5px;
  color: #38bdf8;
  font-weight: 800;
}
.skill-detail-level-fraction.gold {
  color: #fbbf24;
}

.skill-detail-progress-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.skill-detail-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.skill-detail-progress-fill.maxed {
  background: linear-gradient(90deg, #d97706, #fbbf24);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

.skill-detail-desc-box {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: #e2e8f0;
  line-height: 1.5;
}

.skill-detail-stats-comparison {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skill-detail-stat-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 8px 10px;
}

.skill-detail-stat-card.current {
  border-left: 3px solid #38bdf8;
}

.skill-detail-stat-card.next {
  border-left: 3px solid #fbbf24;
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(30, 27, 20, 0.5);
}

.skill-detail-stat-card.mastered {
  border-left: 3px solid #f59e0b;
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.06);
}

.skill-detail-stat-card.locked {
  border-left-color: #64748b;
  opacity: 0.85;
}

.stat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-hud);
  color: #f8fafc;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mastered-badge {
  font-size: 10px;
  background: #f59e0b;
  color: #0f172a;
  font-weight: 900;
  padding: 0 5px;
  border-radius: 3px;
}

.stat-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: #f1f5f9;
  line-height: 1.45;
}

.stat-line {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat-line.locked {
  color: #cbd5e1;
  font-style: italic;
}

.stat-line-desc {
  font-size: 11.5px;
  color: #cbd5e1;
  margin-top: 2px;
}

.skill-detail-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 10px;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
}

.spec-label {
  color: #cbd5e1;
}

.spec-val {
  font-weight: 800;
  color: #f8fafc;
  font-family: var(--font-hud);
  font-size: 11.5px;
}

.skill-detail-req-box {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.req-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #f87171;
  font-family: var(--font-hud);
}

.req-desc {
  font-size: 11px;
  color: #fca5a5;
}

.skill-detail-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.skill-detail-upgrade-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: 1.5px solid #60a5fa;
  border-radius: 8px;
  color: #ffffff;
  font-family: var(--font-hud);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.5);
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.3px;
}

.skill-detail-upgrade-btn:hover {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.7);
}

.skill-detail-maxed-notice {
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-hud);
  color: #fbbf24;
  padding: 6px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px;
}

.skill-detail-req-notice {
  text-align: center;
  font-size: 11.5px;
  color: #cbd5e1;
  padding: 4px;
}

/* Hotkey Slot Locked State */
.hotkey-slot.skill-slot-locked {
  opacity: 0.45;
  filter: grayscale(0.85);
}

.hotkey-slot.skill-slot-locked .slot-name {
  color: #64748b;
}

.hotkey-slot .slot-skill-level {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 8px;
  font-weight: 800;
  font-family: var(--font-hud);
  color: #38bdf8;
  background: rgba(12, 74, 110, 0.88);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 4px;
  padding: 0 4px;
  line-height: 12px;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  text-shadow: 0 0 4px rgba(56, 189, 248, 0.6);
}

/* Death Modal - Classic RO & Cute Cat Fantasy Aesthetic (Draggable) */
.death-dialog {
  position: absolute;
  width: 340px;
  max-width: 90vw;
  background: linear-gradient(180deg, rgba(24, 18, 32, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 2px solid var(--ro-gold);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(245, 158, 11, 0.25);
  z-index: 99999;
  overflow: hidden;
  backdrop-filter: blur(14px);
  user-select: none;
}

.death-dialog.ro-modal-hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.death-header {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.15));
  border-bottom: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--ro-gold-bright);
  font-weight: 700;
  cursor: grab !important;
}

.death-header:active {
  cursor: grabbing !important;
}

.death-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 18px 16px;
}

.death-icon {
  font-size: 36px;
  animation: bounceAngel 2.2s infinite ease-in-out;
}

@keyframes bounceAngel {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.05); }
}

.death-title {
  font-size: 14px;
  font-weight: 700;
  color: #fde047;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.death-desc {
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.45;
}

.death-actions {
  margin-top: 6px;
  width: 100%;
}

.death-respawn-btn {
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
  border: 1px solid #fde047;
  border-radius: 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4);
  transition: all 0.18s ease;
}

.death-respawn-btn:hover {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.6);
}

.death-respawn-btn:active {
  transform: translateY(0);
}

/* System Menu / ESC Dialog */
.system-dialog {
  width: 320px;
  position: absolute;
  top: calc(50% - 170px);
  left: calc(50% - 160px);
  z-index: 1000;
  border-radius: 12px;
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.25);
  animation: fadeInDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.system-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.system-player-info {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.35);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sys-avatar {
  width: 44px;
  height: 44px;
  background: rgba(245, 158, 11, 0.15);
  border: 1.5px solid var(--ro-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.sys-name {
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
}

.sys-desc {
  font-size: 11px;
  color: #94a3b8;
}

.system-menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sys-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}

.sys-btn:hover {
  transform: translateX(4px);
}

.sys-btn-save:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
}

.sys-btn-change:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
}

.sys-btn-logout:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #f87171;
}

.sys-btn-resume {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));
  border-color: var(--ro-gold);
  color: #fbbf24;
}

.sys-btn-resume:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0f172a;
}

.btn-highlight-menu {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.25) 0%, rgba(185, 28, 28, 0.35) 100%) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

.btn-highlight-menu:hover {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.45) 0%, rgba(185, 28, 28, 0.6) 100%) !important;
  border-color: #f87171 !important;
}

.btn-highlight-gm {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.45) 100%) !important;
  border-color: var(--ro-gold) !important;
  color: #fbbf24 !important;
  animation: pulseGold 2s infinite;
}

.btn-highlight-gm:hover {
  background: linear-gradient(180deg, #f59e0b, #d97706) !important;
  color: #0f172a !important;
}

/* In-Game Server Broadcast Marquee Banner */
.broadcast-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 950;
  max-width: 90%;
  min-width: 380px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.92), rgba(217, 119, 6, 0.95), rgba(245, 158, 11, 0.92));
  border: 1.5px solid #fde047;
  border-radius: 30px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0f172a;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(245, 158, 11, 0.5);
  animation: bannerSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.broadcast-banner.type-event {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.92), rgba(126, 34, 206, 0.95), rgba(168, 85, 247, 0.92));
  border-color: #d8b4fe;
  color: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(168, 85, 247, 0.5);
}

.broadcast-banner.type-warning {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.92), rgba(185, 28, 28, 0.95), rgba(239, 68, 68, 0.92));
  border-color: #fca5a5;
  color: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(239, 68, 68, 0.5);
}

.broadcast-banner.type-boss {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.95), rgba(245, 158, 11, 0.95), rgba(220, 38, 38, 0.95));
  border-color: #fde047;
  color: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(239, 68, 68, 0.6);
}

@keyframes bannerSlideDown {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.broadcast-icon {
  font-size: 18px;
}

.broadcast-text {
  flex: 1;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.btn-close-broadcast {
  background: rgba(0, 0, 0, 0.2);
  border: none;
  color: inherit;
  font-size: 11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-close-broadcast:hover {
  background: rgba(0, 0, 0, 0.4);
  transform: scale(1.15);
}

@media (max-width: 768px) {
  .class-cards-grid { grid-template-columns: repeat(2, 1fr); }
  #player-hud { min-width: 240px; padding: 6px 10px; }
  #chat-panel { width: 260px; height: 130px; }
  #action-bar { gap: 4px; }
  .hotkey-slot { width: 38px; height: 38px; }
  .slot-icon { font-size: 14px; }
  .slot-name { display: none; }
  .death-dialog { width: 280px; left: calc(50% - 140px); }
  .system-dialog { width: 280px; left: calc(50% - 140px); }
  #skills-window { width: 94vw; left: 3vw; top: 6vh; }
}

/* Map Screen Transition Fade Overlay */
.screen-transition-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s ease-in-out;
}

.screen-transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.transition-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.portal-warp-icon {
  font-size: 48px;
  animation: portalSpin 1.2s infinite linear;
  filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.8));
}

.transition-text {
  font-family: var(--font-hud);
  font-size: 16px;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

@keyframes portalSpin {
  from { transform: rotate(0deg) scale(0.95); }
  50% { transform: rotate(180deg) scale(1.15); }
  to { transform: rotate(360deg) scale(0.95); }
}

/* ==========================================================================
   Guide Book Window Modal (คู่มือการเล่น)
   ========================================================================== */
.guide-book-dialog {
  width: 560px;
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.96);
  border: 1.5px solid rgba(245, 158, 11, 0.6);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(245, 158, 11, 0.25);
  border-radius: 12px;
  overflow: hidden;
}

.guide-header {
  background: linear-gradient(180deg, #334155, #1e293b);
  border-bottom: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--ro-gold-bright);
}

.highlight-guide-btn {
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
  animation: guidePulse 2.5s infinite ease-in-out;
}

@keyframes guidePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); box-shadow: 0 0 14px rgba(245, 158, 11, 0.6); }
}

.guide-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.guide-nav-tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 10px 0 10px;
  gap: 4px;
  overflow-x: auto;
}

.guide-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: #94a3b8;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.guide-tab-btn:hover {
  background: rgba(245, 158, 11, 0.15);
  color: #f8fafc;
}

.guide-tab-btn.active {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.6);
  color: #fbbf24;
  font-weight: 700;
}

.guide-pages-container {
  padding: 16px;
  overflow-y: auto;
  max-height: 480px;
}

.guide-page-content {
  display: none;
  animation: fadeIn 0.2s ease-out;
}

.guide-page-content.active {
  display: block;
}

.guide-page-header {
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  padding-bottom: 8px;
}

.guide-page-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ro-gold-bright);
  margin-bottom: 3px;
}

.guide-page-header p {
  font-size: 11px;
  color: #94a3b8;
}

/* Card Grid for Chat Commands */
.guide-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.guide-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px;
  transition: all 0.2s ease;
}

.guide-card:hover {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}

.guide-card-header {
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.guide-card-desc {
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.4;
}

.badge-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.tag-blue { background: rgba(56, 189, 248, 0.2); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.4); }
.tag-orange { background: rgba(251, 146, 60, 0.2); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.4); }
.tag-gold { background: rgba(250, 204, 21, 0.2); color: #facc15; border: 1px solid rgba(250, 204, 21, 0.4); }
.tag-purple { background: rgba(232, 121, 249, 0.2); color: #e879f9; border: 1px solid rgba(232, 121, 249, 0.4); }
.tag-green { background: rgba(74, 222, 128, 0.2); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.4); }
.tag-cyan { background: rgba(34, 211, 238, 0.2); color: #22d3ee; border: 1px solid rgba(34, 211, 238, 0.4); }

/* Emoticon Grid */
.emoticon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.emoticon-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.emoticon-card:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.emoticon-card:active {
  transform: translateY(0) scale(0.98);
}

.emoticon-icon {
  font-size: 26px;
  margin-bottom: 3px;
}

.emoticon-cmd {
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
  font-family: var(--font-hud);
}

.emoticon-hotkey {
  font-size: 9px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
  margin-top: 2px;
}

.emoticon-desc {
  font-size: 9px;
  color: #cbd5e1;
  margin-top: 2px;
}

/* Controls Table */
.controls-table-wrapper {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.ro-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.ro-guide-table th, .ro-guide-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ro-guide-table th {
  background: rgba(0, 0, 0, 0.4);
  color: var(--ro-gold-bright);
  font-weight: 700;
}

.ro-guide-table tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.guide-kbd {
  display: inline-block;
  background: #334155;
  color: #f8fafc;
  font-family: var(--font-hud);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #475569;
  box-shadow: 0 2px 0 #1e293b;
}

/* Class Guide Cards */
.class-guide-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.class-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
}

.class-card-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--ro-gold-bright);
  margin-bottom: 4px;
}

.class-card-body {
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.5;
}

.stat-highlight {
  color: #fbbf24;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.15);
  padding: 1px 4px;
  border-radius: 4px;
}

/* ==========================================================================
   14. Player Context Menu (Click on Player / Chat Name)
   ========================================================================== */
.player-context-menu {
  position: absolute;
  z-index: 150;
  pointer-events: auto !important;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--ro-gold);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 12px rgba(245, 158, 11, 0.3);
  backdrop-filter: blur(8px);
  min-width: 160px;
  overflow: hidden;
  animation: fadeIn 0.15s ease-out;
  user-select: none;
}

.player-context-menu.hidden {
  display: none !important;
  pointer-events: none !important;
}

.context-header {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(0, 0, 0, 0.4));
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ro-gold-bright);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-family: var(--font-hud);
}

.context-items {
  display: flex;
  flex-direction: column;
  padding: 4px;
  gap: 2px;
}

.context-item-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 6px 10px;
  color: #f1f5f9;
  font-size: 11.5px;
  font-family: var(--font-main);
  font-weight: 500;
  cursor: pointer;
  pointer-events: auto !important;
  text-align: left;
  transition: all 0.15s ease;
}

.context-item-btn:hover {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  transform: translateX(3px);
}

/* ==========================================================================
   15. Trade Request Modal (Prompt)
   ========================================================================== */
.trade-request-dialog {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  z-index: 140;
  border: 1px solid var(--ro-gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(245, 158, 11, 0.4);
  animation: slideDownFade 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trade-req-header {
  background: linear-gradient(135deg, #7c2d12, #9a3412);
  color: #fed7aa;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
}

.trade-req-body {
  padding: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.trade-req-icon {
  font-size: 32px;
  animation: pulse 1.5s infinite;
}

.trade-req-text {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
}

.trade-req-timer {
  font-size: 11px;
  color: #fbbf24;
}

.trade-req-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

.btn-trade-accept {
  flex: 1;
  background: linear-gradient(135deg, #15803d, #16a34a);
  border: 1px solid #4ade80;
  border-radius: 6px;
  color: #ffffff;
  font-weight: 700;
  font-size: 11.5px;
  padding: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-trade-accept:hover {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
  transform: translateY(-1px);
}

.btn-trade-decline {
  flex: 1;
  background: linear-gradient(135deg, #991b1b, #dc2626);
  border: 1px solid #f87171;
  border-radius: 6px;
  color: #ffffff;
  font-weight: 700;
  font-size: 11.5px;
  padding: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-trade-decline:hover {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  transform: translateY(-1px);
}

/* ==========================================================================
   16. Trade Window Modal (2-Sided Classic RO Style)
   ========================================================================== */
.trade-dialog {
  position: absolute;
  width: 530px;
  z-index: 130;
  border: 1px solid var(--ro-gold);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.35);
  animation: modalPopIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trade-header {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #dbeafe;
}

.trade-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trade-sides-wrapper {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.trade-side-panel {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

.trade-side-panel.locked {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  box-shadow: inset 0 0 12px rgba(34, 197, 94, 0.2);
}

.trade-side-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #f1f5f9;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 5px;
}

.trade-status-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-weight: 600;
}

.trade-status-tag.locked {
  background: rgba(34, 197, 94, 0.25);
  border: 1px solid #22c55e;
  color: #86efac;
  font-weight: 700;
}

.trade-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.trade-slot {
  width: 100%;
  aspect-ratio: 1;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.trade-slot:hover:not(.partner-slot) {
  border-color: var(--ro-gold);
  background: rgba(245, 158, 11, 0.15);
}

.trade-slot.has-item {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(245, 158, 11, 0.5);
}

.trade-slot.partner-slot {
  cursor: pointer;
}

.trade-slot.partner-slot.has-item:hover {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
}

.trade-slot.rarity-magic {
  border-color: rgba(74, 222, 128, 0.7);
  box-shadow: inset 0 0 6px rgba(74, 222, 128, 0.25);
}

.trade-slot.rarity-rare {
  border-color: rgba(56, 189, 248, 0.8);
  box-shadow: inset 0 0 8px rgba(56, 189, 248, 0.3);
}

.trade-slot.rarity-epic {
  border-color: rgba(192, 132, 252, 0.85);
  box-shadow: inset 0 0 10px rgba(192, 132, 252, 0.35);
}

.trade-slot.rarity-legendary {
  border-color: rgba(251, 191, 36, 0.95);
  box-shadow: inset 0 0 12px rgba(251, 191, 36, 0.4);
}

.trade-slot canvas {
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
  transition: transform 0.15s ease;
}

.trade-slot:hover canvas {
  transform: scale(1.08);
}

.trade-slot > span:not(.item-refine-badge):not(.item-option-tier-dot):not(.trade-slot-count) {
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
  transition: transform 0.15s ease;
}

.trade-slot:hover > span:not(.item-refine-badge):not(.item-option-tier-dot):not(.trade-slot-count) {
  transform: scale(1.08);
}

.trade-slot-count {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 9.5px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.7);
  padding: 0 3px;
  border-radius: 3px;
  line-height: 1.1;
}

.trade-divider-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--ro-gold);
  opacity: 0.7;
}

.trade-zeny-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.zeny-label {
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
}

.trade-zeny-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  outline: none;
  font-family: var(--font-hud);
}

.trade-zeny-input:focus {
  border-bottom-color: var(--ro-gold);
}

.partner-zeny-display {
  flex: 1;
  font-size: 11.5px;
  font-weight: 700;
  color: #fbbf24;
  font-family: var(--font-hud);
}

.trade-tax-subnote {
  font-size: 10.5px;
  line-height: 1.35;
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #cbd5e1;
  text-align: center;
  word-break: break-word;
}

.trade-bottom-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.trade-hint-msg {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
}

.trade-action-buttons {
  display: flex;
  gap: 8px;
}

.btn-trade-lock {
  flex: 1.2;
  background: linear-gradient(135deg, #d97706, #b45309);
  border: 1px solid #fbbf24;
  border-radius: 6px;
  color: #ffffff;
  font-weight: 700;
  font-size: 11.5px;
  padding: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.btn-trade-lock.locked {
  background: linear-gradient(135deg, #15803d, #16a34a);
  border-color: #86efac;
}

.btn-trade-confirm {
  flex: 1.6;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: 1px solid #60a5fa;
  border-radius: 6px;
  color: #ffffff;
  font-weight: 700;
  font-size: 11.5px;
  padding: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.btn-trade-confirm:hover:not(:disabled) {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
  transform: translateY(-1px);
}

.btn-trade-confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.8);
}

.btn-trade-cancel {
  flex: 0.8;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #cbd5e1;
  font-weight: 600;
  font-size: 11.5px;
  padding: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-trade-cancel:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #f87171;
}

@keyframes slideDownFade {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================================
   17. Item Quantity Selector Modal (Classic RO Prompt)
   ========================================================================== */
.item-qty-dialog {
  position: absolute;
  width: 320px;
  z-index: 9999 !important;
  background: rgba(15, 23, 42, 0.98) !important;
  border: 1.5px solid var(--ro-gold);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(245, 158, 11, 0.5);
  animation: modalPopIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.qty-header {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: var(--ro-gold-bright);
}

.qty-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qty-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
}

.qty-item-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--ro-gold);
  border-radius: 8px;
}

.qty-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qty-item-name {
  font-size: 13px;
  font-weight: 700;
  color: #fbbf24;
}

.qty-item-avail {
  font-size: 11px;
  color: #94a3b8;
}

.qty-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0;
}

.qty-stepper-btn {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #f8fafc;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  user-select: none;
}

.qty-stepper-btn:hover {
  background: var(--ro-gold);
  color: #0f172a;
}

.qty-input {
  width: 110px;
  height: 34px;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-hud);
  color: #fbbf24;
  background: rgba(0, 0, 0, 0.65);
  border: 1.5px solid var(--ro-gold);
  border-radius: 6px;
  outline: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.qty-input:focus {
  border-color: #fef08a;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
}

.qty-quick-presets {
  display: flex;
  gap: 4px;
  justify-content: space-between;
}

.btn-qty-preset {
  flex: 1;
  padding: 5px 2px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-qty-preset:hover {
  background: rgba(245, 158, 11, 0.3);
  border-color: var(--ro-gold);
  color: #fbbf24;
}

.qty-summary-box {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.qty-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
}

.qty-summary-row .summary-label {
  color: #94a3b8;
  font-weight: 600;
}

.qty-summary-row .summary-val {
  font-family: var(--font-hud);
  font-weight: 700;
  color: #f8fafc;
}

.qty-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.btn-qty-confirm {
  flex: 1.2;
  padding: 8px;
  background: linear-gradient(135deg, #10b981, #059669);
  border: 1px solid #34d399;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-qty-confirm:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}

.btn-qty-cancel {
  flex: 0.8;
  padding: 8px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-qty-cancel:hover {
  background: #ef4444;
  color: #ffffff;
}

/* ==========================================================================
   19. NPC Dialogue & Merchant Shop Modals
   ========================================================================== */
.kafra-npc-window {
  position: absolute;
  width: 440px;
  max-width: 95vw;
  z-index: 900;
  background: rgba(15, 23, 42, 0.96) !important;
  border: 1.5px solid var(--ro-gold);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(245, 158, 11, 0.35);
  animation: modalPopIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kafra-dialog-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kafra-portrait-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.kafra-portrait-box {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: radial-gradient(circle, #78350f 0%, #291205 100%);
  border: 2px solid var(--ro-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.kafra-avatar-emoji {
  font-size: 32px;
}

.kafra-speech-bubble {
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 10px 14px;
  position: relative;
}

.kafra-npc-name {
  font-weight: 700;
  font-size: 12px;
  color: #fbbf24;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.kafra-speech-bubble p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #f1f5f9;
}

.kafra-menu-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kafra-btn-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #f8fafc;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
}

.kafra-btn-option:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: var(--ro-gold);
  transform: translateX(4px);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.25);
}

.kafra-btn-option .opt-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.kafra-btn-option .opt-text-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kafra-btn-option .opt-text-col strong {
  font-size: 13px;
  color: #f8fafc;
}

.kafra-btn-option:hover .opt-text-col strong {
  color: #fbbf24;
}

.kafra-btn-option .opt-text-col small {
  font-size: 11px;
  color: #94a3b8;
}

.kafra-btn-cancel:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
}

.kafra-btn-cancel:hover .opt-text-col strong {
  color: #f87171 !important;
}

/* --- Shop Windows (Buy & Sell) --- */
.shop-modal-window {
  position: absolute;
  width: 480px;
  max-width: 95vw;
  z-index: 850;
  background: rgba(15, 23, 42, 0.97) !important;
  border: 1.5px solid var(--ro-gold);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(245, 158, 11, 0.35);
  animation: modalPopIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shop-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 480px;
}

.shop-sell-header-hint {
  font-size: 11.5px;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 10px;
  border-radius: 6px;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.15);
}

.shop-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 340px;
  padding-right: 4px;
}

.shop-list-container::-webkit-scrollbar {
  width: 5px;
}
.shop-list-container::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.4);
  border-radius: 4px;
}

.shop-item-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 12px;
  transition: all 0.15s ease;
}

.shop-item-card:hover {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.5);
  transform: translateY(-1px);
}

.shop-item-icon-box {
  width: 42px;
  height: 42px;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.shop-item-icon-box:hover {
  transform: scale(1.12);
  border-color: #fbbf24;
  background: rgba(30, 41, 59, 0.95);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.6);
}

.shop-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
  transition: all 0.15s ease;
}

.shop-item-details:hover .shop-item-name {
  color: #fbbf24;
  text-decoration: underline;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

.shop-item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-item-name {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  transition: color 0.15s ease;
}

.shop-item-weight {
  font-size: 10.5px;
  color: #94a3b8;
}

.shop-item-desc {
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.35;
}

.shop-item-action-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.shop-item-price-tag {
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 12.5px;
  color: #fbbf24;
  white-space: nowrap;
}

.btn-shop-buy,
.btn-shop-sell {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

.btn-shop-buy {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}

.btn-shop-buy:hover {
  background: linear-gradient(135deg, #34d399, #10b981);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
  transform: scale(1.04);
}

.btn-shop-sell {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}

.btn-shop-sell:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
  transform: scale(1.04);
}

.shop-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 14px;
  margin-top: 4px;
}

.shop-stat-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.shop-stat-badge .badge-label {
  color: #94a3b8;
  font-weight: 600;
}

.shop-stat-badge .badge-value {
  font-family: var(--font-hud);
  font-weight: 700;
  color: #f8fafc;
}

/* ==========================================================================
   17. Duplicate Session / Disconnect Dialog
   ========================================================================== */
.duplicate-session-dialog {
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 440px;
  max-width: 90vw;
  background: linear-gradient(180deg, rgba(30, 27, 46, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.65) !important;
  box-shadow: 0 0 45px rgba(239, 68, 68, 0.35), 0 25px 50px -12px rgba(0, 0, 0, 0.9) !important;
  border-radius: 14px;
  z-index: 100000 !important;
  overflow: hidden;
  backdrop-filter: blur(16px);
  animation: duplicateModalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes duplicateModalPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.disconnect-header {
  background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 100%) !important;
  border-bottom: 1px solid rgba(239, 68, 68, 0.5) !important;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 13px;
  color: #fee2e2;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.disconnect-body {
  padding: 24px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.disconnect-icon-wrapper {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.disconnect-pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.2);
  border: 2px solid rgba(239, 68, 68, 0.5);
  animation: disconnectPulse 2s infinite ease-out;
}

@keyframes disconnectPulse {
  0% {
    transform: scale(0.85);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.85);
    opacity: 0.9;
  }
}

.disconnect-icon {
  font-size: 36px;
  z-index: 2;
  filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.6));
}

.disconnect-title {
  font-size: 18px;
  font-weight: 800;
  color: #fca5a5;
  margin-bottom: 10px;
  text-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.disconnect-message {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.6;
  margin-bottom: 22px;
  background: rgba(0, 0, 0, 0.35);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.disconnect-actions {
  width: 100%;
  display: flex;
  justify-content: center;
}

.btn-disconnect-refresh {
  width: 100%;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  border: 1px solid #f87171;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-disconnect-refresh:hover {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.7);
  transform: translateY(-2px);
}

.btn-disconnect-refresh:active {
  transform: scale(0.98);
}

/* ==========================================================================
   19. PvP Colosseum Scoreboard & Battle HUD
   ========================================================================== */
.pvp-live-widget {
  position: absolute;
  top: 195px;
  right: 12px;
  width: 220px;
  background: rgba(15, 23, 42, 0.9);
  border: 1.5px solid rgba(239, 68, 68, 0.55);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 15px rgba(239, 68, 68, 0.25);
  backdrop-filter: blur(10px);
  z-index: 95;
  padding: 8px 10px;
  user-select: none;
  font-family: var(--font-hud);
  animation: slideInRight 0.3s ease-out;
  pointer-events: auto !important;
}

.pvp-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
  padding-bottom: 5px;
  margin-bottom: 6px;
  cursor: grab;
}

.pvp-widget-header:active {
  cursor: grabbing;
}

.pvp-widget-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #f87171;
  letter-spacing: 0.5px;
}

.pvp-widget-expand-btn {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fecaca;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pvp-widget-expand-btn:hover {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 8px #ef4444;
}

.pvp-widget-my-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: rgba(0, 0, 0, 0.35);
  padding: 5px 4px;
  border-radius: 6px;
  margin-bottom: 6px;
  text-align: center;
}

.pvp-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pvp-stat-label {
  font-size: 8.5px;
  color: #94a3b8;
  font-weight: 700;
}

.pvp-stat-val {
  font-size: 12px;
  font-weight: 900;
  color: #f8fafc;
}

.pvp-stat-kills { color: #4ade80; }
.pvp-stat-deaths { color: #f87171; }
.pvp-stat-streak { color: #fbbf24; }
.pvp-stat-points { color: #38bdf8; }

.pvp-widget-standings {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pvp-standing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}

.pvp-standing-row.rank-1 {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  font-weight: 700;
}

.pvp-standing-row.is-me {
  border-left: 2.5px solid #38bdf8;
}

.pvp-standing-row .standing-name {
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}

.pvp-standing-row.rank-1 .standing-name {
  color: #fbbf24;
}

.pvp-standing-row .standing-score {
  font-weight: 800;
  color: #38bdf8;
}

.pvp-standing-row.empty-hint {
  justify-content: center;
  color: #94a3b8;
  font-size: 9.5px;
  padding: 6px;
}

/* ==========================================================================
   📜 Live Quest Tracker Widget (RO Classic & Modern HUD)
   ========================================================================== */
.quest-tracker-widget {
  position: absolute;
  top: 195px;
  right: 12px;
  width: 265px;
  background: rgba(13, 20, 36, 0.94);
  border: 1.5px solid rgba(245, 158, 11, 0.6);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.85), 0 0 18px rgba(245, 158, 11, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 94;
  padding: 9px 12px;
  user-select: none;
  font-family: var(--font-hud), 'Outfit', 'Chakra Petch', sans-serif;
  animation: slideInRight 0.3s ease-out;
  pointer-events: auto !important;
  transition: max-height 0.25s ease, opacity 0.2s ease, width 0.2s ease;
}

.quest-tracker-widget.collapsed .quest-tracker-list {
  display: none;
}

.quest-tracker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  padding-bottom: 6px;
  margin-bottom: 8px;
  cursor: grab;
  user-select: none;
}

.quest-tracker-header:active {
  cursor: grabbing;
}

.quest-tracker-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  color: #fde047;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.quest-count-badge {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.55);
  color: #fef08a;
  font-size: 10px;
  font-weight: 800;
  padding: 1.5px 7px;
  border-radius: 10px;
  line-height: 1.2;
}

.quest-count-badge.maxed {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.6);
  color: #fca5a5;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.quest-collapse-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}

.quest-collapse-btn:hover {
  background: rgba(245, 158, 11, 0.3);
  color: #fde047;
  border-color: rgba(245, 158, 11, 0.6);
  transform: scale(1.05);
}

.quest-tracker-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 2px;
}

.quest-tracker-list::-webkit-scrollbar {
  width: 4px;
}

.quest-tracker-list::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.45);
  border-radius: 4px;
}

.quest-tracker-item {
  background: rgba(18, 27, 46, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  padding: 8px 10px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.quest-tracker-item:hover {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(24, 36, 62, 0.9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.quest-tracker-item.completed {
  border: 1.5px solid rgba(52, 211, 153, 0.75);
  background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.2) 0%, rgba(13, 22, 38, 0.9) 100%);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.28);
}

.quest-item-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.quest-title-text {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.4;
  letter-spacing: 0.2px;
  word-break: break-word;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.quest-type-icon {
  display: inline-block;
  font-size: 12.5px;
  margin-right: 3px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.quest-btn-abandon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  margin-top: -1px;
  transition: all 0.18s ease;
}

.quest-btn-abandon:hover {
  background: rgba(239, 68, 68, 0.35);
  border-color: rgba(239, 68, 68, 0.75);
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.quest-btn-abandon:active {
  transform: scale(0.95);
}

.quest-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.quest-item-target {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-item-target strong {
  color: #f1f5f9;
  font-weight: 800;
}

.quest-item-pct {
  font-size: 10px;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.quest-item-pct.done {
  color: #34d399;
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.45);
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.3);
}

.quest-progress-bar-bg {
  width: 100%;
  height: 7px;
  background: rgba(10, 15, 26, 0.85);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.quest-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
  border-radius: 4px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

.quest-progress-bar-fill.complete {
  background: linear-gradient(90deg, #059669 0%, #34d399 100%);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.65);
}

.quest-item-sub-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9.5px;
  color: #64748b;
  font-weight: 600;
  margin-top: 2px;
}

.quest-remaining-text {
  color: #7dd3fc;
  font-weight: 700;
}

.quest-giver-tag {
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-item-complete-bar {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.22) 0%, rgba(5, 150, 105, 0.35) 100%);
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 6px;
  padding: 4px 8px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  color: #a7f3d0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  margin-top: 2px;
  animation: questCompletePulse 2.2s infinite ease-in-out;
}

@keyframes questCompletePulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.3);
    border-color: rgba(52, 211, 153, 0.45);
  }
  50% {
    box-shadow: 0 0 14px rgba(52, 211, 153, 0.7);
    border-color: rgba(110, 231, 183, 0.85);
  }
}

/* ==========================================================================
   📜 Master Quest Journal Modal & Management System
   ========================================================================== */
.quest-journal-dialog {
  position: absolute;
  z-index: 2150;
  width: min(850px, 95vw);
  height: min(580px, 86vh);
  top: calc(50% - 290px);
  left: calc(50% - 425px);
  background: rgba(13, 20, 36, 0.96);
  border: 1.5px solid rgba(245, 158, 11, 0.65);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.9), 0 0 24px rgba(245, 158, 11, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  font-family: var(--font-hud), 'Outfit', 'Chakra Petch', sans-serif;
  animation: questPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.quest-journal-dialog:not(.ro-modal-hidden) {
  display: flex !important;
}

@keyframes questPopIn {
  0% { transform: scale(0.94); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Header & Title bar */
.quest-journal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.4);
  cursor: grab;
  user-select: none;
}

.quest-journal-header:active {
  cursor: grabbing;
}

.quest-journal-title-icon {
  font-size: 18px;
  margin-right: 2px;
}

.quest-journal-header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-quest-hud-switch {
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-quest-hud-switch:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #7dd3fc;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.35);
}

.btn-quest-hud-switch.hidden-hud {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

/* Sub-tabs bar */
.quest-journal-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(10, 16, 30, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.quest-tab-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(30, 41, 59, 0.5);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quest-tab-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #f1f5f9;
}

.quest-tab-btn.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.42) 100%);
  border-color: #fbbf24;
  color: #fde68a;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.quest-tab-badge {
  padding: 1px 7px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}

.quest-tab-btn.active .quest-tab-badge {
  background: rgba(245, 158, 11, 0.35);
  border-color: #fde047;
  color: #ffffff;
}

/* Journal Body (Two Columns) */
.quest-journal-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left Sidebar */
.quest-journal-sidebar {
  width: 320px;
  min-width: 270px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  background: rgba(10, 16, 30, 0.45);
}

.quest-sidebar-search {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.quest-sidebar-search input {
  width: 100%;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 6px;
  padding: 6px 10px;
  color: #f8fafc;
  font-size: 11.5px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.18s ease;
}

.quest-sidebar-search input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.35);
}

.quest-journal-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.quest-journal-list::-webkit-scrollbar {
  width: 5px;
}
.quest-journal-list::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.35);
  border-radius: 4px;
}

/* List Item Card */
.quest-journal-item {
  background: rgba(30, 41, 59, 0.5);
  border: 1.2px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.quest-journal-item:hover {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateX(2px);
}

.quest-journal-item.selected {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(30, 41, 59, 0.85) 100%);
  border-color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.28);
}

.quest-journal-item.ready {
  border-color: #34d399;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(30, 41, 59, 0.8) 100%);
}

.quest-item-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.quest-item-title-col {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.quest-item-main-title {
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-journal-item.selected .quest-item-main-title {
  color: #fde047;
}

.quest-item-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #94a3b8;
}

/* Right Detail Pane */
.quest-journal-detail-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  overflow-y: auto;
  background: radial-gradient(circle at 85% 15%, rgba(30, 41, 59, 0.45) 0%, rgba(13, 20, 36, 0.9) 100%);
}

.quest-journal-detail-pane::-webkit-scrollbar {
  width: 5px;
}
.quest-journal-detail-pane::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.35);
  border-radius: 4px;
}

/* Empty State */
.quest-detail-empty {
  margin: auto;
  text-align: center;
  max-width: 320px;
  padding: 24px 16px;
}

.quest-empty-icon {
  font-size: 46px;
  margin-bottom: 12px;
  opacity: 0.85;
  filter: drop-shadow(0 4px 12px rgba(245, 158, 11, 0.3));
}

.quest-empty-title {
  font-size: 16px;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: 6px;
}

.quest-empty-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}

/* Detail Content Components */
.quest-detail-content {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}

.quest-detail-header {
  margin-bottom: 2px;
}

.quest-detail-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.quest-badge-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
}

.quest-badge-tag.tag-hunt {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

.quest-badge-tag.tag-gather {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.45);
  color: #a7f3d0;
}

.quest-badge-tag.tag-lvl {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.45);
  color: #7dd3fc;
}

.quest-badge-tag.tag-rep {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.45);
  color: #fde68a;
}

.quest-badge-tag.tag-status.ready {
  background: rgba(16, 185, 129, 0.28);
  border-color: #34d399;
  color: #6ee7b7;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.45);
}

.quest-detail-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: #fde047;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(245, 158, 11, 0.35);
  letter-spacing: 0.2px;
}

/* 2-Column Dashboard Grid */
.quest-detail-dashboard-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 12px;
  align-items: stretch;
}

@media (max-width: 768px) {
  .quest-detail-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.quest-detail-box {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

.quest-box-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #93c5fd;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.quest-giver-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.quest-giver-avatar {
  width: 58px;
  height: 58px;
  border-radius: 11px;
  background: radial-gradient(circle, rgba(49, 46, 129, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1.8px solid rgba(245, 158, 11, 0.55);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quest-giver-avatar canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.quest-giver-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.quest-giver-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #f8fafc;
}

.quest-giver-title-badge {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quest-giver-location {
  font-size: 11.5px;
  color: #38bdf8;
  font-weight: 700;
}

.quest-dialogue-quote {
  font-size: 12px;
  font-style: italic;
  color: #e2e8f0;
  background: rgba(0, 0, 0, 0.35);
  border-left: 3px solid #f59e0b;
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  line-height: 1.5;
  margin-top: auto;
}

/* Objective Progress in Detail */
.quest-obj-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  margin-bottom: 8px;
}

.quest-target-desc {
  font-weight: 700;
  color: #f1f5f9;
}

.quest-remain-desc {
  font-size: 11.5px;
  font-weight: 800;
  color: #38bdf8;
}

.quest-progress-bar-bg.detail-bar {
  height: 11px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.quest-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
  border-radius: 5px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

.quest-progress-bar-fill.complete {
  background: linear-gradient(90deg, #059669 0%, #34d399 100%);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.7);
}

.quest-status-hint {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.5;
  margin-top: auto;
}

/* Rewards Box */
.quest-rewards-box {
  margin-bottom: 0;
}

.quest-rewards-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
}

.quest-rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 10px;
}

.quest-reward-card {
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.quest-reward-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.25);
}

.quest-reward-card.zeny {
  border-color: rgba(245, 158, 11, 0.5);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(30, 41, 59, 0.8) 100%);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.quest-reward-card.exp {
  border-color: rgba(56, 189, 248, 0.5);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18) 0%, rgba(30, 41, 59, 0.8) 100%);
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.15);
}

.quest-reward-card.job-exp {
  border-color: rgba(168, 85, 247, 0.5);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(30, 41, 59, 0.8) 100%);
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.15);
}

.quest-reward-icon {
  font-size: 20px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.quest-reward-meta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 1px;
}

.quest-reward-label {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.quest-reward-val {
  font-size: 12.5px;
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
}

.quest-reward-card.zeny .quest-reward-val {
  color: #fde047;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.quest-reward-card.exp .quest-reward-val {
  color: #7dd3fc;
}

.quest-reward-card.job-exp .quest-reward-val {
  color: #d8b4fe;
}

/* Detail Actions */
.quest-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-quest-action {
  padding: 10px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  font-family: inherit;
  white-space: nowrap;
}

.btn-quest-action.btn-quest-guide {
  flex: 1;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.45) 0%, rgba(2, 132, 199, 0.65) 100%);
  border: 1.5px solid #38bdf8;
  color: #f0f9ff;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}

.btn-quest-action.btn-quest-guide:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.65) 0%, rgba(14, 165, 233, 0.85) 100%);
  border-color: #7dd3fc;
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
  transform: translateY(-1px);
}

.btn-quest-action.btn-quest-abandon-danger {
  background: rgba(239, 68, 68, 0.2);
  border: 1.5px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  margin-left: auto;
}

.btn-quest-action.btn-quest-abandon-danger:hover {
  background: rgba(239, 68, 68, 0.38);
  border-color: #f87171;
  color: #fee2e2;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
  transform: translateY(-1px);
}

/* Service Button Gold Notification Pip */
.service-btn-pip.pip-gold {
  background: #fbbf24;
  border-color: #fffbeb;
  box-shadow: 0 0 10px rgba(251, 191, 36, 1), 0 0 16px rgba(245, 158, 11, 0.8);
  animation: servicePipGoldPulse 1.2s ease-in-out infinite;
}

@keyframes servicePipGoldPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.9; box-shadow: 0 0 14px rgba(251, 191, 36, 1), 0 0 20px rgba(245, 158, 11, 0.9); }
  100% { transform: scale(1); opacity: 1; }
}

/* Make HUD tracker item clickable */
.quest-tracker-item {
  cursor: pointer;
  transition: all 0.18s ease;
}

.quest-tracker-item:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(245, 158, 11, 0.6);
  transform: translateX(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .quest-journal-dialog {
    width: 96vw;
    height: 88vh;
    top: 6vh;
    left: 2vw;
  }
  .quest-journal-sidebar {
    width: 230px;
  }
  .quest-rewards-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Live Kill Feed Stack --- */
.pvp-kill-feed-container {
  position: absolute;
  top: 75px;
  right: 175px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 92;
  pointer-events: none;
}

.pvp-kill-feed-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(239, 68, 68, 0.6);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-family: var(--font-hud);
  color: #f8fafc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(239, 68, 68, 0.3);
  animation: slideInRight 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), fadeOut 0.5s 3.5s forwards;
  backdrop-filter: blur(6px);
}

.pvp-kill-feed-item.is-shutdown {
  border-color: #fbbf24;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.95), rgba(69, 10, 10, 0.95));
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

.kf-killer { color: #4ade80; font-weight: 700; }
.kf-victim { color: #f87171; font-weight: 700; }
.kf-weapon { color: #fbbf24; }
.kf-streak-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  background: #dc2626;
  color: #ffffff;
}

/* --- Full Scoreboard Modal --- */
.pvp-scoreboard-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 680px;
  max-width: 95vw;
  max-height: 85vh;
  z-index: 130;
  border: 1.8px solid #ef4444;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(239, 68, 68, 0.35);
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(12px);
}

.pvp-scoreboard-header {
  background: linear-gradient(135deg, #7f1d1d, #450a0a);
  border-bottom: 1px solid #ef4444;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
}

.pvp-sb-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fecaca;
  font-weight: 800;
  font-size: 13px;
}

.pvp-scoreboard-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pvp-scoreboard-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 11.5px;
}

.pvp-banner-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pvp-banner-label {
  color: #94a3b8;
}

.pvp-table-wrapper {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
}

.pvp-scoreboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--font-hud);
}

.pvp-scoreboard-table th {
  position: sticky;
  top: 0;
  background: #1e293b;
  color: #fbbf24;
  padding: 10px 8px;
  font-weight: 800;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 2;
}

.pvp-scoreboard-table td {
  padding: 9px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #f1f5f9;
}

.pvp-scoreboard-table tr:hover {
  background: rgba(239, 68, 68, 0.1);
}

.pvp-scoreboard-table tr.is-me {
  background: rgba(56, 189, 248, 0.12);
  border-left: 3px solid #38bdf8;
}

.pvp-scoreboard-table tr.rank-1-row {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
}

.pvp-medal-icon {
  font-size: 14px;
}

/* ==========================================================================
   20. 1vs1 Duel Active Battle HUD
   ========================================================================== */
.duel-active-hud {
  position: absolute;
  top: 74px; /* Cleanly below Target HUD so they NEVER overlap */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9990;
  pointer-events: auto !important;
  user-select: none;
  animation: slideInDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.duel-hud-content {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid rgba(245, 158, 11, 0.7);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.3);
  backdrop-filter: blur(12px);
  padding: 6px 16px;
  border-radius: 30px;
  font-family: var(--font-hud);
}

.duel-hud-badge {
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.duel-hud-fighters {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.duel-hud-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duel-hud-name.p1 {
  color: #38bdf8;
}

.duel-hud-vs {
  color: #ef4444;
  font-weight: 900;
  font-size: 12px;
  font-style: italic;
}

.duel-hud-name.p2 {
  color: #f87171;
}

.duel-hud-timer {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 8px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 800;
  color: #fde047;
  letter-spacing: 0.5px;
  min-width: 62px;
  text-align: center;
}

.duel-hud-surrender-btn {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.duel-hud-surrender-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  color: #ffffff;
  border-color: #ef4444;
}

/* ==========================================================================
   20.1 1vs1 Duel Versus Arena Intro Overlay & Clash FX
   ========================================================================== */
#duel-countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.88) 0%, rgba(2, 6, 23, 0.97) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--font-hud, 'Chakra Petch', sans-serif);
  animation: duelOverlayFadeIn 0.3s ease-out;
}

@keyframes duelOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#duel-countdown-overlay.shake-screen {
  animation: duelScreenShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes duelScreenShake {
  10%, 90% { transform: translate3d(-2px, 1px, 0); }
  20%, 80% { transform: translate3d(3px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 2px, 0); }
  40%, 60% { transform: translate3d(4px, -1px, 0); }
}

/* Speed Lines Background Slash Effect */
.duel-versus-speedlines {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(135deg, transparent 48%, rgba(245, 158, 11, 0.08) 50%, transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Top Match Header */
.duel-versus-header {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  animation: duelHeaderDrop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes duelHeaderDrop {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

.duel-versus-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #fde047;
  text-shadow: 0 0 25px rgba(250, 204, 21, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  gap: 12px;
}

.duel-versus-subtitle {
  font-size: 13px;
  letter-spacing: 3px;
  color: #94a3b8;
  font-weight: 600;
  margin-top: 4px;
  text-transform: uppercase;
}

/* Arena Stage (Holds Player Cards + Center VS) */
.duel-versus-stage {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 94%;
  max-width: 1080px;
  min-height: 220px;
}

/* Individual Fighter Card */
.duel-fighter-card {
  flex: 1;
  max-width: 440px;
  height: 180px;
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7);
  transition: transform 0.2s ease;
}

/* Blue Corner (Left - Challenger) */
.duel-fighter-card.card-blue {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(15, 23, 42, 0.92) 80%);
  border: 2px solid #38bdf8;
  box-shadow: 0 12px 40px rgba(14, 165, 233, 0.35), inset 0 0 30px rgba(14, 165, 233, 0.15);
  animation: duelCardSlideLeft 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  gap: 18px;
}

@keyframes duelCardSlideLeft {
  0% {
    opacity: 0;
    transform: translateX(-120%) skewX(-4deg);
  }
  70% {
    transform: translateX(12px) skewX(1deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0);
  }
}

/* Red Corner (Right - Opponent) */
.duel-fighter-card.card-red {
  background: linear-gradient(225deg, rgba(239, 68, 68, 0.25) 0%, rgba(15, 23, 42, 0.92) 80%);
  border: 2px solid #f87171;
  box-shadow: 0 12px 40px rgba(239, 68, 68, 0.35), inset 0 0 30px rgba(239, 68, 68, 0.15);
  animation: duelCardSlideRight 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  flex-direction: row-reverse;
  text-align: right;
  gap: 18px;
}

@keyframes duelCardSlideRight {
  0% {
    opacity: 0;
    transform: translateX(120%) skewX(4deg);
  }
  70% {
    transform: translateX(-12px) skewX(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0);
  }
}

/* Fighter Avatar Frame */
.duel-avatar-wrap {
  width: 110px;
  height: 110px;
  min-width: 110px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.85);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.card-blue .duel-avatar-wrap {
  border: 3px solid #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.6), inset 0 0 15px rgba(56, 189, 248, 0.3);
}

.card-red .duel-avatar-wrap {
  border: 3px solid #f87171;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.6), inset 0 0 15px rgba(239, 68, 68, 0.3);
}

.duel-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.duel-avatar-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Fighter Info Text */
.duel-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow: hidden;
}

.duel-corner-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.card-blue .duel-corner-tag {
  color: #38bdf8;
}

.card-red .duel-corner-tag {
  color: #f87171;
}

.duel-fighter-name {
  font-size: 24px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.card-blue .duel-fighter-name {
  color: #f0f9ff;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
}

.card-red .duel-fighter-name {
  color: #fff1f2;
  text-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}

.duel-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.card-red .duel-meta-row {
  justify-content: flex-end;
}

.duel-level-badge {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.duel-job-tag {
  font-size: 13px;
  font-weight: 700;
  color: #cbd5e1;
}

/* Center VS Fiery Emblem */
.duel-vs-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 25;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: duelVsSlam 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.22s both;
}

@keyframes duelVsSlam {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.8);
  }
  75% {
    transform: translate(-50%, -50%) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.duel-vs-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(249, 115, 22, 0.95)) drop-shadow(0 0 15px rgba(234, 88, 12, 0.8));
  animation: duelVsPulseGlow 1.8s ease-in-out infinite alternate;
}

@keyframes duelVsPulseGlow {
  0% {
    filter: drop-shadow(0 0 25px rgba(249, 115, 22, 0.8)) drop-shadow(0 0 10px rgba(234, 88, 12, 0.7));
  }
  100% {
    filter: drop-shadow(0 0 45px rgba(249, 115, 22, 1.0)) drop-shadow(0 0 25px rgba(251, 191, 36, 0.9));
  }
}

/* Bottom Countdown Area */
.duel-countdown-area {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 28px;
}

.duel-countdown-number {
  font-size: 110px;
  font-weight: 900;
  line-height: 1;
  color: #f59e0b;
  text-shadow: 0 0 40px rgba(245, 158, 11, 0.95), 0 4px 10px rgba(0, 0, 0, 0.8);
  transform: scale(1);
  transition: transform 0.15s ease-out;
}

.duel-countdown-number.pop {
  animation: duelCountPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes duelCountPop {
  0% { transform: scale(1.6); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

.duel-countdown-number.fight {
  font-size: 84px !important;
  color: #ef4444 !important;
  text-shadow: 0 0 50px rgba(239, 68, 68, 1.0), 0 0 25px #fde047, 0 4px 15px rgba(0, 0, 0, 0.9) !important;
  animation: duelFightExplode 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes duelFightExplode {
  0% { transform: scale(0.6); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1.15); }
}

.duel-countdown-sub {
  margin-top: 14px;
  font-size: 15px;
  color: #e2e8f0;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Flash Screen Overlay on FIGHT */
.duel-flash-overlay {
  position: fixed;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 10005;
  transition: opacity 0.25s ease-out;
}

.duel-flash-overlay.active {
  opacity: 0.65;
}

/* Mobile & Tablet Responsive Adjustments */
@media (max-width: 820px) {
  .duel-versus-stage {
    flex-direction: column;
    gap: 16px;
    min-height: auto;
  }

  .duel-fighter-card {
    width: 90%;
    max-width: 360px;
    height: 110px;
    padding: 10px 16px;
  }

  .duel-avatar-wrap {
    width: 75px;
    height: 75px;
    min-width: 75px;
  }

  .duel-fighter-name {
    font-size: 19px;
  }

  .duel-vs-center {
    width: 140px;
    height: 140px;
  }

  .duel-countdown-number {
    font-size: 80px;
  }

  .duel-countdown-number.fight {
    font-size: 54px !important;
  }
}

/* ==========================================================================
   21. RO Style Custom Confirmation Dialog Modal
   ========================================================================== */
.ro-confirm-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  background: rgba(15, 23, 42, 0.96);
  border: 1.5px solid rgba(239, 68, 68, 0.65);
  border-radius: 12px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(239, 68, 68, 0.35);
  backdrop-filter: blur(14px);
  z-index: 10000;
  overflow: hidden;
  user-select: none;
  font-family: var(--font-hud);
  animation: modalPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.ro-confirm-header {
  background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 100%);
  color: #fef08a;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(239, 68, 68, 0.4);
}

.ro-confirm-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.ro-confirm-icon {
  font-size: 38px;
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.6));
}

.ro-confirm-text-group h4 {
  margin: 0 0 6px 0;
  font-size: 14.5px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.4;
}

.ro-confirm-text-group p {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.45;
}

.ro-confirm-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

.ro-btn-confirm-ok {
  flex: 1;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  border: 1px solid #f87171;
  color: #ffffff;
  font-weight: 800;
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(239, 68, 68, 0.45);
  transition: all 0.15s ease;
  font-family: inherit;
}

.ro-btn-confirm-ok:hover {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(239, 68, 68, 0.65);
}

.ro-btn-confirm-cancel {
  flex: 1;
  background: rgba(51, 65, 85, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #cbd5e1;
  font-weight: 700;
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.ro-btn-confirm-cancel:hover {
  background: rgba(71, 85, 105, 0.95);
  color: #ffffff;
  border-color: #94a3b8;
}

/* ==========================================================================
   22. Classic RO Skill Aiming Cursor & Floating Reticle Badge
   ========================================================================== */
.skill-targeting-badge {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none !important;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translate(-18px, -18px);
  user-select: none;
  font-family: var(--font-hud);
}

.skill-reticle-circle {
  width: 36px;
  height: 36px;
  border: 2px solid #38bdf8;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.8), inset 0 0 8px rgba(56, 189, 248, 0.4);
  animation: reticleSpinPulse 2.5s infinite linear;
  background: rgba(14, 165, 233, 0.1);
}

.skill-reticle-circle::before,
.skill-reticle-circle::after {
  content: '';
  position: absolute;
  background: #38bdf8;
}

.skill-reticle-circle::before {
  top: 50%;
  left: -4px;
  right: -4px;
  height: 2px;
  transform: translateY(-50%);
}

.skill-reticle-circle::after {
  left: 50%;
  top: -4px;
  bottom: -4px;
  width: 2px;
  transform: translateX(-50%);
}

.reticle-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #fde047;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px #fde047;
}

.skill-reticle-tooltip {
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.7);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 14px rgba(56, 189, 248, 0.3);
  backdrop-filter: blur(10px);
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

.skill-reticle-name {
  font-size: 12px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.3px;
}

.skill-reticle-hint {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}

@keyframes reticleSpinPulse {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ==========================================================================
   23. Hotbar Skill Cooldown Overlay & Animations
   ========================================================================== */
.hotkey-slot {
  position: relative !important;
  overflow: hidden !important;
}

.slot-cooldown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10;
  pointer-events: none !important;
  border-radius: 8px;
  overflow: hidden;
}

.slot-cooldown-sweep {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    rgba(15, 23, 42, 0.82) 0deg,
    rgba(15, 23, 42, 0.82) var(--sweep-deg, 360deg),
    transparent var(--sweep-deg, 360deg),
    transparent 360deg
  );
  border-radius: 8px;
  pointer-events: none !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
}

.slot-cooldown-text {
  position: relative;
  z-index: 12;
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 10px rgba(251, 191, 36, 0.9);
  font-family: var(--font-hud), 'Outfit', sans-serif;
  letter-spacing: 0.3px;
}

/* Skill Ready Glow Flash Animation */
.slot-ready-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(251, 191, 36, 0.6) 50%, rgba(255, 255, 255, 0) 80%);
  border-radius: 8px;
  z-index: 15;
  pointer-events: none !important;
  animation: hotbarReadyFlash 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hotbarReadyFlash {
  0% {
    opacity: 1;
    transform: scale(0.9);
    filter: brightness(2.2);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.15);
    filter: brightness(1.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.0);
    filter: brightness(1.0);
  }
}

/* ==========================================================================
   24. Active Buff Status Bar & Glassmorphism Badges
   ========================================================================== */
.hud-buff-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 0;
  min-height: 28px;
}

.hud-buff-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 2px 7px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: default;
  transition: all 0.2s ease;
  user-select: none;
}

.hud-buff-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.hud-buff-icon {
  font-size: 14px;
  line-height: 1;
}

.hud-buff-name {
  font-size: 10px;
  font-weight: 700;
  color: #e2e8f0;
  font-family: var(--font-hud);
}

.hud-buff-timer {
  font-size: 10px;
  font-weight: 800;
  color: #fde047;
  font-family: var(--font-hud);
  margin-left: 2px;
}

.hud-buff-blink {
  animation: buffWarningBlink 0.6s infinite alternate ease-in-out;
  border-color: #ef4444 !important;
}

@keyframes buffWarningBlink {
  0% { opacity: 1; transform: scale(1); box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); }
  100% { opacity: 0.5; transform: scale(0.96); box-shadow: 0 0 10px rgba(239, 68, 68, 0.9); }
}

/* ==========================================================================
   18. Global Hidden / Inactive Modal Suppression (Prevents Ghost Cursors)
   ========================================================================== */
.ro-modal-hidden,
.ro-modal-hidden *,
.hidden,
.hidden * {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* ==========================================================================
   World Map Modal (M)
   ========================================================================== */
.worldmap-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 980px;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}

.worldmap-header {
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  border-bottom: 1px solid rgba(251, 191, 36, 0.25);
  padding: 10px 14px;
  cursor: grab;
}

.worldmap-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 13px;
  color: #fbbf24;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.worldmap-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.worldmap-viewer {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
  background: #090d16;
}

.worldmap-image {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* GPS Live Player Pin */
.worldmap-player-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gps-pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.35);
  border: 2px solid #fbbf24;
  box-shadow: 0 0 16px #f59e0b;
  animation: gps-pulse 2s infinite ease-out;
}

.gps-pulse-core {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border: 2px solid #f59e0b;
  border-radius: 50%;
  box-shadow: 0 0 8px #ffffff;
}

.gps-pin-marker {
  font-size: 24px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
  animation: pin-bounce 1.5s infinite ease-in-out;
  margin-top: -30px;
}

.gps-pin-tooltip {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #fbbf24;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 10px rgba(251, 191, 36, 0.3);
  border-radius: 6px;
  padding: 3px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  pointer-events: none;
}

.gps-tag {
  font-size: 8.5px;
  color: #38bdf8;
  font-family: var(--font-hud);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gps-pin-tooltip strong {
  font-size: 11px;
  color: #fbbf24;
  font-family: var(--font-hud);
}

/* Hotspot Markers for Towns */
.worldmap-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.city-glow-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.15);
  border: 1.5px dashed rgba(56, 189, 248, 0.6);
  transition: all 0.25s ease;
}

.city-glow-ring.active {
  background: rgba(245, 158, 11, 0.25);
  border: 2px solid #fbbf24;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

.worldmap-hotspot:hover .city-glow-ring {
  transform: scale(1.4);
  background: rgba(56, 189, 248, 0.35);
  border-color: #38bdf8;
  box-shadow: 0 0 16px #38bdf8;
}

.city-label {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 9.5px;
  font-family: var(--font-hud);
  color: #cbd5e1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.worldmap-hotspot:hover .city-label,
.worldmap-hotspot.active-city .city-label {
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}

.worldmap-footer-hint {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-family: var(--font-hud);
  color: #94a3b8;
  padding: 2px 0;
}

.worldmap-footer-hint strong {
  color: #fbbf24;
}

@keyframes gps-pulse {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

@keyframes pin-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ==========================================================================
   World Map Dynamic Living VFX (Atmospheric Fog, Canvas, City Lights)
   ========================================================================== */
#worldmap-vfx-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 35;
}

.worldmap-vignette-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 55%, rgba(15, 23, 42, 0.5) 100%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
  z-index: 20;
}

/* Atmospheric Drifting Clouds / Fog */
.worldmap-fog-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  pointer-events: none;
  z-index: 22;
  opacity: 0.28;
  background: radial-gradient(ellipse at 25% 35%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 50%),
              radial-gradient(ellipse at 70% 60%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 45%),
              radial-gradient(ellipse at 50% 15%, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0) 40%);
}

.fog-layer-1 {
  animation: drift-fog 45s linear infinite;
}

.fog-layer-2 {
  opacity: 0.20;
  animation: drift-fog-reverse 60s linear infinite;
  transform: scaleY(-1);
}

@keyframes drift-fog {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes drift-fog-reverse {
  0% { transform: translateX(-50%) scaleY(-1); }
  100% { transform: translateX(0) scaleY(-1); }
}

/* Distinct Glowing Beacons for Every City */
.city-glow-ring {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.25);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.6), inset 0 0 6px rgba(56, 189, 248, 0.4);
  animation: beacon-pulse 2.2s infinite ease-in-out;
  transition: all 0.25s ease;
}

.city-glow-ring.active {
  width: 32px;
  height: 32px;
  background: rgba(245, 158, 11, 0.35);
  border: 2.5px solid #fbbf24;
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.9), inset 0 0 10px rgba(251, 191, 36, 0.7);
  animation: capital-breathing 1.8s infinite ease-in-out;
}

/* Specific Regional City Color Themes */
.worldmap-hotspot[data-city="mystra"] .city-glow-ring {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.3);
  box-shadow: 0 0 18px #ef4444;
}

.worldmap-hotspot[data-city="winterfell"] .city-glow-ring,
.worldmap-hotspot[data-city="asgard"] .city-glow-ring {
  border-color: #93c5fd;
  background: rgba(147, 197, 253, 0.3);
  box-shadow: 0 0 18px #93c5fd;
}

.worldmap-hotspot[data-city="pailin"] .city-glow-ring {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.3);
  box-shadow: 0 0 18px #4ade80;
}

.worldmap-hotspot[data-city="morrock"] .city-glow-ring,
.worldmap-hotspot[data-city="mirage"] .city-glow-ring,
.worldmap-hotspot[data-city="zulmar"] .city-glow-ring {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.25);
  box-shadow: 0 0 16px #f59e0b;
}

@keyframes beacon-pulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.65;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

@keyframes capital-breathing {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.5), inset 0 0 6px rgba(245, 158, 11, 0.4);
  }
  50% {
    transform: scale(1.4);
    box-shadow: 0 0 30px rgba(245, 158, 11, 1), inset 0 0 14px rgba(251, 191, 36, 0.9);
  }
}
  50% {
    transform: scale(1.35);
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.8), inset 0 0 12px rgba(251, 191, 36, 0.6);
  }
}


/* ==========================================================================
   Rich Dynamic World Map Atmospheric Effects
   ========================================================================== */

/* 🌋 1. Mystra Volcanic Eruption & Lava Embers */
.volcano-vfx-zone {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  pointer-events: none;
  z-index: 30;
}

.volcano-smoke-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.45) 0%, rgba(249, 115, 22, 0.25) 45%, rgba(0, 0, 0, 0) 70%);
  filter: blur(8px);
  animation: volcano-pulse 3s infinite ease-in-out;
}

@keyframes volcano-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; filter: blur(12px); }
}

.fire-ember {
  position: absolute;
  bottom: 45%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fef08a;
  box-shadow: 0 0 10px #f97316, 0 0 20px #ef4444;
  animation: ember-float 2.6s infinite ease-out;
}

.fire-ember.e1 { left: 45%; animation-delay: 0.2s; animation-duration: 2.2s; }
.fire-ember.e2 { left: 55%; animation-delay: 0.7s; animation-duration: 2.8s; width: 6px; height: 6px; }
.fire-ember.e3 { left: 38%; animation-delay: 1.1s; animation-duration: 2.4s; }
.fire-ember.e4 { left: 62%; animation-delay: 1.6s; animation-duration: 3.0s; width: 4px; height: 4px; }
.fire-ember.e5 { left: 50%; animation-delay: 2.0s; animation-duration: 2.5s; width: 7px; height: 7px; background: #fbbf24; }
.fire-ember.e6 { left: 42%; animation-delay: 2.3s; animation-duration: 2.7s; }

@keyframes ember-float {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(calc(sin(1) * 20px - 10px), -45px) scale(0.8);
    opacity: 0.9;
  }
  100% {
    transform: translate(calc(sin(2) * 40px - 20px), -95px) scale(0.2);
    opacity: 0;
  }
}

/* ❄️ 2. North Mountain Snowfall (Winterfell & Asgard) */
.snow-vfx-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38%;
  pointer-events: none;
  overflow: hidden;
  z-index: 30;
}

.snow-flake {
  position: absolute;
  top: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px #93c5fd, 0 0 14px #ffffff;
  animation: snowfall 4.5s infinite linear;
}

.snow-flake.sf1 { width: 6px; height: 6px; animation-duration: 4.2s; }
.snow-flake.sf2 { width: 4px; height: 4px; animation-duration: 5.5s; }
.snow-flake.sf3 { width: 5px; height: 5px; animation-duration: 3.8s; }
.snow-flake.sf4 { width: 7px; height: 7px; animation-duration: 4.8s; }
.snow-flake.sf5 { width: 4px; height: 4px; animation-duration: 5.2s; }
.snow-flake.sf6 { width: 6px; height: 6px; animation-duration: 4.0s; }
.snow-flake.sf7 { width: 5px; height: 5px; animation-duration: 4.6s; }
.snow-flake.sf8 { width: 6px; height: 6px; animation-duration: 5.0s; }

@keyframes snowfall {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(180px) translateX(25px);
    opacity: 0;
  }
}

/* ✨ 3. Capital Stardust (Pronternyan) */
.stardust-vfx-zone {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  pointer-events: none;
  z-index: 32;
}

.stardust {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fef08a;
  box-shadow: 0 0 10px #fbbf24;
  animation: stardust-orbit 3.5s infinite ease-in-out;
}

.stardust.s1 { animation-delay: 0s; width: 5px; height: 5px; }
.stardust.s2 { animation-delay: 0.9s; width: 3px; height: 3px; }
.stardust.s3 { animation-delay: 1.8s; width: 4px; height: 4px; }
.stardust.s4 { animation-delay: 2.7s; width: 6px; height: 6px; }

@keyframes stardust-orbit {
  0% { transform: translate(-50%, -50%) rotate(0deg) translateX(24px) scale(0.5); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) rotate(180deg) translateX(34px) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(24px) scale(0.5); opacity: 0.3; }
}

/* 🌊 4. Ocean Shimmer Glint (Izland) */
.ocean-vfx-zone {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 60px;
  pointer-events: none;
  z-index: 28;
}

.ocean-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 12px #38bdf8;
  animation: ocean-shimmer 3s infinite ease-out;
}

.ocean-ripple.r2 { animation-delay: 1.5s; }

@keyframes ocean-shimmer {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* 🧭 5. Compass Celestial Halo */
.compass-halo-vfx {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 1.5px dashed rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4), inset 0 0 10px rgba(245, 158, 11, 0.2);
  animation: compass-spin 35s infinite linear;
  pointer-events: none;
  z-index: 28;
}

@keyframes compass-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}


/* ==========================================================================
   Game Settings Modal & Controls
   ========================================================================== */
.sys-btn-settings:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: #fbbf24;
  color: #fbbf24;
}

.settings-dialog {
  width: 460px;
  max-width: 95vw;
  position: absolute;
  top: calc(50% - 240px);
  left: calc(50% - 230px);
  z-index: 1010;
  border-radius: 14px;
  border: 1.5px solid rgba(245, 158, 11, 0.6);
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(245, 158, 11, 0.3);
  backdrop-filter: blur(12px);
  background: rgba(15, 23, 42, 0.96);
  animation: fadeInDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.settings-header {
  background: linear-gradient(180deg, #334155, #1e293b);
  border-bottom: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--ro-gold-bright);
}

.settings-body {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.settings-nav-tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 12px 0 12px;
  gap: 6px;
}

.settings-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: #94a3b8;
  font-family: var(--font-main);
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.settings-tab-btn:hover {
  background: rgba(245, 158, 11, 0.15);
  color: #f8fafc;
}

.settings-tab-btn.active {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.6);
  color: #fbbf24;
  font-weight: 700;
}

.settings-pages-container {
  padding: 16px;
  max-height: 380px;
  overflow-y: auto;
}

.settings-page-content {
  display: none;
  flex-direction: column;
  gap: 14px;
  animation: fadeIn 0.2s ease-out;
}

.settings-page-content.active {
  display: flex;
}

.settings-group {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-group-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ro-gold-bright);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.settings-label-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-row-label {
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
}

.settings-row-desc {
  font-size: 10px;
  color: #94a3b8;
}

.settings-control-col {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ro-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 6px;
  border-radius: 4px;
  background: #334155;
  outline: none;
  cursor: pointer;
  transition: background 0.2s;
}

.ro-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fbbf24;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
  border: 2px solid #ffffff;
}

.slider-val-badge {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-hud);
  color: #fbbf24;
  min-width: 34px;
  text-align: right;
}

/* Custom RO Switch (iOS / Cyberpunk Toggle) */
.ro-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.ro-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ro-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #334155;
  transition: .3s;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.ro-switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #cbd5e1;
  transition: .3s;
  border-radius: 50%;
}

.ro-switch input:checked + .slider {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #34d399;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.ro-switch input:checked + .slider:before {
  transform: translateX(20px);
  background-color: #ffffff;
}

/* Future System Hint Box */
.future-system-box {
  background: rgba(168, 85, 247, 0.08);
  border: 1px dashed rgba(168, 85, 247, 0.4);
}

.future-hint-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px;
}

.future-icon {
  font-size: 26px;
}

.future-text {
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.5;
}

.future-text b {
  color: #c084fc;
}

/* Settings Footer */
.settings-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  gap: 10px;
}

.btn-settings-back {
  padding: 8px 16px;
  background: rgba(51, 65, 85, 0.8);
  border: 1px solid #475569;
  border-radius: 8px;
  color: #cbd5e1;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-settings-back:hover {
  background: rgba(71, 85, 105, 0.95);
  color: #ffffff;
}

.btn-settings-save {
  padding: 8px 20px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 1px solid #fde047;
  border-radius: 8px;
  color: #0f172a;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
  transition: all 0.15s ease;
}

.btn-settings-save:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.6);
}


/* --- Shop Interactive Mode Tabs & Back Button --- */
.shop-window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border-bottom: 1px solid var(--ro-gold);
}

.shop-header-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.shop-tab-pill {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #94a3b8;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.shop-tab-pill:hover {
  background: rgba(245, 158, 11, 0.2);
  color: #f8fafc;
  border-color: rgba(245, 158, 11, 0.5);
}

.shop-tab-pill.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.25));
  border-color: var(--ro-gold);
  color: var(--ro-gold-bright);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

.shop-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-shop-back {
  padding: 4px 10px;
  background: rgba(51, 65, 85, 0.8);
  border: 1px solid #475569;
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-shop-back:hover {
  background: #334155;
  color: #ffffff;
  border-color: #64748b;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}


/* ==========================================================================
   MeawNarok Leaderboard / Hall of Fame Modal Styles
   ========================================================================== */
.highlight-rank-btn {
  border-color: rgba(245, 158, 11, 0.6) !important;
}

.highlight-rank-btn:hover {
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.6) !important;
}

.leaderboard-dialog {
  width: 730px;
  max-width: 96vw;
  position: absolute;
  top: calc(50% - 310px);
  left: calc(50% - 365px);
  z-index: 1005;
  border-radius: 16px;
  border: 1.8px solid rgba(245, 158, 11, 0.65);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(245, 158, 11, 0.35);
  backdrop-filter: blur(14px);
  background: rgba(15, 23, 42, 0.97);
  animation: fadeInDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  overflow: hidden;
  cursor: default;
}

.leaderboard-dialog .leaderboard-header {
  cursor: grab;
  user-select: none;
}

.leaderboard-dialog .leaderboard-header:active {
  cursor: grabbing;
}

.leaderboard-header {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border-bottom: 1px solid rgba(245, 158, 11, 0.45);
  color: var(--ro-gold-bright);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.leaderboard-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.lb-header-icon {
  font-size: 20px;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}

.leaderboard-body {
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Category Navigation Tabs */
.leaderboard-nav-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 12px 0 12px;
  gap: 6px;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.leaderboard-nav-tabs::-webkit-scrollbar {
  display: none;
}

.lb-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: #94a3b8;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  padding: 9px 4px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  text-align: center;
}

.lb-tab-btn:hover {
  background: rgba(245, 158, 11, 0.18);
  color: #f8fafc;
}

.lb-tab-btn.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.2));
  border-color: rgba(245, 158, 11, 0.7);
  color: #fbbf24;
  box-shadow: 0 -2px 10px rgba(245, 158, 11, 0.3);
}

/* Sub-filter bar */
.leaderboard-subfilter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.subfilter-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #94a3b8;
}

.subfilter-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.lb-sub-pill {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lb-sub-pill:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: #fbbf24;
  color: #ffffff;
}

.lb-sub-pill.active {
  background: #f59e0b;
  border-color: #fde047;
  color: #0f172a;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

/* Top 3 Podium Section */
.leaderboard-podium-section {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  padding: 16px 16px 12px 16px;
  background: radial-gradient(circle at center top, rgba(245, 158, 11, 0.12) 0%, rgba(0, 0, 0, 0.45) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.podium-card {
  flex: 1;
  max-width: 175px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(15, 23, 42, 0.7);
  border-radius: 12px;
  padding: 10px 8px 12px 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  position: relative;
  transition: transform 0.2s ease;
}

.podium-card:hover {
  transform: translateY(-2px);
}

.podium-rank-1 {
  max-width: 195px;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.22) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 2px solid #fbbf24;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(245, 158, 11, 0.4);
  transform: scale(1.04);
}

.podium-rank-1:hover {
  transform: scale(1.06);
}

.podium-rank-2 {
  border-color: #94a3b8;
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.15) 0%, rgba(15, 23, 42, 0.9) 100%);
}

.podium-rank-3 {
  border-color: #d97706;
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.15) 0%, rgba(15, 23, 42, 0.9) 100%);
}

.podium-crown-glow {
  position: absolute;
  top: -18px;
  font-size: 26px;
  animation: crownBob 2s infinite ease-in-out;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.8));
}

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

.podium-crown {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  font-family: var(--font-hud);
}

.podium-rank-1 .podium-crown { color: #fde047; }
.podium-rank-2 .podium-crown { color: #cbd5e1; }
.podium-rank-3 .podium-crown { color: #f59e0b; }

.podium-avatar-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 6px;
  overflow: hidden;
}

.podium-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.podium-avatar img,
.podium-avatar canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.champion-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
  font-size: 28px !important;
}

.lb-table-avatar-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid rgba(56, 189, 248, 0.5);
  display: inline-block;
}

.podium-player-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.champion-name {
  color: #fbbf24;
  font-size: 13.5px;
}

.podium-player-job {
  font-size: 10.5px;
  color: #94a3b8;
  margin-bottom: 6px;
}

.podium-score-badge {
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-hud);
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 10px;
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.champion-score {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.6);
  color: #fde047;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

/* Full Rankings Table */
.leaderboard-table-container {
  min-height: 180px;
  max-height: 240px;
  overflow-y: auto;
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.leaderboard-table-container::-webkit-scrollbar {
  width: 6px;
}

.leaderboard-table-container::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.4);
  border-radius: 4px;
}

.ro-leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.ro-leaderboard-table th {
  position: sticky;
  top: 0;
  background: #1e293b;
  color: var(--ro-gold-bright);
  font-weight: 700;
  padding: 8px 10px;
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.35);
  z-index: 2;
}

.ro-leaderboard-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
}

.ro-leaderboard-table tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ro-leaderboard-table tr.is-me {
  background: rgba(56, 189, 248, 0.14) !important;
  border-left: 3px solid #38bdf8;
}

.ro-leaderboard-table tr.is-me td {
  color: #ffffff;
  font-weight: 700;
}

.status-dot-online {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

.status-dot-offline {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
}

/* My Standing Footer Card */
.my-standing-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
  border-top: 1.5px solid rgba(245, 158, 11, 0.4);
}

.my-standing-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.my-standing-avatar {
  width: 38px;
  height: 38px;
  background: rgba(245, 158, 11, 0.2);
  border: 1.5px solid var(--ro-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.my-standing-meta {
  display: flex;
  flex-direction: column;
}

.my-standing-name {
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
}

.my-standing-job {
  font-size: 11px;
  color: var(--ro-gold-bright);
  font-weight: 600;
}

.my-standing-hint {
  font-size: 10px;
  color: #94a3b8;
}

.my-standing-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.my-rank-badge {
  font-size: 15px;
  font-weight: 900;
  font-family: var(--font-hud);
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 4px 10px;
  border-radius: 8px;
}

.my-metric-badge {
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-hud);
  color: #fbbf24;
}


.lb-cache-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
  margin-left: 8px;
  font-family: var(--font-hud);
}

/* ==========================================================================
   20.5 Player Profile Inspection Modal & Champion Aura Frames
   ========================================================================== */

.inspect-profile-dialog {
  width: 480px;
  max-width: 95vw;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(12px);
  border: 2px solid var(--ro-gold);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10005;
  color: #f8fafc;
}

.inspect-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
  border-bottom: 1px solid rgba(245, 158, 11, 0.4);
  cursor: grab;
  user-select: none;
}

.inspect-profile-header:active {
  cursor: grabbing;
}

.inspect-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #fbbf24;
  font-size: 14px;
}

.inspect-profile-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Hero Section */
.inspect-hero-section {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px;
  border-radius: 10px;
}

.inspect-avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.inspect-avatar-frame {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.inspect-avatar-display {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.inspect-avatar-display img,
.inspect-avatar-display canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Aura Frames & Glowing Pulse */
.frame-normal {
  border: 2.5px solid var(--ro-gold);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}

.frame-champion {
  border: 3px solid #fbbf24;
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.8), inset 0 0 15px rgba(251, 191, 36, 0.4);
  animation: aura-champion-glow 2.2s infinite alternate;
}

.frame-silver {
  border: 3px solid #e2e8f0;
  box-shadow: 0 0 20px rgba(226, 232, 240, 0.7), inset 0 0 10px rgba(226, 232, 240, 0.3);
  animation: aura-silver-glow 2.2s infinite alternate;
}

.frame-bronze {
  border: 3px solid #f59e0b;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.7), inset 0 0 10px rgba(245, 158, 11, 0.3);
  animation: aura-bronze-glow 2.2s infinite alternate;
}

@keyframes aura-champion-glow {
  0% {
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.6), inset 0 0 10px rgba(251, 191, 36, 0.3);
    border-color: #f59e0b;
  }
  100% {
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.95), 0 0 12px #fde047, inset 0 0 20px rgba(251, 191, 36, 0.6);
    border-color: #fde047;
  }
}

@keyframes aura-silver-glow {
  0% {
    box-shadow: 0 0 12px rgba(203, 213, 225, 0.5);
    border-color: #94a3b8;
  }
  100% {
    box-shadow: 0 0 25px rgba(226, 232, 240, 0.9), inset 0 0 15px rgba(226, 232, 240, 0.5);
    border-color: #ffffff;
  }
}

@keyframes aura-bronze-glow {
  0% {
    box-shadow: 0 0 12px rgba(217, 119, 6, 0.5);
    border-color: #d97706;
  }
  100% {
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.9), inset 0 0 15px rgba(245, 158, 11, 0.5);
    border-color: #fbbf24;
  }
}

.inspect-aura-badge {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 900;
  font-family: var(--font-hud);
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-champion {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  border: 1px solid #fde047;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.badge-silver {
  background: linear-gradient(135deg, #64748b, #475569);
  color: #f8fafc;
  border: 1px solid #cbd5e1;
}

.badge-bronze {
  background: linear-gradient(135deg, #b45309, #78350f);
  color: #fde68a;
  border: 1px solid #d97706;
}

.inspect-info-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inspect-char-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inspect-char-name {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #f8fafc;
}

.status-pill-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.45);
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.status-pill-offline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(244, 63, 94, 0.16);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.45);
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.2);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.status-dot.pulse-green {
  background-color: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: inspectPulseGreen 1.8s infinite ease-in-out;
}

.status-dot.pulse-red {
  background-color: #f43f5e;
  box-shadow: 0 0 6px rgba(244, 63, 94, 0.6);
}

@keyframes inspectPulseGreen {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.inspect-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inspect-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-hud);
}

.level-badge {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
}

.job-lvl-badge {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.inspect-title-honor {
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 8px;
  border-radius: 6px;
  border-left: 3px solid #fbbf24;
}

/* Stats Section */
.inspect-section-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #94a3b8;
  margin-top: 2px;
}

.inspect-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.inspect-stat-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 10px;
  border-radius: 8px;
}

.stat-card-icon {
  font-size: 18px;
}

.stat-card-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat-card-label {
  font-size: 10px;
  color: #94a3b8;
  white-space: nowrap;
}

.stat-card-val {
  font-size: 11.5px;
  font-weight: 800;
  color: #f8fafc;
  font-family: var(--font-hud);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Actions Row */
.inspect-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.btn-inspect-action {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-inspect-whisper {
  background: rgba(56, 189, 248, 0.18);
  border-color: #38bdf8;
  color: #38bdf8;
}
.btn-inspect-whisper:hover {
  background: #38bdf8;
  color: #0f172a;
}

.btn-inspect-friend {
  background: rgba(52, 211, 153, 0.18);
  border-color: #34d399;
  color: #34d399;
}
.btn-inspect-friend:hover {
  background: #34d399;
  color: #0f172a;
}

.btn-inspect-duel {
  background: rgba(248, 113, 113, 0.18);
  border-color: #f87171;
  color: #f87171;
}
.btn-inspect-duel:hover {
  background: #f87171;
  color: #0f172a;
}

/* Clickable table rows in leaderboard */
.ro-leaderboard-table tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}

.ro-leaderboard-table tbody tr:hover {
  background: rgba(56, 189, 248, 0.12) !important;
}

.podium-column {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.podium-column:hover {
  transform: translateY(-4px);
}


/* ==========================================================================
   21. Hall of Fame Chat Honor Badges & Titles
   ========================================================================== */
.chat-honor-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: middle;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  font-family: var(--font-hud);
  letter-spacing: 0.3px;
}

.chat-honor-tag.title-gold {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.45), rgba(217, 119, 6, 0.3));
  border: 1px solid #fbbf24;
  color: #fde047;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.chat-honor-tag.title-wealth {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.45), rgba(180, 83, 9, 0.3));
  border: 1px solid #facc15;
  color: #fef08a;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.4);
}

.chat-honor-tag.title-pvp {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.5), rgba(153, 27, 27, 0.35));
  border: 1px solid #f87171;
  color: #fca5a5;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
}

.chat-honor-tag.title-duel {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.5), rgba(107, 33, 168, 0.35));
  border: 1px solid #c084fc;
  color: #e9d5ff;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.45);
}

.chat-honor-tag.title-silver {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.35), rgba(71, 85, 105, 0.25));
  border: 1px solid #cbd5e1;
  color: #f1f5f9;
  box-shadow: 0 0 6px rgba(148, 163, 184, 0.3);
}

.chat-honor-tag.title-bronze {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.35), rgba(120, 53, 15, 0.25));
  border: 1px solid #d97706;
  color: #fed7aa;
  box-shadow: 0 0 6px rgba(217, 119, 6, 0.3);
}

/* Password Visibility Toggle Eye */
.password-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.password-wrapper input {
  width: 100%;
  padding-right: 42px !important;
}

.btn-toggle-password {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  line-height: 1;
}

.btn-toggle-password:hover {
  color: #fef08a;
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-50%) scale(1.15);
}

/* Google Sign-In Container & Button (Centered Popup) */
.google-login-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
}

.google-login-btn-slot {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
}

.google-login-btn-slot iframe {
  margin: 0 auto !important;
}

.btn-google-auth {
  width: 100%;
  max-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  color: #1f2937;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-hud), sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-google-auth:hover {
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
}

.google-icon {
  flex-shrink: 0;
}

/* Guest Mode Warning Banner */
.guest-warning-banner {
  margin-top: 14px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 0 12px rgba(245, 158, 11, 0.08);
  animation: bannerPulse 3s infinite ease-in-out;
}

.guest-warn-icon {
  font-size: 20px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6));
}

.guest-warn-text {
  flex: 1;
  font-size: 12px;
  color: #fde68a;
  line-height: 1.45;
}

.guest-warn-text strong {
  color: #fbbf24;
}

.btn-guest-reg-link {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: 1px solid #fbbf24;
  padding: 6px 14px;
  border-radius: 8px;
  font-family: var(--font-hud), sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.btn-guest-reg-link:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

@keyframes bannerPulse {
  0%, 100% { border-color: rgba(245, 158, 11, 0.35); }
  50% { border-color: rgba(245, 158, 11, 0.7); box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15); }
}


/* ==========================================================================
   Grand Item Card Inspect Modal (Pillar 1 - Ragnarok Item Dossier)
   ========================================================================== */
.item-inspect-dialog {
  width: 400px;
  max-width: 95vw;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(148, 163, 184, 0.3);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 35px rgba(56, 189, 248, 0.15);
  z-index: 1050;
  position: fixed;
}

.item-inspect-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.inspect-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13.5px;
  color: #f8fafc;
}

.item-inspect-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 82vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

/* --- Hero Showcase Card (Horizontal Split Layout) --- */
.inspect-hero-card {
  position: relative;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95));
  border: 1.5px solid rgba(148, 163, 184, 0.25);
  transition: all 0.3s ease;
  overflow: hidden;
}

.inspect-hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.inspect-hero-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 10px 6px;
  min-width: 108px;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.45);
}

/* Rarity Themes */
.inspect-hero-card.rarity-common {
  border-color: rgba(148, 163, 184, 0.4);
  box-shadow: inset 0 0 25px rgba(148, 163, 184, 0.06);
}
.inspect-hero-card.rarity-common .inspect-hero-badge {
  background: rgba(148, 163, 184, 0.25);
  color: #cbd5e1;
  border: 1px solid #94a3b8;
}

.inspect-hero-card.rarity-uncommon {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: inset 0 0 30px rgba(34, 197, 94, 0.12), 0 0 15px rgba(34, 197, 94, 0.15);
}
.inspect-hero-card.rarity-uncommon .inspect-hero-badge {
  background: rgba(34, 197, 94, 0.25);
  color: #4ade80;
  border: 1px solid #22c55e;
}

.inspect-hero-card.rarity-rare {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: inset 0 0 35px rgba(56, 189, 248, 0.15), 0 0 20px rgba(56, 189, 248, 0.2);
}
.inspect-hero-card.rarity-rare .inspect-hero-badge {
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  border: 1px solid #38bdf8;
}

.inspect-hero-card.rarity-epic {
  border-color: rgba(168, 85, 247, 0.65);
  box-shadow: inset 0 0 40px rgba(168, 85, 247, 0.18), 0 0 25px rgba(168, 85, 247, 0.25);
}
.inspect-hero-card.rarity-epic .inspect-hero-badge {
  background: rgba(168, 85, 247, 0.3);
  color: #c084fc;
  border: 1px solid #a855f7;
}

.inspect-hero-card.rarity-legendary {
  border-color: rgba(245, 158, 11, 0.75);
  box-shadow: inset 0 0 45px rgba(245, 158, 11, 0.22), 0 0 30px rgba(245, 158, 11, 0.35);
  background: linear-gradient(135deg, rgba(69, 26, 3, 0.6), rgba(15, 23, 42, 0.95));
}
.inspect-hero-card.rarity-legendary .inspect-hero-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(217, 119, 6, 0.6));
  color: #fef08a;
  border: 1px solid #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.inspect-hero-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  margin-bottom: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Hero Art Container & Floating Animation */
.inspect-hero-art-box {
  position: relative;
  width: 95px;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inspect-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: itemHeroFloat 3.2s ease-in-out infinite;
  z-index: 2;
}

.inspect-hero-art canvas {
  width: 80px !important;
  height: 80px !important;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.7));
}

.inspect-hero-art .emoji-fallback {
  font-size: 64px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.7));
}

.inspect-art-shadow {
  position: absolute;
  bottom: 4px;
  width: 60px;
  height: 12px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 50%;
  filter: blur(5px);
  animation: itemShadowPulse 3.2s ease-in-out infinite;
  z-index: 1;
}

@keyframes itemHeroFloat {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-7px) scale(1.04); }
}

@keyframes itemShadowPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(0.8); opacity: 0.2; }
}

.inspect-hero-titles {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  text-align: left;
}

.inspect-item-thainame {
  font-size: 17px;
  font-weight: 800;
  color: #f8fafc;
  font-family: 'Kanit', 'Outfit', sans-serif;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
  line-height: 1.25;
}

.inspect-item-engname {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
}

.inspect-item-type-tag {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 3px 12px;
  border-radius: 12px;
}

/* --- Lore Block --- */
.inspect-lore-section {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
}

.inspect-lore-header {
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 4px;
}

.inspect-lore-text {
  font-size: 12px;
  line-height: 1.45;
  color: #cbd5e1;
  font-style: italic;
  white-space: pre-line;
}

/* --- Stats & Smart Comparison --- */
.inspect-stats-section {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
}

.inspect-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 8px;
}

.inspect-compare-tag {
  font-size: 9.5px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 6px;
  border-radius: 6px;
}

.inspect-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.inspect-stat-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11.5px;
}

.stat-pill-label {
  color: #94a3b8;
  font-weight: 600;
}

.stat-pill-val {
  color: #f8fafc;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
}

.diff-positive {
  color: #4ade80;
  font-size: 10px;
  font-weight: 800;
}

.diff-negative {
  color: #f87171;
  font-size: 10px;
  font-weight: 800;
}

/* --- Requirements & Sockets --- */
.inspect-reqs-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 11.5px;
}

.inspect-req-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.req-label {
  color: #94a3b8;
  font-weight: 600;
}

.req-val {
  color: #f1f5f9;
  font-weight: 700;
}

/* --- Footer Action Buttons --- */
.inspect-footer-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.btn-inspect-primary {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: 1.5px solid #60a5fa;
  color: #ffffff;
  font-weight: 800;
  font-size: 12.5px;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
  transition: all 0.2s ease;
}

.btn-inspect-primary:hover {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.55);
}

.btn-inspect-secondary {
  flex: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(56, 189, 248, 0.15);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-weight: 700;
  font-size: 11.5px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-inspect-secondary:hover {
  background: rgba(56, 189, 248, 0.3);
  border-color: #38bdf8;
  transform: translateY(-1.5px);
}

.btn-inspect-cancel {
  flex: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(5, 150, 105, 0.35));
  border: 1.5px solid rgba(52, 211, 153, 0.55);
  color: #a7f3d0;
  font-weight: 800;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2);
  transition: all 0.2s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.btn-inspect-cancel:hover {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #6ee7b7;
  color: #ffffff;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.55);
}

.btn-inspect-cancel.btn-inspect-full-close {
  flex: 1;
  width: 100%;
  padding: 11px 18px;
  font-size: 13px;
  background: linear-gradient(135deg, #059669, #047857);
  border: 1.5px solid #34d399;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.4);
}

.btn-inspect-cancel.btn-inspect-full-close:hover {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #a7f3d0;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.65);
}


/* ==========================================================================
   Interactive Chat Item Links (Pillar 2 - Item Chat Linking)
   ========================================================================== */
.chat-item-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  margin: 0 2px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  vertical-align: middle;
  text-decoration: none;
}

.chat-item-link.rarity-common {
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: #f1f5f9;
}

.chat-item-link.rarity-uncommon {
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.45);
  color: #4ade80;
}

.chat-item-link.rarity-rare {
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #38bdf8;
}

.chat-item-link.rarity-epic {
  background: rgba(168, 85, 247, 0.22);
  border: 1px solid rgba(168, 85, 247, 0.55);
  color: #c084fc;
}

.chat-item-link.rarity-legendary {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35));
  border: 1px solid #fbbf24;
  color: #fef08a;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}

.chat-item-link:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.25);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   Dynamic Floating Item Tooltip (Pillar 3 - Fast Hover Preview & Comparison)
   ========================================================================== */
.item-floating-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  width: 290px;
  max-width: 90vw;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 12px;
  border: 1.5px solid rgba(148, 163, 184, 0.35);
  padding: 12px 14px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.75), 0 0 20px rgba(56, 189, 248, 0.15);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 0.1s ease, transform 0.08s ease;
  transform: translate(14px, 14px);
}

.item-floating-tooltip.rarity-common {
  border-color: rgba(148, 163, 184, 0.45);
}
.item-floating-tooltip.rarity-uncommon {
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.75), 0 0 20px rgba(34, 197, 94, 0.2);
}
.item-floating-tooltip.rarity-rare {
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.75), 0 0 22px rgba(56, 189, 248, 0.25);
}
.item-floating-tooltip.rarity-epic {
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.75), 0 0 25px rgba(168, 85, 247, 0.3);
}
.item-floating-tooltip.rarity-legendary {
  border-color: rgba(245, 158, 11, 0.85);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.75), 0 0 30px rgba(245, 158, 11, 0.4);
}

/* Tooltip Header */
.tooltip-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.tooltip-icon-box {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  flex-shrink: 0;
}

.tooltip-icon-box canvas {
  width: 38px !important;
  height: 38px !important;
  image-rendering: pixelated;
}

.tooltip-title-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.tooltip-thainame {
  font-size: 14.5px;
  font-weight: 800;
  color: #f8fafc;
  font-family: 'Kanit', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tooltip-engname {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tooltip-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.tooltip-rarity-badge {
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.tooltip-type-badge {
  font-size: 9.5px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 1px 7px;
  border-radius: 8px;
}

/* Tooltip Stats Grid */
.tooltip-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  padding: 6px 8px;
}

.tooltip-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.tooltip-stat-lbl {
  color: #94a3b8;
  font-weight: 600;
}

.tooltip-stat-val {
  color: #f8fafc;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Tooltip Reqs Bar */
.tooltip-reqs-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.03);
  padding: 4px 8px;
  border-radius: 6px;
}

/* Tooltip Description Excerpt */
.tooltip-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.35;
  font-style: italic;
  white-space: pre-line;
  max-height: 55px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tooltip Shortcut Footer */
.tooltip-footer-hints {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 6px;
  font-size: 9.5px;
  color: #64748b;
  font-weight: 600;
}

.tooltip-hint-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tooltip-hint-item span.key-pill {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 700;
}


/* ==========================================
   Inspect Player Equipment Modal Styling
========================================== */
.inspect-player-dialog {
  width: 535px;
  max-width: 95vw;
  background: rgba(15, 23, 42, 0.96) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 35px rgba(56, 189, 248, 0.25) !important;
  border-radius: 12px;
  backdrop-filter: blur(14px);
  z-index: 1050;
}

.inspect-player-header {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.5) !important;
  color: #f0f9ff !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.inspect-player-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inspect-player-meta-badge {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.85), rgba(3, 105, 161, 0.85));
  border: 1px solid rgba(56, 189, 248, 0.6);
  color: #e0f2fe;
  font-weight: 800;
  font-size: 11px;
  padding: 3px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 10px rgba(56, 189, 248, 0.3);
  text-align: center;
  letter-spacing: 0.5px;
  margin-top: 6px;
}

.inspect-player-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.inspect-footer-hint {
  font-size: 11px;
  color: #94a3b8;
}

/* ==========================================
   Friend List System Modal Styling
========================================== */
.btn-highlight-friends {
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.45) 0%, rgba(4, 120, 87, 0.65) 100%) !important;
  border: 1px solid #34d399 !important;
  border-bottom: 2px solid #047857 !important;
  color: #a7f3d0 !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}
.btn-highlight-friends:hover {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.65) 0%, rgba(5, 150, 105, 0.85) 100%) !important;
  border-color: #6ee7b7 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
}

.friend-list-dialog {
  width: 440px;
  max-width: 95vw;
  background: rgba(13, 17, 28, 0.96) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(245, 158, 11, 0.15) !important;
  border-radius: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1050;
  overflow: hidden;
  animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.friend-list-header {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95)) !important;
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
  font-family: var(--font-hud), 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: move;
  user-select: none;
}

.header-left-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.friend-list-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.friend-add-bar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.friend-add-input {
  flex: 1;
  background: rgba(15, 23, 42, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 9px 12px;
  color: #f8fafc;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
}

.friend-add-input:focus {
  border-color: #38bdf8;
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.friend-add-input::placeholder {
  color: #64748b;
  font-size: 12.5px;
}

.btn-friend-add {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: 1.5px solid #60a5fa;
  color: #ffffff;
  font-family: var(--font-hud), 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

.btn-friend-add:hover {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.6);
  transform: translateY(-1px);
}

.friend-stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
}

.friend-count-badge {
  font-size: 12px;
  color: #cbd5e1;
  font-weight: 700;
  font-family: var(--font-hud);
  display: flex;
  align-items: center;
  gap: 10px;
}

.friend-online-pill {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #86efac;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.btn-friend-refresh {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-hud);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-friend-refresh:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: translateY(-1px);
}

.friend-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.friend-cards-list::-webkit-scrollbar {
  width: 5px;
}
.friend-cards-list::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.4);
  border-radius: 3px;
}

.friend-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.friend-card:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.friend-card.online {
  border-left: 3.5px solid #22c55e;
  box-shadow: inset 4px 0 12px rgba(34, 197, 94, 0.1);
}

.friend-card.offline {
  border-left: 3.5px solid #64748b;
  opacity: 0.8;
}

.friend-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.friend-avatar-icon {
  font-size: 22px;
  background: rgba(15, 23, 42, 0.9);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.friend-info-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.friend-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.friend-card-name {
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
  font-family: var(--font-hud), 'Outfit', sans-serif;
}

.friend-status-dot {
  font-size: 10px;
}

.friend-card-meta {
  font-size: 11.5px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.friend-meta-job {
  color: #cbd5e1;
  font-weight: 600;
}

.friend-meta-map {
  color: #38bdf8;
  font-weight: 700;
}

.friend-meta-offline {
  color: #94a3b8;
}

.friend-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.friend-action-btn {
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-hud);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.friend-action-btn:hover {
  transform: translateY(-1px);
}

.friend-btn-whisper {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.85), rgba(3, 105, 161, 0.85));
  border-color: #38bdf8;
  color: #f0f9ff;
}
.friend-btn-whisper:hover {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.friend-btn-inspect {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.85), rgba(180, 83, 9, 0.85));
  border-color: #fbbf24;
  color: #fef3c7;
}
.friend-btn-inspect:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.friend-btn-remove {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  padding: 5px 8px;
}
.friend-btn-remove:hover {
  background: rgba(239, 68, 68, 0.8);
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.friend-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  background: rgba(15, 23, 42, 0.4);
  border: 1.5px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #94a3b8;
  text-align: center;
  gap: 10px;
}

.friend-empty-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.8);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
}

.friend-empty-icon {
  font-size: 26px;
}

.friend-empty-text {
  font-size: 14.5px;
  color: #f8fafc;
  font-weight: 800;
  font-family: var(--font-hud);
}

.friend-empty-sub {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  max-width: 320px;
}

.friend-list-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
}

.friend-footer-hint {
  font-size: 11.5px;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  display: block;
  text-align: center;
}

/* ==========================================================================
   Player Vending System (ระบบตั้งร้านค้าขายของของผู้เล่น)
   ========================================================================== */

.btn-highlight-vending {
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.45) 0%, rgba(180, 83, 9, 0.65) 100%) !important;
  border: 1px solid #fbbf24 !important;
  border-bottom: 2px solid #b45309 !important;
  color: #fef08a !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

.btn-highlight-vending:hover {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.65) 0%, rgba(217, 119, 6, 0.85) 100%) !important;
  border-color: #fef08a !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
}

.btn-highlight-vending.is-vending-active {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.35) 0%, rgba(185, 28, 28, 0.45) 100%) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
  animation: pulseVendingGlow 1.8s infinite ease-in-out;
}

@keyframes pulseVendingGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 18px rgba(239, 68, 68, 0.8); }
}

.vending-dialog {
  width: 520px;
  max-width: 95vw;
  background: rgba(15, 23, 42, 0.95);
  border: 2px solid #f59e0b;
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 20px rgba(245, 158, 11, 0.25);
  backdrop-filter: blur(10px);
  z-index: 10000;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
}

.vending-header {
  background: linear-gradient(180deg, #b45309 0%, #78350f 100%) !important;
  border-bottom: 1.5px solid #f59e0b;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  cursor: grab;
}

.vending-header:active {
  cursor: grabbing;
}

.vending-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 80vh;
  overflow-y: auto;
}

.vending-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(30, 41, 59, 0.7);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.vending-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #fef08a;
  white-space: nowrap;
}

.vending-title-input {
  flex: 1;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #ffffff;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.vending-title-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.vending-panels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vending-sub-panel {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 250px;
  max-height: 320px;
}

.vending-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vending-badge-count {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #f59e0b;
  color: #fef08a;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.vending-badge-hint {
  font-size: 10px;
  color: #94a3b8;
}

.vending-sell-slots-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

.vending-sell-slot-card {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 5px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: border-color 0.2s;
}

.vending-sell-slot-card:hover {
  border-color: #fbbf24;
}

.vending-slot-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.vending-slot-item-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow: hidden;
}

.vending-slot-item-icon {
  position: relative;
  overflow: visible;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vending-slot-item-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vending-slot-btn-remove {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.vending-slot-btn-remove:hover {
  background: #ef4444;
  color: #ffffff;
}

.vending-slot-bottom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.vending-slot-qty-tag {
  color: #94a3b8;
  font-weight: 600;
}

.vending-slot-price-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.vending-slot-price-input {
  width: 80px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 3px;
  color: #fef08a;
  padding: 2px 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-align: right;
  outline: none;
}

.vending-slot-price-input:focus {
  border-color: #f59e0b;
}

.vending-inven-picker-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  align-content: flex-start;
  padding-right: 4px;
}

.vending-inven-item-cell {
  width: 42px;
  height: 42px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vending-inven-item-cell:hover {
  border-color: #38bdf8;
  transform: scale(1.05);
  background: rgba(51, 65, 85, 0.9);
}

.vending-inven-item-cell.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(80%);
}

.vending-inven-item-qty {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 9.5px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 3px #000000, 0 0 3px #000000;
}

.vending-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vending-footer-hint {
  font-size: 11px;
  color: #cbd5e1;
  text-align: center;
}

.vending-footer-btns {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-vending-start {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 1px solid #fbbf24;
  color: #0f172a;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}

.btn-vending-start:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.6);
}

.btn-vending-cancel {
  background: rgba(51, 65, 85, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #cbd5e1;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-vending-cancel:hover {
  background: rgba(71, 85, 105, 0.9);
  color: #ffffff;
}

/* --- Vending Buyer Modal Styles --- */

.vending-buyer-dialog {
  width: 480px;
  min-width: 420px;
  max-width: 90vw;
  min-height: 420px;
  max-height: 90vh;
  resize: both;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-color: #38bdf8;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 20px rgba(56, 189, 248, 0.25);
}

.vending-buyer-dialog .vending-header {
  background: linear-gradient(180deg, #0369a1 0%, #075985 100%) !important;
  border-bottom: 1.5px solid #38bdf8;
}

.vending-buyer-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
}

.vending-seller-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
  padding: 8px 12px;
}

.vending-seller-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vending-seller-avatar {
  font-size: 24px;
}

.vending-seller-name {
  font-size: 13px;
  font-weight: 800;
  color: #38bdf8;
}

.vending-seller-meta {
  font-size: 10.5px;
  color: #94a3b8;
}

.vending-buyer-zeny {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 11px;
  color: #cbd5e1;
}

.vending-zeny-val {
  font-size: 13.5px;
  font-weight: 800;
  color: #fef08a;
}

.vending-buyer-items-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 140px;
}

.vending-items-list-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  padding: 0 6px;
}

.vending-buyer-items-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

.vending-buyer-card {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vending-buyer-card:hover {
  border-color: #38bdf8;
  background: rgba(51, 65, 85, 0.8);
}

.vending-buyer-card.selected {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.vending-buyer-card-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vending-buyer-card-icon {
  position: relative;
  overflow: visible;
  width: 32px;
  height: 32px;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vending-buyer-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

.vending-buyer-card-stock {
  font-size: 10.5px;
  color: #94a3b8;
}

.vending-buyer-card-price {
  font-size: 13px;
  font-weight: 800;
  color: #fef08a;
  text-align: right;
}

.vending-inven-item-cell.has-options {
  position: relative;
}
.vending-inven-item-cell.has-options.rarity-legendary {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}
.vending-inven-item-cell.has-options.rarity-epic {
  border-color: #a855f7 !important;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.35);
}
.vending-inven-item-cell.has-options.rarity-rare {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.3);
}
.vending-inven-item-cell.has-options.rarity-magic {
  border-color: #22c55e !important;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
}

.vending-card-opt-tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  line-height: 1.2;
}
.vending-card-opt-tag.tier-magic {
  background: rgba(21, 128, 61, 0.35);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.6);
}
.vending-card-opt-tag.tier-rare {
  background: rgba(3, 105, 161, 0.35);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.6);
}
.vending-card-opt-tag.tier-epic {
  background: rgba(107, 33, 168, 0.35);
  color: #c084fc;
  border: 1px solid rgba(192, 132, 252, 0.6);
}
.vending-card-opt-tag.tier-legendary {
  background: rgba(120, 53, 15, 0.4);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.7);
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}

.vending-card-opts-preview {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 6px;
  line-height: 1.2;
}
.vending-card-opts-preview .opt-pill {
  background: rgba(15, 23, 42, 0.6);
  padding: 1px 4px;
  border-radius: 3px;
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.vending-buyer-card.has-options.rarity-legendary,
.vending-monitor-card.has-options.rarity-legendary,
.vending-sell-slot-card.has-options.rarity-legendary {
  border-color: rgba(251, 191, 36, 0.6) !important;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.25);
}
.vending-buyer-card.has-options.rarity-epic,
.vending-monitor-card.has-options.rarity-epic,
.vending-sell-slot-card.has-options.rarity-epic {
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.25);
}
.vending-buyer-card.has-options.rarity-rare,
.vending-monitor-card.has-options.rarity-rare,
.vending-sell-slot-card.has-options.rarity-rare {
  border-color: rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.2);
}
.vending-buyer-card.has-options.rarity-magic,
.vending-monitor-card.has-options.rarity-magic,
.vending-sell-slot-card.has-options.rarity-magic {
  border-color: rgba(34, 197, 94, 0.6) !important;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.2);
}

/* Badges positioned inside vending item icons */
.vending-slot-item-icon .item-refine-badge,
.vending-buyer-card-icon .item-refine-badge,
.vending-monitor-card-icon .item-refine-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  font-size: 8px;
  padding: 0.5px 3.5px;
  line-height: 1.1;
  z-index: 5;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.vending-slot-item-icon .item-option-tier-dot,
.vending-buyer-card-icon .item-option-tier-dot,
.vending-monitor-card-icon .item-option-tier-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 8px;
  padding: 0.5px 3.5px;
  line-height: 1.1;
  z-index: 5;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.vending-selected-opts-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px 8px;
  background: rgba(15, 23, 42, 0.7);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
}
.vending-selected-opts-panel .opt-pill {
  color: #38bdf8;
  font-weight: 600;
  background: rgba(3, 105, 161, 0.2);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.vending-buy-action-panel {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.vending-buy-item-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  gap: 8px;
}

.vending-buy-item-name {
  font-weight: 700;
  color: #ffffff;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vending-buy-qty-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vending-qty-btn {
  width: 24px;
  height: 24px;
  background: rgba(51, 65, 85, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 800;
}

.vending-qty-btn-max {
  background: rgba(2, 132, 199, 0.8);
  border: 1px solid #38bdf8;
  color: #ffffff;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.vending-buyer-qty-input {
  width: 44px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
  padding: 2px;
}

.vending-buy-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 6px;
}

.vending-total-label {
  font-size: 12px;
  color: #cbd5e1;
  font-weight: 600;
}

.vending-total-cost {
  font-size: 16px;
  font-weight: 900;
  color: #fbbf24;
}

.btn-vending-buy {
  width: 100%;
  background: linear-gradient(135deg, #10b981, #059669);
  border: 1px solid #34d399;
  color: #ffffff;
  font-weight: 800;
  padding: 9px;
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}

.btn-vending-buy:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.6);
}

.btn-vending-buy.insufficient-zeny {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border: 1px solid #f87171;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
}

.btn-vending-buy.insufficient-zeny:hover {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.7);
}

.vending-card-btn-inspect {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.15s ease;
  vertical-align: middle;
}

.vending-card-btn-inspect:hover {
  background: #38bdf8;
  color: #0f172a;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.vending-btn-inspect-pill {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid #38bdf8;
  color: #38bdf8;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vending-btn-inspect-pill:hover {
  background: #38bdf8;
  color: #0f172a;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

/* Vending Order Confirmation Modal */
.vending-order-confirm-window {
  width: 380px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid #f59e0b;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.35);
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100000;
}

.ro-modal-header-gold {
  background: linear-gradient(135deg, #78350f, #451a03);
  border-bottom: 1px solid #f59e0b;
}

.vending-confirm-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vending-confirm-item-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 10px 12px;
}

.vending-confirm-icon-box {
  width: 48px;
  height: 48px;
  background: rgba(2, 6, 23, 0.85);
  border: 1px solid #f59e0b;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.vending-confirm-item-details {
  flex: 1;
}

.vending-confirm-item-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #fef08a;
  line-height: 1.2;
}

.vending-confirm-seller-tag {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
}

.vending-confirm-seller-tag span {
  color: #38bdf8;
  font-weight: 700;
}

.vending-confirm-receipt {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vending-confirm-receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #cbd5e1;
}

.vending-confirm-receipt-row .receipt-val {
  font-weight: 700;
  color: #ffffff;
}

.vending-confirm-receipt-row .receipt-val-gold {
  font-size: 15px;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}

.vending-confirm-receipt-row .receipt-val-green {
  font-weight: 800;
  color: #34d399;
}

.vending-confirm-receipt-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 2px 0;
}

.vending-confirm-actions {
  display: flex;
  gap: 8px;
}

.vending-btn-confirm-yes {
  flex: 1;
  background: linear-gradient(135deg, #10b981, #059669);
  border: 1px solid #34d399;
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  padding: 9px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
  transition: all 0.2s;
}

.vending-btn-confirm-yes:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.7);
}

.vending-btn-confirm-no {
  background: rgba(51, 65, 85, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #cbd5e1;
  font-weight: 700;
  font-size: 12px;
  padding: 9px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.vending-btn-confirm-no:hover {
  background: #475569;
  color: #ffffff;
}

/* Seller Active Vending Shop Monitor */
.vending-monitor-dialog {
  width: 480px;
  min-width: 420px;
  max-width: 90vw;
  min-height: 380px;
  max-height: 90vh;
  resize: both;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
}

.vending-monitor-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  height: calc(100% - 46px);
  box-sizing: border-box;
}

.vending-monitor-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
}

.vending-monitor-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vending-monitor-stat-item .stat-label {
  font-size: 11px;
  color: #94a3b8;
}

.vending-monitor-stat-item .stat-val-gold {
  font-size: 14.5px;
  font-weight: 800;
  color: #fbbf24;
}

.vending-monitor-stat-item .stat-val-blue {
  font-size: 14.5px;
  font-weight: 800;
  color: #38bdf8;
}

.vending-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}

.vending-status-badge.active {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
  color: #34d399;
}

.vending-monitor-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #cbd5e1;
  padding: 0 2px;
}

.vending-monitor-hint-text {
  font-size: 10.5px;
  font-weight: normal;
  color: #64748b;
}

.vending-monitor-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  padding-right: 4px;
}

.vending-monitor-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 6px 10px;
  transition: all 0.15s ease;
}

.vending-monitor-card:hover {
  background: rgba(51, 65, 85, 0.8);
  border-color: #38bdf8;
}

.vending-monitor-card.sold-out {
  opacity: 0.55;
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(239, 68, 68, 0.3);
}

.vending-monitor-card-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vending-monitor-card-icon {
  position: relative;
  overflow: visible;
  width: 32px;
  height: 32px;
  background: rgba(15, 23, 42, 0.9);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vending-monitor-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

.vending-monitor-card-price {
  font-size: 11px;
  color: #fbbf24;
  font-weight: 600;
}

.vending-monitor-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vending-stock-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

.vending-stock-tag.in-stock {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.vending-stock-tag.sold-out {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #f87171;
}

.vending-monitor-sales-log {
  background: rgba(2, 6, 23, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px 10px;
  min-height: 75px;
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}

.vending-sales-empty {
  color: #64748b;
  text-align: center;
  padding: 10px 0;
  font-style: italic;
}

.vending-sale-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.vending-sale-row:last-child {
  border-bottom: none;
}

.vending-sale-buyer {
  color: #38bdf8;
  font-weight: 700;
}

.vending-sale-item {
  color: #fef08a;
  font-weight: 600;
}

.vending-sale-zeny {
  color: #34d399;
  font-weight: 800;
}

.vending-monitor-footer {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.btn-vending-monitor-stop {
  flex: 1;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border: 1px solid #ef4444;
  color: #ffffff;
  font-weight: 800;
  font-size: 12.5px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.35);
  transition: all 0.2s;
}

.btn-vending-monitor-stop:hover {
  background: linear-gradient(135deg, #b91c1c, #7f1d1d);
  box-shadow: 0 0 14px rgba(220, 38, 38, 0.6);
}

.btn-vending-monitor-hide {
  background: rgba(51, 65, 85, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #cbd5e1;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-vending-monitor-hide:hover {
  background: #475569;
  color: #ffffff;
}

/* Resizer Corner Grips for Vending Windows (Native & Custom Handle) */
.vending-dialog::-webkit-resizer {
  background: transparent;
}

.ro-window-resizer {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: nwse-resize;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 3px 3px 0;
  user-select: none;
  border-bottom-right-radius: 11px;
  background: linear-gradient(135deg, transparent 40%, rgba(245, 158, 11, 0.35) 40%, rgba(217, 119, 6, 0.75) 100%);
  animation: resizerPulseGlowGold 2.2s ease-in-out 26 forwards;
  transition: all 0.2s ease;
  pointer-events: auto;
}

.ro-window-resizer::after {
  content: '◢';
  font-size: 15px;
  line-height: 1;
  color: #fef08a;
  text-shadow: 0 0 6px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.9);
  transition: all 0.2s ease;
  transform-origin: bottom right;
}

.ro-window-resizer:hover {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, transparent 35%, rgba(245, 158, 11, 0.65) 35%, rgba(245, 158, 11, 1) 100%);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.95);
}

.ro-window-resizer:hover::after {
  color: #ffffff;
  transform: scale(1.25);
  text-shadow: 0 0 8px #ffffff, 0 0 16px #fbbf24;
}

.ro-window-resizer:active {
  transform: scale(0.95);
}

@keyframes resizerPulseGlowGold {
  0%, 100% {
    opacity: 0.8;
    filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.5));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 1)) drop-shadow(0 0 18px rgba(251, 191, 36, 0.8));
  }
}

/* Buyer theme Cyan Resizer */
.vending-buyer-dialog .ro-window-resizer {
  background: linear-gradient(135deg, transparent 40%, rgba(56, 189, 248, 0.35) 40%, rgba(3, 105, 161, 0.75) 100%);
  animation: resizerPulseGlowCyan 2.2s ease-in-out 26 forwards;
}

.vending-buyer-dialog .ro-window-resizer::after {
  color: #bae6fd;
  text-shadow: 0 0 6px #0284c7, 0 0 12px rgba(56, 189, 248, 0.9);
}

.vending-buyer-dialog .ro-window-resizer:hover {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, transparent 35%, rgba(56, 189, 248, 0.65) 35%, rgba(56, 189, 248, 1) 100%);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.95);
}

.vending-buyer-dialog .ro-window-resizer:hover::after {
  color: #ffffff;
  transform: scale(1.25);
  text-shadow: 0 0 8px #ffffff, 0 0 16px #38bdf8;
}

@keyframes resizerPulseGlowCyan {
  0%, 100% {
    opacity: 0.8;
    filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.5));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 1)) drop-shadow(0 0 18px rgba(56, 189, 248, 0.8));
  }
}

/* =============================================================
   Chat Role Badges & Honor Titles in Chat Box
   ============================================================= */
.chat-role-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: middle;
  letter-spacing: 0.3px;
  font-family: var(--font-hud);
}

.chat-role-admin {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(180, 83, 9, 0.45));
  color: #fef08a;
  border: 1px solid rgba(251, 191, 36, 0.8);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
  text-shadow: 0 0 4px rgba(245, 158, 11, 0.8);
}

.chat-role-gm {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(2, 132, 199, 0.45));
  color: #e0f2fe;
  border: 1px solid rgba(56, 189, 248, 0.8);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
  text-shadow: 0 0 4px rgba(56, 189, 248, 0.8);
}

.chat-honor-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: middle;
  font-family: var(--font-hud);
}

.chat-honor-tag.title-gold {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(180, 83, 9, 0.4));
  color: #fde047;
  border: 1px solid rgba(251, 191, 36, 0.7);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.3);
}

.chat-honor-tag.title-silver {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.25), rgba(71, 85, 105, 0.4));
  color: #f1f5f9;
  border: 1px solid rgba(203, 213, 225, 0.7);
}

.chat-honor-tag.title-bronze {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.25), rgba(120, 53, 15, 0.4));
  color: #fdba74;
  border: 1px solid rgba(217, 119, 6, 0.7);
}

.chat-msg.admin_chat {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(30, 41, 59, 0.4) 100%);
  border-left: 3px solid #fbbf24;
  padding-left: 6px;
  border-radius: 2px 4px 4px 2px;
}

/* =============================================================
   MMORPG Game Loading Screen (FTUE Phased Transition)
   ============================================================= */
.game-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: #09090b url('../DolaBG.jpg') no-repeat center center;
  background-size: cover;
  opacity: 1;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 24px 34px;
  box-sizing: border-box;
  overflow: hidden;
}

.game-loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-backdrop-overlay {
  position: absolute;
  inset: 0;
  /* Dark bottom vignette + subtle ambient depth preserving DolaOnline logo and characters */
  background: linear-gradient(
    to bottom,
    rgba(10, 15, 29, 0.12) 0%,
    transparent 30%,
    rgba(10, 15, 29, 0.3) 60%,
    rgba(9, 13, 24, 0.85) 88%,
    rgba(7, 10, 18, 0.95) 100%
  );
  pointer-events: none;
}

.loading-content-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  animation: loadingContentFadeIn 0.4s ease-out;
}

@keyframes loadingContentFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.loading-progress-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 14px;
  padding: 12px 18px 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.loading-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-hud);
  padding: 0 2px;
}

.loading-status-text {
  color: #f1f5f9;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.loading-progress-pct {
  color: #fbbf24;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
}

.loading-bar-frame {
  width: 100%;
  height: 16px;
  background: rgba(8, 12, 22, 0.9);
  border: 1px solid rgba(251, 191, 36, 0.6);
  border-radius: 10px;
  padding: 2.5px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 14px rgba(245, 158, 11, 0.25);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.loading-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 60%, #fffbeb 100%);
  border-radius: 6px;
  transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.9);
}

.loading-bar-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.8) 50%, transparent 100%);
  animation: loadingSweepLight 1.5s infinite;
}

@keyframes loadingSweepLight {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.loading-tip-card {
  width: 100%;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: #cbd5e1;
  text-align: left;
  line-height: 1.45;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

.loading-tip-icon {
  font-size: 18px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}

.loading-tip-text {
  flex: 1;
}

@media (max-width: 640px) {
  .game-loading-screen {
    padding: 0 14px 22px;
  }
  .loading-content-container {
    gap: 10px;
  }
  .loading-progress-wrapper {
    padding: 10px 14px 12px;
  }
  .loading-bar-frame {
    height: 14px;
  }
  .loading-status-text {
    font-size: 12px;
  }
  .loading-progress-pct {
    font-size: 13px;
  }
  .loading-tip-card {
    padding: 8px 12px;
    font-size: 11.5px;
    gap: 8px;
  }
}

/* =============================================================
   Custom In-Game Alert / Warning Modal (Classic RO Themed Dialog)
   ============================================================= */
.game-custom-alert-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 420px;
  z-index: 1000005;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1.5px solid rgba(251, 191, 36, 0.7);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 24px rgba(245, 158, 11, 0.35);
  animation: customAlertPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

@keyframes customAlertPop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.custom-alert-header {
  background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
  border-bottom: 1px solid rgba(251, 191, 36, 0.4);
  padding: 8px 12px;
}

.custom-alert-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.custom-alert-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.custom-alert-emblem {
  font-size: 38px;
  filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.6));
  flex-shrink: 0;
  animation: emblemWiggle 1.8s ease-in-out infinite;
}

@keyframes emblemWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

.custom-alert-text-group {
  flex: 1;
  text-align: left;
}

.custom-alert-msg-title {
  font-size: 15px;
  font-weight: 800;
  color: #fef08a;
  font-family: var(--font-hud);
  margin-bottom: 4px;
}

.custom-alert-message {
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.45;
}

.custom-alert-details {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

.custom-alert-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-alert-detail-label {
  color: #94a3b8;
}

.custom-alert-detail-value {
  font-weight: 700;
  color: #f8fafc;
}

.custom-alert-detail-value.warn {
  color: #fb923c;
}

.custom-alert-detail-value.limit {
  color: #38bdf8;
}

.custom-alert-actions {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.btn-custom-alert-ok {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  border: 1px solid #fef08a;
  font-weight: 800;
  font-size: 13.5px;
  padding: 9px 28px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  transition: all 0.15s ease;
  font-family: var(--font-hud);
}

.btn-custom-alert-ok:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.6);
  filter: brightness(1.1);
}

.btn-custom-alert-ok:active {
  transform: translateY(1px);
}

/* ==========================================================================
   💎 Equipment Random Options System (Sub-stats)
   ========================================================================== */
.tooltip-options-section {
  margin: 6px 0;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  overflow: hidden;
}

.tooltip-options-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.tooltip-options-section.magic {
  border-color: rgba(74, 222, 128, 0.4);
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.4), rgba(15, 23, 42, 0.8));
}
.tooltip-options-section.rare {
  border-color: rgba(56, 189, 248, 0.45);
  background: linear-gradient(135deg, rgba(120, 74, 110, 0.4), rgba(15, 23, 42, 0.8));
}
.tooltip-options-section.epic {
  border-color: rgba(192, 132, 252, 0.5);
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.4), rgba(15, 23, 42, 0.8));
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.15);
}
.tooltip-options-section.legendary {
  border-color: rgba(251, 191, 36, 0.6);
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.45), rgba(15, 23, 42, 0.85));
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25);
}

.tooltip-options-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}

.tooltip-options-title {
  color: #f1f5f9;
  font-weight: 700;
  font-family: var(--font-hud);
}

.tooltip-options-tier {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.tooltip-options-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tooltip-option-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #f8fafc;
  line-height: 1.35;
}

.option-bullet {
  font-size: 9px;
  color: #fbbf24;
}

.option-label {
  font-weight: 600;
  color: #fde047;
}

.tooltip-options-section.magic .option-label { color: #86efac; }
.tooltip-options-section.rare .option-label { color: #7dd3fc; }
.tooltip-options-section.epic .option-label { color: #d8b4fe; }
.tooltip-options-section.legendary .option-label { color: #fef08a; text-shadow: 0 0 6px rgba(251, 191, 36, 0.5); }

/* Option Badge / Indicator on Item Cells (Top-Right Corner) */
.item-option-tier-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 8.5px;
  font-weight: 800;
  font-family: var(--font-hud);
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1.1;
  z-index: 5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  user-select: none;
}

.item-option-tier-dot.tier-magic {
  background: #15803d;
  color: #4ade80;
  border: 1px solid #4ade80;
}
.item-option-tier-dot.tier-rare {
  background: #0369a1;
  color: #38bdf8;
  border: 1px solid #38bdf8;
}
.item-option-tier-dot.tier-epic {
  background: #6b21a8;
  color: #c084fc;
  border: 1px solid #c084fc;
}
.item-option-tier-dot.tier-legendary {
  background: #78350f;
  color: #fbbf24;
  border: 1px solid #fbbf24;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
  animation: pulseLegendaryDot 1.8s infinite ease-in-out;
}

@keyframes pulseLegendaryDot {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.25); box-shadow: 0 0 10px rgba(251, 191, 36, 0.8); }
}

.inven-item-cell.has-options {
  position: relative;
}
.inven-item-cell.has-options.rarity-legendary {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.35);
}
.inven-item-cell.has-options.rarity-epic {
  border-color: #a855f7 !important;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
}
.inven-item-cell.has-options.rarity-rare {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.25);
}
.inven-item-cell.has-options.rarity-magic {
  border-color: #22c55e !important;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.25);
}

/* =========================================================
   ✨ Two-Tone Item Name & Refine Aura System
   ========================================================= */
.item-formatted-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

.item-title-refine {
  font-weight: 900;
  letter-spacing: 0.5px;
}
.item-title-refine.refine-mythic {
  color: #ec4899 !important;
  text-shadow: 0 0 8px rgba(236, 72, 153, 0.8), 0 0 16px rgba(236, 72, 153, 0.4);
}
.item-title-refine.refine-gold {
  color: #fbbf24 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.8), 0 0 14px rgba(251, 191, 36, 0.4);
}
.item-title-refine.refine-blue {
  color: #38bdf8 !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}
.item-title-refine.refine-green {
  color: #4ade80 !important;
}

/* Rarity Item Name Colors */
.item-title-name.rarity-text-legendary,
.item-title-name.rarity-text-mvp {
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.35);
}
.item-title-name.rarity-text-epic {
  color: #c084fc;
  text-shadow: 0 0 6px rgba(192, 132, 252, 0.35);
}
.item-title-name.rarity-text-rare {
  color: #38bdf8;
  text-shadow: 0 0 4px rgba(56, 189, 248, 0.3);
}
.item-title-name.rarity-text-magic,
.item-title-name.rarity-text-uncommon {
  color: #4ade80;
}
.item-title-name.rarity-text-common {
  color: #f8fafc;
}

/* Refine Aura Glowing Effects */
.item-glow-mythic {
  animation: mythicTextAura 2.2s infinite ease-in-out;
}
.item-glow-gold {
  animation: goldTextAura 2.5s infinite ease-in-out;
}

@keyframes mythicTextAura {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(236, 72, 153, 0.7));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.95)) drop-shadow(0 0 18px rgba(244, 114, 182, 0.6));
  }
}

@keyframes goldTextAura {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.85)) drop-shadow(0 0 14px rgba(252, 211, 77, 0.5));
  }
}

/* ==========================================================================
   💎 Grand Inspect Modal Random Options Styling
   ========================================================================== */
.inspect-options-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 8px;
  margin: 6px 0;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.4);
}

.inspect-options-section.magic {
  border-color: rgba(74, 222, 128, 0.5);
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.4), rgba(15, 23, 42, 0.8));
}
.inspect-options-section.rare {
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.4), rgba(15, 23, 42, 0.8));
}
.inspect-options-section.epic {
  border-color: rgba(192, 132, 252, 0.6);
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.4), rgba(15, 23, 42, 0.8));
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.2);
}
.inspect-options-section.legendary {
  border-color: rgba(251, 191, 36, 0.7);
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.5), rgba(15, 23, 42, 0.85));
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

.inspect-options-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding-bottom: 5px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

.inspect-options-title {
  color: #f8fafc;
  font-weight: 700;
  font-family: var(--font-hud);
  letter-spacing: 0.3px;
}

.inspect-options-tier {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.inspect-options-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.inspect-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #f1f5f9;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 8px;
  border-radius: 4px;
}

.inspect-option-bullet {
  font-size: 11px;
}

.inspect-option-label {
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ==========================================
   🔨 MeawNarok Refine & Upgrade System Styles
   ========================================== */

.item-refine-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid #4ade80;
  color: #4ade80;
  font-family: var(--font-hud, 'Segoe UI', Tahoma, sans-serif);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 1px 4px;
  border-radius: 4px;
  z-index: 5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.refine-workbench-window {
  position: absolute;
  width: 680px;
  max-width: 95vw;
  height: 560px;
  max-height: 90vh;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.94));
  border: 1.5px solid #f97316;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(249, 115, 22, 0.35);
  display: block;
  overflow: hidden;
  z-index: 2500;
  color: #f8fafc;
  font-family: var(--font-hud, 'Prompt', sans-serif);
}

.refine-workbench-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 12px;
  padding: 12px;
  height: calc(100% - 46px);
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.6);
}

/* Left Column: Equipment Picker */
.refine-gear-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  overflow: hidden;
}

.refine-col-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.refine-col-title {
  font-size: 13px;
  font-weight: 800;
  color: #fed7aa;
  display: flex;
  align-items: center;
  gap: 6px;
}

.refine-type-filter {
  display: flex;
  gap: 4px;
}

.refine-filter-btn {
  flex: 1;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.refine-filter-btn:hover {
  background: rgba(249, 115, 22, 0.25);
  border-color: #f97316;
  color: #fff;
}

.refine-filter-btn.active {
  background: linear-gradient(135deg, #ea580c, #c2410c);
  border-color: #fdba74;
  color: #fff;
  box-shadow: 0 0 8px rgba(234, 88, 12, 0.4);
}

.refine-gear-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

.refine-gear-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.refine-gear-card:hover {
  background: rgba(249, 115, 22, 0.18);
  border-color: rgba(249, 115, 22, 0.5);
  transform: translateX(2px);
}

.refine-gear-card.selected {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.35), rgba(180, 83, 9, 0.25));
  border-color: #f97316;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.35);
}

.refine-gear-card-icon {
  width: 36px;
  height: 36px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.refine-gear-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.refine-gear-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.refine-gear-card-sub {
  font-size: 10px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
}

.refine-gear-card-badge {
  font-size: 10px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid currentColor;
}

.refine-gear-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  padding: 20px;
}

/* Right Column: Anvil & Forge Stage */
.refine-forge-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.refine-anvil-stage {
  position: relative;
  background: radial-gradient(circle at center, rgba(249, 115, 22, 0.15) 0%, rgba(15, 23, 42, 0.85) 75%);
  border: 1.5px solid rgba(249, 115, 22, 0.4);
  border-radius: 10px;
  padding: 14px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.refine-slot-placeholder {
  text-align: center;
  color: #94a3b8;
}

.refine-slot-placeholder .anvil-icon {
  font-size: 38px;
  display: block;
  margin-bottom: 4px;
  opacity: 0.7;
}

.refine-slot-placeholder p {
  font-size: 12px;
  margin: 0;
}

.refine-slot-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.refine-item-preview-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.refine-item-icon-box {
  width: 52px;
  height: 52px;
  background: rgba(15, 23, 42, 0.9);
  border: 2px solid #f97316;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.45);
  flex-shrink: 0;
}

.refine-target-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.refine-level-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}

.refine-curr-badge, .refine-next-badge {
  font-size: 12px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.9);
  border: 1.5px solid currentColor;
}

.refine-curr-badge {
  color: #cbd5e1;
  border-color: #64748b;
}

.refine-next-badge {
  color: #fde047;
  border-color: #facc15;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
}

.refine-arrow {
  color: #f97316;
  font-weight: 900;
  font-size: 14px;
}

.refine-stat-diff-box {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-around;
}

.refine-stat-diff-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.refine-stat-diff-item .stat-label {
  color: #94a3b8;
  font-weight: 600;
}

.refine-stat-diff-item .stat-old {
  color: #e2e8f0;
  font-weight: 700;
}

.refine-stat-diff-item .stat-new {
  color: #4ade80;
  font-weight: 800;
}

/* Material Requirements Panel */
.refine-mats-panel {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.refine-panel-label {
  font-size: 12px;
  font-weight: 800;
  color: #fed7aa;
}

.refine-mat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 10px;
}

.refine-mat-icon {
  font-size: 22px;
  width: 32px;
  text-align: center;
}

.refine-mat-info {
  flex: 1;
  min-width: 0;
}

.refine-mat-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #f8fafc;
}

.refine-mat-sub {
  font-size: 10.5px;
  color: #94a3b8;
}

.refine-mat-count {
  font-size: 12px;
  font-weight: 800;
  color: #e2e8f0;
}

.refine-mat-count.enough {
  color: #4ade80;
}

.refine-mat-count.missing {
  color: #f87171;
}

/* Protection Stone Row */
.refine-protect-row {
  border-color: rgba(245, 158, 11, 0.3);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(15, 23, 42, 0.6));
}

.refine-protect-action {
  display: flex;
  align-items: center;
  gap: 8px;
}

.refine-protect-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
}

.refine-protect-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.refine-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(100, 116, 139, 0.5);
  border-radius: 20px;
  transition: 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.refine-toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: 0.2s;
}

.refine-protect-toggle input:checked + .refine-toggle-slider {
  background-color: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.refine-protect-toggle input:checked + .refine-toggle-slider:before {
  transform: translateX(18px);
}

.refine-protect-have-badge {
  font-size: 11px;
  color: #fde047;
  font-weight: 700;
}

/* Summary & Rate Bar */
.refine-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 12px;
}

.refine-rate-badge-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.refine-rate-label {
  font-size: 12px;
  color: #94a3b8;
}

.refine-rate-val {
  font-size: 14px;
  font-weight: 900;
  color: #4ade80;
}

.refine-safe-tag {
  font-size: 10.5px;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 1px 6px;
  border-radius: 4px;
}

.refine-zeny-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.refine-zeny-label {
  font-size: 12px;
  color: #94a3b8;
}

.refine-zeny-val {
  font-size: 13.5px;
  font-weight: 800;
  color: #fde047;
}

/* Big Action Button */
.refine-btn-row {
  display: flex;
}

.btn-refine-action {
  width: 100%;
  background: linear-gradient(135deg, #f97316, #c2410c);
  border: 1.5px solid #fed7aa;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
}

.btn-refine-action:hover:not(:disabled) {
  background: linear-gradient(135deg, #fb923c, #ea580c);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.6);
  transform: translateY(-1px);
}

.btn-refine-action:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-refine-action:disabled {
  background: rgba(71, 85, 105, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}

/* Sparks & Hammer Animation */
.refine-sparks-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 8px;
  animation: fadeIn 0.15s ease;
}

.refine-hammer-anim {
  font-size: 48px;
  animation: hammerStrike 0.4s infinite alternate ease-in-out;
}

.refine-sparks-burst {
  font-size: 32px;
  animation: sparkFlash 0.3s infinite alternate;
}

@keyframes hammerStrike {
  0% { transform: rotate(-35deg) scale(1); }
  100% { transform: rotate(15deg) scale(1.15); }
}

@keyframes sparkFlash {
  0% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

/* ==========================================================================
   ⚗️ ORE SMELTING FORGE (โรงหลอมรวมแร่อัญมณี)
   ========================================================================== */
.smelt-window {
  position: absolute;
  width: 580px;
  max-width: 95vw;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.97), rgba(30, 41, 59, 0.95));
  border: 1.5px solid #38bdf8;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(56, 189, 248, 0.35);
  display: block;
  overflow: hidden;
  z-index: 2500;
  color: #f8fafc;
  font-family: var(--font-hud, 'Prompt', sans-serif);
}

.smelt-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(15, 23, 42, 0.6);
}

.smelt-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.15), rgba(14, 165, 233, 0.15));
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 10px 14px;
  border-radius: 8px;
}

.smelt-banner-icon {
  font-size: 28px;
  filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.6));
}

.smelt-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 580px) {
  .smelt-cards-grid {
    grid-template-columns: 1fr;
  }
}

.smelt-card {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
}

.smelt-card:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(30, 41, 59, 0.9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.smelt-card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smelt-card-tag {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.smelt-card-tag.weapon-tag {
  background: rgba(249, 115, 22, 0.2);
  border: 1px solid rgba(249, 115, 22, 0.5);
  color: #fdba74;
}

.smelt-card-tag.armor-tag {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #7dd3fc;
}

.smelt-card-title {
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
}

.smelt-recipe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  gap: 6px;
}

.smelt-mat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.smelt-mat-icon {
  font-size: 24px;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}

.smelt-mat-name {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
  text-align: center;
}

.smelt-mat-qty {
  font-size: 11px;
  font-weight: 800;
  color: #fde047;
}

.smelt-mat-qty.result-qty {
  color: #4ade80;
}

.smelt-arrow-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.smelt-arrow {
  font-size: 16px;
  color: #38bdf8;
  font-weight: 900;
}

.smelt-fee-tag {
  font-size: 9.5px;
  font-weight: 800;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

.smelt-card-status {
  font-size: 11.5px;
  color: #94a3b8;
  text-align: center;
  background: rgba(15, 23, 42, 0.5);
  padding: 4px;
  border-radius: 6px;
}

.smelt-card-actions {
  display: flex;
  gap: 6px;
}

.btn-smelt-craft {
  flex: 1;
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.8), rgba(29, 78, 216, 0.8));
  border: 1px solid #3b82f6;
  color: #dbeafe;
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-smelt-craft:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}

.btn-smelt-craft:active:not(:disabled) {
  transform: translateY(0);
}

.btn-smelt-craft:disabled {
  background: rgba(71, 85, 105, 0.3);
  border-color: rgba(255, 255, 255, 0.08);
  color: #64748b;
  cursor: not-allowed;
}

.btn-smelt-all {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.8), rgba(194, 65, 12, 0.8));
  border-color: #f97316;
  color: #ffedd5;
}

.btn-smelt-all:hover:not(:disabled) {
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}

/* ⚗️ Smelt Result Celebration & FX */
.smelt-result-banner {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.25), rgba(16, 185, 129, 0.15));
  border: 1px solid #4ade80;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #86efac;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.25);
  animation: smeltBannerSlide 0.3s ease-out;
}

@keyframes smeltBannerSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.smelt-card {
  position: relative;
  overflow: visible;
}

.smelt-card.smelt-card-flash-weapon {
  animation: smeltCardWeaponGlow 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}

.smelt-card.smelt-card-flash-armor {
  animation: smeltCardArmorGlow 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes smeltCardWeaponGlow {
  0% {
    box-shadow: 0 0 0 rgba(249, 115, 22, 0);
    border-color: rgba(249, 115, 22, 0.5);
    transform: scale(1);
  }
  25% {
    box-shadow: 0 0 35px rgba(249, 115, 22, 0.9), inset 0 0 20px rgba(249, 115, 22, 0.35);
    border-color: #f97316;
    transform: scale(1.03);
  }
  100% {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.12);
    transform: scale(1);
  }
}

@keyframes smeltCardArmorGlow {
  0% {
    box-shadow: 0 0 0 rgba(56, 189, 248, 0);
    border-color: rgba(56, 189, 248, 0.5);
    transform: scale(1);
  }
  25% {
    box-shadow: 0 0 35px rgba(56, 189, 248, 0.9), inset 0 0 20px rgba(56, 189, 248, 0.35);
    border-color: #38bdf8;
    transform: scale(1.03);
  }
  100% {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.12);
    transform: scale(1);
  }
}

.smelt-floating-toast {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.95), rgba(217, 119, 6, 0.95));
  border: 1.5px solid #fde047;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(253, 224, 71, 0.7);
  pointer-events: none;
  z-index: 60;
  white-space: nowrap;
  opacity: 0;
  animation: smeltToastPop 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.smelt-floating-toast.armor-toast {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.95), rgba(37, 99, 235, 0.95));
  border-color: #bae6fd;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.7);
}

@keyframes smeltToastPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.6);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1.15);
  }
  30% {
    transform: translate(-50%, -50%) scale(1.0);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -75%) scale(1.0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -105%) scale(0.85);
  }
}

.smelt-result-pulse {
  animation: smeltResultBounce 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes smeltResultBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); filter: drop-shadow(0 0 12px #fde047); }
  100% { transform: scale(1); }
}

.smelt-sparkle-particle {
  position: absolute;
  pointer-events: none;
  font-size: 16px;
  animation: smeltSparkleFly 0.85s ease-out forwards;
  z-index: 50;
}

@keyframes smeltSparkleFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translate(var(--sparkle-x, 0px), var(--sparkle-y, -45px)) scale(1.2);
  }
}

/* ==========================================================================
   RO Custom Confirmation Dialog Modal (.ro-confirm-dialog)
   ========================================================================== */
.ro-confirm-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 440px;
  max-width: 92vw;
  background: linear-gradient(180deg, rgba(24, 20, 36, 0.98) 0%, rgba(15, 23, 42, 0.99) 100%);
  border: 2px solid var(--ro-gold);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 25px rgba(245, 158, 11, 0.3);
  z-index: 100000;
  overflow: hidden;
  backdrop-filter: blur(16px);
  user-select: none;
  font-family: var(--font-hud);
}

.ro-confirm-dialog.ro-modal-hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ro-confirm-header {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.28), rgba(180, 83, 9, 0.2));
  border-bottom: 1px solid rgba(245, 158, 11, 0.4);
  color: #fde047;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
}

.ro-confirm-header:active {
  cursor: grabbing;
}

.ro-confirm-body {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.ro-confirm-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.12);
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.25);
  font-size: 30px;
  flex-shrink: 0;
  animation: roConfirmPulse 2s infinite ease-in-out;
}

@keyframes roConfirmPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 14px rgba(245, 158, 11, 0.2); }
  50% { transform: scale(1.06); box-shadow: 0 0 24px rgba(245, 158, 11, 0.45); }
}

.ro-confirm-text-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.ro-confirm-heading {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.4;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.ro-confirm-desc {
  margin: 0;
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
}

.ro-confirm-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.ro-btn-confirm-ok {
  flex: 1.2;
  padding: 10px 14px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 1px solid #fde047;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45);
  transition: all 0.15s ease;
  font-family: inherit;
}

.ro-btn-confirm-ok:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.6);
}

.ro-btn-confirm-ok:active {
  transform: translateY(0);
}

.ro-btn-confirm-cancel {
  flex: 1;
  padding: 10px 14px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  color: #cbd5e1;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.ro-btn-confirm-cancel:hover {
  background: rgba(51, 65, 85, 0.95);
  color: #ffffff;
  border-color: rgba(148, 163, 184, 0.6);
}

/* ==========================================================================
   Character Dye Studio Modal (Photoshop-style HSL Sliders)
   ========================================================================== */
.dye-studio-modal {
  width: 480px;
  max-width: 95vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10050;
  background: var(--ro-glass);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(236, 72, 153, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(236, 72, 153, 0.25);
  border-radius: 12px;
}

.dye-studio-body {
  display: flex;
  gap: 16px;
  padding: 16px;
}

.dye-studio-preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 160px;
}

.dye-preview-box {
  position: relative;
  width: 160px;
  height: 180px;
  background: radial-gradient(circle at center, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#dye-preview-canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  cursor: pointer;
  border-radius: 9px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
  transition: transform 0.15s ease, filter 0.2s ease;
}

#dye-preview-canvas:hover {
  filter: drop-shadow(0 8px 18px rgba(236, 72, 153, 0.45)) brightness(1.06);
}

#dye-preview-canvas:active {
  transform: scale(0.97);
}

.dye-preview-glow {
  position: absolute;
  bottom: 10px;
  width: 80px;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(236, 72, 153, 0.4), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.dye-char-name-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--ro-gold-bright);
}

.dye-studio-controls-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dye-slider-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dye-slider-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
}

.dye-slider-header strong {
  color: #ec4899;
}

.dye-range-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  background: #334155;
}

.dye-hue-track {
  background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

.dye-sat-track {
  background: linear-gradient(to right, #64748b 0%, #ec4899 100%);
}

.dye-light-track {
  background: linear-gradient(to right, #090d16 0%, #64748b 50%, #f8fafc 100%);
}

.dye-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #ec4899;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.dye-presets-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.dye-presets-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #94a3b8;
}

.dye-presets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.btn-dye-preset {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.btn-dye-preset:hover {
  background: rgba(236, 72, 153, 0.25);
  border-color: #ec4899;
  color: #ffffff;
}

.dye-modal-footer {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn-dye-action {
  flex: 1;
  padding: 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}

.btn-confirm-dye {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
}

.btn-confirm-dye:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-cancel-dye {
  background: rgba(30, 41, 59, 0.85);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-cancel-dye:hover {
  background: rgba(51, 65, 85, 0.95);
  color: #ffffff;
}

/* ==========================================================================
   🎯 Top Center Target Monster HP Bar HUD (3D Glossy Metallic Edition)
   ========================================================================== */
#target-hud {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 16px 10px;
  min-width: 290px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.92) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 15px rgba(245, 158, 11, 0.2);
  z-index: 100;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#target-hud.target-hidden {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

#target-hud.target-boss {
  border-color: #ef4444;
  background: linear-gradient(180deg, rgba(40, 10, 25, 0.96) 0%, rgba(20, 5, 15, 0.96) 100%);
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 20px rgba(239, 68, 68, 0.4);
}

.target-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  font-weight: 800;
  color: #fef08a;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.6), 0 2px 4px rgba(0, 0, 0, 0.9);
}

.target-title {
  letter-spacing: 0.5px;
}

.target-level {
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-hud, 'Chakra Petch', sans-serif);
  color: #38bdf8;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(3, 105, 161, 0.45));
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.target-hp-container {
  position: relative;
  width: 100%;
  height: 20px;
  margin-top: 1px;
  background: linear-gradient(180deg, rgba(5, 10, 20, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
}

.target-hp-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(180deg, #ff7b7b 0%, #ef4444 45%, #b91c1c 85%, #991b1b 100%);
  border-radius: 8px;
  transition: width 0.15s ease-out;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.55), inset 0 -2px 3px rgba(0, 0, 0, 0.45), 0 0 10px rgba(239, 68, 68, 0.5);
  z-index: 1;
  overflow: hidden;
}

.target-hp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 8px 8px 0 0;
  pointer-events: none;
}

#target-hud.target-boss .target-hp-fill {
  background: linear-gradient(180deg, #ffc04d 0%, #f59e0b 35%, #dc2626 80%, #7f1d1d 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.7), inset 0 -2px 3px rgba(0, 0, 0, 0.5), 0 0 14px rgba(245, 158, 11, 0.7);
}

.target-hp-text {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  font-size: 11.5px;
  font-weight: 900;
  font-family: var(--font-hud, 'Chakra Petch', sans-serif);
  color: #ffffff;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 3px #000, 0 0 6px #000;
  line-height: 20px;
  user-select: none;
}

/* ==========================================================================
   🎨 Character Dye Purchase Confirmation Window (RO Style Dialog)
   ========================================================================== */
.dye-confirm-dialog {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 380px !important;
  max-width: 92vw !important;
  background: rgba(15, 23, 42, 0.98) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.75) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.9), 0 0 30px rgba(245, 158, 11, 0.35) !important;
  border-radius: 14px !important;
  z-index: 10060 !important;
  pointer-events: auto !important;
  animation: fadeInDown 0.2s ease-out;
}

.dye-confirm-dialog.ro-modal-hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.dye-confirm-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin-bottom: 12px;
}

.dye-confirm-icon {
  font-size: 32px;
  line-height: 1;
}

.dye-confirm-text-group h4 {
  font-size: 13.5px;
  font-weight: 800;
  color: #fef08a;
  margin: 0 0 4px 0;
}

.dye-confirm-text-group p {
  font-size: 12px;
  color: #cbd5e1;
  margin: 0;
  line-height: 1.3;
}

.dye-confirm-receipt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}

.dye-confirm-receipt .receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #94a3b8;
}

.dye-confirm-receipt .receipt-val-gold {
  color: #fbbf24;
  font-family: var(--font-hud);
  font-weight: 800;
  font-size: 13px;
}

.dye-confirm-receipt .receipt-val {
  color: #e2e8f0;
  font-family: var(--font-hud);
  font-weight: 700;
}

.dye-confirm-receipt .receipt-val-green {
  color: #34d399;
  font-family: var(--font-hud);
  font-weight: 800;
  font-size: 13px;
}

.dye-confirm-receipt .receipt-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 2px 0;
}

.dye-confirm-actions {
  display: flex;
  gap: 10px;
}

.btn-confirm-dye-pay {
  flex: 1.3;
  padding: 10px 12px;
  background: linear-gradient(135deg, #10b981, #059669);
  border: 1px solid #34d399;
  border-radius: 8px;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 800;
  font-family: var(--font-hud);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.btn-confirm-dye-pay:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);
}

.btn-cancel-dye-pay {
  flex: 1;
  padding: 10px 12px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-cancel-dye-pay:hover {
  background: rgba(51, 65, 85, 0.95);
  color: #ffffff;
}

/* ==========================================================================
   Server Channel Selector & Badges (Multi-Room Architecture)
   ========================================================================== */
.ro-channel-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  user-select: none;
}
.ro-channel-badge-btn:hover {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(14, 116, 144, 0.9) 100%);
  border-color: #38bdf8;
  color: #f0f9ff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
  transform: translateY(-1px);
}
.ro-channel-badge-btn:active {
  transform: translateY(1px);
}
.channel-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: pulse-dot 2s infinite ease-in-out;
}

/* Pre-Login Channel Pill on Character Select */
.char-select-channel-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  color: #e0f2fe;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s ease;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.char-select-channel-pill:hover {
  background: rgba(14, 116, 144, 0.4);
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}
.channel-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}
.channel-pill-arrow {
  font-size: 10px;
  color: #38bdf8;
}

/* Channel Modal Dialog */
.channel-switch-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  max-width: 94vw;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.98) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85), 0 0 30px rgba(56, 189, 248, 0.25) !important;
  z-index: 10050 !important;
  backdrop-filter: blur(14px);
  animation: modalPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.channel-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.channel-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: all 0.2s ease;
  cursor: pointer;
}
.channel-card:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transform: translateX(3px);
}
.channel-card.current {
  background: linear-gradient(90deg, rgba(14, 116, 144, 0.25) 0%, rgba(30, 41, 59, 0.6) 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
}

.channel-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.channel-icon {
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.channel-title-group h4 {
  margin: 0 0 3px 0;
  font-size: 13.5px;
  font-weight: 800;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 6px;
}
.channel-title-group p {
  margin: 0;
  font-size: 11.5px;
  color: #94a3b8;
}

.channel-card-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.channel-stat-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.channel-status-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.channel-status-pill.smooth {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.channel-status-pill.normal {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.channel-status-pill.busy {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.channel-online-text {
  font-size: 10px;
  color: #64748b;
}

.btn-channel-action {
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-channel-action.current {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  cursor: default;
}
.btn-channel-action.switch {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.4);
}
.btn-channel-action.switch:hover {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.6);
  transform: scale(1.03);
}

.channel-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.channel-status-dot.smooth { background: #10b981; box-shadow: 0 0 5px #10b981; }
.channel-status-dot.normal { background: #f59e0b; box-shadow: 0 0 5px #f59e0b; }
.channel-status-dot.busy { background: #ef4444; box-shadow: 0 0 5px #ef4444; }

/* Channel Warp Overlay */
.channel-warp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(8px);
  z-index: 10090;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}
.channel-warp-box {
  background: rgba(15, 23, 42, 0.95);
  border: 1.5px solid rgba(56, 189, 248, 0.6);
  border-radius: 16px;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 0 35px rgba(56, 189, 248, 0.3), 0 20px 40px rgba(0, 0, 0, 0.9);
  max-width: 400px;
  width: 90vw;
}
.channel-warp-portal {
  font-size: 48px;
  margin-bottom: 12px;
  animation: spinPortal 2s linear infinite;
}
@keyframes spinPortal {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
  to { transform: rotate(360deg) scale(1); }
}
.channel-warp-title {
  font-size: 16px;
  font-weight: 800;
  color: #f0f9ff;
  margin-bottom: 6px;
}
.channel-warp-sub {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 18px;
}
.channel-warp-bar-frame {
  width: 100%;
  height: 6px;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.channel-warp-bar-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #38bdf8 0%, #818cf8 50%, #34d399 100%);
  animation: warpBarProgress 1.2s infinite ease-in-out;
}
@keyframes warpBarProgress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ⚠️ Error Shake Feedback Animation */
@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.shake-error {
  animation: shakeError 0.35s ease-in-out !important;
}

/* 🌟 Universal Floating Game Toast (Top-level above all modals) */
.game-floating-toast {
  position: fixed;
  top: 36px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px) scale(0.95);
  background: rgba(15, 23, 42, 0.96);
  border: 1.5px solid #10b981;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(16, 185, 129, 0.45);
  border-radius: 24px;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-thai), sans-serif;
  color: #f8fafc;
  z-index: 10000000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 90vw;
  text-align: center;
  line-height: 1.4;
}

.game-floating-toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

.game-floating-toast.fade-out {
  opacity: 0;
  transform: translateX(-50%) translateY(-15px) scale(0.95);
}

@keyframes toastShake {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  20%, 60% { transform: translateX(calc(-50% - 6px)) translateY(0) scale(1.02); }
  40%, 80% { transform: translateX(calc(-50% + 6px)) translateY(0) scale(1.02); }
}

.game-floating-toast.shake {
  animation: toastShake 0.35s ease-in-out;
}

/* ==========================================================================
   ⚔️ SMART AUTO-COMBAT SYSTEM STYLES
   ========================================================================== */

.quick-menu-btn.btn-highlight-auto {
  background: linear-gradient(180deg, rgba(22, 101, 52, 0.9) 0%, rgba(15, 23, 42, 0.96) 100%);
  border: 1px solid rgba(74, 222, 128, 0.4);
  position: relative;
}

.quick-menu-btn.btn-highlight-auto:hover {
  border-color: #4ade80;
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.quick-menu-btn.btn-highlight-auto.is-auto-active {
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
  border-color: #86efac !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.75), inset 0 1px 2px #dcfce7 !important;
  animation: pulse-auto-active 1.4s ease-in-out infinite alternate;
}

@keyframes pulse-auto-active {
  0% {
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5), inset 0 1px 2px #dcfce7;
    border-color: #86efac;
  }
  100% {
    box-shadow: 0 0 22px rgba(34, 197, 94, 0.9), inset 0 1px 4px #ffffff;
    border-color: #ffffff;
  }
}

.btn-auto-gear {
  margin-left: 2px;
  font-size: 11px;
  opacity: 0.75;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-auto-gear:hover {
  opacity: 1;
  transform: rotate(45deg) scale(1.2);
}

/* Auto Combat Settings Modal */
.auto-combat-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-width: 95vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(2, 6, 23, 0.99) 100%);
  border: 1.5px solid rgba(74, 222, 128, 0.4);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 24px rgba(34, 197, 94, 0.25);
  backdrop-filter: blur(14px);
  z-index: 10000;
}

.auto-combat-dialog .window-header {
  cursor: grab;
  user-select: none;
}

.auto-combat-dialog .window-header:active {
  cursor: grabbing;
}

.auto-combat-body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auto-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
}

.auto-section-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #86efac;
  letter-spacing: 0.3px;
}

.auto-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auto-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auto-radio-card:hover {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(74, 222, 128, 0.4);
}

.auto-radio-card input[type="radio"] {
  margin-top: 3px;
  accent-color: #22c55e;
}

.radio-card-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.radio-card-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #f1f5f9;
}

.radio-card-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.35;
}

/* Monster Picker Grid */
.auto-monster-picker-box {
  margin-top: 6px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed rgba(74, 222, 128, 0.3);
  border-radius: 6px;
  padding: 10px 12px;
}

.auto-picker-hint {
  font-size: 11.5px;
  color: #cbd5e1;
  font-weight: 600;
  margin-bottom: 8px;
}

.auto-monster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.auto-monster-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.auto-monster-card:hover {
  background: rgba(34, 197, 94, 0.12);
  border-color: #4ade80;
}

.auto-monster-card.selected {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
}

.auto-monster-card input[type="checkbox"] {
  accent-color: #22c55e;
}

.auto-monster-card .mon-icon {
  font-size: 18px;
}

.auto-monster-card .mon-info {
  display: flex;
  flex-direction: column;
}

.auto-monster-card .mon-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.auto-monster-card .mon-lvl {
  font-size: 10px;
  color: #94a3b8;
}

/* Checkbox Rows */
.auto-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auto-checkbox-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.auto-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #cbd5e1;
  cursor: pointer;
  user-select: none;
}

.auto-toggle-label input[type="checkbox"] {
  accent-color: #22c55e;
  width: 15px;
  height: 15px;
}

.auto-pct-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.auto-pct-input-wrap input {
  width: 52px;
  padding: 4px 6px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 4px;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.auto-pct-input-wrap span {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
}

/* Modal Footer */
.auto-modal-footer {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.btn-auto-start {
  flex: 2;
  background: linear-gradient(135deg, #16a34a, #15803d);
  border: 1.5px solid #86efac;
  color: #ffffff;
  font-family: var(--font-main);
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
  transition: all 0.2s ease;
}

.btn-auto-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.6);
  border-color: #ffffff;
}

.btn-auto-save {
  flex: 1;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-auto-save:hover {
  background: rgba(51, 65, 85, 0.9);
  color: #ffffff;
}

/* ==========================================================================
   🏟️ PvP Colosseum Multi-Room Lobby Modal (Dynamic Arena Instances)
   ========================================================================== */
.pvp-lobby-window {
  width: 95%;
  max-width: 580px;
  background: linear-gradient(180deg, rgba(20, 24, 38, 0.98) 0%, rgba(12, 14, 22, 0.99) 100%);
  border: 1.5px solid rgba(239, 68, 68, 0.5);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(239, 68, 68, 0.25);
  border-radius: 12px;
  overflow: hidden;
  z-index: 10000;
}

.pvp-lobby-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Quick Join Banner Card */
.arena-quick-join-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.25) 0%, rgba(185, 28, 28, 0.45) 50%, rgba(234, 88, 12, 0.3) 100%);
  border: 1.5px solid rgba(248, 113, 113, 0.6);
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.arena-quick-join-card:hover {
  transform: translateY(-2px);
  border-color: #f87171;
  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.45);
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.35) 0%, rgba(185, 28, 28, 0.55) 50%, rgba(234, 88, 12, 0.4) 100%);
}

.quick-join-icon {
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 10px;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
}

.quick-join-info {
  flex: 1;
}

.quick-join-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(248, 113, 113, 0.5);
  margin-bottom: 2px;
}

.quick-join-sub {
  font-size: 11px;
  color: #fca5a5;
  line-height: 1.35;
}

.btn-quick-join-action {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  border: 1px solid #f87171;
  color: #ffffff;
  font-weight: 800;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4);
  pointer-events: none;
}

/* Toolbar */
.arena-lobby-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
  margin-top: 4px;
}

.arena-lobby-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
}

.arena-total-badge {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.arena-total-badge strong {
  color: #38bdf8;
}

.btn-ro-refresh {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-ro-refresh:hover {
  background: rgba(51, 65, 85, 0.9);
  color: #ffffff;
  border-color: #94a3b8;
}

/* Rooms Grid */
.arena-rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.arena-rooms-grid::-webkit-scrollbar {
  width: 6px;
}

.arena-rooms-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.arena-rooms-grid::-webkit-scrollbar-thumb {
  background: rgba(239, 68, 68, 0.45);
  border-radius: 4px;
}

.arena-rooms-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(239, 68, 68, 0.75);
}

.arena-room-card {
  background: rgba(24, 30, 46, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}

.arena-room-card:hover:not(.room-full) {
  transform: translateY(-2px);
  border-color: rgba(248, 113, 113, 0.7);
  background: rgba(35, 42, 64, 0.95);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.2);
}

.arena-room-card.room-full {
  opacity: 0.65;
  cursor: not-allowed;
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(30, 20, 25, 0.8);
}

.arena-room-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arena-room-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #f1f5f9;
}

.arena-room-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.badge-open {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.badge-hot {
  background: rgba(249, 115, 22, 0.22);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.5);
}

.badge-full {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.6);
}

.arena-room-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  overflow: hidden;
}

.arena-room-progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-open {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.progress-hot {
  background: linear-gradient(90deg, #f97316, #fb923c);
}

.progress-full {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.arena-room-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.arena-room-status-label {
  color: #94a3b8;
}

.btn-arena-join-room {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  border: 1px solid #60a5fa;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.arena-room-card:hover:not(.room-full) .btn-arena-join-room {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  border-color: #f87171;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.btn-arena-join-room:disabled {
  background: rgba(51, 65, 85, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  color: #64748b;
  cursor: not-allowed;
}

.arena-loading-text {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 10px;
  color: #94a3b8;
  font-size: 13px;
}

/* Footer Notice */
.arena-lobby-footer-notice {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: #94a3b8;
}

.arena-lobby-footer-notice strong {
  color: #fde047;
}

/* ========================================================
   Cinematic Map Discovery Title Card (Console RPG Style)
   ======================================================== */
.cinematic-map-title-card {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1800;
  pointer-events: none;
  user-select: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 320px;
  max-width: 90vw;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.9));
}

.cinematic-map-title-card.hidden {
  display: none !important;
}

.cinematic-map-title-card.play-anim {
  animation: cinematicCardCycle 4.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cinematicCardCycle {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 14px)) scale(0.93);
    filter: blur(8px);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.0);
    filter: blur(0px);
  }
  78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.028);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 10px)) scale(1.045);
    filter: blur(6px);
  }
}

.map-title-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 32px;
  background: radial-gradient(ellipse at center, rgba(13, 17, 28, 0.78) 0%, rgba(13, 17, 28, 0.45) 60%, rgba(13, 17, 28, 0) 100%);
  border-radius: 20px;
}

/* Top Rune Accent */
.map-title-rune-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0.85;
}

.map-title-rune-top .rune-line {
  width: 50px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #fbbf24);
}
.map-title-rune-top .rune-line:last-child {
  background: linear-gradient(90deg, #fbbf24, transparent);
}

.map-title-rune-top .rune-gem {
  font-size: 13px;
  color: #fde68a;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
}

/* Main Map Title */
.map-title-main-wrap {
  position: relative;
  overflow: hidden;
}

.map-title-main {
  margin: 0;
  padding: 0 10px;
  font-family: var(--font-hud), 'Outfit', 'Chakra Petch', sans-serif;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 35%, #fbbf24 70%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 18px rgba(245, 158, 11, 0.5));
}

/* Theme variations */
.cinematic-map-title-card.theme-nature .map-title-main {
  background: linear-gradient(180deg, #ffffff 0%, #bbf7d0 35%, #4ade80 70%, #15803d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 18px rgba(74, 222, 128, 0.5));
}
.cinematic-map-title-card.theme-nature .rune-gem,
.cinematic-map-title-card.theme-nature .rune-line {
  color: #86efac;
  background: linear-gradient(90deg, transparent, #4ade80);
}
.cinematic-map-title-card.theme-nature .rune-line:last-child {
  background: linear-gradient(90deg, #4ade80, transparent);
}

.cinematic-map-title-card.theme-crimson .map-title-main {
  background: linear-gradient(180deg, #ffffff 0%, #fecaca 35%, #f87171 70%, #b91c1c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 18px rgba(239, 68, 68, 0.5));
}
.cinematic-map-title-card.theme-crimson .rune-gem,
.cinematic-map-title-card.theme-crimson .rune-line {
  color: #fca5a5;
  background: linear-gradient(90deg, transparent, #ef4444);
}
.cinematic-map-title-card.theme-crimson .rune-line:last-child {
  background: linear-gradient(90deg, #ef4444, transparent);
}

/* Divider with Expanding Lines */
.map-title-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 3px 0;
}

.map-title-divider .divider-line {
  height: 2px;
  flex: 1;
  max-width: 130px;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.8));
  transform-origin: right center;
  animation: lineExpandLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.map-title-divider .divider-line.right {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.8), transparent);
  transform-origin: left center;
  animation: lineExpandRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinematic-map-title-card.theme-nature .map-title-divider .divider-line {
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.8));
}
.cinematic-map-title-card.theme-nature .map-title-divider .divider-line.right {
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.8), transparent);
}

.cinematic-map-title-card.theme-crimson .map-title-divider .divider-line {
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.8));
}
.cinematic-map-title-card.theme-crimson .map-title-divider .divider-line.right {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.8), transparent);
}

@keyframes lineExpandLeft {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}
@keyframes lineExpandRight {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

.map-title-divider .divider-crest {
  font-size: 18px;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.7));
}

/* Subtitle (English / Region) */
.map-title-sub {
  font-family: var(--font-hud), 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3.5px;
  color: #f1f5f9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
}

/* Description / Zone Hint */
.map-title-desc {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
  margin-top: 2px;
  letter-spacing: 0.4px;
}

@media (max-width: 640px) {
  .cinematic-map-title-card {
    top: 23%;
  }
  .map-title-main {
    font-size: 24px;
    letter-spacing: 1px;
  }
  .map-title-sub {
    font-size: 11px;
    letter-spacing: 2px;
  }
  .map-title-desc {
    font-size: 10.5px;
  }
}