/* =============================================================
   === TEMA PEDRA RÚNICA: VARIÁVEIS DE COR ===
   ============================================================= */
:root {
  --color-stone-dark: #263238;
  --color-stone-medium: #546E7A;
  --color-stone-light: #B0BEC5;
  --color-text-light: #ECEFF1;
  --color-text-dark: #263238;
  --color-accent-teal: #00F0E0;
  --color-accent-teal-hover: #64FFDA;
  --color-accent-shadow: rgba(0, 240, 224, 0.5);
  --color-hp: #d00;
  --color-mp: #00d;
  --color-xp: #00F0E0;
  --color-stone-dark-glass: rgba(38, 50, 56, 0.95);
}

/* =============================================================
   === CONFIGURAÇÃO GLOBAL ===
   ============================================================= */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 5px var(--color-accent-shadow), 0 0 2px var(--color-accent-shadow) inset; }
  50% { box-shadow: 0 0 20px var(--color-accent-shadow), 0 0 10px var(--color-accent-shadow) inset; }
  100% { box-shadow: 0 0 5px var(--color-accent-shadow), 0 0 2px var(--color-accent-shadow) inset; }
}

html, body {
  width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0;
  background-color: #000; color: var(--color-text-light);
  font-family: 'Georgia', serif; touch-action: none;
}

canvas {
  display: block; width: 100vw; height: 100vh;
  position: fixed; top: 0; left: 0; z-index: 0;
  background-color: #000; image-rendering: pixelated; touch-action: none;
}

#game-ui-wrapper { display: none; pointer-events: none; }
#game-ui-wrapper > * { pointer-events: auto; }

/* =============================================================
   === LOADING & LOGIN ===
   ============================================================= */
#loading-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(10, 20, 30, 0.7); backdrop-filter: blur(8px);
  display: flex; justify-content: center; align-items: center;
  z-index: 2000; flex-direction: column;
}
#loading-overlay.ready { cursor: pointer; }
#loading-overlay.ready #loading-container { animation: pulseGlow 1.5s infinite ease-in-out; }

#loading-container {
  width: 90%; max-width: 600px;
  background: var(--color-stone-dark-glass); border: 3px solid var(--color-accent-teal);
  box-shadow: 0 0 20px var(--color-accent-shadow); padding: 30px 40px;
  box-sizing: border-box; display: flex; flex-direction: column;
  align-items: center; border-radius: 8px;
}
#loading-title {
  font-size: 3em; margin: 0 auto 30px auto;
  font-family: 'Courier New', Courier, monospace; text-align: center;
  color: var(--color-accent-teal); text-shadow: 0 0 10px var(--color-accent-shadow);
}
#loading-progress-bar-outer {
  width: 100%; height: 30px; background: var(--color-stone-dark);
  border: 2px solid var(--color-stone-medium); margin-bottom: 20px; border-radius: 4px;
}
#loading-progress-bar-inner {
  width: 0%; height: 100%; background: var(--color-xp);
  box-shadow: 0 0 10px var(--color-accent-shadow); transition: width 0.3s ease-out; border-radius: 2px;
}
#loading-status-text { font-size: 1.1em; color: var(--color-text-light); text-align: center; }

/* Login */
#login-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: #000; display: none; justify-content: flex-start;
  align-items: stretch; 
  z-index: 1900; flex-direction: column;
}
#login-container {
  width: 100%; max-width: 400px; flex-shrink: 0;
  background: var(--color-stone-dark-glass); border: none;
  border-right: 4px solid var(--color-accent-teal);
  box-shadow: 0 0 25px var(--color-accent-shadow); padding: 30px 40px;
  box-sizing: border-box; display: flex; flex-direction: column;
  justify-content: center; border-radius: 0;
}
#login-title {
  font-size: 3em; margin: 0 auto 30px auto;
  font-family: 'Courier New', Courier, monospace; text-align: center;
  color: var(--color-accent-teal); text-shadow: 0 0 10px var(--color-accent-shadow);
}
#auth-tabs-wrapper { width: 100%; display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; }
.auth-tab-btn {
  display: inline-block; min-width: 120px; padding: 10px 15px;
  background: var(--color-stone-medium); border: 2px solid var(--color-stone-medium);
  color: var(--color-text-light); font-size: 1.2em; font-weight: bold;
  cursor: pointer; text-shadow: 1px 1px 2px black; border-radius: 4px; transition: all 0.3s ease;
}
.auth-tab-btn:hover { background: var(--color-stone-light); color: var(--color-text-dark); }
.auth-tab-btn.active {
  color: var(--color-accent-teal); background: var(--color-stone-dark);
  border-color: var(--color-accent-teal); text-shadow: 0 0 8px var(--color-accent-shadow);
}
.auth-form { display: none; flex-direction: column; gap: 15px; }
.auth-form.visible { display: flex; }
.auth-input {
  background: #37474F; border: 2px solid var(--color-stone-medium);
  color: var(--color-text-light); padding: 12px; font-size: 1.1em; outline: none;
  font-family: 'Georgia', serif; border-radius: 4px; transition: all 0.3s ease;
}
.auth-input:focus { border-color: var(--color-accent-teal); box-shadow: 0 0 10px var(--color-accent-shadow); }
.auth-button {
  width: 100%; padding: 12px; background: var(--color-accent-teal);
  border: 2px solid var(--color-accent-teal-hover); color: var(--color-text-dark);
  font-weight: bold; font-size: 1.2em; cursor: pointer; font-family: 'Georgia', serif;
  border-radius: 4px; transition: all 0.3s ease; animation: pulseGlow 2.5s infinite ease-in-out;
}
.auth-button:hover {
  background: var(--color-accent-teal-hover); color: var(--color-text-dark);
  box-shadow: 0 0 15px var(--color-accent-shadow); animation: none;
}
#auth-error-message { color: #FF5252; text-align: center; font-size: 1.1em; margin: 0 0 15px 0; min-height: 1.2em; }

#login-image-panel {
  flex-grow: 1; background-color: #000;
  background-image: url('/assets/Interface/Fundos/background_login.png');
  background-size: 100% 100%; background-position: center;
  background-repeat: no-repeat; position: relative; overflow: hidden; display: none;
}
@media only screen and (min-width: 769px) {
    #login-image-panel { display: block; }
    #login-overlay { flex-direction: row; }
}
#login-video { position: absolute; top: 0; left: 0; width: 100%; height: 180%; object-fit: cover; }

/* =============================================================
   === SELEÇÃO DE CLASSE ===
   ============================================================= */
