/* =========================================================
   RPG Legend - style.css
   Estilos principais: layout, paineis, HUD, modais, mapa.
   ========================================================= */

:root{
  --ink: #10121a;
  --panel: #1d2230;
  --panel-2: #242a3a;
  --line: rgba(201,162,39,0.28);
  --parchment: #ecdfc0;
  --parchment-dim: #b9ab86;
  --gold: #c9a227;
  --gold-bright: #e8c65a;
  --ember: #c0532f;
  --blood: #8a2b2b;
  --mystic: #4a8073;
  --xp: #4a7fd6;

  /* cores de raridade */
  --r-comum: #b7b7b7;
  --r-incomum: #4caf7d;
  --r-raro: #3d8fd6;
  --r-epico: #a15fd6;
  --r-lendario: #e0a13a;
  --r-mitico: #e0483a;

  --font-display: 'Cinzel', serif;
  --font-body: 'EB Garamond', serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(ellipse at 20% -10%, rgba(201,162,39,0.08), transparent 45%),
    radial-gradient(ellipse at 100% 110%, rgba(74,128,115,0.10), transparent 50%),
    var(--ink);
  color: var(--parchment);
  font-family: var(--font-body);
  min-height: 100vh;
  padding: 24px 18px 60px;
}
.wrap{ max-width: 1260px; margin: 0 auto; }
.hidden{ display:none !important; }
::-webkit-scrollbar{ width: 8px; }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 4px; }