#class-selection-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(10, 20, 30, 0.7); backdrop-filter: blur(8px);
  display: none; justify-content: center; align-items: center;
  z-index: 100; flex-direction: column;
}
#class-container {
  width: 95%; max-width: 600px; background: var(--color-stone-dark-glass);
  border: 3px solid var(--color-accent-teal); box-shadow: 0 0 20px var(--color-accent-shadow);
  padding: 30px 40px; box-sizing: border-box; display: flex;
  flex-direction: column; align-items: center; border-radius: 8px;
}
#class-title {
  font-size: 3em; margin: 0 auto 20px auto;
  font-family: 'Courier New', Courier, monospace; text-align: center;
  color: var(--color-accent-teal); text-shadow: 0 0 10px var(--color-accent-shadow);
}
#class-preview-canvas {
  width: 150px; height: 200px; background: rgba(0,0,0,0.3);
  border: 2px solid var(--color-stone-medium); border-radius: 5px;
  margin-bottom: 20px; image-rendering: pixelated;
}
#class-description { font-size: 1.1em; color: var(--color-text-light); text-align: center; margin: 0 0 20px 0; }
#class-buttons-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; }
.class-btn {
  padding: 12px; background: var(--color-accent-teal);
  border: 2px solid var(--color-accent-teal-hover); color: var(--color-text-dark);
  font-weight: bold; font-size: 1.2em; cursor: pointer;
  transition: all 0.2s; font-family: 'Georgia', serif; border-radius: 4px;
}
.class-btn:hover:not(:disabled) { background: var(--color-accent-teal-hover); box-shadow: 0 0 15px var(--color-accent-shadow); }
.class-btn.disabled { background: #455A64; border-color: #546E7A; color: #90A4AE; cursor: not-allowed; opacity: 0.7; }

/* =============================================================
   === HUB DE EDIÇÃO (DEBUG) ===
   ============================================================= */
#tileset-hub-container {
  position: fixed; right: 0; top: 0; bottom: 0; width: 300px;
  background: var(--color-stone-dark); border-left: 2px solid var(--color-accent-teal);
  box-sizing: border-box; z-index: 100; pointer-events: auto;
  display: none; flex-direction: column; color: var(--color-text-light);
}
#special-tools, #layer-selector {
  display: flex; gap: 5px; padding: 10px; background: #1A2428;
  border-bottom: 1px solid var(--color-stone-medium); flex-wrap: wrap;
}
.special-tool-btn, .layer-btn {
  flex-grow: 1; padding: 10px; font-size: 0.8em; font-weight: bold;
  background: var(--color-stone-medium); color: var(--color-text-light);
  border: 2px solid var(--color-stone-dark); cursor: pointer; white-space: nowrap;
  font-family: 'Georgia', serif; border-radius: 4px; transition: all 0.2s ease;
}
.special-tool-btn:hover, .layer-btn:hover { background: var(--color-stone-light); color: var(--color-text-dark); }
.special-tool-btn.active, .layer-btn.active {
  background: var(--color-accent-teal); color: var(--color-text-dark);
  border-color: var(--color-accent-teal-hover); box-shadow: 0 0 10px var(--color-accent-shadow);
}
#layer-visibility {
  display: flex; gap: 5px; padding: 10px; background: #1A2428;
  border-bottom: 1px solid var(--color-stone-medium);
}
#layer-visibility input[type="checkbox"] { display: none; }
#layer-visibility label {
  flex-grow: 1; padding: 8px; font-size: 0.9em; font-weight: bold;
  background: var(--color-stone-medium); color: var(--color-text-light);
  border: 2px solid var(--color-stone-dark); cursor: pointer; text-align: center; white-space: nowrap;
  font-family: 'Georgia', serif; border-radius: 4px; transition: all 0.2s ease;
}
#layer-visibility label:hover { background: var(--color-stone-light); color: var(--color-text-dark); }
#layer-visibility input[type="checkbox"]:checked + label {
  background: var(--color-accent-teal); color: var(--color-text-dark);
  border-color: var(--color-accent-teal-hover);
}
#tileset-image-wrapper {
  position: relative; overflow-y: scroll; overflow-x: hidden;
  flex-grow: 1; image-rendering: pixelated; background: #000;
}
#tileset-image {
  width: 256px; height: 9738px; display: block; cursor: crosshair;
  user-drag: none; -webkit-user-drag: none;
  user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
#tileset-selector {
  position: absolute; top: 0; left: 0;
  border: 3px solid var(--color-accent-teal);
  box-shadow: 0 0 10px var(--color-accent-shadow), inset 0 0 10px rgba(255, 255, 255, 0.3);
  box-sizing: border-box; pointer-events: none; display: none;
}

/* =============================================================
   === ÍCONES E CHAT ===
   ============================================================= */
#top-right-icons-container {
  position: fixed; top: 10px; right: 310px; z-index: 99; pointer-events: auto; display: flex; gap: 8px;
}
.top-icon-btn {
  width: 60px; height: 60px; background: var(--color-stone-dark-glass);
  border: 2px solid var(--color-stone-medium); border-radius: 5px;
  cursor: pointer; padding: 6px; box-sizing: border-box;
  backdrop-filter: blur(5px); transition: all 0.2s ease; image-rendering: pixelated;
}
.top-icon-btn img {
  width: 100%; height: 100%; object-fit: contain; filter: grayscale(30%); opacity: 0.8; transition: all 0.2s ease;
}
.top-icon-btn:hover { border-color: var(--color-accent-teal); box-shadow: 0 0 10px var(--color-accent-shadow); }
.top-icon-btn:hover img { filter: grayscale(0%); opacity: 1; }

#chat-container {
  position: fixed; top: 78px; right: 310px; width: 350px; height: 300px;
  background: var(--color-stone-dark-glass); border: 2px solid var(--color-stone-medium);
  box-shadow: 0 0 10px rgba(0,0,0,0.5); backdrop-filter: blur(5px);
  pointer-events: auto; z-index: 99; display: flex; flex-direction: column;
  font-family: 'Georgia', serif; color: var(--color-text-light); border-radius: 5px;
}
#chat-container.hidden { display: none; }
#chat-tabs { display: flex; background: var(--color-stone-dark); border-bottom: 2px solid var(--color-stone-medium); }
.chat-tab {
  flex-grow: 1; padding: 8px 5px; background: transparent; color: var(--color-stone-light);
  border: none; border-bottom: 3px solid transparent; cursor: pointer;
  font-family: 'Georgia', serif; font-weight: bold; font-size: 0.9em;
  opacity: 0.7; transition: all 0.2s ease;
}
.chat-tab:hover { opacity: 1; color: var(--color-accent-teal-hover); }
.chat-tab.active { color: var(--color-accent-teal); border-bottom: 3px solid var(--color-accent-teal); opacity: 1; }
#chat-messages-container { flex-grow: 1; padding: 10px; overflow-y: hidden; }
#chat-messages {
  height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-stone-medium) transparent;
}
#chat-messages p { margin: 0 0 8px 0; font-size: 0.95em; line-height: 1.4; word-wrap: break-word; }
#chat-messages p strong { color: var(--color-stone-light); }
#chat-form { border-top: 2px solid var(--color-stone-medium); }
#chat-input {
  width: 100%; border: none; background: transparent; padding: 10px;
  box-sizing: border-box; font-family: 'Georgia', serif; font-size: 1em;
  color: var(--color-text-light); outline: none;
}
#chat-input::placeholder { color: var(--color-stone-light); opacity: 0.7; }

/* =============================================================
   === HUD HP/MP/XP ===
   ============================================================= */
#stats-container {
  position: fixed; top: 10px; left: 10px; width: 250px; z-index: 99; pointer-events: auto;
  display: flex; flex-direction: column; gap: 8px; background: var(--color-stone-dark-glass);
  padding: 10px; border-radius: 5px; border: 2px solid var(--color-stone-medium);
  box-shadow: 0 0 5px rgba(0,0,0,0.5); cursor: pointer; transition: all 0.2s ease;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%);
}
#stats-container:hover { background: var(--color-stone-dark); border-color: var(--color-accent-teal); box-shadow: 0 0 10px var(--color-accent-shadow); }
.stat-bar {
  width: 100%; height: 20px; background-color: #1A2428; border: 2px solid var(--color-stone-medium);
  box-sizing: border-box; position: relative; border-radius: 3px; overflow: hidden;
}
.stat-bar-fill { height: 100%; width: 100%; transition: width 0.2s ease-out; }
#hp-bar-fill { background-color: var(--color-hp); box-shadow: 0 0 5px var(--color-hp); }
#mp-bar-fill { background-color: var(--color-mp); box-shadow: 0 0 5px var(--color-mp); }
.stat-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 12px; font-weight: bold; color: white; text-shadow: 1px 1px 2px #000;
}
#xp-bar-container {
  position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
  width: 60%; max-width: 800px; height: 20px; background-color: #1A2428;
  border: 2px solid var(--color-stone-medium); box-sizing: border-box; border-radius: 3px;
  overflow: hidden; z-index: 99; pointer-events: auto; box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
#xp-bar-fill {
  height: 100%; width: 0%; background-color: var(--color-xp);
  box-shadow: 0 0 5px var(--color-accent-shadow); transition: width 0.2s ease-out;
}
#xp-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 12px; font-weight: bold; color: white; text-shadow: 1px 1px 2px #000;
}

/* =============================================================
   === JANELAS ARRASTÁVEIS (BASE DESKTOP) ===
   ============================================================= */
.draggable-window {
  position: fixed; width: 250px; min-height: 100px; max-height: 400px;
  background: var(--color-stone-dark-glass); border: 2px solid var(--color-stone-medium);
  box-shadow: 0 0 10px rgba(0,0,0,0.5); backdrop-filter: blur(5px);
  pointer-events: auto; z-index: 98; display: flex; flex-direction: column;
  font-family: 'Georgia', serif; color: var(--color-text-light); border-radius: 5px;
}
.draggable-window.hidden { display: none !important; }
.window-header {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--color-stone-dark); border-bottom: 2px solid var(--color-stone-medium);
  padding: 5px 10px;
}
.draggable-header { cursor: move; }
.window-title { margin: 0; font-size: 1.1em; color: var(--color-accent-teal); font-weight: bold; user-select: none; }
.window-close-btn {
  background: var(--color-stone-medium); border: 2px solid var(--color-stone-dark);
  color: var(--color-text-light); font-weight: bold; font-family: 'Arial', sans-serif;
  width: 24px; height: 24px; cursor: pointer; line-height: 20px; padding: 0;
  border-radius: 4px; transition: all 0.2s ease; position: relative; z-index: 10;
}
.window-close-btn:hover { background: #FF5252; color: #FFF; }
.window-content {
  padding: 10px; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: var(--color-stone-medium) transparent;
}

/* --- Status --- */
#status-container { top: 105px; left: 10px; }
#status-points {
  font-size: 0.9em; font-weight: bold; text-align: center; margin-bottom: 10px;
  background: rgba(0,0,0,0.2); padding: 5px; border-radius: 3px; color: var(--color-accent-teal);
}
#status-list {
  list-style: none; padding: 0; margin: 0; border-bottom: 2px solid var(--color-stone-medium);
  padding-bottom: 5px; margin-bottom: 5px;
}
#status-list li {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px; font-size: 0.95em; border-bottom: 1px dashed var(--color-stone-medium); padding-bottom: 4px;
}
.add-stat-btn {
  background: var(--color-stone-medium); color: var(--color-text-light);
  border: 1px solid var(--color-stone-dark); border-radius: 3px; font-weight: bold;
  cursor: pointer; margin-left: 10px; padding: 2px 6px; line-height: 1; transition: all 0.2s ease;
}
.add-stat-btn:hover { background: var(--color-accent-teal); color: var(--color-text-dark); }
.add-stat-btn:disabled { background: #455A64; cursor: not-allowed; }

/* --- Inventário (Desktop Default) --- */
#inventory-window { width: 220px; max-height: 300px; top: 100px; left: 300px; }
#inventory-grid-container { display: grid; grid-template-columns: repeat(3, 60px); gap: 6px; }
.inventory-slot {
  width: 60px; height: 60px; position: relative; background: rgba(0,0,0,0.3);
  border: 1px solid var(--color-stone-medium); border-radius: 3px; transition: all 0.2s ease; user-select: none;
}
.inventory-slot:hover { border-color: var(--color-accent-teal); background: rgba(0, 240, 224, 0.1); }
.item-quantity {
  position: absolute; bottom: 2px; right: 4px; color: white;
  font-size: 12px; font-weight: bold; text-shadow: 1px 1px 2px black; pointer-events: none;
}

/* --- Equipamento (Desktop Default) --- */
#equipment-window { width: 300px; max-height: 450px; top: 100px; left: 700px; }
#equipment-content-wrapper { display: flex; gap: 10px; }
#character-preview-equip {
  width: 120px; flex-shrink: 0; height: 300px; background: rgba(0,0,0,0.3);
  border: 1px solid var(--color-stone-medium); border-radius: 3px;
}
#equipment-grid-container {
  flex-grow: 1; display: grid; height: 300px;
  grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); gap: 10px;
  grid-template-areas: "head amulet" "weapon armor" "shield ring" "legs feet";
}
.equipment-slot {
  width: 100%; height: 100%; background: rgba(0,0,0,0.3);
  border: 1px solid var(--color-stone-medium); border-radius: 3px; transition: all 0.2s ease;
}
.equipment-slot:hover { border-color: var(--color-accent-teal); background: rgba(0, 240, 224, 0.1); }

/* --- Habilidades --- */
#skills-window { width: 300px; min-height: 200px; max-height: 400px; top: 100px; left: 1020px; }
#skills-placeholder { text-align: center; font-style: italic; color: var(--color-stone-light); opacity: 0.7; margin-top: 20px; }
.skill-category-title {
  font-size: 1.1em; color: var(--color-accent-teal); margin: 15px 0 5px 0;
  border-bottom: 1px solid var(--color-stone-medium); padding-bottom: 3px;
}
.skill-list { list-style: none; padding: 0; margin: 0; }
.skill-list li { padding: 4px 0; display: flex; flex-direction: column; gap: 4px; }
.skill-info { display: flex; justify-content: space-between; align-items: center; font-size: 0.9em; }
.skill-name { color: var(--color-text-light); font-weight: bold; }
.skill-level { color: var(--color-stone-light); font-weight: bold; }
.skill-progress-bar-outer {
  width: 100%; height: 8px; background: #1A2428; border: 1px solid var(--color-stone-medium);
  border-radius: 2px; overflow: hidden;
}
.skill-progress-bar-inner {
  height: 100%; width: 0%; background: var(--color-xp);
  box-shadow: 0 0 3px var(--color-accent-shadow); transition: width 0.2s ease-out;
}

/* --- Comércio (NPC) --- */
#trade-window { width: 350px; min-height: 250px; max-height: 500px; top: 150px; left: 500px; }
#trade-tabs-wrapper { display: flex; gap: 5px; border-bottom: 2px solid var(--color-stone-medium); padding-bottom: 8px; margin-bottom: 10px; }
.trade-tab-btn {
  flex-grow: 1; padding: 8px; font-size: 1em; font-weight: bold;
  background: var(--color-stone-medium); color: var(--color-text-light);
  border: 2px solid var(--color-stone-dark); cursor: pointer; font-family: 'Georgia', serif;
  border-radius: 4px; transition: all 0.2s ease;
}
.trade-tab-btn:hover { background: var(--color-stone-light); color: var(--color-text-dark); }
.trade-tab-btn.active {
  background: var(--color-accent-teal); color: var(--color-text-dark);
  border-color: var(--color-accent-teal-hover); box-shadow: 0 0 10px var(--color-accent-shadow);
}
.trade-panel { display: none; }
.trade-panel.visible { display: block; }
.trade-placeholder { text-align: center; font-style: italic; color: var(--color-stone-light); opacity: 0.7; margin-top: 20px; }
.trade-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 5px; cursor: pointer;
  border-bottom: 1px solid var(--color-stone-medium); transition: all 0.2s ease; user-select: none;
}
.trade-item:hover { background: var(--color-stone-light); color: var(--color-text-dark); }
.trade-item:hover .trade-item-price { color: var(--color-text-dark); }
.trade-item-icon {
  width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat;
  background-position: center; image-rendering: pixelated; border: 1px solid var(--color-stone-medium);
  background-color: rgba(0,0,0,0.3); border-radius: 3px; flex-shrink: 0; position: relative;
}
.trade-item-icon .item-quantity { position: absolute; bottom: 1px; right: 2px; }
.trade-item-name { flex-grow: 1; font-size: 0.95em; font-weight: bold; }
.trade-item-price { font-weight: bold; color: var(--color-accent-teal); padding-left: 10px; }