/* ---------- header ---------- */
header.title-bar{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 22px;
  flex-wrap: wrap; gap: 14px;
}
.title-bar-brand{ display:flex; align-items:center; gap: 12px; }
.title-bar-logo{ width: 72px; height: 72px; image-rendering: pixelated; flex-shrink: 0; }
.title-bar h1{
  font-family: var(--font-display); font-weight: 900; letter-spacing: 1.5px;
  font-size: 26px; margin: 0; color: var(--gold-bright);
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.title-bar .sub{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 2px;
  color: var(--parchment-dim); text-transform: uppercase; margin-top: 4px;
}
.header-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- buttons ---------- */
button.rune-btn{
  font-family: var(--font-display);
  background: linear-gradient(180deg, #2a2118, #1a140e);
  border: 1px solid var(--gold); color: var(--gold-bright);
  padding: 10px 18px; font-size: 13px; letter-spacing: 1px;
  cursor: pointer; border-radius: 3px; text-transform: uppercase; transition: all .15s ease;
}
button.rune-btn:hover{ background: linear-gradient(180deg, #3a2c18, #241a10); box-shadow: 0 0 14px rgba(201,162,39,0.35); }
button.rune-btn:active{ transform: scale(0.97); }
button.rune-btn.small{ padding: 7px 12px; font-size: 11px; }
button.rune-btn.ghost{ background: rgba(0,0,0,0.2); border-color: var(--line); color: var(--parchment-dim); }

/* ---------- panel base ---------- */
.panel{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: 6px; padding: 16px 16px 18px; position: relative;
}
.panel::before{
  content:""; position:absolute; inset: 4px;
  border: 1px solid rgba(201,162,39,0.12); border-radius: 4px; pointer-events: none;
}
.panel h2{
  font-family: var(--font-display); font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}

/* ---------- main menu ---------- */
#menuScreen{ max-width: 460px; margin: 60px auto; text-align:center; }
#menuScreen .menu-logo{ width: 160px; height: 160px; image-rendering: pixelated; margin-bottom: 8px; }
#menuScreen .menu-title{ font-family: var(--font-display); font-size: 34px; color: var(--gold-bright); margin-bottom: 6px; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }
#menuScreen .menu-sub{ font-family: var(--font-mono); font-size: 11px; color: var(--parchment-dim); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 30px; }
.menu-list{ display:flex; flex-direction:column; gap: 12px; }
.menu-list button{ width: 100%; padding: 14px; font-size: 14px; }
.menu-note{ margin-top: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--parchment-dim); }

#settingsPanel, #creditsPanel{ max-width: 460px; margin: 40px auto; }
.settings-row{ display:flex; align-items:center; justify-content:space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.settings-row:last-child{ border-bottom:none; }
.backup-settings{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:6px;background:rgba(0,0,0,.2)}
.backup-title{font-family:var(--font-display);color:var(--gold-bright);font-size:14px}
.backup-settings p{margin:7px 0 12px;color:var(--parchment-dim);font-size:12px;line-height:1.45}
.backup-actions{display:flex;gap:8px;flex-wrap:wrap}.backup-actions button{flex:1;min-width:155px}
.backup-status{min-height:17px;margin-top:9px;font-family:var(--font-mono);font-size:10.5px;color:var(--parchment-dim)}
.backup-status.success{color:#7fcdb8}.backup-status.error{color:#e28a8a}
.account-box{width:min(520px,100%)}.account-help{color:var(--parchment-dim);line-height:1.5;font-size:13px}.account-actions{display:flex;gap:9px;flex-wrap:wrap}.account-actions button{flex:1;min-width:135px}.account-welcome{padding:12px;border:1px solid var(--line);border-radius:5px;background:rgba(0,0,0,.22)}.account-welcome b{color:var(--gold-bright)}.account-message{min-height:18px;margin-top:13px;font-family:var(--font-mono);font-size:11px;color:#7fcdb8}.account-message.error{color:#e28a8a}

/* ---------- creation screen ---------- */
#creationScreen{ max-width: 920px; margin: 0 auto; }
.creation-step{ margin-bottom: 24px; }
.creation-step .step-title{ font-family: var(--font-display); font-size: 15px; color: var(--gold-bright); letter-spacing: 1px; margin-bottom: 4px; }
.creation-step .step-sub{ font-family: var(--font-mono); font-size: 11px; color: var(--parchment-dim); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
.name-input{ width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--line); color: var(--parchment); font-family: var(--font-body); font-size: 16px; padding: 11px 14px; border-radius: 4px; }
.name-input:focus{ outline:none; border-color: var(--gold); }
.pick-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 10px; }
.pick-card{ background: rgba(0,0,0,0.28); border: 1px solid var(--line); border-radius: 6px; padding: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pick-card:hover{ border-color: var(--gold); }
.pick-card.selected{ border-color: var(--gold-bright); box-shadow: 0 0 12px rgba(201,162,39,0.3); background: rgba(201,162,39,0.08); }
.pick-card .pc-top{ display:flex; align-items:center; gap:8px; margin-bottom: 5px; }
.pick-card .pc-icon{ font-size: 22px; }
.pick-card .pc-name{ font-size: 14.5px; color: var(--parchment); font-weight: 600; }
.pick-card .pc-desc{ font-size: 12px; color: var(--parchment-dim); line-height: 1.4; }
.pick-card .pc-name small{ font-family: var(--font-mono); font-size: 10px; color: var(--gold); text-transform: none; font-weight: 400; }
.pick-card.locked{ cursor: default; opacity: 0.9; }
.pick-card.signature{ border-color: var(--gold-bright); background: rgba(201,162,39,0.1); }
.mode-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 14px; }
.mode-card{ background: rgba(0,0,0,0.28); border: 1px solid var(--line); border-radius: 8px; padding: 18px; text-align:center; cursor:pointer; transition: all .15s; }
.mode-card:hover{ border-color: var(--gold); }
.mode-card.selected{ border-color: var(--gold-bright); box-shadow: 0 0 14px rgba(201,162,39,0.3); background: rgba(201,162,39,0.08); }
.mode-card .mc-icon{ font-size: 30px; margin-bottom: 8px; }
.mode-card .mc-name{ font-family: var(--font-display); font-size: 15px; color: var(--gold-bright); }
.mode-card .mc-desc{ font-size: 12.5px; color: var(--parchment-dim); margin-top: 6px; }
.creation-footer{ display:flex; align-items:center; justify-content: space-between; gap: 14px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.creation-error{ font-family: var(--font-mono); font-size: 12px; color: #e28a8a; min-height: 16px; }
.power-hint{ font-family: var(--font-mono); font-size: 11px; color: var(--parchment-dim); margin-bottom: 10px; }

/* ---------- game layout ---------- */
.layout{ display: grid; grid-template-columns: 320px 1fr 300px; gap: 20px; align-items: start; }
@media (max-width: 1020px){ .layout{ grid-template-columns: 1fr; } }

.hero-id{ display:flex; gap: 12px; align-items:center; margin-bottom: 12px; }
.hero-avatar{ width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a4256, #171a24); border: 1px solid var(--gold); display:flex; align-items:center; justify-content:center; font-size: 25px; flex-shrink:0; overflow:hidden; }
.hero-avatar-img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.hero-name{ font-family: var(--font-display); font-size: 16px; color: var(--parchment); line-height:1.2; }
.hero-class{ font-family: var(--font-mono); font-size: 10.5px; color: var(--mystic); letter-spacing: 1px; text-transform: uppercase; margin-top: 3px; }
.hero-level{ font-family: var(--font-mono); font-size: 10.5px; color: var(--gold-bright); margin-top:2px; }

.stat-row{ margin-bottom: 9px; }
.stat-label-row{ display:flex; justify-content:space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .5px; color: var(--parchment-dim); margin-bottom: 4px; text-transform: uppercase;}
.bar-track{ height: 9px; background: rgba(0,0,0,0.4); border: 1px solid rgba(0,0,0,0.5); border-radius: 3px; overflow: hidden; }
.bar-fill{ height: 100%; transition: width .5s ease; }
.bar-fill.hp{ background: linear-gradient(90deg, var(--blood), #c14545); }
.bar-fill.mp{ background: linear-gradient(90deg, #2b5c8a, var(--mystic)); }
.bar-fill.xp{ background: linear-gradient(90deg, #2b4c8a, var(--xp)); }

.gold-display{ display:flex; align-items:center; gap:8px; background: rgba(0,0,0,0.25); border:1px solid var(--line); border-radius:4px; padding:8px 10px; margin: 8px 0; font-family: var(--font-mono); font-size:14px; color: var(--gold-bright); }
.gold-display .icon{ font-size:18px; }

.attr-points-banner{ font-family: var(--font-mono); font-size: 11px; color: var(--gold-bright); background: rgba(201,162,39,0.1); border: 1px solid var(--gold); border-radius: 4px; padding: 6px 8px; margin-top: 10px; text-align:center; }
.attr-points-banner.hidden{ display:none; }
.attr-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.attr-cell{ background: rgba(0,0,0,0.25); border: 1px solid var(--line); border-radius: 4px; padding: 7px 4px; text-align:center; }
.attr-cell .k{ font-family: var(--font-mono); font-size: 10px; color: var(--gold); letter-spacing: 1px; }
.attr-cell .v{ font-family: var(--font-mono); font-size: 16px; font-weight:600; color: var(--parchment); position:relative; display:flex; align-items:center; justify-content:center; min-height:22px; }
.attr-plus{ display:inline-flex; align-items:center; justify-content:center; padding:0; font-family: var(--font-mono); font-size: 12px; font-weight:700; color: var(--gold-bright); background: rgba(201,162,39,0.15); border: 1px solid var(--gold); border-radius: 3px; width: 20px; height:20px; line-height:1; margin-left:5px; cursor:pointer; vertical-align:middle; }
.attr-plus:hover{ background: rgba(201,162,39,0.3); }
.attr-benefits{ margin-top: 4px; }
.attr-benefit{ font-family: var(--font-mono); font-size: 8.5px; color: var(--parchment-dim); line-height:1.5; text-align:left; }

.equip-slots{ display:flex; flex-direction:column; gap:6px; margin: 8px 0; }
.equip-line{ display:flex; align-items:center; gap:10px; background: rgba(0,0,0,0.25); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; }
.equip-line .icon{ font-size: 18px; width: 22px; text-align:center; }
.equip-line .name{ font-size: 12.5px; flex:1; }
.equip-line .name.empty{ color: var(--parchment-dim); font-style: italic; }
.equip-line .slotlabel{ font-family: var(--font-mono); font-size: 9px; color: var(--parchment-dim); text-transform:uppercase; width:92px; flex-shrink:0; }
.equip-desc{ display:block; margin-top:3px; color:var(--parchment-dim); font-family:var(--font-body); font-size:10px; font-weight:400; line-height:1.25; }

.trait-line{ display:flex; gap:8px; align-items:flex-start; background: rgba(0,0,0,0.2); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; margin-top: 6px; font-size: 12px; }
.trait-line .icon{ font-size: 15px; flex-shrink:0; }
.trait-line .txt b{ color: var(--parchment); }
.trait-line .txt span{ color: var(--parchment-dim); display:block; font-size: 11px; }
.trait-line.debuff{ border-color: rgba(138,43,43,0.5); }

.party-list{ display:flex; flex-direction:column; gap: 8px; margin-top: 6px; }
.party-card{ display:flex; align-items:center; gap: 8px; background: rgba(0,0,0,0.22); border: 1px solid var(--line); border-radius: 4px; padding: 7px 9px; }
.party-card .p-icon{ font-size: 18px; }
.party-card .p-info{ flex:1; min-width:0; }
.party-card .p-name{ font-size: 12px; color: var(--parchment); }
.party-card .p-class{ font-family: var(--font-mono); font-size: 9px; color: var(--mystic); text-transform: uppercase; }
.party-card .p-ability{ margin-top:2px; font-size:9px; color:var(--parchment-dim); }
.party-card .p-hp{ margin-left:auto; font-family: var(--font-mono); font-size: 10px; color: var(--parchment-dim); }
.party-stance{ margin-top:5px; width:100%; padding:4px; border:1px solid var(--line); border-radius:3px; background:#11141c; color:var(--parchment); font-family:var(--font-mono); font-size:9px; }
.multiplayer-box{ max-width:560px; }
.multiplayer-help{ color:var(--parchment-dim); line-height:1.5; }
.multi-label{ display:block; color:var(--gold-bright); margin:12px 0; font-family:var(--font-mono); font-size:11px; }
.multi-label .name-input{ display:block; width:100%; box-sizing:border-box; margin-top:5px; }
.room-code{ text-transform:uppercase; letter-spacing:4px; }
.multi-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.multiplayer-message{ margin-top:14px; min-height:20px; color:var(--parchment-dim); text-align:center; }
.multiplayer-status{ position:fixed; right:14px; bottom:14px; z-index:80; padding:9px 13px; border:1px solid var(--gold); border-radius:6px; background:#10131beF; color:var(--parchment); font-family:var(--font-mono); font-size:10px; box-shadow:0 4px 18px #000; }
.multiplayer-status.my-turn{ border-color:#68c99a; color:#9be0bc; }
.multiplayer-status.waiting-turn{ border-color:#d8a34b; color:#edc878; }

.multiplayer-lobby{ margin-top:4px; }
.mp-lobby-code{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px; border:1px solid var(--gold); border-radius:8px; background:rgba(0,0,0,0.25); }
.mp-lobby-code-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--parchment-dim); }
.mp-lobby-code-value{ font-family:var(--font-mono); font-size:34px; font-weight:700; letter-spacing:8px; color:var(--gold-bright); text-shadow:0 0 12px rgba(201,162,39,0.35); }
.mp-lobby-status{ margin:14px 0; text-align:center; font-family:var(--font-mono); font-size:12.5px; color:var(--parchment); min-height:18px; }
.mp-lobby-status.ready{ color:#9be0bc; }
@keyframes mpDotPulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
.mp-lobby-status.waiting::after{ content:'...'; display:inline-block; animation:mpDotPulse 1.2s ease-in-out infinite; }
#multiplayerLobby .multi-actions:has(#mpLobbyStartBtn.hidden){ grid-template-columns:1fr; }

.mp-public-toggle{ display:flex; align-items:center; gap:8px; font-size:11.5px; cursor:pointer; }
.mp-public-toggle input{ width:auto; margin:0; }
.mp-public-rooms{ margin-top:18px; border-top:1px solid var(--line); padding-top:12px; }
.mp-public-rooms-head{ display:flex; align-items:center; justify-content:space-between; color:var(--gold-bright); font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:1px; }
.mp-public-rooms-list{ margin-top:10px; display:flex; flex-direction:column; gap:6px; max-height:150px; overflow-y:auto; }
.mp-public-rooms-empty{ color:var(--parchment-dim); font-size:11.5px; text-align:center; padding:8px 0; }
.mp-public-room-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 9px; border:1px solid var(--line); border-radius:6px; background:rgba(0,0,0,0.2); font-size:12px; color:var(--parchment); }
.mp-public-room-row button{ flex-shrink:0; }

.room-invite-toast{ position:fixed; right:18px; bottom:18px; z-index:110; width:280px; padding:14px; border:1px solid var(--gold); border-radius:8px; background:linear-gradient(180deg,var(--panel),var(--panel-2)); box-shadow:0 8px 26px rgba(0,0,0,.55); }
.room-invite-text{ color:var(--parchment); font-size:12.5px; margin-bottom:10px; }
.room-invite-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:640px){ .room-invite-toast{ right:8px; left:8px; width:auto; bottom:150px; } }

.panel-btn-row{ display:flex; gap:8px; margin-top: 12px; flex-wrap: wrap; }
.panel-btn-row button{ flex:1; min-width: 100px; display:flex; align-items:center; justify-content:center; gap: 6px; background: linear-gradient(180deg, #2a2118, #1a140e); border: 1px solid var(--gold); border-radius: 4px; color: var(--gold-bright); font-family: var(--font-display); font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; padding: 9px 6px; cursor: pointer; }
.panel-btn-row button:hover{ box-shadow: 0 0 14px rgba(201,162,39,0.3); }
.panel-btn-row .badge{ background: var(--ember); color: #201005; font-family: var(--font-mono); font-size: 9.5px; padding: 1px 5px; border-radius: 9px; font-weight: 600; }

/* dialogo (agora dentro do .story-box, na area de exploracao) */
.npc-card{ display:flex; gap: 10px; align-items:center; margin-bottom: 10px; }
.npc-portrait{ width: 40px; height: 40px; border-radius: 6px; background: #14161f; border: 1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size: 19px; flex-shrink:0; }
.npc-name{ font-family: var(--font-display); font-size: 13px; color: var(--gold-bright); }
.npc-role{ font-family: var(--font-mono); font-size: 9px; color: var(--parchment-dim); text-transform:uppercase; letter-spacing: 1px;}
.dialogue-controls{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 9px; }
.dialogue-controls button{ flex:1; font-family: var(--font-mono); font-size: 10.5px; background: rgba(0,0,0,0.25); border: 1px solid var(--line); color: var(--parchment-dim); padding: 7px; border-radius: 4px; cursor: pointer; }
.dialogue-controls button:hover{ border-color: var(--gold); color: var(--gold-bright); }
#npcActionBtn{ flex-basis:100%; border-color:var(--mystic); color:#9bd8ca; background:rgba(74,128,115,.15); }

/* ---------- map / exploration ---------- */
.map-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px;}
.map-toolbar .legend{ display:flex; gap: 10px; flex-wrap:wrap; font-family: var(--font-mono); font-size: 10px; color: var(--parchment-dim); }
.location-tag{ font-family: var(--font-mono); font-size: 10px; letter-spacing:1px; color: var(--gold); text-transform:uppercase; margin-bottom: 8px; }

.explore-stage{ position: relative; }

.story-box{
  background: rgba(0,0,0,0.28); border: 1px solid var(--line); border-radius: 6px;
  padding: 18px 178px 18px 18px; min-height: 210px; position: relative;
}
.story-box .npc-card{ margin-bottom: 10px; }
.story-box .dialogue-controls{ margin-top: 12px; max-width: 320px; }
#sceneText{ font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--parchment); }
#sceneText p{ margin: 0 0 10px; }
#sceneText p:last-child{ margin-bottom: 0; }
#sceneText p.scene-hints{ font-family: var(--font-mono); font-size: 11px; color: var(--parchment-dim); font-style: normal; letter-spacing: .2px; line-height: 1.6; }

.minimap-wrap{
  position: absolute; top: 10px; right: 10px; width: 150px;
  background: rgba(5,6,10,0.85); border: 1px solid var(--gold); border-radius: 6px; padding: 6px;
}
.minimap-wrap .minimap-label{ font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-bright); text-align: center; margin-bottom: 4px; }
.minimap-wrap .map-grid{ padding: 3px; gap: 2px; border: none; background: transparent; }
.minimap-wrap .tile{ font-size: 11px; border-radius: 2px; }

@media (max-width: 640px){
  .story-box{ padding: 18px; min-height: 260px; }
  .minimap-wrap{ position: static; top: auto; right: auto; bottom: auto; width: 100%; max-width: 220px; margin: 14px auto 0; }
}

.map-grid{ display: grid; gap: 3px; background: #05060a; border: 1px solid var(--line); border-radius: 4px; padding: 8px; position: relative; }
.tile{ aspect-ratio: 1 / 1; display:flex; align-items:center; justify-content:center; font-size: 15px; border-radius: 2px; position: relative; }
.tile.void{ background: transparent; }
.tile.fog{ background: #05060a; }
.tile.room-dim{ background: #1c2029; border: 1px solid rgba(201,162,39,0.2); }
.tile.room-dim.tracked-enemy{ color: #e0546b; opacity: .65; border-color: rgba(224,84,107,0.45); animation: huntPulse 1.6s ease-in-out infinite; }
@keyframes huntPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:.85; } }
.tile.start{ background: #2a2c37; }
.tile.npc{ background: #26313a; }
.tile.treasure{ background: #332b1c; }
.tile.monster{ background: #331d1d; }
.tile.boss{ background: #3a1414; box-shadow: 0 0 8px rgba(192,83,47,0.5) inset; }
.tile.exit{ background: #1f2e29; }
.tile.shop{ background: #2c2818; }
.tile.blacksmith{ background: #26262c; }
.tile.tavern{ background: #2c1f1a; }
.tile.gate{ background: #1c2a24; }
.tile.stairs{ background: #1a2836; }
.tile.questboard{ background: #202a1e; }
.tile.normal{ background: #22242e; }
.tile.collected{ opacity: 0.4; }
.tile.player-tile{ box-shadow: inset 0 0 0 2px var(--gold-bright); }
.floating-text{ position:absolute; font-family: var(--font-mono); font-weight:700; font-size: 13px; pointer-events:none; white-space:nowrap; z-index: 30; }

.dpad{ display:grid; grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(2, 44px); gap:8px; margin-top: 14px; justify-content: center; }
.dpad button{ font-family:var(--font-mono); font-size:10px; background: rgba(0,0,0,0.25); border:1px solid var(--line); color:var(--parchment); border-radius:5px; cursor:pointer; padding: 4px; line-height:1.2; }
.dpad button:hover{ border-color:var(--gold); color:var(--gold-bright); }
.dpad .btn-front{ grid-column: 2; grid-row: 1; }
.dpad .btn-left{ grid-column: 1; grid-row: 2; }
.dpad .btn-back{ grid-column: 2; grid-row: 2; }
.dpad .btn-right{ grid-column: 3; grid-row: 2; }
.move-hint{ font-family: var(--font-mono); font-size: 10.5px; color: var(--parchment-dim); margin-top: 12px; text-align:center; }

.prompt-box{ margin-top: 14px; background: rgba(0,0,0,0.28); border:1px solid var(--gold); border-radius:6px; padding:14px; }
.prompt-box p{ margin:0 0 12px; font-size: 13.5px; font-style: italic; color: var(--parchment); text-align:center; }
.prompt-actions{ display:flex; gap:10px; justify-content:center; }
.prompt-actions button{ font-family: var(--font-display); letter-spacing:1px; text-transform:uppercase; font-size:12px; padding:9px 20px; border-radius:4px; cursor:pointer; }
.prompt-actions .yes{ background: linear-gradient(180deg,#2a2118,#1a140e); border:1px solid var(--gold); color:var(--gold-bright); }
.prompt-actions .no{ background: rgba(0,0,0,0.2); border:1px solid var(--line); color: var(--parchment-dim); }
.enemy-preview{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:12px; text-align:left; }
.enemy-preview span{ padding:6px 8px; border:1px solid var(--line); border-radius:4px; background:rgba(0,0,0,.22); color:var(--parchment-dim); font-family:var(--font-mono); font-size:9.5px; }
.enemy-preview b{ color:var(--parchment); }
.enemy-preview .enemy-ability{ grid-column:1/-1; }
.enemy-preview .boss-info{ border-color:var(--gold); color:var(--gold-bright); }
.event-choices{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.event-choice{ flex:1; min-width:130px; padding:9px; border:1px solid var(--mystic); border-radius:4px; background:rgba(74,128,115,.13); color:#9bd8ca; font-family:var(--font-mono); font-size:10px; cursor:pointer; }
.event-choice:hover{ background:rgba(74,128,115,.25); }

.combat-scene{ text-align:center; padding: 24px 10px; background: #05060a; border: 1px solid var(--line); border-radius: 4px; position: relative; overflow:hidden; }
.combat-scene.boss{ border-color: var(--ember); box-shadow: 0 0 18px rgba(192,83,47,0.35) inset; }
.combat-scene .cs-icon{ font-size:58px; margin-bottom:8px; }
.combat-scene .cs-name{ font-family: var(--font-display); font-size:16px; color: var(--ember); margin-bottom: 4px; }
.combat-scene .cs-hp{ font-family: var(--font-mono); font-size:11.5px; color: var(--parchment-dim); margin-bottom:14px; }
.combat-actions{ display:flex; gap:10px; justify-content:center; flex-wrap: wrap; }
.combat-actions button{ font-family: var(--font-display); letter-spacing:1px; text-transform:uppercase; font-size:11.5px; padding:10px 16px; border-radius:4px; cursor:pointer; }
.combat-actions .attack{ background: linear-gradient(180deg,#2a2118,#1a140e); border:1px solid var(--gold); color: var(--gold-bright); }
.combat-actions .flee{ background: rgba(0,0,0,0.2); border:1px solid var(--line); color: var(--parchment-dim); }
.status-tags{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom: 10px; }
.status-tag{ font-family: var(--font-mono); font-size: 10px; color: var(--ember); border: 1px solid var(--ember); border-radius: 10px; padding: 2px 8px; }
.power-row{ display:flex; gap:8px; justify-content:center; flex-wrap: wrap; margin-top: 12px; }
.power-btn{ font-family: var(--font-mono); font-size: 10.5px; padding: 7px 10px; border-radius: 4px; cursor:pointer; background: rgba(90,60,140,0.18); border:1px solid #8a6fd1; color: #d9c9ff; }
.power-btn .mp-cost{ color: var(--parchment-dim); }
.power-btn.disabled{ opacity: 0.4; cursor: not-allowed; }
.id-affinity{ font-family: var(--font-mono); font-size: 11px; color: var(--parchment-dim); margin-top: 6px; }
.id-affinity .dim{ color: var(--ember); }

/* ---------- dice tray ---------- */
.lower-panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:18px;align-items:stretch}
.lower-panels .panel{ display:flex; flex-direction:column; height:200px; min-height:200px; max-height:200px; overflow:hidden; }
.dice-tray{ margin-top: 0; min-width:0; justify-content:center; }
.lower-panels .event-log{min-width:0}
.equipment-panel .equip-slots{margin-top:0}
.equipment-backpack{margin-top:14px}
.equipment-powers-title{margin-top:18px!important;padding-top:12px;border-top:1px solid var(--line)}
.equipment-party-title{margin-top:18px!important;padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:700px){.lower-panels{grid-template-columns:1fr}}
.merchant-action-row{display:flex;align-items:stretch;gap:10px;margin:4px 0 14px;flex-wrap:wrap}.merchant-negotiation{margin:0;min-height:34px;display:flex;align-items:center}.merchant-action-row .rune-btn{height:100%;min-height:38px}
.merchant-negotiation .haggle-result{ font-family: var(--font-mono); font-size: 12.5px; color: var(--gold-bright); }
.merchant-negotiation .haggle-result.dim{ color: var(--parchment-dim); }
.roll-stage{ display:flex; align-items:center; gap: 18px; background: rgba(0,0,0,0.3); border: 1px solid var(--line); border-radius: 6px; padding: 14px; height: 86px; overflow:hidden; flex-shrink:0; }
.die-perspective{ perspective: 500px; width: 60px; height: 60px; flex-shrink:0; }
.roll-die{ width: 60px; height: 60px; border-radius: 12px; display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size: 22px; font-weight: 700; background: linear-gradient(160deg, #3a2f4d, #211a2e); border: 2px solid var(--gold); color: var(--gold-bright); transform-style: preserve-3d; }
.roll-info{ font-family: var(--font-mono); font-size: 12px; color: var(--parchment-dim); overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.roll-info b{ color: var(--parchment); }

/* ---------- event log ---------- */
.event-log .log-list{ flex:1; min-height:0; max-height: 130px; overflow-y: auto; display:flex; flex-direction: column; gap: 6px; }
.event-log .log-item{ font-size: 12.5px; color: var(--parchment-dim); border-left: 2px solid var(--line); padding-left: 8px; }
.event-log .log-item b{ color: var(--parchment); font-weight: 600; }

/* ---------- quest board ---------- */
.quest-card{ background: rgba(0,0,0,0.25); border: 1px solid var(--line); border-radius: 5px; padding: 10px; margin-top: 8px; }
.quest-card .q-title{ font-family: var(--font-display); font-size: 13px; color: var(--gold-bright); }
.quest-card .q-desc{ font-size: 12px; color: var(--parchment-dim); margin: 4px 0; }
.quest-card .q-progress{ font-family: var(--font-mono); font-size: 11px; color: var(--parchment); }
.quest-card .q-reward{ font-family: var(--font-mono); font-size: 10.5px; color: var(--gold); margin-top:4px; }
.quest-card button{ margin-top: 8px; width:100%; }

/* ---------- modals ---------- */
.modal-overlay{ position: fixed; inset: 0; background: rgba(5,6,10,0.75); display:flex; align-items:center; justify-content:center; z-index: 50; padding: 20px; }
.modal-overlay.hidden{ display:none; }
.modal-box{ background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--gold); border-radius: 8px; width: min(820px, 100%); max-height: 84vh; overflow-y: auto; padding: 22px 24px; }
.admin-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:10px; }
.inventory-modal-box,.merchant-modal-box{ width:min(1120px,100%); overflow:hidden; }
.item-browser-layout{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr); gap:18px; height:min(680px,72vh); min-height:420px; }
.item-browser-list{ min-width:0; overflow-y:auto; padding-right:8px; }
.item-detail-pane{ display:block; margin:0; padding:16px; border:1px solid var(--line); border-top:1px solid var(--line); border-radius:6px; background:rgba(5,6,10,.42); overflow-y:auto; align-self:stretch; }
.item-detail-pane:empty::before{ content:'Selecione um item para ver os detalhes e as ações.'; display:block; color:var(--parchment-dim); font-size:13px; line-height:1.5; }
.merchant-section{ margin:0 0 16px; padding:12px 0 0; }
.item-browser-list .item-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.item-browser-list .item-card .ic-desc{ display:none; }
.modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 16px; border-bottom: 1px solid var(--line); padding-bottom: 12px;}
.modal-header h2{ margin:0; font-family: var(--font-display); font-size: 18px; color: var(--gold-bright); letter-spacing: 1px;}
.modal-close{ background:none; border: 1px solid var(--line); color: var(--parchment-dim); width: 30px; height:30px; border-radius: 50%; cursor:pointer; font-size: 16px;}
.modal-close:hover{ border-color: var(--ember); color: var(--ember); }

.tab-row{ display:flex; gap:8px; margin-bottom: 14px; flex-wrap: wrap; }
.tab-btn{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; background: rgba(0,0,0,0.2); border:1px solid var(--line); color: var(--parchment-dim); padding: 7px 12px; border-radius: 4px; cursor:pointer; }
.tab-btn.active{ border-color: var(--gold); color: var(--gold-bright); background: rgba(201,162,39,0.1); }

.item-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(168px,1fr)); gap: 12px; }
.item-card{ background: rgba(0,0,0,0.28); border: 1px solid var(--line); border-radius: 6px; padding: 12px; cursor: pointer; transition: border-color .15s; border-left: 3px solid var(--r-comum); }
.item-card:hover{ border-color: var(--gold); }
.item-card.selected{ border-color: var(--gold-bright); box-shadow: 0 0 10px rgba(201,162,39,0.3); }
.item-card .ic-top{ display:flex; align-items:center; gap:8px; margin-bottom: 6px;}
.item-card .ic-icon{ font-size: 21px; }
.weapon-icon-img{ width:1em; height:1em; vertical-align:-0.2em; image-rendering:pixelated; }
.item-card .ic-name{ font-size: 13px; color: var(--parchment); line-height:1.2; }
.item-card .ic-type{ font-family: var(--font-mono); font-size: 9px; color: var(--parchment-dim); text-transform: uppercase; letter-spacing:1px;}
.item-card .ic-rarity{ font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .5px; margin-top:3px; }
.ic-meta{ display:flex; align-items:center; justify-content:space-between; gap:7px; margin-top:4px; }
.ic-meta .ic-rarity{ margin-top:0; }
.tier-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:28px; padding:3px 7px; border:1px solid currentColor; border-radius:10px; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.6px; white-space:nowrap; background:rgba(0,0,0,.28); }
.tier-e{ color:#777; }.tier-d{ color:#a7a7a7; }.tier-c{ color:#79b98b; }.tier-b{ color:#63a7df; }.tier-a{ color:#b58ae2; }
.tier-s{ color:#e7bb55; box-shadow:0 0 7px rgba(231,187,85,.25); }.tier-ss{ color:#ef835f; box-shadow:0 0 8px rgba(239,131,95,.3); }
.tier-sss{ color:#fff; border-color:#efc85b; background:linear-gradient(100deg,rgba(118,62,180,.45),rgba(207,106,66,.45)); box-shadow:0 0 10px rgba(206,139,255,.45); }
.tier-sss-plus{color:#fff3a1;border-color:#fff;background:linear-gradient(100deg,#683db5aa,#d16c42aa,#c7a330aa);box-shadow:0 0 12px #eecb65aa}.tier-max{color:#fff;border-color:#fff;background:linear-gradient(100deg,#9b35e6,#e84d8a,#f2bd42);box-shadow:0 0 15px #f4cf6f;animation:tierGlow 1.4s ease-in-out infinite alternate}@keyframes tierGlow{to{filter:brightness(1.35);box-shadow:0 0 22px #fff}}
.tier-progress-label{display:flex;justify-content:space-between;margin-top:10px;font:9px var(--font-mono);color:var(--parchment-dim)}.tier-progress{height:6px;margin-top:4px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#07080c}.tier-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#fff0a3)}
.forge-panel{margin-top:14px;padding:10px;border:1px solid var(--line);border-radius:5px;background:rgba(0,0,0,.22)}.forge-panel p{font-size:11px;color:var(--parchment-dim);line-height:1.45}.forge-pity{margin:8px 0;color:var(--gold-bright);font:10px var(--font-mono)}.forge-option{display:flex;flex-direction:column;width:100%;margin-top:7px;padding:9px;text-align:left;color:var(--parchment);border:1px solid var(--line);border-radius:4px;background:rgba(28,31,43,.9);cursor:pointer}.forge-option:hover:not(:disabled){border-color:var(--gold);transform:translateY(-1px)}.forge-option span,.forge-option small{margin-top:4px;color:var(--parchment-dim);font:9px var(--font-mono)}.forge-option:disabled{opacity:.4;cursor:not-allowed}.forge-max{margin-top:14px;padding:12px;border:1px solid var(--gold);color:var(--gold-bright);text-align:center}
.forge-menu-btn{width:auto;margin:0;border-color:#d6a94f;background:linear-gradient(180deg,rgba(103,68,22,.72),rgba(39,27,16,.9))}.forge-mini-menu{padding:12px!important;border:1px solid var(--gold)!important;border-radius:6px;background:rgba(12,13,19,.94);box-shadow:0 8px 22px rgba(0,0,0,.42);animation:forgeMenuIn .18s ease-out}@keyframes forgeMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.forge-mini-menu:not(.forge-open){display:none!important}
.tutorial-choice label{display:flex;align-items:center;gap:8px;color:var(--gold-bright);cursor:pointer}.tutorial-choice input{accent-color:var(--gold);width:18px;height:18px}.tutorial-box{max-width:820px}.tutorial-progress-title{display:flex;justify-content:space-between;color:var(--gold-bright);margin-bottom:10px}.tutorial-step-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.tutorial-step{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:5px;background:rgba(0,0,0,.2)}.tutorial-step small{display:block;margin-top:3px;color:var(--parchment-dim);line-height:1.35}.tutorial-step.done{border-color:#4b9475;opacity:.78}.tutorial-step.done strong{color:#7fcdb8}.tutorial-reward{margin:10px 0 16px;padding:8px;border:1px dashed var(--gold);color:var(--gold-bright);text-align:center}.tutorial-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tutorial-guide-grid section{padding:10px;border:1px solid var(--line);border-radius:5px;background:rgba(0,0,0,.18)}.tutorial-guide-grid section b{color:var(--gold-bright)}.tutorial-guide-grid p{margin:6px 0 0;color:var(--parchment-dim);font-size:12px;line-height:1.45}.tutorial-toast{position:fixed;right:18px;bottom:18px;z-index:9999;display:grid;grid-template-columns:1fr auto;gap:4px 12px;max-width:360px;padding:13px 38px 13px 14px;border:1px solid var(--gold);border-radius:6px;background:#151823;box-shadow:0 8px 30px #000;color:var(--parchment);animation:forgeMenuIn .2s ease-out}.tutorial-toast b{color:var(--gold-bright)}.tutorial-toast span{grid-column:1;font-size:12px;line-height:1.4}.tutorial-toast button{position:absolute;right:7px;top:5px;border:0;background:none;color:var(--parchment);font-size:18px;cursor:pointer}@media(max-width:650px){.tutorial-step-list,.tutorial-guide-grid{grid-template-columns:1fr}.tutorial-toast{left:10px;right:10px;bottom:10px}}
.item-stat-sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:10px 0}.item-stat-sheet>div{display:flex;justify-content:space-between;gap:8px;padding:7px;border:1px solid var(--line);border-radius:4px;background:rgba(0,0,0,.2);font:10px var(--font-mono)}.item-stat-sheet span{color:var(--parchment-dim)}.player-impact{margin-top:12px;padding:8px;border:1px solid var(--line);border-radius:5px;background:rgba(0,0,0,.22)}.impact-row{display:grid;grid-template-columns:1fr auto 48px;gap:8px;padding:5px 2px;border-bottom:1px solid rgba(255,255,255,.05);font:10px var(--font-mono)}.impact-row:last-child{border-bottom:0}.impact-row b{text-align:right}.impact-row .better{color:#7fcdb8}.impact-row .worse{color:#e28a8a}
.roulette-btn{margin:9px 0}.roulette-btn.rolling{animation:roulettePulse .18s linear infinite alternate;pointer-events:none}.roulette-btn.roulette-used{opacity:.55;cursor:not-allowed;filter:grayscale(.4)}.roulette-result-placeholder{grid-column:1/-1;padding:14px;border:1px dashed var(--line);color:var(--parchment-dim);text-align:center}@keyframes roulettePulse{to{filter:brightness(1.6);transform:scale(1.02)}}.enemy-class-line{color:#e4b95d!important;font-family:var(--font-mono)}
.item-card .ic-desc{ margin-top:7px; color:var(--parchment-dim); font-family:var(--font-body); font-size:11px; line-height:1.35; }
.item-card .ic-stats{ margin-top:6px; color:#7fcdb8; font-family:var(--font-mono); font-size:9px; line-height:1.4; }
.item-card .ic-power{ margin-top:5px; color:var(--gold-bright); font-family:var(--font-mono); font-size:9px; line-height:1.35; }
.item-card .ic-price{ font-family: var(--font-mono); font-size:11px; color: var(--gold-bright); margin-top:4px; }
.item-card button.trade-btn{ margin-top:8px; width:100%; font-family: var(--font-mono); font-size:10.5px; padding:6px; border-radius:4px; cursor:pointer; background: linear-gradient(180deg,#2a2118,#1a140e); border:1px solid var(--gold); color:var(--gold-bright); }
.item-card button.trade-btn:disabled{ opacity:.4; cursor:not-allowed; }
.item-card button.equip-btn{ margin-top:6px; width:100%; font-family: var(--font-mono); font-size:10px; padding:5px; border-radius:4px; cursor:pointer; background: rgba(0,0,0,0.2); border:1px solid var(--line); color:var(--parchment-dim); }
.item-card button.equip-btn:hover{ border-color: var(--mystic); color: #7fcdb8; }

.item-detail{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.item-detail .id-title{ display:flex; align-items:center; gap:10px; margin-bottom: 8px;}
.item-detail .id-title{ flex-wrap:wrap; }
.item-detail .id-title .ic-icon{ font-size: 28px; }
.item-detail .id-name{ font-family: var(--font-display); font-size: 16px; color: var(--gold-bright); }
.item-detail .id-desc{ font-size: 13px; color: var(--parchment-dim); font-style: italic; margin-bottom: 12px;}
.item-detail.item-detail-pane{ margin-top:0; padding:16px; border-top:1px solid var(--line); }
.merchant-detail-price{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); color:var(--gold-bright); font-family:var(--font-mono); font-size:12px; }
.merchant-action{ width:100%; margin-top:12px; padding:10px; border-radius:4px; cursor:pointer; background:linear-gradient(180deg,#2a2118,#1a140e); border:1px solid var(--gold); color:var(--gold-bright); font-family:var(--font-display); }
.merchant-action:disabled{ opacity:.4; cursor:not-allowed; }
.empty-items{ color:var(--parchment-dim); font-size:13px; }
.item-found-desc{ color:var(--parchment-dim); font-style:italic; }
.item-comparison{ margin-top:12px; border:1px solid var(--line); border-radius:5px; background:rgba(0,0,0,.22); padding:8px; font-family:var(--font-mono); font-size:9.5px; }
.compare-title{ color:var(--gold-bright); margin-bottom:7px; }
.compare-head,.compare-row{ display:grid; grid-template-columns:1.6fr repeat(3,.7fr); gap:6px; align-items:center; padding:3px 0; text-align:right; }
.compare-head{ color:var(--parchment-dim); border-bottom:1px solid var(--line); }
.compare-head span:first-child,.compare-row span:first-child{ text-align:left; }
.compare-row .better{ color:#7fcdb8; }.compare-row .worse{ color:#e28a8a; }.compare-row .same{ color:var(--parchment-dim); }
.tier-comparison{ display:grid; grid-template-columns:auto auto auto 1fr; align-items:center; gap:8px; margin:8px 0 10px; padding:7px; border:1px solid var(--line); border-radius:4px; }
.tier-comparison strong{ text-align:right; font-size:9px; }.tier-comparison .better{color:#7fcdb8}.tier-comparison .worse{color:#e28a8a}.tier-comparison .same{color:var(--parchment-dim)}
.equipped-note{ color:#7fcdb8; }
.tag-row{ display:flex; flex-wrap:wrap; gap: 7px; }
.tag{ font-family: var(--font-mono); font-size: 10.5px; padding: 4px 9px; border-radius: 3px; }
.tag.buff{ background: rgba(74,128,115,0.18); color: #7fcdb8; border: 1px solid rgba(74,128,115,0.5); }
.tag.debuff{ background: rgba(138,43,43,0.18); color: #e28a8a; border: 1px solid rgba(138,43,43,0.5); }

@media (max-width:760px){
  .modal-overlay{ padding:8px; }
  .inventory-modal-box,.merchant-modal-box{ padding:14px; max-height:96vh; overflow-y:auto; }
  .item-browser-layout{ grid-template-columns:1fr; height:auto; min-height:0; }
  .item-detail-pane{ order:-1; position:sticky; top:0; z-index:2; max-height:42vh; box-shadow:0 8px 18px rgba(0,0,0,.45); }
  .item-browser-list{ overflow:visible; padding-right:0; }
}

.rarity-comum{ color: var(--r-comum); border-left-color: var(--r-comum) !important; }
.rarity-incomum{ color: var(--r-incomum); border-left-color: var(--r-incomum) !important; }
.rarity-raro{ color: var(--r-raro); border-left-color: var(--r-raro) !important; }
.rarity-epico{ color: var(--r-epico); border-left-color: var(--r-epico) !important; }
.rarity-lendario{ color: var(--r-lendario); border-left-color: var(--r-lendario) !important; }

/* ---------- social: amigos e chat (estilo Messenger de PC) ---------- */
.social-launcher{ position:fixed; right:18px; bottom:100px; z-index:95; width:48px; height:48px; border-radius:50%; border:1px solid var(--gold); background:linear-gradient(180deg,var(--panel),var(--panel-2)); color:var(--gold-bright); font-size:20px; cursor:pointer; box-shadow:0 4px 18px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; }
.social-launcher:hover{ border-color:var(--gold-bright); }
.social-badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--blood); color:#fff; font-family:var(--font-mono); font-size:10px; display:flex; align-items:center; justify-content:center; }
.social-panel{ position:fixed; right:18px; bottom:158px; z-index:95; width:300px; max-height:60vh; display:flex; flex-direction:column; background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--gold); border-radius:8px; box-shadow:0 8px 26px rgba(0,0,0,.55); padding:14px; }
.social-panel-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.social-panel-header h3{ margin:0; font-family:var(--font-display); font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); }
.social-add-row{ display:flex; gap:6px; }
.social-add-row .name-input{ flex:1; min-width:0; }
.social-form-message{ min-height:16px; margin:6px 0 4px; font-family:var(--font-mono); font-size:10.5px; color:var(--parchment-dim); }
.social-section{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.social-section-title{ font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-bright); margin-bottom:6px; }
.social-list{ display:flex; flex-direction:column; gap:6px; overflow-y:auto; max-height:220px; }
.social-empty{ color:var(--parchment-dim); font-size:11.5px; text-align:center; padding:10px 4px; }
.social-friend{ display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:rgba(0,0,0,0.2); }
.social-friend.pending{ opacity:.7; }
.social-dot{ width:8px; height:8px; border-radius:50%; background:#5a5f6e; flex-shrink:0; }
.social-dot.online{ background:#68c99a; box-shadow:0 0 6px #68c99a; }
.social-friend-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--parchment); }
.social-friend-actions{ display:flex; gap:4px; flex-shrink:0; }
.social-friend-actions .rune-btn{ padding:4px 7px; font-size:10px; }

.social-chats{ position:fixed; right:18px; bottom:100px; z-index:94; display:flex; flex-direction:row-reverse; gap:10px; align-items:flex-end; pointer-events:none; }
.chat-window{ pointer-events:auto; width:270px; height:340px; display:flex; flex-direction:column; background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--gold); border-radius:8px; box-shadow:0 8px 26px rgba(0,0,0,.5); overflow:hidden; }
.chat-window-header{ display:flex; align-items:center; gap:7px; padding:9px 10px; border-bottom:1px solid var(--line); background:rgba(0,0,0,0.2); }
.chat-window-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-display); font-size:12px; color:var(--gold-bright); }
.chat-window-close{ background:none; border:none; color:var(--parchment-dim); font-size:16px; line-height:1; cursor:pointer; padding:0 2px; }
.chat-window-close:hover{ color:var(--parchment); }
.chat-window-body{ flex:1; min-height:0; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:6px; }
.chat-msg{ max-width:85%; display:flex; flex-direction:column; gap:2px; }
.chat-msg.mine{ align-self:flex-end; align-items:flex-end; }
.chat-msg.theirs{ align-self:flex-start; align-items:flex-start; }
.chat-msg-body{ padding:6px 10px; border-radius:12px; font-size:12px; line-height:1.4; word-break:break-word; background:rgba(0,0,0,0.25); color:var(--parchment); border:1px solid var(--line); }
.chat-msg.mine .chat-msg-body{ background:rgba(201,162,39,0.18); border-color:var(--gold); }
.chat-msg-time{ font-family:var(--font-mono); font-size:8.5px; color:var(--parchment-dim); }
.chat-msg.pending .chat-msg-body{ opacity:.55; }
.chat-msg.failed .chat-msg-body{ border-color:#e28a8a; }
.chat-msg.failed .chat-msg-time{ color:#e28a8a; }
.chat-window-input{ display:flex; gap:6px; padding:8px; border-top:1px solid var(--line); }
.chat-window-input input{ flex:1; min-width:0; background:#11141c; border:1px solid var(--line); border-radius:14px; padding:6px 12px; color:var(--parchment); font-family:var(--font-body); font-size:12.5px; }
.chat-window-input button{ width:30px; height:30px; border-radius:50%; border:1px solid var(--gold); background:rgba(201,162,39,0.15); color:var(--gold-bright); cursor:pointer; flex-shrink:0; }

@media (max-width:640px){
  .social-panel{ right:8px; left:8px; width:auto; bottom:150px; }
  .social-chats{ right:8px; left:8px; flex-wrap:wrap-reverse; }
  .chat-window{ width:100%; max-width:320px; }
}
.rarity-mitico{ color: var(--r-mitico); border-left-color: var(--r-mitico) !important; }

/* ---------- personagens (slots) ---------- */
.character-modal-box{ width:min(640px,100%); }
.character-slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:14px; }
.character-slot{ background:rgba(0,0,0,0.28); border:1px solid var(--line); border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.character-slot.filled{ border-color:var(--gold); }
.character-slot-head{ display:flex; align-items:center; gap:10px; }
.character-slot-icon{ font-size:26px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:#171c28; border:1px solid var(--line); border-radius:8px; flex-shrink:0; }
.character-slot-name{ font-family:var(--font-display); font-size:15px; color:var(--gold-bright); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.character-slot-sub{ font-family:var(--font-mono); font-size:10.5px; color:var(--parchment-dim); text-transform:uppercase; letter-spacing:.5px; }
.character-slot-meta{ font-family:var(--font-mono); font-size:11px; color:var(--parchment-dim); }
.character-slot-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:96px; color:var(--parchment-dim); font-family:var(--font-mono); font-size:11px; text-align:center; }
.character-slot-actions{ display:flex; gap:8px; margin-top:auto; }
.character-slot-actions button{ flex:1; }