/* --- Modal Comércio --- */
#trade-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7); z-index: 200; display: flex;
  justify-content: center; align-items: center; pointer-events: auto;
}
#trade-modal-overlay.hidden { display: none; }
#trade-modal {
  width: 300px; background: var(--color-stone-dark); border: 2px solid var(--color-accent-teal);
  box-shadow: 0 0 20px var(--color-accent-shadow); padding: 20px; border-radius: 8px;
  display: flex; flex-direction: column; gap: 15px; color: var(--color-text-light); font-family: 'Georgia', serif;
}
#trade-modal-title { margin: 0; text-align: center; color: var(--color-accent-teal); border-bottom: 1px solid var(--color-stone-medium); padding-bottom: 10px; }
#trade-modal-content { display: flex; gap: 15px; align-items: center; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 5px; }
#trade-modal-icon {
  width: 50px; height: 50px; background-size: contain; background-repeat: no-repeat;
  background-position: center; image-rendering: pixelated; border: 1px solid var(--color-stone-medium);
  background-color: rgba(0,0,0,0.4);
}
#trade-modal-info { display: flex; flex-direction: column; }
#trade-modal-item-name { font-weight: bold; font-size: 1.1em; }
#trade-modal-unit-price { font-size: 0.9em; color: #FFD700; }
#trade-modal-quantity-wrapper { display: flex; justify-content: center; gap: 10px; align-items: center; }
#trade-modal-quantity-wrapper button {
  width: 30px; height: 30px; font-weight: bold; background: var(--color-stone-medium);
  border: 1px solid var(--color-stone-light); color: white; cursor: pointer;
}
#trade-modal-quantity-wrapper input {
  width: 60px; text-align: center; background: #1A2428; border: 1px solid var(--color-stone-medium);
  color: white; padding: 5px; font-weight: bold;
}
#trade-total-price { text-align: center; font-size: 1.2em; font-weight: bold; color: #FFD700; }
.tiny-coin { width: 16px; height: 16px; vertical-align: middle; }
#trade-modal-actions { display: flex; justify-content: space-between; gap: 10px; }
#trade-confirm-btn {
  flex: 1; padding: 10px; background: var(--color-accent-teal); border: none;
  color: var(--color-text-dark); font-weight: bold; cursor: pointer; transition: background 0.2s;
}
#trade-confirm-btn:hover { background: var(--color-accent-teal-hover); }
#trade-cancel-btn {
  flex: 1; padding: 10px; background: #FF5252; border: none; color: white;
  font-weight: bold; cursor: pointer; transition: background 0.2s;
}
#trade-cancel-btn:hover { background: #ff1744; }

/* --- Loot --- */
#loot-window { width: 220px; min-height: 150px; max-height: 300px; top: 150px; left: 550px; }
#loot-grid-container { display: grid; grid-template-columns: repeat(3, 60px); gap: 6px; margin-bottom: 10px; min-height: 60px; }
.loot-slot:hover { border-color: #FFEB3B; background: rgba(255, 235, 59, 0.1); }
#loot-take-all-btn {
  width: 100%; padding: 10px; background: var(--color-accent-teal);
  border: 2px solid var(--color-accent-teal-hover); color: var(--color-text-dark);
  font-weight: bold; font-size: 1.1em; cursor: pointer; font-family: 'Georgia', serif;
  border-radius: 4px; transition: all 0.3s ease;
}
#loot-take-all-btn:hover { background: var(--color-accent-teal-hover); }

/* =============================================================
   === GUILDA (ISEKAI STYLE) ===
   ============================================================= */
#guild-window { 
  width: 600px; /* Mais largo para caber o Grid */
  min-height: 450px; 
  top: 150px; left: 400px; /* Mantendo posicionamento original */
  background-color: #3E2723; /* Cor de Madeira Escura */
  border: 4px solid #1a100e;
  border-radius: 8px;
}

/* Fundo do Quadro (Madeira/Cortiça) */
.guild-board-bg {
  background-color: #5D4037;
  background-image: repeating-linear-gradient(45deg, #4E342E 25%, transparent 25%, transparent 75%, #4E342E 75%, #4E342E), repeating-linear-gradient(45deg, #4E342E 25%, #5D4037 25%, #5D4037 75%, #4E342E 75%, #4E342E);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  padding: 10px;
}

/* Abas de Rank (Parecem etiquetas de arquivo) */
#guild-rank-tabs {
  display: flex;
  background: #3E2723;
  padding: 5px 10px 0 10px;
  gap: 2px;
}

.guild-tab {
  padding: 6px 15px;
  background-color: #8D6E63;
  border: 1px solid #3E2723;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  color: #EFEBE9;
  font-weight: bold;
  cursor: pointer;
  font-family: 'Georgia', serif;
  transition: all 0.2s;
}

.guild-tab:hover { background-color: #A1887F; }
.guild-tab.active {
  background-color: #D7CCC8; /* Cor de papel claro */
  color: #3E2723; /* Texto escuro */
  height: 35px; /* Fica um pouco maior */
  margin-top: -5px;
}

/* O "Papel" da Missão */
.mission-paper {
  background-color: #F5F5DC; /* Bege Pergaminho */
  color: #3E2723; /* Texto Marrom Escuro (Tinta) */
  padding: 10px;
  border-radius: 2px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  font-family: 'Courier New', Courier, serif; /* Fonte "datilografada" ou antiga */
  position: relative;
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
}

.mission-paper:hover {
  transform: scale(1.02) rotate(-1deg);
  z-index: 10;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}

/* O "Pino" segurando o papel */
.mission-pin {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 30% 30%, #ff5252, #b71c1c);
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Grid Container para as missões */
#guild-mission-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); /* Responsivo */
  gap: 15px;
  padding: 10px;
  max-height: 350px;
  overflow-y: auto; /* Scroll apenas aqui dentro */
}

/* Botão de Entregar (Selo de Cera) */
.guild-seal-btn {
  background: #D32F2F;
  color: white;
  border: 2px solid #B71C1C;
  border-radius: 50px; /* Formato ovalado */
  padding: 5px 15px;
  font-weight: bold;
  cursor: pointer;
  align-self: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  font-size: 0.9em;
  margin-top: 5px;
}
.guild-seal-btn:hover { background: #E53935; }
.guild-seal-btn:disabled { background: #9E9E9E; border-color: #616161; cursor: not-allowed; }

/* Recompensas */
.mission-reward-text {
  font-weight: bold;
  color: #bf360c; /* Laranja escuro */
  font-size: 0.9em;
  text-align: center;
  margin-top: 5px;
  border-top: 1px dashed #A1887F;
  padding-top: 5px;
}

/* Rank Tag no Canto do Papel */
.mission-rank-stamp {
  position: absolute;
  top: 5px;
  right: 5px;
  font-weight: 900;
  font-size: 1.5em;
  opacity: 0.3;
  color: #3E2723;
  transform: rotate(15deg);
  border: 2px solid #3E2723;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Estilo do Painel de Info do Jogador */
.guild-header-info {
  background: #3E2723;
  color: #D7CCC8;
  padding: 5px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  border: 1px solid #8D6E63;
  display: flex;
  justify-content: space-between;
}

/* --- VIP --- */
#vip-window { width: 320px; min-height: 200px; max-height: 500px; top: 100px; left: 600px; }
#vip-content-wrapper { display: flex; flex-direction: column; gap: 15px; }
#current-rank-info {
  text-align: center; background: var(--color-stone-dark); border: 1px solid var(--color-stone-medium);
  padding: 10px; border-radius: 4px; font-size: 1.1em;
}
.rank-plan-card {
  background: #1A2428; border: 2px solid var(--color-stone-medium); border-radius: 6px;
  padding: 15px; display: flex; flex-direction: column; gap: 10px; transition: all 0.2s ease;
}
.rank-plan-card:hover { border-color: var(--color-accent-teal); box-shadow: 0 0 8px var(--color-accent-shadow); }
.rank-plan-header {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--color-stone-medium); padding-bottom: 5px;
}
.rank-plan-name { font-size: 1.2em; font-weight: bold; }
.rank-plan-price { font-size: 1.1em; font-weight: bold; color: #FFD700; display: flex; align-items: center; gap: 5px; }
.rank-plan-price .tiny-coin { width: 16px; height: 16px; }
.rank-plan-description { font-size: 0.9em; color: var(--color-stone-light); line-height: 1.4; }
.rank-plan-description span { font-weight: bold; }
.rank-plan-btn {
  padding: 8px; background: var(--color-accent-teal); border: 2px solid var(--color-accent-teal-hover);
  color: var(--color-text-dark); font-weight: bold; font-size: 1.1em; cursor: pointer;
  border-radius: 4px; transition: all 0.2s ease;
}
.rank-plan-btn:hover { background: var(--color-accent-teal-hover); }
.rank-plan-btn:disabled { background: #455A64; border-color: #546E7A; color: #90A4AE; cursor: not-allowed; opacity: 0.7; }
.rank-plan-card.current-rank { border-color: #FFD700; box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); }
.rank-plan-card.current-rank .rank-plan-btn { background: #66BB6A; }

/* --- Loja de Ouro --- */
#gold-shop-window { width: 680px; min-height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.gold-plans-container { display: flex; gap: 20px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.gold-plan-card {
  background: rgba(0, 0, 0, 0.6); border: 1px solid #546E7A; border-radius: 8px;
  padding: 15px; width: 200px; text-align: center; transition: transform 0.2s, border-color 0.2s;
}
.gold-plan-card:hover { transform: translateY(-5px); border-color: #FFD700; box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); }
.gold-header { display: flex; flex-direction: column; margin-bottom: 10px; border-bottom: 1px solid #ffffff20; padding-bottom: 10px; }
.gold-amount { font-size: 1.4em; font-weight: bold; color: #FFD700; }
.gold-price { font-size: 1.1em; color: #fff; }
.gold-icon-area { font-size: 3em; margin: 15px 0; }
.gold-buy-btn {
  width: 100%; padding: 10px; background: #FFD700; color: #000;
  font-weight: bold; border: none; border-radius: 4px; cursor: pointer;
  pointer-events: auto !important; position: relative; z-index: 2001;
}
.gold-buy-btn:hover { background: #ffea70; }

/* --- Hotkeys --- */
#hotkey-bar-container {
  position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 99; pointer-events: auto;
}
.hotkey-slot {
  width: 48px; height: 48px; position: relative; background: var(--color-stone-dark-glass);
  border: 2px solid var(--color-stone-medium); border-radius: 5px; transition: all 0.2s ease;
  user-select: none; box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.hotkey-slot:hover { border-color: var(--color-accent-teal); background: rgba(0, 240, 224, 0.1); }
.hotkey-slot .hotkey-number {
  position: absolute; top: 2px; left: 4px; font-size: 12px; font-weight: bold;
  color: var(--color-text-light); text-shadow: 1px 1px 2px black; pointer-events: none;
}
.hotkey-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.hotkey-slot .item-quantity { font-size: 11px; }

/* --- Tooltip --- */
#item-tooltip {
  position: fixed; width: 220px; background: var(--color-stone-dark-glass);
  border: 2px solid var(--color-accent-teal); box-shadow: 0 0 10px var(--color-accent-shadow);
  backdrop-filter: blur(5px); border-radius: 5px; padding: 10px; z-index: 999; pointer-events: none;
  font-family: 'Georgia', serif; color: var(--color-text-light);
}
#item-tooltip.hidden { display: none; }
#item-tooltip h4 { margin: 0 0 8px 0; font-size: 1.1em; color: var(--color-accent-teal); border-bottom: 1px solid var(--color-stone-medium); padding-bottom: 5px; }
#item-tooltip p { margin: 0; font-size: 0.9em; color: var(--color-text-light); line-height: 1.4; }
#item-tooltip .tooltip-color-green { color: var(--color-accent-teal); }
#item-tooltip .tooltip-color-red { color: #FF5252; }
#item-tooltip .tooltip-color-yellow { color: #FFD700; }
#item-tooltip .tooltip-color-white { color: var(--color-text-light); }
#item-tooltip .tooltip-color-gray { color: var(--color-stone-light); }

/* --- Rank Tag --- */
#player-rank-tag {
  position: fixed; top: 85px; left: 10px; padding: 5px 10px; background: var(--color-stone-dark);
  border: 2px solid var(--color-stone-medium); border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.5);
  z-index: 99; pointer-events: none; font-size: 0.9em; font-weight: bold;
  color: var(--color-text-light); backdrop-filter: blur(5px); transition: all 0.2s ease;
}
#player-rank-tag:hover { border-color: var(--color-accent-teal); box-shadow: 0 0 10px var(--color-accent-shadow); }
#rank-tag-name { text-shadow: 1px 1px 2px #000; }

/* --- Context Menu --- */
#player-context-menu {
  position: fixed; background: var(--color-stone-dark); border: 2px solid var(--color-accent-teal);
  box-shadow: 0 0 15px var(--color-accent-shadow); border-radius: 4px; padding: 5px;
  display: flex; flex-direction: column; gap: 2px; z-index: 2000; min-width: 180px;
}
#player-context-menu.hidden { display: none; }
.context-btn {
  background: transparent; border: none; color: var(--color-text-light); text-align: left;
  padding: 8px 12px; cursor: pointer; font-family: 'Georgia', serif; font-size: 0.95em;
  transition: all 0.2s; border-radius: 3px;
}
.context-btn:hover { background: var(--color-accent-teal); color: var(--color-text-dark); }

/* --- Perfil --- */
#player-profile-window { width: 500px; max-height: 600px; top: 15%; left: calc(50% - 250px); z-index: 2001; pointer-events: auto; }
#profile-header { display: flex; gap: 15px; align-items: center; padding-bottom: 10px; }
#profile-avatar-placeholder {
  width: 64px; height: 64px; background-color: rgba(0,0,0,0.3);
  border: 2px solid var(--color-stone-medium); border-radius: 4px;
  background-image: url('/assets/Interface/icons/generic_avatar.png'); background-size: cover;
}
#profile-basic-info h2 { margin: 0; color: var(--color-accent-teal); font-size: 1.4em; }
#profile-basic-info p { margin: 2px 0 5px 0; color: var(--color-stone-light); font-style: italic; }
#p-ranks { display: flex; gap: 5px; }
.rank-badge { padding: 2px 6px; background: #1A2428; border: 1px solid var(--color-stone-medium); border-radius: 3px; font-size: 0.8em; font-weight: bold; }
.profile-divider { border: 0; border-top: 1px solid var(--color-stone-medium); margin: 5px 0 15px 0; }
#profile-body { display: flex; gap: 20px; }
.profile-section { flex: 1; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 4px; }
.profile-section h4 {
  margin: 0 0 10px 0; color: var(--color-accent-teal); text-align: center;
  border-bottom: 1px solid var(--color-stone-medium); padding-bottom: 5px;
}
#p-stats-list { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
#p-stats-list li { display: flex; justify-content: space-between; margin-bottom: 4px; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 2px; }
.stat-bonus { color: #66BB6A; font-size: 0.85em; margin-left: 4px; }
#p-equipment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; justify-items: center; }
.p-equip-slot {
  width: 48px; height: 48px; background: rgba(0,0,0,0.4);
  border: 1px solid var(--color-stone-medium); border-radius: 3px; position: relative;
  display: flex; justify-content: center; align-items: center;
}
.p-equip-slot img { width: 90%; height: 90%; object-fit: contain; image-rendering: pixelated; }

#debug-info {
  position: fixed; bottom: 10px; left: 10px; width: 250px;
  background: var(--color-stone-dark-glass); border: 2px solid var(--color-stone-medium);
  border-radius: 5px; padding: 5px 8px; box-sizing: border-box; z-index: 98; pointer-events: none;
  color: var(--color-text-light); font-family: 'Courier New', Courier, monospace; font-size: 14px;
  font-weight: bold; text-shadow: 1px 1px 1px #000; display: none; backdrop-filter: blur(5px);
}

/* PIX */
.runic-pix-section { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--color-stone-medium); text-align: center; }
.pix-label { font-size: 0.8em; font-weight: bold; color: var(--color-stone-light); margin-bottom: 8px; letter-spacing: 1px; }
.pix-box-container {
  background: rgba(0, 0, 0, 0.6); border: 1px dashed var(--color-accent-teal); padding: 10px;
  border-radius: 4px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.3s ease;
}
.pix-box-container:hover { background: var(--color-stone-dark-glass); border-color: #FFD700; box-shadow: 0 0 10px var(--color-accent-shadow); }
.pix-key-text { color: var(--color-accent-teal); font-family: 'Courier New', monospace; font-weight: bold; font-size: 1.1em; user-select: all; }
.copy-icon { filter: grayscale(1); opacity: 0.7; }
.pix-note { font-size: 0.75em; color: var(--color-stone-medium); margin-top: 8px; font-style: italic; }
.pix-feedback { color: #66BB6A; font-size: 0.8em; font-weight: bold; height: 15px; opacity: 0; transition: opacity 0.3s; margin-top: 5px; }
.pix-feedback.visible { opacity: 1; }

/* Banco */
#bank-window { width: 340px; min-height: 350px; top: 100px; left: 400px; }
#bank-tabs-container { display: flex; justify-content: space-between; align-items: center; background: #1A2428; padding: 5px; border-bottom: 2px solid var(--color-stone-medium); }
#bank-tabs-list { display: flex; gap: 4px; overflow-x: auto; max-width: 260px; }
.bank-tab-btn {
  padding: 6px 12px; background: var(--color-stone-medium); border: 1px solid var(--color-stone-dark);
  color: var(--color-text-light); font-weight: bold; cursor: pointer; border-radius: 4px 4px 0 0; transition: all 0.2s; font-size: 0.9em;
}
.bank-tab-btn:hover { background: var(--color-stone-light); color: var(--color-text-dark); }
.bank-tab-btn.active { background: var(--color-accent-teal); color: var(--color-text-dark); border-color: var(--color-accent-teal-hover); box-shadow: 0 0 5px var(--color-accent-shadow); }
#bank-tab-exchange { background: #FFD700; color: #000; border: 1px solid #FFA000; }
#bank-tab-exchange:hover { background: #FFECB3; }
#bank-grid-container { display: grid; grid-template-columns: repeat(5, 50px); gap: 5px; justify-content: center; margin-top: 10px; margin-bottom: 10px; }
#bank-buy-tab-btn {
  width: 100%; padding: 8px; background: #66BB6A; border: none; color: white;
  font-weight: bold; cursor: pointer; margin-top: 5px; border-radius: 4px;
}
#bank-buy-tab-btn:hover { background: #81C784; }
#bank-exchange-panel { padding: 10px; text-align: center; }
.exchange-title { color: var(--color-accent-teal); font-weight: bold; margin-bottom: 15px; font-size: 1.1em; }
.exchange-row { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 8px; }
.coin-icon { width: 32px; height: 32px; image-rendering: pixelated; }
.exchange-rate { font-weight: bold; color: #B0BEC5; }
.exchange-controls { display: flex; justify-content: center; gap: 5px; margin-bottom: 15px; }
.exchange-controls input { width: 60px; background: #1A2428; border: 1px solid var(--color-stone-medium); color: white; text-align: center; padding: 5px; }
.exchange-controls button { background: var(--color-stone-medium); border: 1px solid var(--color-stone-light); color: white; cursor: pointer; font-size: 0.8em; padding: 5px 8px; border-radius: 3px; }
.exchange-controls button:hover { background: var(--color-accent-teal); color: var(--color-text-dark); }

/* Configurações */
#settings-window { width: 300px; height: auto; top: 100px; left: 100px; }
.settings-group { margin-bottom: 15px; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 5px; }
.settings-group label { display: block; font-weight: bold; color: var(--color-accent-teal); margin-bottom: 5px; }
.settings-group input[type=range] { width: 100%; cursor: pointer; }

/* Default Hide Mobile Controls on PC */
#mobile-controls-zone, #mobile-attack-btn { display: none; }
#mobile-menu-btn { display: none; }

/* =============================================================
   === VISIBILIDADE DE CONTROLES (GAME LOGIC) ===
   ============================================================= */

/* 1. Esconde controles mobile e hotkeys por padrão (Login/Loading/Seleção) */
#mobile-controls-zone, 
#mobile-attack-btn,
#hotkey-bar-container { 
    display: none !important; 
}

/* 2. O Hotkey Container no PC aparece quando o jogo roda */
body.game-running #hotkey-bar-container {
    display: flex !important;
}

#collapsible-icons { display: flex; gap: 8px; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Classes Auxiliares */
.hidden { display: none !important; }
#item-ghost { pointer-events: none; position: fixed; z-index: 9999; width: 50px; height: 50px; opacity: 0.8; }

/* =============================================================
   === ADAPTAÇÃO MOBILE (MODO RETRATO E PAISAGEM) ===
   ============================================================= */

/* 1. MODO GERAL (TABLET/MOBILE) E MODO RETRATO */
@media only screen and (max-width: 1024px) {

    /* --- CORREÇÃO: TELA DE LOGIN --- */
    #login-overlay {
        display: flex; align-items: center; justify-content: center;
        padding: 10px; overflow-y: auto;
    }
    #login-overlay[style*="display: none"] { display: none !important; }

    #login-container {
        width: 100% !important; max-width: 400px; margin: auto; padding: 15px !important;
        transform: none !important; background: rgba(38, 50, 56, 0.95);
        border: 2px solid var(--color-accent-teal); border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.8); max-height: 95vh; overflow-y: auto;
    }

    #login-title { font-size: 1.8em; margin-bottom: 10px; }
    .auth-tab-btn { flex: 1; padding: 10px 0; font-size: 1em; text-align: center; }
    #auth-tabs-wrapper { display: flex; gap: 5px; margin-bottom: 10px; }
    .auth-input { font-size: 14px; padding: 10px; margin-bottom: 10px; background: rgba(0,0,0,0.4); border-radius: 6px; }
    .auth-button { padding: 12px; font-size: 1.1em; margin-top: 5px; border-radius: 6px; }
    #login-image-panel { display: none !important; }

    /* Ajuste da Seleção de Classe */
    #class-container { width: 95% !important; padding: 15px; transform: none !important; top: 20px; max-height: 90vh; overflow-y: auto; }
    #class-preview-canvas { width: 100px; height: 140px; }

    /* --- CONTROLES (JOYSTICK) - APENAS QUANDO O JOGO RODA --- */
    body.game-running #mobile-controls-zone {
        display: block !important; 
        position: fixed; bottom: 30px; left: 20px;
        width: 120px; height: 120px; 
        z-index: 9000;
        background: rgba(255, 255, 255, 0.1); border: 2px dashed rgba(255, 255, 255, 0.3);
        border-radius: 50%; touch-action: none;
    }

    /* Estilo do Botão Auto Ataque - APENAS QUANDO O JOGO RODA */
    body.game-running #mobile-attack-btn {
        display: block !important; 
        position: fixed; 
        bottom: 40px; 
        right: 20px;
        width: 80px; 
        height: 80px; 
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.3); 
        border: 2px solid rgba(255,255,255,0.5);
        color: white; 
        font-size: 18px; 
        font-weight: bold;
        z-index: 9000;
        touch-action: manipulation; 
        user-select: none; 
        outline: none;
        transition: all 0.3s ease;
    }

    #mobile-attack-btn.active {
        background: rgba(0, 200, 0, 0.6);
        border-color: #00FF00;
        box-shadow: 0 0 15px #00FF00;
        text-shadow: 0 0 5px black;
    }

    #mobile-attack-btn:active { transform: scale(0.95); }

    /* --- UI ADAPTADA --- */
    #stats-container { transform: scale(0.85); transform-origin: top left; top: 10px; left: 10px; }
    #player-rank-tag { transform: scale(0.85); transform-origin: top left; top: 70px; left: 10px; }

    #top-right-icons-container {
        transform: none; top: 10px; right: 10px !important;
        width: auto; display: flex; align-items: flex-start; flex-direction: row;
        gap: 5px; z-index: 9100;
    }
    .top-icon-btn { width: 40px; height: 40px; padding: 4px; }
    #mobile-menu-btn { display: block !important; cursor: pointer; order: 2; width: 40px; height: 40px; }
    #chat-toggle-button { display: block; order: 1; width: 40px; height: 40px; }

    #collapsible-icons {
        display: none; flex-direction: column; gap: 8px; position: absolute; top: 50px; right: 0;
        background: rgba(38, 50, 56, 0.95); padding: 8px; border-radius: 8px;
        border: 2px solid var(--color-accent-teal); box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    }
    #collapsible-icons.open { display: flex; animation: slideDown 0.2s ease-out; }

    /* HOTKEYS (Horizontal) - APENAS QUANDO O JOGO RODA */
    body.game-running #hotkey-bar-container {
        display: flex !important;
        flex-direction: row; position: fixed; bottom: 40px; left: 50%; right: auto; top: auto;
        transform: translateX(-50%); gap: 6px; z-index: 8000; max-height: none; overflow: visible;
    }
    .hotkey-slot { width: 42px; height: 42px; }

    #chat-container {
        top: auto; bottom: 120px; left: 10px; right: auto;
        width: 50%; max-width: 250px; height: 150px; transform: none; font-size: 12px; z-index: 8500;
    }

    /* BARRA DE XP (Largura Total) */
    #xp-bar-container {
        position: fixed; top: auto; bottom: 0; left: 0 !important; width: 100vw !important; height: 18px;
        border-radius: 0; border: none; border-top: 2px solid #546E7A; transform: none !important; z-index: 8000;
    }
    #xp-text { font-size: 11px; line-height: 18px; }

    #debug-info { 
        display: block !important; bottom: 25px; left: 5px; font-size: 10px; opacity: 0.7; pointer-events: none;
        width: fit-content !important; padding-right: 15px;
    }

    /* --- JANELAS GENÉRICAS (Sempre centralizadas) --- */
    .draggable-window {
        top: 50% !important; left: 50% !important;
        margin: 0 !important; max-height: 80vh !important; overflow-y: auto !important;
        /* O transform é ajustado abaixo ou sobrescrito na landscape */
    }

    /* Escalas Padrão (Podem ser sobrescritas no landscape mode) */
    #skills-window, #gold-shop-window, #vip-window {
        width: 90% !important; max-width: 300px !important;
        transform: translate(-50%, -50%) scale(0.85) !important;
    }
    
    #guild-window, #bank-window, #trade-window {
        width: 90% !important; max-width: 350px !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Outros ajustes menores */
    .gold-plans-container { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .gold-plan-card { width: 140px !important; padding: 8px !important; margin-bottom: 10px; }
    .gold-icon-area { font-size: 2em !important; margin: 5px 0 !important; }
    .gold-amount { font-size: 1.1em !important; }
    .rank-plan-card { padding: 8px !important; }
    .rank-plan-description { font-size: 0.9em !important; display: block !important; }
    .window-header { padding: 4px 8px; min-height: 25px; }
    .window-title { font-size: 1em; }
    #item-tooltip { display: none !important; }
}

/* =============================================================
   === MOBILE LANDSCAPE OVERHAUL (CELULAR DEITADO) ===
   === AQUI ESTÁ A MÁGICA DO INVENTÁRIO UNIFICADO ===
   ============================================================= */
@media only screen and (max-width: 1024px) and (orientation: landscape) {

    /* --- Wrapper Unificador --- 
       Cobre a tela inteira quando ativo */
    #mobile-unified-hub {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        z-index: 1000; pointer-events: none; /* Deixa passar clique se vazio */
        display: flex; justify-content: center; align-items: center;
    }

    /* Se tiver janela aberta dentro dele, escurece o fundo e ativa clique */
    #mobile-unified-hub:has(.draggable-window:not(.hidden)) {
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(5px);
        pointer-events: auto;
    }

    /* --- Reset das Janelas para Painéis Fixos --- */
    #inventory-window, #equipment-window {
        position: relative !important; top: auto !important; left: auto !important;
        transform: none !important; margin: 0 !important;
        height: 85vh !important; max-height: none !important;
        background: #263238 !important; border: none !important;
        display: flex !important; flex-direction: column;
        box-shadow: none !important;
    }

    /* Se estiver hidden, continua hidden */
    #inventory-window.hidden, #equipment-window.hidden {
        display: none !important;
    }

    /* --- EQUIPAMENTO (LADO ESQUERDO) --- */
    #equipment-window {
        width: 40% !important; /* Menor que o inventário */
        border-right: 2px solid var(--color-accent-teal) !important;
        border-radius: 12px 0 0 12px !important;
    }

    #equipment-content-wrapper {
        flex-direction: column; align-items: center; padding: 5px !important;
    }

    /* 1. Esconder o preview retangular cinza para limpar a visão no mobile */
    #character-preview-equip {
        display: none !important;
    }

    /* 2. Grid em formato de "Cruz" ou Boneco */
    #equipment-grid-container {
        display: grid !important;
        width: 100% !important;
        height: auto !important;
        
        /* 3 colunas fixas para garantir alinhamento perfeito */
        grid-template-columns: 55px 55px 55px !important;
        grid-template-rows: auto auto auto auto !important;
        
        /* Desenho do Corpo: Ponto (.) significa espaço vazio */
        grid-template-areas:
            ".      head   .     "
            "weapon armor  shield"
            "amulet legs   ring  "
            ".      feet   .     " !important;
            
        gap: 8px !important;
        justify-content: center !important; /* Centraliza o boneco no painel */
        align-content: center !important;
        margin-top: 20px !important;
    }


    /* --- INVENTÁRIO (LADO DIREITO) --- */
    #inventory-window {
        width: 50% !important; /* Maior para caber itens */
        border-radius: 0 12px 12px 0 !important;
    }

    /* Grid da Mochila com Rolagem */
    #inventory-grid-container {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)) !important;
        gap: 8px !important; padding: 10px;
        overflow-y: auto; align-content: start; justify-content: center;
    }

    /* Ajuste para garantir que os slots obedeçam as áreas */
    .equipment-slot {
        width: 55px !important; 
        height: 55px !important;
        background-color: rgba(0,0,0,0.4) !important;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    }
    /* Estilo de Cabeçalho Fixo */
    .window-header {
        background: #1b2327; padding: 10px; text-align: center;
        cursor: default !important; /* Sem cursor de mover */
    }
    .window-title { font-size: 1.1em; text-transform: uppercase; letter-spacing: 1px; }

    /* Botão fechar maior */
    .window-close-btn { width: 40px; height: 40px; font-size: 20px; background: #FF5252; }
}

/* =============================================================
   === SISTEMA DE PARTY ===
   ============================================================= */

/* HUD da Party */
#party-hud-container {
  position: fixed; top: 150px; left: 10px; width: 200px;
  background: rgba(0, 0, 0, 0.6); border: 2px solid var(--color-stone-medium);
  border-radius: 5px; padding: 5px; z-index: 95;
  display: flex; flex-direction: column; gap: 5px;
  backdrop-filter: blur(2px); pointer-events: auto;
}
.party-header {
  background: var(--color-stone-dark); color: var(--color-accent-teal);
  font-size: 0.9em; font-weight: bold; text-align: center;
  padding: 2px; cursor: move; border-radius: 3px; user-select: none;
}
.party-member-card {
  background: rgba(0,0,0,0.3); padding: 4px; border-radius: 3px;
  border-left: 3px solid transparent; font-family: 'Arial', sans-serif;
}
.party-member-card.is-leader { border-left-color: #FFD700; }
.party-member-name { font-size: 0.85em; color: white; font-weight: bold; display: block; margin-bottom: 2px; }
.party-bar-container { width: 100%; height: 6px; background: #333; margin-bottom: 2px; position: relative; }
.party-hp-fill { height: 100%; background: #d00; width: 100%; transition: width 0.2s; }
.party-mp-fill { height: 100%; background: #00d; width: 100%; transition: width 0.2s; }

/* Modal de Convite */
#party-invite-modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); z-index: 3000;
  display: flex; justify-content: center; align-items: center;
}
#party-invite-box {
  background: var(--color-stone-dark); border: 2px solid var(--color-accent-teal);
  padding: 20px; border-radius: 8px; text-align: center;
  box-shadow: 0 0 20px var(--color-accent-shadow); width: 300px;
}
#party-invite-text { color: var(--color-text-light); margin-bottom: 20px; font-size: 1.1em; }
.party-invite-buttons { display: flex; gap: 10px; justify-content: center; }
#btn-party-accept {
  padding: 10px 20px; background: #66BB6A; border: none; color: white; font-weight: bold; cursor: pointer;
}
#btn-party-decline {
  padding: 10px 20px; background: #FF5252; border: none; color: white; font-weight: bold; cursor: pointer;
}
#btn-party-accept:hover { background: #81C784; }
#btn-party-decline:hover { background: #ff8a80; }

/* =============================================================
   === ESTILO ISEKAI: FERREIRO REAL ===
   ============================================================= */

/* Janela Principal com visual "Magic Tech" */
#blacksmith-window {
    width: 380px;
    min-height: 500px;
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.95) 0%, rgba(35, 45, 55, 0.95) 100%);
    border: 1px solid #455A64;
    box-shadow: 0 0 20px rgba(0, 240, 224, 0.15), inset 0 0 30px rgba(0, 0, 0, 0.8);
    border-radius: 8px; /* Cantos levemente arredondados */
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% calc(100% - 20px), 
        calc(100% - 20px) 100%, 
        0 100%
    ); /* Corte futurista no canto inferior direito */
    color: #ECEFF1;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte mais limpa */
}

/* Header estilizado */
#blacksmith-window .window-header {
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid var(--color-accent-teal);
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#blacksmith-window .window-title {
    color: var(--color-accent-teal);
    font-family: 'Cinzel', serif; /* Se tiver essa fonte, fica ótimo, senão usa a padrão */
    letter-spacing: 2px;
    text-shadow: 0 0 10px var(--color-accent-shadow);
    font-size: 1.2em;
}

/* --- ABAS ESTILIZADAS --- */
.window-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    padding: 0 10px;
    gap: 10px;
    margin-top: 10px;
    border-bottom: 2px solid #455A64;
}

.bs-tab-btn {
    flex: 1;
    padding: 12px 0;
    background: transparent;
    color: #90A4AE;
    border: none;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    position: relative;
    transition: all 0.3s ease;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); /* Forma de trapézio */
}

.bs-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.bs-tab-btn.active {
    color: var(--color-accent-teal);
    background: linear-gradient(to top, rgba(0, 240, 224, 0.15), transparent);
    text-shadow: 0 0 8px var(--color-accent-teal);
    border-bottom: 3px solid var(--color-accent-teal);
}

/* Conteúdo */
#blacksmith-window .window-content {
    padding: 15px;
}

/* --- LISTA DE RECEITAS (SCROLL MÁGICO) --- */
#bs-recipe-list {
    height: 180px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #455A64;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 5px;
    /* Scrollbar fina */
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent-teal) #263238;
}

.bs-recipe-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    margin-bottom: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.02);
}

.bs-recipe-item:hover {
    background: rgba(0, 240, 224, 0.1);
    transform: translateX(5px); /* Move levemente para direita */
}

.bs-recipe-item.selected {
    background: linear-gradient(90deg, rgba(0, 240, 224, 0.2) 0%, transparent 100%);
    border-left: 3px solid var(--color-accent-teal);
    box-shadow: 0 0 10px rgba(0, 240, 224, 0.1);
}

.bs-recipe-icon {
    width: 36px;
    height: 36px;
    margin-right: 12px;
    border: 1px solid #546E7A;
    background-color: #000;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.bs-recipe-name {
    font-weight: bold;
    font-size: 1em;
    color: #ECEFF1;
    text-shadow: 1px 1px 2px #000;
}

.bs-recipe-rank {
    font-size: 0.8em;
    color: #FFD700; /* Dourado */
    border: 1px solid #FFD700;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: auto;
    background: rgba(255, 215, 0, 0.1);
}

/* --- ÁREA DE CRAFT (O CENTRO DE PODER) --- */
#bs-craft-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: radial-gradient(circle, rgba(0, 240, 224, 0.05) 0%, transparent 70%);
    border-top: 1px dashed #455A64;
    border-bottom: 1px dashed #455A64;
}

.bs-slot-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.bs-slot-label {
    font-size: 0.85em;
    color: #B0BEC5;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Slots de Craft Especiais */
#bs-result-slot, #bs-rune-slot {
    width: 64px;
    height: 64px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #546E7A;
    border-radius: 8px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Brilho quando tem item no slot de resultado */
#bs-result-slot img {
    filter: drop-shadow(0 0 8px var(--color-accent-teal));
}

.empty-rune-slot {
    border: 2px dashed #546E7A !important;
    cursor: pointer;
    position: relative;
}

.empty-rune-slot:hover {
    border-color: #FFD700 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.empty-rune-slot::after {
    content: '+';
    font-size: 2em;
    color: #546E7A;
    opacity: 0.5;
}

.bs-plus {
    font-size: 2.5em;
    color: var(--color-accent-teal);
    text-shadow: 0 0 10px var(--color-accent-teal);
    animation: pulseGlow 2s infinite;
}

/* Custo e Botão */
#bs-cost-display {
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #37474F;
}

#bs-craft-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(45deg, #FF6F00, #FFCA28); /* Gradiente Laranja/Dourado Isekai */
    border: none;
    color: #3E2723;
    font-weight: 900;
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(255, 111, 0, 0.4);
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

#bs-craft-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: rotate(45deg) translate(-100%, -100%);
    transition: transform 0.5s;
}

#bs-craft-btn:hover:not(:disabled)::after {
    transform: rotate(45deg) translate(100%, 100%); /* Efeito de brilho passando */
}

#bs-craft-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 111, 0, 0.6);
}

#bs-craft-btn:disabled {
    background: #37474F;
    color: #90A4AE;
    cursor: not-allowed;
    box-shadow: none;
}

/* --- MODAL DE RUNAS --- */
.rune-modal-content {
    background: rgba(20, 20, 25, 0.98);
    border: 2px solid var(--color-accent-teal);
    box-shadow: 0 0 30px rgba(0, 240, 224, 0.3);
    border-radius: 10px;
}

.rune-modal-content h4 {
    color: var(--color-accent-teal);
    text-align: center;
    border-bottom: 1px solid #455A64;
    padding-bottom: 10px;
    margin-top: 0;
}

#rune-grid-container .inventory-slot {
    width: 50px; 
    height: 50px;
    border-color: #546E7A;
}

#rune-grid-container .inventory-slot:hover {
    border-color: #FFD700;
    box-shadow: 0 0 10px #FFD700;
}

#close-rune-modal {
    background: #CF6679;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    transition: background 0.2s;
}
#close-rune-modal:hover { background: #B00020; }